skills.rest
WellApp-ai
WellApp-aiOFFICIAL
Explore all skills by this author →
Website𝕏@getwellappGitHub

design-context

Align UI decisions with design system tokens, Storybook stories, and codebase patterns.

341|48|Updated Apr 4, 2025
Search Tags:#codebase#patterns#Storybook#UI design#wireframes#design-system#design-context
One-click install
npx skills add https://github.com/WellApp-ai/Well --skill design-context
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-context
Source: https://github.com/WellApp-ai/Well/tree/main/cursor-rules/skills/design-context
Command: npx skills add https://github.com/WellApp-ai/Well --skill design-context

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure wireframes and UI decisions leverage existing patterns from the design system, Storybook, and codebase, reducing drift and rework.

Core Features & Use Cases

  • Design System Check: Validate wireframes against documented tokens, components, and spacing.
  • Storybook Patterns: Locate relevant component stories and documented states to inform UI decisions.
  • Codebase Alignment: Identify reusable UI patterns, hooks, and layout patterns in the repository.
  • Library Documentation (Context7 MCP): Reference library docs to reuse patterns and authoritative guidance.

Quick Start

Use the design-context skill to refresh UI context before presenting wireframes or implementing UI changes, and during every DIVERGE loop to stay grounded in design-system patterns.

Frequently Asked Questions about design-context

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I align UI wireframes with an existing design system and Storybook?▼

Design context alignment validates wireframes and UI changes against design system tokens, Storybook component stories, and codebase patterns to reduce drift and rework.

What is the best way to check UI decisions against reusable codebase patterns?▼

Checking UI decisions involves searching the codebase for reusable hooks and layout patterns, consulting library documentation, and cross-referencing Storybook stories for consistency.

When do I need to validate wireframes against design system tokens?▼

Validate wireframes against design system tokens during wireframe reviews, UI change implementations, and DIVERGE loops to maintain consistency across components and layouts.

Can I use Storybook patterns to inform UI component states during development?▼

Yes, you can locate relevant Storybook stories and documented component states to inform UI decisions and ensure implementations match established patterns.

Does design context alignment work with cross-library documentation guidance?▼

Design context alignment works with cross-library documentation by referencing library docs to reuse authoritative patterns and guidance for UI decisions across different libraries.

Why does UI implementation drift from established design system patterns?▼

UI implementation drifts from design system patterns when wireframes and UI changes are made without leveraging existing tokens, Storybook stories, and reusable codebase patterns.

Related Skills

Explore More Design & Creative Skills→
jangtrinhjangtrinh

storybook

Generate CSF3 stories, docs, and tests for React components in Storybook.

Community
Advanced
llama-farmllama-farm
2

openspec-verify-change

Verify codebase implementations against delta specifications and change artifacts.

Official
Advanced
wpgauravwpgaurav
14

wpds

Query the WPDS MCP server for WordPress UI design guidance.

Community
Advanced
pradyumnasagarpradyumnasagar
6

roadmap-author

Guide authors through creating and validating ORS SKILL.md files.

Community
Intermediate