SKILL.md
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
- 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
- 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
- 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)]
- 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)
- 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
- Export the component as a named export (not default)
- Place the file in the appropriate directory:
- Primitive/reusable → src/components/ui/ - Composed pattern → src/components/patterns/