How do I install the Designer Dashboard skill?

Run npx skillmds@latest add joshuashepherd/designer-dashboard 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.

What does the Designer Dashboard skill do?

Apply the Stitch → tokens → primitives → components → layouts design chain to React/Tailwind dashboard UI for cohesive, on-brand surfaces. Use when building or refactoring dashboard routes, course/lesson editors, metadata pages, shell chrome, or running an agentic UI pass that must stay token-aligned. It is listed under Web & Frontend on SkillMD.

Is Designer Dashboard safe to use?

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

Which AI agents work with Designer Dashboard?

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 Designer Dashboard free to use?

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

Who published Designer Dashboard?

JoshuaShepherd (@joshuashepherd) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Designer Dashboard by joshuashepherd

Name: Designer Dashboard
Rating: 4.666666666666667 (3 reviews)
Author: JoshuaShepherd

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).

Stitch / product intent — Identify the screen’s job (e.g. metadata editing, settings, list/browse). Note hierarchy from reference HTML: page title → section titles → labels → values → actions.
Tokens — Choose semantic colors: bg-surface, bg-card, text-on-surface, text-on-surface-variant, border-outline/*, accents primary, primary-fixed-dim, lilac / lilac-strong for CTAs, success / warn for status. Fonts: font-sans (Inter) body, font-serif (Newsreader) display headings, font-display (Manrope) labels and chrome.
Primitives — Prefer Button, Input, Card, etc. from src/components/ui/ when the pattern matches; align variants with tokens (default vs outline vs destructive).
Components — Extract repeated dashboard patterns (stat rows, form sections, floating save bars) into src/components/ when the same structure appears twice.
Layouts — Respect dashboard shell: sidebar width, main padding, scroll ownership. Keep page-level grids consistent with sibling routes (e.g. max-w-5xl / max-w-6xl, grid-cols-12 gap-8).

Typography rules (dashboard)

Page title: font-serif, large (text-4xl–text-5xl), font-bold or font-semibold, tracking-tight. Avoid defaulting to italic unless Stitch explicitly uses it for that heading tier.
Section titles: font-serif text-2xl–text-3xl font-semibold text-on-surface.
Labels (forms, metadata): font-display text-xs font-semibold uppercase tracking-wider text-on-surface-variant (or text-primary when the label is the primary focus of the field, e.g. slug).
Body / inputs: font-sans text-base for readable dashboard copy; avoid text-sm as the default for long prose.
Numbers / stats: font-serif + font-semibold + tabular-nums where alignment matters.

Color & surface rules

Cards: bg-card border border-outline/25 shadow-sm (or equivalent) so surfaces separate from bg-surface without washed-out borders.
Fields: visible border-outline/25 + focus:border-primary-fixed-dim + focus:ring-2 focus:ring-primary/15 rather than borderless grey boxes only.
Status: semantic success / warn tokens for published vs draft-style badges — keep contrast with success-container / on-success-container where applicable.
Never use raw hex/RGB in JSX for dashboard theme colors unless documenting a one-off asset (e.g. SVG data URL). Video editor (ve-*) tokens are scoped to the editor; do not mix into cream dashboard pages.

Agentic workflow checklist

Before opening a PR or handing off:

No new hardcoded palette colors in the touched files (grep for # and rgb in TSX).
Labels and headings follow the typography rules above.
Interactive elements have visible focus and hover states.
Stitch reference (if any) was consulted for hierarchy; implementation uses repo tokens.
Run or skim .claude/skills/design-audit/SKILL.md on the changed route for pattern, color, type, motion, and a11y.

Related skills

Full pass / audit: .claude/skills/design-audit/SKILL.md
Tailwind v4 tokens & scale: .claude/skills/tailwind-design-system/SKILL.md
Stitch loops and prompts: .claude/skills/stitch-design/SKILL.md, .claude/skills/stitch-ui-design/SKILL.md
Token cleanup: .claude/skills/tailwind-cleanup/SKILL.md

Designer Dashboard

File contents