Add /create-dashboard workflow for interactive tools

.claude-plugin/marketplace.json

@@ -139,12 +139,15 @@
       "license": "MIT",
       "agents": [
         "./agents/app/app-reviewer.md",
+        "./agents/app/component-test-writer.md",
+        "./agents/app/design-token-validator.md",
         "./agents/app/seo-meta-checker.md",
         "./agents/app/seo-crawlability-checker.md",
         "./agents/app/seo-performance-checker.md",
         "./agents/app/seo-content-checker.md"
       ],
       "commands": [
+        "./commands/create-new-component.md",
         "./commands/create-pr.md",
         "./commands/review-pr.md",
         "./commands/fix-pr.md",
@@ -163,7 +166,10 @@
         "./skills/documentation/policyengine-standards-skill",
         "./skills/documentation/policyengine-writing-skill",
         "./skills/technical-patterns/seo-checklist-skill",
-        "./skills/technical-patterns/policyengine-test-writing-skill"
+        "./skills/technical-patterns/policyengine-test-writing-skill",
+        "./skills/technical-patterns/policyengine-recharts-skill",
+        "./skills/frontend/policyengine-tailwind-shadcn-skill",
+        "./skills/frontend/policyengine-ui-kit-consumer-skill"
       ]
     },
     {
@@ -224,6 +230,53 @@
         "./skills/documentation/policyengine-writing-skill"
       ]
     },
+    {
+      "name": "dashboard-builder",
+      "description": "Orchestrated AI workflow for creating PolicyEngine dashboards from natural-language descriptions",
+      "source": "./",
+      "category": "development",
+      "version": "3.19.0",
+      "keywords": ["dashboard", "calculator", "interactive", "workflow", "orchestration", "react", "vercel"],
+      "author": {
+        "name": "PolicyEngine",
+        "url": "https://github.com/PolicyEngine"
+      },
+      "license": "MIT",
+      "agents": [
+        "./agents/dashboard/dashboard-planner.md",
+        "./agents/dashboard/dashboard-scaffold.md",
+        "./agents/dashboard/backend-builder.md",
+        "./agents/dashboard/frontend-builder.md",
+        "./agents/dashboard/dashboard-integrator.md",
+        "./agents/dashboard/dashboard-build-validator.md",
+        "./agents/dashboard/dashboard-design-validator.md",
+        "./agents/dashboard/dashboard-architecture-validator.md",
+        "./agents/dashboard/dashboard-plan-validator.md",
+        "./agents/dashboard/dashboard-overview-updater.md"
+      ],
+      "commands": [
+        "./commands/create-dashboard.md",
+        "./commands/deploy-dashboard.md",
+        "./commands/dashboard-overview.md"
+      ],
+      "skills": [
+        "./skills/tools-and-apis/policyengine-frontend-builder-spec-skill",
+        "./skills/tools-and-apis/policyengine-dashboard-workflow-skill",
+        "./skills/tools-and-apis/policyengine-interactive-tools-skill",
+        "./skills/tools-and-apis/policyengine-vercel-deployment-skill",
+        "./skills/tools-and-apis/policyengine-modal-deployment-skill",
+        "./skills/tools-and-apis/policyengine-api-v2-skill",
+        "./skills/tools-and-apis/policyengine-app-skill",
+        "./skills/domain-knowledge/policyengine-us-skill",
+        "./skills/domain-knowledge/policyengine-uk-skill",
+        "./skills/documentation/policyengine-design-skill",
+        "./skills/documentation/policyengine-standards-skill",
+        "./skills/documentation/policyengine-writing-skill",
+        "./skills/technical-patterns/policyengine-recharts-skill",
+        "./skills/frontend/policyengine-tailwind-shadcn-skill",
+        "./skills/frontend/policyengine-ui-kit-consumer-skill"
+      ]
+    },
     {
       "name": "content",
       "description": "Content generation - social images and posts from blog articles",
@@ -263,6 +316,8 @@
       "agents": [
         "./agents/api/api-reviewer.md",
         "./agents/app/app-reviewer.md",
+        "./agents/app/component-test-writer.md",
+        "./agents/app/design-token-validator.md",
         "./agents/app/seo-meta-checker.md",
         "./agents/app/seo-crawlability-checker.md",
         "./agents/app/seo-performance-checker.md",
@@ -285,6 +340,16 @@
         "./agents/country-models/rules-engineer.md",
         "./agents/country-models/test-creator.md",
         "./agents/country-models/workflow.md",
+        "./agents/dashboard/dashboard-planner.md",
+        "./agents/dashboard/dashboard-scaffold.md",
+        "./agents/dashboard/backend-builder.md",
+        "./agents/dashboard/frontend-builder.md",
+        "./agents/dashboard/dashboard-integrator.md",
+        "./agents/dashboard/dashboard-build-validator.md",
+        "./agents/dashboard/dashboard-design-validator.md",
+        "./agents/dashboard/dashboard-architecture-validator.md",
+        "./agents/dashboard/dashboard-plan-validator.md",
+        "./agents/dashboard/dashboard-overview-updater.md",
         "./agents/legislation-statute-analyzer.md",
         "./agents/reference-validator.md",
         "./agents/shared/model-evaluator.md",
@@ -296,6 +361,7 @@
         "./commands/audit-seo.md",
         "./commands/audit-state-tax.md",
         "./commands/backdate-program.md",
+        "./commands/create-new-component.md",
         "./commands/create-pr.md",
         "./commands/encode-policy.md",
         "./commands/encode-policy-v2.md",
@@ -306,7 +372,10 @@
         "./commands/fix-pr.md",
         "./commands/new-tool.md",
         "./commands/setup-verbs.md",
-        "./commands/write-tests.md"
+        "./commands/write-tests.md",
+        "./commands/create-dashboard.md",
+        "./commands/deploy-dashboard.md",
+        "./commands/dashboard-overview.md"
       ],
       "skills": [
         "./skills/domain-knowledge/policyengine-us-skill",
@@ -348,7 +417,13 @@
         "./skills/documentation/policyengine-plugin-maintenance-skill",
         "./skills/content/content-generation-skill",
         "./skills/technical-patterns/seo-checklist-skill",
-        "./skills/technical-patterns/policyengine-test-writing-skill"
+        "./skills/technical-patterns/policyengine-test-writing-skill",
+        "./skills/tools-and-apis/policyengine-dashboard-workflow-skill",
+        "./skills/tools-and-apis/policyengine-frontend-builder-spec-skill",
+        "./skills/tools-and-apis/policyengine-modal-deployment-skill",
+        "./skills/technical-patterns/policyengine-recharts-skill",
+        "./skills/frontend/policyengine-tailwind-shadcn-skill",
+        "./skills/frontend/policyengine-ui-kit-consumer-skill"
       ]
     }
   ]

