Skip to content
shadcn-maestro

shadcn-maestro

Change one page of an existing web app with shadcn, checked by an independent reviewer and a browser.

Coding agents are quick to redesign a screen, but they misread pages, touch screens nobody asked about and stop at "it compiles". shadcn-maestro puts a map, a second opinion, an explicit approval and a browser check between the request and the commit.

Without shadcn-maestroWith shadcn-maestro
The agent guesses what the page doesEach region is annotated with evidence and reviewed by another session
Changes spill into screens nobody asked aboutThe proposal lists the files, the other screens affected and the global effects
Edits start as soon as the prompt endsNo application source file changes before your "yes"
"It compiles" is the finish lineThe page is opened in a browser and the app's own checks run
Commits and pushes happen on their ownIt asks before committing and never pushes

What is in the box

  • The shadcn-maestro CLI, on npm: maps the app, stores annotations and independent reviews. See CLI.
  • The design-apply agent, as a plugin for Claude Code and Codex: runs the whole flow, from the map to the report. See Agent.
  • This component reference: the shadcn components with live demos for Base UI and Radix. See Components.

Quick start

  1. Install the prerequisites and the CLI (Node.js >=24.2):

    npm i -g agent-browser@latest shadcn@latest
npm i -g shadcn-maestro

  2. Install the plugin in Claude Code or Codex.

  3. Open your app's directory in the host and describe the change:

    /shadcn-maestro:design-apply turn the settings page into tabs with a card per section
CLI

Commands, JSON envelope, schemas and issue codes.

Agent

Install design-apply and follow its flow in Claude Code or Codex.

Components

shadcn components with live Base UI and Radix demos.

For agents

Every page is also served as Markdown: add .md to its URL. /llms.txt lists all pages and /llms-full.txt holds the whole documentation in one file.