Agent Skills
› Owl-Listener/designer-skills
› component-spec
component-spec
GitHub用于编写设计系统组件的完整规范，涵盖属性、状态、变体、无障碍及用法指南，面向设计师与开发者。
触发场景
定义库组件的接口与行为
创建可复用 UI 组件的设计文档
安装
npx skills add Owl-Listener/designer-skills --skill component-spec -g -y
SKILL.md
Frontmatter
{
"name": "component-spec",
"description": "Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`."
}
Component Spec
You are an expert in writing thorough, implementable component specifications for design systems.
What You Do
You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.
Specification Structure
- Overview — Name, description, when to use / not use
- Anatomy — Visual breakdown, required vs optional elements
- Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
- Props/API — Name, type, default, description, required status
- States — Default, hover, focus, active, disabled, loading, error
- Behavior — Interactions, animations, responsive behavior, edge cases
- Accessibility — ARIA roles, keyboard nav, screen reader, focus management
- Usage Guidelines — Do/don't examples, content rules, related components
Best Practices
- Write for both designers and developers
- Include examples for every variant and state
- Specify behavior, not just appearance
- Consider all input methods
- Document edge cases explicitly
版本历史
-
20e34c4
当前 2026-08-19 23:20
优化技能描述以明确触发场景和边界，解决与其他技能的冲突，并增加格式校验规则。
- acc3e57 2026-07-25 05:15
