# Agent overview

`design-apply` is a skill shipped as the `shadcn-maestro` plugin for Claude Code and Codex. It changes one page of an existing web app with shadcn: it maps the app, has an independent session confirm its reading of the page, proposes the change, waits for your "yes", applies it with your `shadcn`, checks the page in a browser and reports.

It works on existing apps only: it never creates a new project and never proposes migrating a framework, language or app. The work is UI only; if the page needs data or an endpoint whose contract is unknown, it asks you.

## Requirements

| Tool | Version | Why |
| --- | --- | --- |
| Node.js | `>=24.2` | Runs the `shadcn-maestro` CLI |
| `shadcn-maestro` | same version as the plugin | The plugin runs the global package |
| `agent-browser` | latest | Browser observation and verification |
| `shadcn` | latest | Adds the components to your app |
| Chrome | optional | Browser review; without it, the review is reported as not done |
| Claude Code or Codex | current | Hosts for the plugin |

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

## Modes

You choose the mode for every run; the agent never picks it for you.

* **Redesign (recommended)**: the whole app takes shadcn's visual identity, preset `nova`. `shadcn init --base <base> --preset nova --force --reinstall` replaces the colors, fonts and radius in the global CSS and reinstalls every `components/ui` file, so every screen changes color and font. The layout is redone only on the chosen page, from an official block when one fits and from the documentation examples otherwise. Once the theme is `nova`, later redesigns only redo the page layout.
* **Conservador**: keeps the app's theme and components, and changes only the chosen page.

## Guarantees

* No application source file changes before your explicit "sim" (yes) to the current proposal; only `.shadcn-maestro/` is written before it.
* The agent never reviews its own annotations; a separate host session does.
* Generated files in `components/ui` are kept as `shadcn` writes them.
* A failed `shadcn` command stops the run and reports the files already changed: no retry, no rollback.
* It asks before committing and never pushes.

Next: install it in [Claude Code](/agent/claude-code) or [Codex](/agent/codex), then follow [the flow](/agent/flow).
