SolidJS Component Generator

Generate fully-functional SolidJS components following established architecture patterns.

Critical Constraints

Components MUST be purely presentational:

• •✅ Accept props, render UI, emit events via callbacks
• •✅ Use Kobalte primitives for accessibility where appropriate
• •✅ Support both light and dark themes
• •✅ Pass biome + TypeScript checks
• •✅ Have Storybook stories for testing

Components must NOT:

• •❌ Make API calls or import backend packages
• •❌ Contain business logic (belongs in pages/features)
• •❌ Manage application state (use props/callbacks)

Required Reading (BEFORE ANY GENERATION)

Read these files in order before writing code:

1. •/skills/services/frontend/src/components/ui/button/button.tsx - PRIMARY REFERENCE pattern
2. •/skills/.claude/skills/component-generator/kobalte-primitives.md - Primitive catalog with import paths
3. •/skills/.claude/skills/component-generator/accessibility-guidelines.md - Props to expose per component type
4. •/skills/.claude/skills/component-generator/color-reference.md - Theme tokens (NEVER use default Tailwind colors)
5. •/skills/.claude/skills/component-generator/themed-story-pattern.md - Story pattern with Light/Dark variants

Additional references:

• •/skills/services/frontend/src/components/ui/badge/badge.tsx - Plain HTML + CVA pattern
• •/skills/services/frontend/src/components/composite/search-input/search-input.tsx - Complex Kobalte Combobox

Workflow

Stage 1: Discovery

Gather these requirements:

1. •Component Name - PascalCase (e.g., "IconButton", "UserCard")
2. •Tier - Where it belongs:
   • •primitives - Layout elements (Flex, Stack, Text)
   • •ui - Interactive components (Button, Badge, Card)
   • •composite - Combined ui components (SearchInput, IconButton)
   • •feature - Domain-specific layouts (Navbar, Footer)
3. •Purpose - Brief description for Kobalte matching

Stage 2: Design

1. •

   Kobalte Primitive Selection:

   • •Read kobalte-primitives.md
   • •Match keywords from user's purpose description
   • •Suggest top matches or "none" for plain HTML
   • •User confirms choice
2. •

   Variants:

   • •Color variants: primary, secondary, info, success, warning, danger, outline (based on component type)
   • •Size variants: sm, md, lg, xl (based on Button pattern)
   • •User can accept suggestions or customize
3. •

   Props:

   • •Read accessibility-guidelines.md for component type
   • •Determine which accessibility props to expose
   • •Ask about additional props (icon, loading, etc.)

Stage 3: Confirm

Present summary:

I'll create {{NAME}} with:
- Tier: {{TIER}}
- Base: {{PRIMITIVE or "Plain HTML"}}
- Variants: {{COLORS}}, {{SIZES}}
- Files: index.ts, {{name}}.tsx, {{name}}.stories.tsx

Generate?

Stage 4: Generate & Validate

Pre-generation:

• •Check if component already exists
• •Create tier directory if needed

Generate 3 files:

1. •

   {name}.tsx - Component implementation:

   • •Determine pattern: USE_KOBALTE (true/false), HAS_VARIANTS (true/false)
   • •Follow Button.tsx structure exactly
   • •Use color-reference.md for variant classes
   • •Use accessibility-guidelines.md for props
   • •Always spread {...others} for HTML attribute passthrough
2. •

   index.ts - Barrel export:

   typescript

   export { ComponentName, type ComponentNameProps } from "./component-name";
   

3. •

   {name}.stories.tsx - Themed stories:

   • •Follow themed-story-pattern.md exactly
   • •Create Light/Dark variant pairs for each variant
   • •Include AllVariants showcase story

Validate (must all pass before proceeding):

cd /skills/services/frontend && pnpm check      # Biome
cd /skills/services/frontend && pnpm typecheck  # TypeScript
cd /skills/services/frontend && pnpm test       # Storybook tests

If validation fails: Fix errors properly (no workarounds), re-run validation.

Post-generation response:

✅ Generated {{NAME}} successfully!

Files: index.ts, {{name}}.tsx, {{name}}.stories.tsx
Location: /skills/services/frontend/src/components/{{tier}}/{{name}}/

Validation: ✅ Biome ✅ TypeScript ✅ Tests

Import: import { {{NAME}} } from "@/components/{{tier}}/{{name}}"
Usage: <{{NAME}} variant="primary" size="md">Content</{{NAME}}>

Component Patterns

Determine based on requirements:

Story Pattern

All stories use themed Light/Dark variants:

import { createThemedStories } from "@/components/story-helpers";

const primaryBase: Story = {
  args: { variant: "primary", children: "Primary" },
};

const primaryThemed = createThemedStories({
  story: primaryBase,
  testMode: "both",
});

export const PrimaryLight = primaryThemed.Light;
export const PrimaryDark = primaryThemed.Dark;

testMode options: "both" | "light" | "dark" | "none"

Key Principles

1. •Read reference files BEFORE generation - Button.tsx is PRIMARY REFERENCE
2. •Follow existing patterns exactly - Don't invent new patterns
3. •Accessibility first - Use Kobalte, expose accessibility props
4. •Dark mode mandatory - Theme colors need -dark variants, shared colors don't
5. •Always spread {...others} - Enables HTML attribute passthrough
6. •No workarounds - Fix errors properly, never use type assertions
7. •One component at a time - Complete and validate before proceeding
8. •Use rounded-radius - Not rounded-md or rounded-lg (badges use rounded-full)

Error Handling

Component exists: Ask to overwrite or choose new name

Validation fails:

1. •Read error message
2. •Fix the actual issue (no workarounds)
3. •Re-run validation
4. •Repeat until clean

Invalid tier: Show valid options (primitives, ui, composite, feature)

Example

User: Create a Badge component

Agent: Which tier? (primitives/ui/composite/feature)

User: ui

Agent: Purpose?

User: Small label for status or categories

Agent: No direct Kobalte match. Use plain HTML?

User: Yes

Agent: Color variants? Suggested: primary, secondary, info, success, warning, danger

User: Use suggestions

Agent: Size variants? Suggested: sm, md

User: sm and md

Agent:
Creating Badge:
- Tier: ui | Base: span | Variants: 6 colors, 2 sizes
- Files: index.ts, badge.tsx, badge.stories.tsx

Generate?

User: Yes

Agent: [Reads reference files, generates, validates]

✅ Generated Badge successfully!
Location: /skills/services/frontend/src/components/ui/badge/
Validation: ✅ Biome ✅ TypeScript ✅ Tests
Import: import { Badge } from "@/components/ui/badge"

Start

Greet the user and ask what component they'd like to create.