Creating or materially redesigning a reusable UI component.
Inputs
component purpose and user task
existing framework and component library
existing tokens/theme
required variants and states
accessibility constraints
Procedure
Inspect neighboring components and existing primitives.
Define anatomy and semantic role before visual styling.
Enumerate variants and interaction states.
Map visual decisions to existing semantic/component tokens; introduce tokens only when the concept is reusable.
Implement using native project conventions.
Verify keyboard behavior, focus-visible behavior, accessible name/description, disabled/loading semantics, target size, contrast, reduced motion where relevant, and responsive behavior.
Render representative states when runtime tooling exists.
Report implementation and verification separately.
Deliverables
component implementation
state/variant contract
token mapping
accessibility behavior
tests or harness updates when appropriate
Failure conditions
Do not claim completion when required states are absent, when accessibility behavior is knowingly broken, or when a render-dependent claim was not rendered.
1---2name: design-component3description: Design Component4---5# Design Component67## Use when89Creating or materially redesigning a reusable UI component.1011## Inputs1213- component purpose and user task14- existing framework and component library15- existing tokens/theme16- required variants and states17- accessibility constraints1819## Procedure20211. Inspect neighboring components and existing primitives.222. Define anatomy and semantic role before visual styling.233. Enumerate variants and interaction states.244. Map visual decisions to existing semantic/component tokens; introduce tokens only when the concept is reusable.255. Implement using native project conventions.266. Verify keyboard behavior, focus-visible behavior, accessible name/description, disabled/loading semantics, target size, contrast, reduced motion where relevant, and responsive behavior.277. Render representative states when runtime tooling exists.288. Report implementation and verification separately.2930## Deliverables3132- component implementation33- state/variant contract34- token mapping35- accessibility behavior36- tests or harness updates when appropriate3738## Failure conditions3940Do not claim completion when required states are absent, when accessibility behavior is knowingly broken, or when a render-dependent claim was not rendered.
Run npx skillmds@latest add devotionn/design-component in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Design Component It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
devotionn (@devotionn) published this skill. Their other Agent Skills are listed on their SkillMD profile.
devotionn