ui-component

Generate a new UI component following the StyleSeed design conventions

安装方式

默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。

用 Codex 或 Claude 帮你安装复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。

直接命令不会经过审查 Prompt；运行前请先检查来源。

npx skills add https://github.com/ChonSong/skill-retriever --skill ui-component

命令会保持在同一行。复制前请横向滚动并检查完整内容。

想先保存到本地？可下载 SkillsMP 当前能够提供的文件。

决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。

SKILL.md

来源说明 · 只读预览

name	ui-component
description	Generate a new UI component following the StyleSeed design conventions
risk	unknown
source	https://github.com/bitjaru/styleseed/tree/main/engine/.claude/skills/ss-component
source_repo	bitjaru/styleseed
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/bitjaru/styleseed/blob/main/LICENSE

Use this skill when you need generate a new UI component following the StyleSeed design conventions.

Generate a new component: $0 Description: $ARGUMENTS

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)]