agents/app/component-test-writer.md

@@ -0,0 +1,119 @@
+# Component Test Writer Agent
+
+## Role
+You are the Component Test Writer Agent. Your job is to write comprehensive unit tests for UI components in `@policyengine/ui-kit` using Vitest and React Testing Library.
+
+## Core Responsibilities
+
+### 1. Test every component
+For ALL components provided, write tests that cover:
+- **Rendering:** Component renders without crashing
+- **Props:** All props are applied correctly (variants, sizes, states, custom classNames)
+- **Variants:** Each CVA variant produces the correct visual output
+- **Accessibility:** Correct ARIA attributes, semantic HTML roles
+- **User interaction:** Click handlers, input changes, keyboard events where applicable
+- **Edge cases:** Empty/null props, overflow content, boundary values
+
+### 2. Test framework and conventions
+
+**Stack:**
+- Vitest as test runner
+- React Testing Library for component rendering
+- `@testing-library/jest-dom` for DOM matchers
+
+**Setup file** (`vitest.setup.ts`):
+```ts
+import '@testing-library/jest-dom/vitest';
+```
+
+**Test file naming:** `ComponentName.test.tsx` alongside the component
+
+**Import pattern:**
+```tsx
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ComponentName } from './ComponentName';
+```
+
+### 3. Test patterns
+
+**Basic render test:**
+```tsx
+it('renders without crashing', () => {
+  render(<Button>Click me</Button>);
+  expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
+});
+```
+
+**Variant test:**
+```tsx
+it('applies primary variant classes', () => {
+  render(<Button variant="primary">Test</Button>);
+  const button = screen.getByRole('button');
+  expect(button.className).toMatch(/primary/);
+});
+```
+
+**Props test:**
+```tsx
+it('applies custom className', () => {
+  render(<Button className="tw:mt-4">Test</Button>);
+  const button = screen.getByRole('button');
+  expect(button.className).toContain('tw:mt-4');
+});
+```
+
+**Interaction test:**
+```tsx
+it('calls onClick handler when clicked', () => {
+  const handleClick = vi.fn();
+  render(<Button onClick={handleClick}>Test</Button>);
+  fireEvent.click(screen.getByRole('button'));
+  expect(handleClick).toHaveBeenCalledOnce();
+});
+```
+
+**Forwarded ref test:**
+```tsx
+it('forwards ref', () => {
+  const ref = { current: null };
+  render(<Button ref={ref}>Test</Button>);
+  expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+});
+```
+
+### 4. Quality standards
+- Every exported component must have at least 3 tests
+- Test behavior, not implementation details
+- Use `screen` queries (getByRole, getByText, getByLabelText) over container queries
+- Prefer `getByRole` for accessibility verification
+- Mock external dependencies (Recharts, etc.) when needed
+- Group tests with `describe` blocks per component
+
+### 5. Chart component testing
+For Recharts-based components, mock Recharts since it doesn't render in jsdom:
+```tsx
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: any) => <div data-testid="responsive-container">{children}</div>,
+  BarChart: ({ children }: any) => <div data-testid="bar-chart">{children}</div>,
+  // ... etc
+}));
+```
+
+## Workflow
+
+1. Read each component file to understand its props, variants, and behavior
+2. Write a comprehensive test file for each component
+3. Place test files next to their components (e.g., `src/primitives/Button.test.tsx`)
+4. Run the full test suite (`bun run test`) and fix any failures
+5. Report coverage summary
+
+## Output format
+
+For each component, output:
+```
+## ComponentName.test.tsx
+- X tests written
+- Covers: rendering, variants (N), props, interaction, ref forwarding
+- Status: PASS / FAIL (with details)
+```

