How-to · Design & Creative · By JR Brugger (Design Workflow)

How to use Component Spec in your AI agent

Install and use the Component Spec skill in Claude Code, Cursor, Codex, Gemini CLI, OpenCode, and Windsurf — with sample prompts.

What you'll get

This skill helps you document UI components in detail — buttons, cards, forms, nav bars, anything in your design system. It creates thorough specifications covering anatomy, behavior, variants, states, accessibility requirements, and usage guidelines. Perfect for product teams building or maintaining design systems who need consistent, implementable component documentation.

Step 1 — Get the skill source URL

The Component Spec skill lives at:

Open ↗

Step 2 — Add it to your AI agent

Copy one of these prompts and paste it into your AI tool. The agent will fetch and install the skill for you.

Claude Code

Add the agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec to my project.

Cursor

Install this agent skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec

Codex

Add this skill to .codex/skills/: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec

Gemini CLI

Add the skill at https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec to my .gemini/skills/ directory.

OpenCode

Install this agent skill from https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec

Windsurf

Add this skill: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec

Step 3 — Try these prompts

Once the skill is installed, ask your AI things like:

  • Building a design system and need to document components thoroughly
  • Your team needs shared specs so designers and developers stay aligned
  • Onboarding someone and want clear component documentation to reference
  • Ensure accessibility is baked into every component from the start

What this skill does

  • Generates structured component specifications with anatomy breakdowns, variants, and props
  • Documents all component states (hover, focus, disabled, loading, error) with clear descriptions
  • Includes accessibility requirements like ARIA roles, keyboard navigation, and screen reader support
  • Provides usage guidelines with do/don't examples and content rules
  • Covers behavior details like interactions, animations, and responsive breakpoints
SkillComponent Spec
Made byJR Brugger (Design Workflow)
CategoryDesign & Creative
SourceView original ↗