ui-component

UI 组件生成器

适用场景

当你需要按照 StyleSeed 设计规范生成新的 UI 组件时，使用此技能。

不适用场景

• 需要搭建完整页面 → 使用 /ss-page
• 需要组合多组件模式 → 使用 /ss-pattern
• 需要调整现有组件 — 直接编辑文件即可
• 用于非 StyleSeed 项目（没有 components/ui/ 目录或没有 Tailwind v4）

生成新组件：$0 描述：$ARGUMENTS

说明

1. 首先，阅读设计系统种子以了解背景：

   • 阅读 CLAUDE.md，了解组件规范
   • 阅读 css/theme.css，查看可用的设计令牌
   • 阅读 components/ui/button.tsx，参考其模式

2. 严格遵循以下规范：

   • 使用 function 声明（而非 const）
   • 添加 data-slot="component-name" 属性
   • 使用 @/components/ui/utils 中的 cn() 合并所有 className
   • 使用 React.ComponentProps<> 定义属性类型
   • 始终支持 className 属性以便覆盖样式
   • 如果组件有变体，使用 CVA（class-variance-authority）
   • 使用语义化颜色令牌（bg-card、text-foreground）——绝不使用内联十六进制颜色值

3. 设计令牌的使用：

   • 颜色：text-foreground、bg-card、text-brand、text-muted-foreground、border-border
   • 阴影：shadow-[var(--shadow-card)]、shadow-[var(--shadow-elevated)]
   • 圆角：rounded-md、rounded-lg、rounded-2xl
   • 间距：使用 6px 的倍数（p-1.5、p-3、p-6）
   • 动效：duration-[var(--duration-fast)]、ease-[var(--ease-default)]

4. 排版规则：

   • 展示文字（36-48px）：leading-none tracking-[-0.02em]
   • 标题（18-24px）：leading-snug tracking-[-0.01em]
   • 正文（14-17px）：leading-normal（默认字距）
   • 全大写说明文字（10-13px）：tracking-[0.05em]
   • 使用 size-* 简写，而不是 w-* h-*
   • 使用 ms-*/me-*，而不是 ml-*/mr-*（逻辑属性）

5. 无障碍要求：

   • 最小触控目标：44x44px（min-h-11 min-w-11）
   • 支持透传 aria-* 属性
   • 键盘焦点使用 focus-visible:ring-2 focus-visible:ring-ring
   • 动画须遵循 prefers-reduced-motion 设置

6. 将组件作为具名导出（而不是默认导出）

7. 将文件放在适当的目录中：

   • 基础组件/可复用组件 → src/components/ui/
   • 组合模式 → src/components/patterns/

示例

用户请求：

按照 StyleSeed 设计规范生成一个新的 UI 组件。

限制

• 仅当任务与其上游来源及本地项目上下文明确匹配时，才使用此技能。
• 应用更改前，核实命令、生成的代码、依赖项、凭据和外部服务行为。
• 不要将示例视为环境专属测试、安全审查或针对破坏性或高成本操作的用户批准的替代品。

执行边界

本指南面向现有的 StyleSeed 项目。此单文件入口未附带所列项目路径、组件、令牌和 /ss-* 命令。编辑前，请找到实际项目根目录并核实这些前提；如果资源不存在，应如实报告，而不是凭空编造。使用宿主支持的调用方式，并遵循现有项目规范。布局数值是设计系统的选择，并非普遍适用的易用性保证。请在实际界面中测试键盘操作、响应式溢出和减少动态效果的设置。