designer-dashboard
Installation
SKILL.md
Cursor: Read this skill whenever the user asks for dashboard design cohesion, a “design system” pass on (dashboard) routes, or work that should match Stitch-derived visuals without ad hoc styling.
Project anchors
| Layer | Location | Rule |
|---|---|---|
| Stitch / reference | _docs/_build/_stitch/ (e.g. course-editor/, dashboard/) |
Source of layout hierarchy, section names, and intent — not a license to paste one-off hex into JSX. Map colors and type roles to tokens below. |
| Tokens | src/app/globals.css → @theme { … } |
Single source of truth for color, font families, radii implied by utilities. Do not add new palette hex in components; extend @theme if a semantic is missing. |
| Primitives | src/components/ui/* (shadcn) |
Buttons, inputs, cards, dialogs — compose these before bespoke divs. |
| Components | src/components/ (domain: shell/, course-editor/, etc.) |
Reusable patterns shared across routes; no raw business logic in leaf pages when a component already exists. |
| Layouts / pages | src/app/(dashboard)/, src/components/shell/ |
Route structure, sidebars, main scroll regions; page files orchestrate data + composition only. |
Ordered chain (always apply in this direction)
When changing or creating UI, walk the chain top → bottom; never invert (e.g. do not pick a Tailwind arbitrary color then retrofit a token).