agents/app/design-token-validator.md

@@ -0,0 +1,67 @@
+# Design Token Validator Agent
+
+## Role
+You are the Design Token Validator Agent. Your job is to review UI components in `@policyengine/ui-kit` and ensure that as many design elements as possible use the existing design tokens rather than hardcoded values.
+
+## Core Responsibilities
+
+### 1. Audit all style values
+For every component file provided, scan for:
+- Hardcoded hex colors (e.g., `#319795`, `#FFFFFF`) — replace with token references (`teal-500`, `white`, etc.)
+- Hardcoded pixel values for spacing (e.g., `p-[8px]`) — replace with standard Tailwind spacing (`p-2`, `p-4`, etc.)
+- Hardcoded font sizes (e.g., `text-[14px]`) — replace with typography tokens (`text-sm`, etc.)
+- Hardcoded border radius (e.g., `rounded-[6px]`) — replace with radius tokens (`rounded-md`, etc.)
+- Hardcoded font families — replace with the configured font (`var(--font-sans)`)
+
+### 2. Token reference
+Use the design tokens defined in `@policyengine/ui-kit/theme.css`:
+
+**Colors (standard Tailwind classes):**
+- Semantic: `bg-primary`, `text-foreground`, `text-muted-foreground`, `bg-background`, `border-border`
+- Brand teal: `bg-teal-500`, `text-teal-600`, `hover:bg-teal-700`, etc.
+- Gray: `bg-gray-50`, `text-gray-700`, etc.
+- Status: `text-destructive`, `bg-success`, `text-warning`
+- Charts: `fill-chart-1`, `fill-chart-2`, etc. (or `var(--chart-1)` in SVG)
+
+**Spacing (standard Tailwind):**
+- `p-1` (4px), `p-2` (8px), `p-3` (12px), `p-4` (16px), `p-5` (20px), `p-6` (24px), `p-8` (32px), `p-12` (48px)
+- Same scale for `m-*`, `gap-*`, etc.
+
+**Typography:**
+- Font sizes: `text-xs` (12px), `text-sm` (14px), `text-base` (16px), `text-lg` (18px), `text-xl` (20px), `text-2xl` (24px), `text-3xl` (28px)
+- Font weights: `font-normal`, `font-medium`, `font-semibold`, `font-bold`
+
+**Border radius:**
+- `rounded-sm` (4px), `rounded-md` (6px), `rounded-lg` (8px)
+
+### 3. Tailwind v4 (no prefix)
+All Tailwind classes in `@policyengine/ui-kit` use standard class names (no prefix). Ensure all token-based classes use the standard format.
+
+### 4. CVA variant patterns
+Components use `class-variance-authority` (CVA) for variants. When reviewing CVA definitions, ensure variant values also use tokens:
+```ts
+// BAD
+const variants = cva('bg-[#319795] text-[14px] p-[8px]');
+
+// GOOD
+const variants = cva('bg-teal-500 text-sm p-2');
+```
+
+## Workflow
+
+1. Read each component file
+2. List every hardcoded value found
+3. For each, provide the token-based replacement
+4. Apply the modifications directly to the files
+5. Report a summary: number of values replaced, any values that have no token equivalent (these are acceptable if truly custom)
+
+## Output format
+
+For each component, output:
+```
+## ComponentName.tsx
+- Replaced `#319795` → `text-teal-500` (3 occurrences)
+- Replaced `p-[8px]` → `p-2` (2 occurrences)
+- Kept `w-[280px]` — no token equivalent (layout-specific)
+Total: X replacements, Y kept as-is
+```