ss-component

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

UI Component Generator

UI组件生成器

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

全页面脚手架 → 使用
```
/ss-page
```
多组件组合模式 → 使用
```
/ss-pattern
```
调整现有组件 — 直接编辑文件即可
非StyleSeed项目（无
```
components/ui/
```
目录或未使用Tailwind v4）

生成新组件：$0 描述：$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/
```

首先，阅读已编译的设计方法：
- 阅读
```
.styleseed/effective-rules.md
```
  和
```
.styleseed/manifest.json
```
  ；若内容过期则更新
- 阅读
```
css/theme.css
```
  了解可用的设计令牌
- 阅读
```
css/recipes.css
```
  了解形态变量和辅助类
- 阅读
```
components/ui/button.tsx
```
  作为参考示例
严格遵循以下规范：
- 使用
```
function
```
  声明（而非
```
const
```
  ）
- 添加
```
data-slot="component-name"
```
  属性
- 使用
```
@/components/ui/utils
```
  中的
```
cn()
```
  处理所有className合并
- 使用
```
React.ComponentProps<>
```
  进行属性类型定义
- 始终支持
```
className
```
  属性用于样式覆盖
- 若组件包含变体，使用CVA（
```
class-variance-authority
```
  ）
- 使用语义化颜色令牌（
```
bg-card
```
  、
```
text-foreground
```
  ）—— 绝不使用内联十六进制颜色值
设计令牌使用规则：
- 颜色：
```
text-foreground
```
  、
```
bg-card
```
  、
```
text-brand
```
  、
```
text-muted-foreground
```
  、
```
border-border
```
- 模式表面：
```
ss-pattern-surface
```
  ；内嵌元素/控件/图标使用匹配的
```
ss-*
```
  类
- 基础组件使用项目令牌刻度；不要硬编码单一圆角或阴影样式
- 间距遵循选定的可重复配方节奏
- 动效：
```
duration-[var(--duration-fast)]
```
  、
```
ease-[var(--ease-default)]
```
排版规则：
- 展示型文字（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-*
```
  （逻辑属性）
无障碍要求：
- 最小触摸目标：44x44px（
```
min-h-11 min-w-11
```
  ）
- 支持
```
aria-*
```
  属性透传
- 键盘聚焦使用
```
focus-visible:ring-2 focus-visible:ring-ring
```
  样式
- 动画需尊重
```
prefers-reduced-motion
```
  设置
以命名导出方式导出组件（而非默认导出）
将文件放置在合适的目录：
- 基础/可复用组件 →
```
src/components/ui/
```
- 组合模式组件 →
```
src/components/patterns/
```