Agent Skills › bitjaru/styleseed › ss-component

ss-component

GitHub

根据StyleSeed设计规范生成新的UI组件。读取设计系统上下文，严格遵循函数声明、CVA变体、语义化Token及无障碍要求，输出符合约定的React组件代码。

engine/.claude/skills/ss-component/SKILL.md bitjaru/styleseed

Trigger Scenarios

需要创建新的UI组件生成符合StyleSeed规范的React组件

Install

npx skills add bitjaru/styleseed --skill ss-component -g -y

More Options

Non-standard path

npx skills add https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-component -g -y

Use without installing

npx skills use bitjaru/styleseed@ss-component

指定 Agent (Claude Code)

npx skills add bitjaru/styleseed --skill ss-component -a claude-code -g -y

安装 repo 全部 skill

npx skills add bitjaru/styleseed --all -g -y

预览 repo 内 skill

npx skills add bitjaru/styleseed --list

SKILL.md

Frontmatter

{
    "name": "ss-component",
    "description": "Generate a new UI component following the StyleSeed design conventions",
    "allowed-tools": "Read, Write, Edit, Grep, Glob, Bash",
    "argument-hint": "[component-name] [description]"
}

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

First, read the design system seed for context:
- Read CLAUDE.md for component conventions
- Read css/theme.css for available design tokens
- 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
- 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)
- 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/