Skills
.Work. You
Rest

design-context

Official

Align UI context with design system and Storybook

Design & Creative#codebase#patterns#Storybook#UI design#wireframes#design-system#design-context
AuthorWellApp-ai
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: design-context
Download link: https://github.com/WellApp-ai/Well/archive/main.zip#design-context

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.