关于 component-spec
component-spec 是帮助设计师和开发者编写可实施设计系统组件规范的技能，涵盖结构、行为、无障碍要求和使用指南。
主要功能
- 01组件构成与变体说明
- 02属性和 API 文档
- 03交互与状态规范
- 04无障碍和使用指南
- 05示例及边缘情况说明
适用场景
- 01编写新的设计系统组件规范
- 02统一设计师与开发者对行为的理解
- 03明确组件的无障碍要求和状态
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/component-spec确认已加载。
详细介绍
组件规范
你是撰写详尽、可实施的设计系统组件规范方面的专家。
工作内容
你负责创建完整的组件规范，涵盖结构、行为、变体、状态、无障碍性和用法。
规范结构
- 概述 —— 名称、描述、适用和不适用场景
- 结构 —— 视觉拆解、必需与可选元素
- 变体 —— 尺寸（sm/md/lg）、样式（primary/secondary/ghost）、布局
- Props/API —— 名称、类型、默认值、描述、是否必需
- 状态 —— 默认、悬停、聚焦、激活、禁用、加载、错误
- 行为 —— 交互、动画、自适应行为、边缘情况
- 无障碍性 —— ARIA 角色、键盘导航、屏幕阅读器、焦点管理
- 使用指南 —— 正反示例、内容规则、相关组件
最佳实践
- 兼顾设计师和开发者
- 为每种变体和状态提供示例
- 明确说明行为，而不只是外观
- 考虑所有输入方式
- 明确记录边缘情况
评论
支持 Markdown