design-kit-react-nextjs

design-agent-kit

A Claude Code plugin marketplace for design agents and orchestration. Ships a stack-agnostic design-sprint pipeline with pluggable brand, design-system, and stack configuration.

What's in the box

Plugin	Provides
design-kit	9 design agents, 8 skills, 13 commands, init scaffolding, 5 JSON Schemas, session-start hook
design-kit-react-nextjs	8 skills, 6 commands — React/Next.js prototype + shadcn/ui setup
design-kit-html	4 commands — self-contained HTML + Tailwind CDN + Alpine.js, no build step

Quick start

# In Claude Code — pick one stack profile:

# React/Next.js (full stack, shadcn/ui)
/plugin marketplace add anindhitavidia/design-agent-kit
/plugin install design-kit@design-agent-kit
/plugin install design-kit-react-nextjs@design-agent-kit

# HTML-only (no build, open in browser — good for quick prototyping)
/plugin marketplace add anindhitavidia/design-agent-kit
/plugin install design-kit@design-agent-kit
/plugin install design-kit-html@design-agent-kit

# In your repo:
/design-kit:init          # sets up config, context files, and runs stack-specific setup
/design-kit:design-sprint <project-name>

The design sprint pipeline

/design-kit:design-sprint runs a 7-stage pipeline with human review pauses between every stage:

1. Data & Intent — data-analyst + ux-designer (qualitative signals) + market-researcher produce 01-data-intent.md 1.5. Ideation (optional) — brainstorming-design skill explores problem space before locking in direction
2. Design Brief — ux-designer + product-designer produce 02-brief.md + 02-design-spec.md 2.5. Design Explore — design-explore skill generates 2-3 lightweight directions that challenge the brief; stack profile builds cheap DS-component sketches; user picks one direction before any prototype code is written
3. Prototype — dispatched to the active stack profile (design-kit-react-nextjs:prototype) 3.5. Design Iterate — automated design-qa run + mandatory stakeholder review pause; iterates until sign-off
4. Handoff Prep — dispatched to the active stack profile (design-kit-react-nextjs:handoff-prep)

Each stage's artifacts are JSON-Schema validated before the next stage begins.

Configuration

/design-kit:init scaffolds a design-kit.config.json at your repo root and creates context files under docs/context/:

{
  "stackProfile": "react-nextjs",
  "projectRoot": "design-kit/projects",
  "contextPaths": {
    "brand": "docs/context/brand.md",
    "designSystem": "docs/context/design-system.md",
    "personas": "docs/context/personas.md",
    "codingRules": "docs/context/coding-rules.md"
  },
  "confirmBeforeStages": false
}

Fill in the context files with your brand, design system, and persona details. Agents read them at runtime.

Key config options:

Field	Default	Description
stackProfile	"react-nextjs"	Which stack profile plugin to dispatch Stage 3 & 4 to
confirmBeforeStages	true	Pause for human review between every stage. Set to false only for automated/CI runs
marketResearch	"light"	"light" = training knowledge only (token-efficient); "full" = web search enabled; "off" = skip

Updating

Claude Code doesn't auto-update plugins. To get the latest agents, skills, and commands:

/plugin marketplace remove design-agent-kit
/plugin marketplace add anindhitavidia/design-agent-kit
/plugin install design-kit@design-agent-kit
/plugin install design-kit-react-nextjs@design-agent-kit

Your repo files (design-kit.config.json, docs/context/, DESIGN.md, etc.) are never touched by a reinstall — only the plugin cache is replaced. If a new version adds config options you want (check the CHANGELOG), add them to your design-kit.config.json manually.

Authoring a stack profile

A stack profile is a second Claude Code plugin that implements two required commands:

• prototype — reads 02-design-spec.md, scaffolds the prototype
• handoff-prep — packages the prototype for engineering handoff

See docs/architecture.md for the full contract.

Commands

Core (design-kit)