UI Component Generator

UI Component Generator

Registry-first artifact boundary

When .styleseed/​project.json and .styleseed/​artifacts/​index.json exist, resolve the requested artifact ID first, then read only .styleseed/​bundles/<artifact-id>.md and .styleseed/​manifests/<artifact-id>.json. Never fall back to the global legacy bundle for a registry project. Legacy projects may use .styleseed/​effective-rules.md only when no registry exists.

When NOT to use

• For full-page scaffolding → use /​ss-page
• For composed multi-component patterns → use /​ss-pattern
• For tweaking an existing component — just edit the file directly
• For non-StyleSeed projects (no components/​ui/ directory or no Tailwind v4)

Generate a new component: $0 Description: $ARGUMENTS

Instructions

1. First, read the compiled design method:

   • Read .styleseed/​effective-rules.md and .styleseed/​manifest.json; resolve if stale
   • Read css/​theme.css for available design tokens
   • Read css/​recipes.css for morphology variables and helper classes
   • Read components/​ui/​button.tsx as a reference pattern

2. Follow these conventions strictly:

   • Use function declaration (not const)
   • Add data-slot="component-name" attribute
   • Use cn() from @/​components/​ui/​utils for all className merging
   • Use React.ComponentProps<> for prop typing
   • Always support className prop for overrides
   • Use CVA (class-variance-authority) if the component has variants
   • Use semantic color tokens (bg-card, text-foreground) — never inline hex

3. Design token usage:

   • Colors: text-foreground, bg-card, text-brand, text-muted-foreground, border-border
   • Pattern surfaces: ss-pattern-surface; insets/​controls/​icons use the matching ss-* class
   • Primitives use the project token scale; do not hardcode one radius or shadow personality
   • Spacing follows one repeatable selected-recipe rhythm
   • Motion: duration-[var(--duration-fast)], ease-[var(--ease-default)]

4. Typography rules:

   • Display (36-48px): leading-none tracking-[-0.02em]
   • Heading (18-24px): leading-snug tracking-[-0.01em]
   • Body (14-17px): leading-normal (default tracking)
   • Caption uppercase (10-13px): tracking-[0.05em]
   • Use size-* shorthand instead of w-* h-*
   • Use ms-*/​me-* instead of ml-*/​mr-* (logical properties)

5. Accessibility requirements:

   • Minimum touch target: 44x44px (min-h-11 min-w-11)
   • Support aria-* attributes passthrough
   • Use focus-visible:ring-2 focus-visible:ring-ring for keyboard focus
   • Respect prefers-reduced-motion for animations

6. Export the component as a named export (not default)

7. Place the file in the appropriate directory:

   • Primitive/​reusable → src/​components/​ui/
   • Composed pattern → src/​components/​patterns/