@fr0mpy/component-system

Claude Code UI styling system with multi-theme support, design tokens, component agents, 40 Base UI recipes, and Playwright testing.

Installation

npx @fr0mpy/component-system

What's Included

| Directory | Purpose | |-----------|---------| | skills/ | Styling + React patterns skills | | agents/ | 5 component system agents | | component-recipes/ | 40 Base UI component templates | | playwright-templates/ | Playwright test config + component specs | | commands/ | /setup-styling, /component-harness, /save-theme, /retheme | | .mcp.json | Playwright MCP server configuration |

Multi-Theme System

Create and switch between multiple themes in real-time:

.claude/
├── styling-config.json     # Active theme config
├── themes/                  # Saved themes
│   ├── stripe-inspired.json
│   ├── matrix.json
│   └── vercel-dark.json
└── component-recipes/       # Component templates

Workflow

1. Create themes via /setup-styling:

   • Extract from URL (analyzes any website's design system)
   • Manual configuration (answer questions about colors, typography)
   • Saves to both styling-config.json and themes/{name}.json

2. Switch themes in the component harness:

   • ThemeSwitcher dropdown loads all .claude/themes/*.json
   • Live switching via CSS variable injection
   • No page reload required

3. Quick commands:

   • /save-theme [name] - Save current config as a named theme
   • /retheme - Regenerate CSS from current config

Commands

| Command | Purpose | |---------|---------| | /setup-styling | Configure design tokens, creates theme | | /component-harness | Launch visual preview with theme switcher | | /save-theme | Save current config as named theme | | /retheme | Regenerate harness CSS from config |

Agents (5)

| Agent | Purpose | |-------|---------| | style-inspector | Reverse-engineers website design systems from URLs | | design-token-validator | Audits components for token compliance | | component-auditor | Validates recipe compliance, a11y, React patterns | | harness-scaffolder | Scaffolds Vite preview gallery from recipes | | playwright-tester | Tests components via Playwright MCP with Axe a11y |

Skills (2)

| Skill | Purpose | |-------|---------| | styling | Enforces design token usage, mobile-first patterns, recipe compliance | | react-patterns | Enforces Rules of Hooks and correct state/effect patterns |

Component Recipes (40)

| Category | Components | |----------|------------| | Form (10) | button, input, textarea, select, combobox, checkbox, radio, switch, slider, label | | Layout (6) | card, separator, collapsible, accordion, tabs, table | | Navigation (5) | navigation-menu, breadcrumb, pagination, dropdown-menu, context-menu | | Overlay (6) | modal, dialog, drawer, popover, hover-card, tooltip | | Feedback (5) | alert, toast, progress, skeleton, spinner | | Display (4) | badge, avatar, carousel, toggle-group |

All recipes use Base UI headless primitives for accessibility with Tailwind CSS styling.

Component Harness

Run /component-harness to scaffold a Vite + React preview environment:

• Theme Switcher - Dropdown to switch between saved themes
• Live Preview - All 40 components with variants
• Instant Updates - CSS variable injection, no page reload
• Playwright Testing - Visual + accessibility testing via MCP

Usage

# Initialize
npx @fr0mpy/component-system

# Options
npx @fr0mpy/component-system --force   # Overwrite existing
npx @fr0mpy/component-system --merge   # Add to existing .claude
npx @fr0mpy/component-system --remove  # Remove installation

# Selective updates
npx @fr0mpy/component-system --update-skills
npx @fr0mpy/component-system --update-agents
npx @fr0mpy/component-system --update-recipes
npx @fr0mpy/component-system --update-commands

Getting Started

1. Install: npx @fr0mpy/component-system
2. Configure: /setup-styling to create your first theme
3. Preview: /component-harness to launch visual gallery
4. Add themes: Run /setup-styling again to create more themes
5. Switch: Use the ThemeSwitcher dropdown in the harness

Integration with Prompt System

For additional agents and context management:

npx @fr0mpy/prompt-system

Skills are automatically discovered via their USE WHEN descriptions in YAML frontmatter.

License

MIT