菜单
Write a complete component specification including api, states, variants, accessibility, and usage. Use whenever the user needs a component spec, component documentation, component api design, or is designing a new component for a design system.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Audit a brand's full identity (logo, typography, color, voice, visual language) for consistency, distinctiveness, and gap. Use when the user asks for a brand audit, identity review, brand health check, or wants to evaluate how a brand shows up across surfaces.
Plan a content calendar tied to product, brand, or marketing goals. Use when the user asks for a content plan, editorial calendar, content strategy, posting schedule, or wants to map content to themes and audiences over a period of time.
Write a sequence of emails for onboarding, nurture, sales, lifecycle, or launch. Use when the user asks for a drip campaign, email sequence, welcome series, onboarding emails, sales cadence, or any multi-email flow tied to a goal.
Design an a/b test or experiment including hypothesis, metrics, sample size, and analysis plan. Use whenever the user mentions a/b test, experiment, split test, multivariate test, or needs to design a test that produces a decision-quality result.
Audit a design or component for WCAG accessibility compliance. Use whenever the user mentions a11y, accessibility audit, WCAG check, contrast issues, keyboard navigation, screen reader support, focus order, or asks if a design is accessible.
Extract a brand voice guide from existing copy samples. Use whenever the user shares past copy and asks to define a voice, document a voice, create voice guidelines, or wants to make their existing voice teachable and repeatable.
| name | component-spec |
| description | Write a complete component specification including api, states, variants, accessibility, and usage. Use whenever the user needs a component spec, component documentation, component api design, or is designing a new component for a design system. |
a complete spec for one component. covers what it is, how to use it, what props it takes, every state it can be in, and how it behaves.
# [ComponentName]
## purpose
one sentence: what this component is for.
## when to use
specific scenarios where this is the right component.
## when not to use
common misuses, with alternatives.
## anatomy
labeled diagram (described in markdown) of the visible parts.
## props / api
| prop | type | default | required | description |
## variants
- size: [list]
- style: [list]
- state: [list]
## states
- default
- hover
- focus
- active
- disabled
- loading
- error
- empty
each with a one-line description of the visual and behavior.
## accessibility
- role
- keyboard interactions (key + behavior)
- aria attributes used and why
- focus management
- screen reader behavior
## composition
- what this component is made of (other components, primitives)
- what this component can contain (slots, children)
## examples
3-5 usage examples covering common cases.
## related components
- when to use [X] instead
- often paired with [Y]