agent-quality

name	agent-quality
description	Set up quality tools designed specifically for AI-generated code: react-doctor (health scoring), react-scan (re-render detection), react-grab (element context capture), expect (browser testing from git diffs), and agentation (UI annotation for agents). Interviews the user to install only what's relevant.

Agent Quality

You are setting up quality tools that catch the specific problems AI coding agents introduce. Start with an interview to install only what's relevant.

Phase 1: Interview

Present the tools and ask the user which to set up. Show this summary first:

Available tools:

Tool	What it does	Best for
react-doctor	Scans React code and gives a health score (0–100) with diagnostics across performance, architecture, security, and a11y	React / Next.js / React Native projects
react-scan	Highlights components causing unnecessary re-renders in real time: no code changes needed	Any React app with performance issues
react-grab	Press ⌘C / Ctrl+C over any UI element to copy its component name, file path, and HTML to clipboard	Giving an agent precise UI element context
expect	Reads your git diff, generates a test plan, and runs it in a real browser with Playwright: no test scripts to maintain	Any web app with a UI
agentation	Desktop app that annotates UI elements with CSS selectors, component paths, and file locations for agents	Detailed UI feedback workflows
dev3000	AI-powered debugging and dev monitoring from Vercel Labs	Vercel / Next.js projects

Ask in one batch:

• Which tools do you want to set up? (can select multiple)
• React-doctor / react-scan / react-grab: Is this a React, Next.js, or React Native project?
• Expect: What URL does the app run on locally (e.g. http://localhost:3000)? Should it run in CI too?
• Agentation: Do you want MCP integration so the agent can respond to annotations in real time?

Only proceed with the tools the user selects.

Phase 2: react-doctor

Skip if not selected.

Scans React code for a health score (0–100) covering performance, architecture, security, and a11y — flags issues AI agents commonly introduce.

See references/react-doctor.md for install, config, CI setup, and verification.

Phase 3: react-scan

Skip if not selected.

Highlights components causing unnecessary re-renders in the browser with a visual overlay — no code changes needed to start.

See references/react-scan.md for install, config, CI setup, and verification.

Phase 4: react-grab

Skip if not selected.

Press ⌘C / Ctrl+C over any browser element to copy its component name, file path, and HTML — paste directly into Claude Code for precise context.

See references/react-grab.md for install, config, CI setup, and verification.

Phase 5: expect

Skip if not selected.

Reads the current git diff, generates a test plan, and runs it in a real Playwright browser — no selectors or assertions to write.

See references/expect.md for install, config, CI setup, and verification.

Phase 6: agentation

Skip if not selected.

Desktop app that annotates UI elements with CSS selectors, component paths, and file locations — exports structured markdown for the agent.

See references/agentation.md for install, config, CI setup, and verification.

Phase 7: dev3000

Skip if not selected.

AI-powered debugging and development monitoring from Vercel Labs. Designed for Next.js and Vercel-hosted projects.

Visit dev3000.ai for current installation instructions: the setup flow is project-specific. Recommended for Next.js projects deployed on Vercel.

Phase 8: Update CLAUDE.md

Add a Quality Tools section to CLAUDE.md for each installed tool — see references/claude-md-template.md.

Completion Report

For each installed tool:

• Tool name and version installed
• How to invoke it (command or workflow step)
• CI integration added (yes/no)
• CLAUDE.md updated (yes/no)
• Verification: passed/failed