design-kit

Audit a component, page, or codebase for brand and token compliance. Uses the brand-guardian agent and reads docs/context/brand.md and docs/context/design-system.md. Invoke with /brand-audit [path-or-component-name].

Reviews a component for design system readiness. Checks HANDOFF.md completeness, all required states, dark mode, accessibility, and implementation readiness. Uses the component-reviewer agent and reads docs/context/design-system.md. Invoke with /component-review [component-path].

Pulls analytics data from the project's analytics source and writes a structured insight file. Supports hierarchical paths: /data-insights <product> for a high-level cross-domain insight, or /data-insights <product>/<domain> for a domain-specific insight. Hands off to a product designer agent to append design recommendations.

Run only Stages 1 and 2 of the design sprint (research + brief + design spec). Stops before scaffolding code. Useful when you want to align on direction before committing to a prototype.

Runs automated design QA on a rendered URL. Orchestrates Playwright capture, source analysis, and agent evaluation. Usage: /design-qa <url> [--brief <path>] [--context "description"] [--specs <path>] [--session <path>] [--repo <path>]

Use when establishing or auditing brand guidelines, ensuring token consistency, reviewing color decisions, checking visual consistency across components, or evaluating whether new work aligns with the project's brand identity. Reads brand and design-system context from paths declared in design-kit.config.json.

Use when reviewing a component for graduation from a design playground to the production design system, auditing component quality, or validating the project's design-system standards before engineering handoff. Reads design-system standards from paths declared in design-kit.config.json.

Use when pulling and interpreting analytics data to inform design decisions. Translates raw metrics into product signals and writes structured Data Summary sections to insight files. Understands module structure, the agentic progression model, and how to frame data for the design team. Reads product and persona context from paths declared in design-kit.config.json.

Use when building data visualization or dashboard prototypes. Handles chart selection, data color theory, dashboard composition, and generates production-quality chart components using the active stack profile's viz library. Reads product and persona context from paths declared in design-kit.config.json.

Orchestrator agent for Stage 3 of the design sprint. Reads the design spec at 02-design-spec.md, validates required fields, and dispatches prototype scaffolding to the active stack profile via /design-kit-{stackProfile}:prototype. Does NOT generate framework code itself.

Use when generating release notes or changelogs for components, prototypes, or DS updates. Reads git history and design-kit project STATUS.md files to produce a structured changelog.

Use when you need prompt patterns and design guidance for specific UI component categories: forms, navigation, feedback patterns, data display, and overlays.

Orchestrates the 4-stage design sprint pipeline. Stages 1-2 produce briefs and specs; Stages 3-4 dispatch to the active stack profile. Reads design-kit.config.json for stackProfile and confirmBeforeStages.

Use when exploring a design idea before producing a brief or spec. Walks the user through user-intent, constraints, success criteria, and 2-3 design approaches with trade-offs. Lighter weight than a full design sprint.

Use when reviewing code for quality, design system compliance, build correctness, and test coverage. Triggers on: "Review this code", "code review", "check code quality", "/code-review". Runs a structured 3-iteration loop until clean.

1 hook across 1 event