How do I install the Design Context skill?

Run npx skillmds@latest add tomevault-io/design-context in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design Context safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design Context?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design Context free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design Context?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design Context by tomevault-io — Agent Skill

Name: Design Context
Author: tomevault-io

File contents

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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: design-contextdescription: Refresh UI/UX context from design system, Storybook, and codebase Use when this capability is needed.---# Design Context SkillEnsures 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 CheckRead the design system documentation:```Read /docs/design-system/components.mdRead /docs/design-system/spacing.mdRead /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 PatternsFind 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 SearchSearch 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 FormatAfter running this skill, output:```markdown## 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]```## InvocationInvoke 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---> Converted and distributed by [TomeVault](https://tomevault.io/claim/wellapp-ai) — claim your Tome and manage your conversions.

Frequently asked questions

Design Context