Skill

component-spec

Generates detailed UI component specifications for design systems, including anatomy, variants, props, states, behavior, accessibility, and usage guidelines.

design

documentation

From design-systems

Install

Run in your terminal

npx claudepluginhub sethdford/claude-skills --plugin designer-systems

Tool Access

This skill uses the workspace's default tool permissions.

Skill Content

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

138.6k

claude-opus-4-5-migration

2 files

Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.

claude-opus-4-5-migration

83.2k

evaluation-methodology

1 file

Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.

plugin-eval

32.9k

Stats

Parent Repo Stars3

Parent Repo Forks0

Last CommitMar 11, 2026

Actions

View Source View Plugin View on GitHub View README

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