Installation

$ npx skills add smithery/wellapp-ai --skill design-context

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared

Cursor Not declared

Codex Not declared

GitHub Copilot Not declared

Windsurf Not declared

Gemini CLI Not declared

Cline Not declared

OpenCode Not declared

Package contents

Files included with this skill beyond the listing page.

skill md SKILL.md 2,636 B

docs SUMMARY.md 87 B

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:

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-context
competitor-scan - Compare with external patterns

design-context