关于 component-spec
这项设计系统技能为设计师和开发者编写可实施的组件规范，涵盖结构、变体、API、状态、行为、无障碍和使用指南。
主要功能
- 01组件结构与变体
- 02Props 和 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