菜单
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.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
Harden a self-hosted Linux server. Detects current state, runs a full interview to understand what the user wants, warns about edge cases (no SSH keys, password-only auth, provider firewalls), then implements only the selected steps in a safe order.
Systematic edge case discovery, test coverage, and hardening for any feature or codebase area. Spawns parallel subagents to enumerate edge cases across eight categories, writes tests for each, runs them, and fixes unhandled cases. Use after implementation to ensure robustness before shipping.
Add a time-boxed free trial to any app with a payment integration. Handles trial start, expiry tracking, gating, expiry emails, and the upgrade prompt flow. Use when adding a trial period to an existing subscription or paywall.
Convert any YouTube video into a reusable Claude Code skill. Paste a YouTube URL and this skill fetches the transcript, extracts the actionable content, and writes a ready-to-use .claude/skills/<name>.md file. Best for tutorial videos, how-to guides, workflow demos, or instructional content.
Make a site agent-ready using Cloudflare AI Search and the isitagentready.com checklist. Audits the current site, then implements: Cloudflare AI Search (hybrid vector + keyword), markdown content negotiation (acceptmarkdown.com), robots.txt AI rules, sitemap, MCP Server Card, and Agent Skills discovery. Use when asked to add search, make a site agent-ready, or optimize for AI agents.
Scaffolds a Better T Stack project via a structured interview. Uses AskUserQuestion to let the user pick frontend, backend, runtime, database, ORM, API layer, auth, payments, addons, example templates, and where to create the project. Assembles and runs the exact create-better-t-stack CLI command with no manual prompts.
| 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. |
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.
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:
http://localhost:3000)? Should it run in CI too?Only proceed with the tools the user selects.
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.
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.
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.
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.
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.
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.
Add a Quality Tools section to CLAUDE.md for each installed tool — see references/claude-md-template.md.
For each installed tool: