Agent Skills › bitjaru/styleseed › ss-component

ss-component

GitHub

生成符合 StyleSeed 设计规范的 React UI 组件，严格遵循设计令牌、语义化属性及无障碍标准。

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

Trigger Scenarios

需要创建新的 UI 组件遵循 StyleSeed 规范生成前端代码

Install

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

More Options

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

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/