用途:这是 Shade 组件或模式(pattern)在标记完成前必须通过的验收清单,用于保证新增或编辑的组件符合统一规范。
主要能力与要求:文件使用 kebab-case(如 dropdown-menu.tsx),导出标识符用 PascalCase,hooks/函数/变量用 camelCase;同目录必须有 <name>.stories.tsx。Shade 内部通过 @/ 别名导入。Storybook 标题按层级加前缀:Primitives /、Components /、Recipes /、Patterns /、Tokens /。每个 story 文件需含 tags: ['autodocs']、组件一句话描述、每个 story 的一句话说明,重要变体/状态各自独立成 story。
组件结构上,className 必须经 cn() 转发合并,不得覆盖或丢弃;只接受视觉/交互 props(variant、size、loading),不要 workflow props;多区域组件暴露复合子组件(.Title、.Actions、.Body)。forwardRef 用于渲染单个 DOM 元素时;cva() 用于有变体或状态类分支时并设置 defaultVariants;Recipes 为纯类字符串,不用 React、forwardRef 或 cva。
必需状态:交互组件须覆盖 default、hover、focus-visible(只用 focus-visible:,不用 focus:)、disabled 四种,并在 story 中可见。表单控件通过 inputSurface recipe 驱动外观。禁止 hex 值、原始灰色调工具类和用于颜色的 dark: 变体,须使用语义 token。
完成前检查:层级正确、命名规范、className 已 cn() 合并、forwardRef 与 cva 按需使用、四种状态可见、仅用语义 token、通用组件无产品专属 props、story 含 autodocs 与描述、pnpm lint、pnpm test 与 Storybook 均通过。
限制:资料未提供具体实现代码之外的收费、平台或效果信息。