ss-component · diff
git:20260602.96afd94 to git:20260803.e0a0991
6 added, 5 removed. Audit A to A.
---
name: ss-component
description: Generate a new UI component following the StyleSeed design conventions
argument-hint: "[component-name] [description]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
---
# UI Component Generator
## 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 design system seed for context:
- - Read `CLAUDE.md` for component conventions
+ 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`
- - Shadows: `shadow-[var(--shadow-card)]`, `shadow-[var(--shadow-elevated)]`
- - Radius: `rounded-md`, `rounded-lg`, `rounded-2xl`
- - Spacing: multiples of 6px (`p-1.5`, `p-3`, `p-6`)
+ - 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/`