design-context_skill

Overview

This skill refreshes UI/UX context by extracting patterns from the design system, Storybook, and the live codebase to keep new wireframes and implementations consistent. It surfaces applicable components, tokens, and implementation references so designers and engineers reuse existing building blocks. The goal is faster delivery with fewer visual regressions and more predictable behavior.

How this skill works

The skill runs an ordered inspection: read design system docs for tokens and component rules, scan Storybook for matching stories and variants, and search the codebase for implemented patterns and utilities. For unfamiliar dependencies, it queries library documentation to validate expected behavior and APIs. It then produces a concise mapping of sources to relevant patterns and a short list of applicable components and tokens.

When to use it

• Before presenting wireframes in the DIVERGE phase to ensure proposals reuse patterns
• Before implementing any UI changes to avoid duplicate components and styles
• During each DIVERGE loop to keep design iterations grounded in existing patterns
• When onboarding to a project to quickly learn the design system and common implementations
• When resolving layout or interaction ambiguity to find precedent in Storybook/codebase

Best practices

• Prioritize design system tokens and component variants over ad-hoc styles
• Document which story or file influenced decisions for easy traceability
• Favor existing hooks and utilities found in the codebase to reduce new surface area
• Validate critical interactions against library docs (e.g., radix-ui patterns) when behavior matters
• Keep the output concise: list only directly applicable patterns and tokens

Example use cases

• Designing a new invoice list view: map to existing DataTable patterns, spacing tokens, and loading states
• Prototyping a dialog-based workflow: reuse Dialog component variants and documented focus/closing behavior
• Implementing an action button set: align with Button variants and interaction states from Storybook
• Reworking a form layout: apply spacing tokens and shared input components discovered in the codebase
• Resolving inconsistent colors: pick approved color tokens and cite the design system reference