Menu
Refresh UI/UX context from design system, Storybook, and codebase
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | design-context |
| description | Refresh UI/UX context from design system, Storybook, and codebase |
Ensures wireframes and UI decisions leverage existing patterns from the design system, Storybook, and codebase.
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:
h-13, px-4, gap-3)Find existing component stories:
Glob **/*.stories.tsx
Identify:
Key story locations:
/src/stories/ - General component stories/features/*/components/*.stories.tsx - Feature-specific storiesSearch for similar UI patterns:
SemanticSearch "How is [pattern] implemented in the codebase?"
Look for:
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 patternsAfter 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]
Invoke manually with "use design-context skill" or follow Ask mode DIVERGE loop which references this skill's phases.
problem-framing - Run before design-contextcompetitor-scan - Compare with external patternsConnect and verify the Well MCP — authenticate, confirm the tools work, and show what to ask. Use when the user runs /well:connect, just installed the Well plugin, or says the Well connection/MCP "isn't working" / "nothing happened".
Produce an accounts-receivable aging report and surface overdue invoices for a Well workspace. Use when the user asks who owes them money, an AR aging report, overdue invoices, days sales outstanding (DSO), or which customers to chase.
Forecast cash flow and runway for a Well workspace from booked invoices and collected bank transactions. Use when the user asks for a cash-flow forecast, runway, how long until they run out of cash, projected balance, or expected inflows/outflows.
Run a month-end (or period) close checklist against a Well workspace — verify everything is reconciled and posted before the books are closed. Use when the user asks to close the month/period, run a close checklist, check if the books are ready to close, or what's left before closing.
Produce a VAT / sales-tax summary for a period from a Well workspace's posted ledger. Use when the user asks for a VAT return, VAT summary, sales tax owed, output vs input VAT, or tax declaration figures for a period.
Build a balance sheet (bilan) from a Well workspace. Use when the user asks for a balance sheet, bilan, assets/liabilities/equity, or financial position at a point in time.