design-context
Installation
SKILL.md
Design Context Skill
Ensures wireframes and UI decisions leverage existing patterns from the design system, Storybook, and codebase.
When to Use
- Before presenting wireframes (Ask mode DIVERGE)
- Before implementing UI changes (Agent mode)
- At every DIVERGE Loop to stay grounded in existing patterns
Instructions
Phase 1: Design System Check
Read the design system documentation:
Related skills
More from wellapp-ai/well
bpmn-workflow
Generate and maintain BPMN 2.0 diagrams linked to Gherkin scenarios
68qa-planning
Generate QA Contract with numbered Gherkin scenarios (G#N) and acceptance criteria (AC#N)
4webapp-testing
Test web app UI using Browser MCP and Storybook
3decision-capture
Capture patine (decision wisdom) at Gates when KO or challenge occurs
3code-review
Review code changes against hard rules and conventions
3problem-framing
Frame problems using JTBD Job Stories, HMW questions, and persona validation
3