agentsclimarketplace

Templateclaw dashboard

Skill jeromwolf/templateclaw/skills/templateclaw-dashboard

32 production-ready templates as Claude Code skills. Type /templateclaw to scaffold any project. Landing pages, dashboards, UI components, project setup, dev methodology.

Install
npx -y skills add jeromwolf/templateclaw --skill templateclaw-dashboard

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Generate a modern admin dashboard with charts, tables, and KPI cards. Supports admin, analytics, monitoring, and CRM styles. Uses glassmorphism design with dark theme.

SKILL.md

2.6 KB, as published. Nobody here has run it

TemplateClaw — Dashboard Generator

Generate a production-ready dashboard with modern data visualization design.

When Invoked

  1. If argument provided (e.g., /templateclaw-dashboard analytics), generate that style
  2. If no argument, ask: "What type of dashboard? (admin / analytics / monitoring / crm)"

Dashboard Styles

Admin Dashboard

  • Sidebar navigation (collapsible) with icons
  • Top bar with search, notifications, user avatar
  • KPI cards row (4 cards: Users, Revenue, Orders, Growth)
  • Main chart area (CSS-only bar chart or line indicators)
  • Recent activity table
  • Quick actions panel

Analytics Dashboard

  • Date range picker header
  • KPI cards with sparkline trends (CSS-only)
  • Large area chart placeholder (gradient fill)
  • Breakdown pie/donut chart (CSS conic-gradient)
  • Top pages/items table with progress bars
  • Real-time visitors counter (animated)

System Monitoring Dashboard

  • Status indicator header (green/yellow/red)
  • Server health cards (CPU, Memory, Disk, Network)
  • Uptime timeline (CSS grid blocks)
  • Alert feed (scrollable, severity-colored)
  • Service status table
  • Response time chart placeholder

CRM Dashboard

  • Pipeline stages (kanban-style horizontal)
  • Deal value KPIs
  • Recent contacts table with avatars
  • Activity timeline
  • Conversion funnel (CSS trapezoid shapes)
  • Tasks/reminders sidebar

Design System

/* Dashboard-specific */
--sidebar-width: 260px;
--sidebar-collapsed: 72px;
--topbar-height: 64px;
--card-radius: 16px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

/* Chart Colors */
--chart-1: #7C3AED;
--chart-2: #EC4899;
--chart-3: #3B82F6;
--chart-4: #10B981;
--chart-5: #F59E0B;

Output Requirements

  • Single HTML file with embedded CSS and JS
  • Tailwind CSS via CDN
  • CSS-only charts (no Chart.js dependency) — use gradients, conic-gradient, flexbox
  • Sidebar toggle (collapsed ↔ expanded)
  • Responsive: sidebar becomes bottom nav on mobile
  • Dark mode default
  • Sample data hardcoded (easily replaceable)
  • Smooth transitions on all interactive elements
  • Grid layout for dashboard cards

Data Placeholders

Use realistic sample data:

const sampleData = {
  users: 12847,
  revenue: "$48,352",
  growth: "+12.5%",
  orders: 1284
};

Mark data injection points:

<!-- DATA: KPI values -->
<!-- DATA: Chart data -->
<!-- DATA: Table rows -->

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.