‹ 首页

ss-component

@bitjaru · 收录于 1 周前 · 上游提交 今天

Generate a new UI component following the StyleSeed design conventions

场景组件开发ui构建

适合你，如果需要在项目中快速创建符合 StyleSeed 规范的组件

/ 下载安装
ss-component.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill↓ .zip
用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录
Claude Code~/.claude/skills/(项目级 .claude/skills/)
Codex CLI~/.codex/skills/
Cursor自动读取上面两处目录
其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同
/ 通过 npx 安装 校验哈希
npx oh-my-skill add bitjaru/styleseed/ss-component
/ 通过 bash 安装
curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- bitjaru/styleseed/ss-component
/ 已经装过?验证本机副本,不用重装
npx oh-my-skill verify bitjaru/styleseed/ss-component
安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。
–GitHub stars
~502上下文体积 · 单文件
镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 3c5e387

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:
  2. Read CLAUDE.md for component conventions
  3. Read css/theme.css for available design tokens
  4. Read components/ui/button.tsx as a reference pattern
  1. Follow these conventions strictly:
  2. Use function declaration (not const)
  3. Add data-slot="component-name" attribute
  4. Use cn() from @/components/ui/utils for all className merging
  5. Use React.ComponentProps<> for prop typing
  6. Always support className prop for overrides
  7. Use CVA (class-variance-authority) if the component has variants
  8. Use semantic color tokens (bg-card, text-foreground) — never inline hex
  1. Design token usage:
  2. Colors: text-foreground, bg-card, text-brand, text-muted-foreground, border-border
  3. Shadows: shadow-[var(--shadow-card)], shadow-[var(--shadow-elevated)]
  4. Radius: rounded-md, rounded-lg, rounded-2xl
  5. Spacing: multiples of 6px (p-1.5, p-3, p-6)
  6. Motion: duration-[var(--duration-fast)], ease-[var(--ease-default)]
  1. Typography rules:
  2. Display (36-48px): leading-none tracking-[-0.02em]
  3. Heading (18-24px): leading-snug tracking-[-0.01em]
  4. Body (14-17px): leading-normal (default tracking)
  5. Caption uppercase (10-13px): tracking-[0.05em]
  6. Use size-* shorthand instead of w-* h-*
  7. Use ms-*/me-* instead of ml-*/mr-* (logical properties)
  1. Accessibility requirements:
  2. Minimum touch target: 44x44px (min-h-11 min-w-11)
  3. Support aria-* attributes passthrough
  4. Use focus-visible:ring-2 focus-visible:ring-ring for keyboard focus
  5. Respect prefers-reduced-motion for animations
  1. Export the component as a named export (not default)
  1. Place the file in the appropriate directory:
  2. Primitive/reusable → src/components/ui/
  3. Composed pattern → src/components/patterns/
按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

评论

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。
…