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

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