design-context
Ensure UI changes align with existing design system and Storybook patterns.
Install
mkdir -p .claude/skills/design-context && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/3988" && unzip -o skill.zip -d .claude/skills/design-context && rm skill.zipInstalls to .claude/skills/design-context
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Refresh UI/UX context from design system, Storybook, and codebaseKey capabilities
- →Read design system documentation
- →Find existing Storybook component stories
- →Search the codebase for similar UI patterns
- →Query library documentation for unfamiliar patterns
- →Output applicable components and design tokens
How it works
The skill reads design system documentation, glob Storybook files, semantically searches the codebase, and queries library documentation to gather UI/UX context.
Inputs & outputs
When to use design-context
- →Check button variants before coding
- →Search for existing component patterns
- →Sync wireframes with design tokens
About this skill
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:
Read /docs/design-system/components.md
Read /docs/design-system/spacing.md
Read /docs/design-system/colors.md (if color decisions needed)
Read /docs/design-system/interactions.md (if interaction patterns needed)
Note applicable:
- Design tokens (
h-13,px-4,gap-3) - Component patterns (Button variants, DataTable, Dialog)
- Spacing conventions (p-4 for cards, gap-6 for sections)
Phase 2: Storybook Patterns
Find existing component stories:
Glob **/*.stories.tsx
Identify:
- Components matching current wireframe needs
- Existing variants and props
- Documented states (loading, error, empty)
Key story locations:
/src/stories/- General component stories/features/*/components/*.stories.tsx- Feature-specific stories
Phase 3: Codebase Search
Search for similar UI patterns:
SemanticSearch "How is [pattern] implemented in the codebase?"
Look for:
- Similar features already built
- Reusable hooks and utilities
- Existing layout patterns
Phase 4: Library Documentation (Context7 MCP)
Query library docs for unfamiliar patterns:
1. resolve-library-id with libraryName (e.g., "radix-ui")
2. query-docs with libraryId and specific question
Common libraries:
/radix-ui/primitives- Dialog, Dropdown, Select patterns/tanstack/query- Data fetching patterns/tanstack/table- Table patterns
Output Format
After running this skill, output:
## Design Context
| Source | Relevant Patterns |
|--------|-------------------|
| Design System | [tokens, components] |
| Storybook | [stories that apply] |
| Codebase | [existing implementations] |
| Libraries | [patterns from docs] |
### Applicable Components
- [Component]: [How it applies to current wireframe]
### Design Tokens to Use
- Spacing: [tokens]
- Colors: [tokens]
- Typography: [tokens]
Invocation
Invoke manually with "use design-context skill" or follow Ask mode DIVERGE loop which references this skill's phases.
Related Skills
problem-framing- Run before design-contextcompetitor-scan- Compare with external patterns
How it compares
This skill automates the process of gathering design context from multiple sources, ensuring new UI decisions align with existing patterns and standards.
Compared to similar skills
design-context side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| design-context (this skill) | 1 | 7mo | No flags | Intermediate |
| frontend-design-zh | 0 | 5mo | Review | Intermediate |
| figma-integration | 23 | 7mo | No flags | Intermediate |
| implementing-figma-designs | 6 | 4mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by WellApp-ai
View all by WellApp-ai →You might also like
frontend-design-zh
L-LesterYu
使用 React、Tailwind CSS 和 shadcn/ui 创建独特、生产级的静态网站——无需设计稿。从纯文本需求生成大胆、令人难忘的设计，具备反AI套路美学、移动优先响应式模式和单文件打包功能。适用于构建落地页、营销网站、作品集、仪表盘或任何静态Web界面。支持 Vite（纯静态）和 Next.js（Vercel部署）两种工作流。
figma-integration
duongdev
Guides design-to-code workflow using Figma integration. Helps extract designs, analyze components, and generate implementation specs. Auto-activates when users mention Figma URLs, design implementation, component conversion, or design-to-code workflows. Works with /ccpm:planning:design-ui, design-approve, design-refine, and /ccpm:utils:figma-refresh commands.
implementing-figma-designs
OneKeyHQ
Implements Figma designs 1:1 using OneKey component library (还原设计稿).
frontend-design
darthlinuxer
Design thinking and decision-making for web UI. Use when designing components,
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.