{"id":"ss-component","name":"ss-component","summary":"StyleSeedのデザイン慣例に従って新しいUIコンポーネントを生成する","body":"# UI Component Generator\n## Registry-first artifact boundary\n\nWhen `.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.\n\n## When NOT to use\n\n- For full-page scaffolding → use `/ss-page`\n- For composed multi-component patterns → use `/ss-pattern`\n- For tweaking an existing component — just edit the file directly\n- For non-StyleSeed projects (no `components/ui/` directory or no Tailwind v4)\n\nGenerate a new component: **$0**\nDescription: $ARGUMENTS\n\n## Instructions\n\n1. First, read the compiled design method:\n   - Read `.styleseed/effective-rules.md` and `.styleseed/manifest.json`; resolve if stale\n   - Read `css/theme.css` for available design tokens\n   - Read `css/recipes.css` for morphology variables and helper classes\n   - Read `components/ui/button.tsx` as a reference pattern\n\n2. Follow these conventions strictly:\n   - Use `function` declaration (not `const`)\n   - Add `data-slot=\"component-name\"` attribute\n   - Use `cn()` from `@/components/ui/utils` for all className merging\n   - Use `React.ComponentProps<>` for prop typing\n   - Always support `className` prop for overrides\n   - Use CVA (`class-variance-authority`) if the component has variants\n   - Use semantic color tokens (`bg-card`, `text-foreground`) — never inline hex\n\n3. Design token usage:\n   - Colors: `text-foreground`, `bg-card`, `text-brand`, `text-muted-foreground`, `border-border`\n   - Pattern surfaces: `ss-pattern-surface`; insets/controls/icons use the matching `ss-*` class\n   - Primitives use the project token scale; do not hardcode one radius or shadow personality\n   - Spacing follows one repeatable selected-recipe rhythm\n   - Motion: `duration-[var(--duration-fast)]`, `ease-[var(--ease-default)]`\n\n4. Typography rules:\n   - Display (36-48px): `leading-none tracking-[-0.02em]`\n   - Heading (18-24px): `leading-snug tracking-[-0.01em]`\n   - Body (14-17px): `leading-normal` (default tracking)\n   - Caption uppercase (10-13px): `tracking-[0.05em]`\n   - Use `size-*` shorthand instead of `w-* h-*`\n   - Use `ms-*/me-*` instead of `ml-*/mr-*` (logical properties)\n\n5. Accessibility requirements:\n   - Minimum touch target: 44x44px (`min-h-11 min-w-11`)\n   - Support `aria-*` attributes passthrough\n   - Use `focus-visible:ring-2 focus-visible:ring-ring` for keyboard focus\n   - Respect `prefers-reduced-motion` for animations\n\n6. Export the component as a named export (not default)\n\n7. Place the file in the appropriate directory:\n   - Primitive/reusable → `src/components/ui/`\n   - Composed pattern → `src/components/patterns/`","author":"@bitjaru","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-component","license":"MIT","category":"coding","lang":"en","tokens":726,"stars":0,"calls30d":1,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":["Read","Write","Edit","Grep","Glob","Bash"]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}