About this Skill
Route UI work by product surface, define a visual concept, implement reusable tokens and states, and document the result in DESIGN_SYSTEM.md.
Why we picked it
A design workflow for new interfaces and focused redesigns. It distinguishes dashboards, landing pages, stores, editorial pages and native apps; optional image-generation helpers are separate dependencies.
What it helps with
- Plan and implement a consistent interface for a specific product surface.
- Audit an existing interface and record reusable decisions.
Workflow and expected result
Step 1
Identify the product surface and preserve existing brand and framework constraints.
Step 2
Choose one visual concept, implement shared tokens and component states, then check the rendered layout.
Step 3
Review contrast, hierarchy and overflow; record the actual values in DESIGN_SYSTEM.md.
Source review
Reviewed the task instructions and repository inventory at commit af67a2cba570. This listing describes the upstream workflow; it does not claim that a full product implementation or accessibility audit was executed during intake.
Reviewed upstream task instructionsOfficial repository and installation guide
Before you use it
- A coding assistant with local file access and Node.js for the upstream installer. Review the installed instructions before use.
- Keep the skill references with SKILL.md. Browser research and rendered checks need browser access; AI image creation needs an available image tool or the separately documented helpers.
Supported agents
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
