agent-workbench

A working standard and toolkit for AI coding agents (Claude Code + claude.ai) — the harnesses, patterns, and curated skills that keep an agent on-track, in-scope, and restartable across sessions.

Fork of vercel-labs/agent-skills; skills follow the Agent Skills format.

Quick start: git clone https://github.com/gamestap99/agent-workbench.git ~/code/agent-workbench && cd ~/code/agent-workbench && ./install.sh — see Install below.

Available Skills

harness-creator

Build, audit, and improve lightweight harnesses for AI coding agents — the AGENTS.md/CLAUDE.md, feature state, verification workflow, scope boundaries, and lifecycle handoff that keep an agent on-track and restartable.

Use when:

• "Set up a harness for this repo"
• "Audit my agent setup / AGENTS.md"
• "Make this project easier for coding agents to work in"

Notable: for UI/frontend projects it can add a DESIGN.md (the google-labs-code/design.md format) as a persistent design source of truth so agents produce visually consistent UI across sessions.

react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.

Use when:

• Writing new React components or Next.js pages
• Implementing data fetching (client or server-side)
• Reviewing code for performance issues
• Optimizing bundle size or load times

Categories covered:

• Eliminating waterfalls (Critical)
• Bundle size optimization (Critical)
• Server-side performance (High)
• Client-side data fetching (Medium-High)
• Re-render optimization (Medium)
• Rendering performance (Medium)
• JavaScript micro-optimizations (Low-Medium)

web-design-guidelines

Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.

Use when:

• "Review my UI"
• "Check accessibility"
• "Audit design"
• "Review UX"
• "Check my site against best practices"

Categories covered:

• Accessibility (aria-labels, semantic HTML, keyboard handlers)
• Focus States (visible focus, focus-visible patterns)
• Forms (autocomplete, validation, error handling)
• Animation (prefers-reduced-motion, compositor-friendly transforms)
• Typography (curly quotes, ellipsis, tabular-nums)
• Images (dimensions, lazy loading, alt text)
• Performance (virtualization, layout thrashing, preconnect)
• Navigation & State (URL reflects state, deep-linking)
• Dark Mode & Theming (color-scheme, theme-color meta)
• Touch & Interaction (touch-action, tap-highlight)
• Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)

vercel-deploy-claimable

Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.

Use when:

• "Deploy my app"
• "Deploy this to production"
• "Push this live"
• "Deploy and give me the link"

Features:

• Auto-detects 40+ frameworks from package.json
• Returns preview URL (live site) and claim URL (transfer ownership)
• Handles static HTML projects automatically
• Excludes node_modules and .git from uploads

How it works:

1. Packages your project into a tarball
2. Detects framework (Next.js, Vite, Astro, etc.)
3. Uploads to deployment service
4. Returns preview URL and claim URL

Output:

Deployment successful!

Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL:   https://vercel.com/claim-deployment?code=...

Install (Claude Code)

Clone the repo and run the installer — it symlinks every skill into ~/.claude/skills/:

git clone https://github.com/gamestap99/agent-workbench.git ~/code/agent-workbench
cd ~/code/agent-workbench
./install.sh

Start a new Claude Code session — the skills are auto-discovered. install.sh picks up every skills/*/SKILL.md automatically, so skills added later need no script changes.

Situation	Command
Dev machine (keep the repo, update via git)	./install.sh — symlink (default)
Run-only machine (won't keep the repo)	./install.sh --copy — standalone copy
A skill dir already exists, replace it	./install.sh --force

Prerequisites: git and Node.js (Node is needed for harness-creator's .mjs scripts). Optional per-skill integrations — e.g. the Google Stitch MCP for design generation, or always-on hooks — are set up on demand and are not required for skills to load.

claude.ai: upload a skill's skills/<skill>.zip, or paste its SKILL.md into the conversation.

Update

cd ~/code/agent-workbench
./update.sh          # git pull, then re-install (also links any newly added skills)

For a symlink install (the default), git pull alone already refreshes skill content — the symlinks are live; ./update.sh additionally links skills added since your last install. For a --copy install, refresh the copies with ./update.sh --copy --force.

Companion skills (recommended)

agent-workbench focuses on the harness — making a repo agent-ready — plus a few first-party skills. For the day-to-day engineering workflow (grill → spec → tickets → implement → review, plus diagnosis, TDD, code review, and domain modeling), install mattpocock/skills alongside it:

npx skills@latest add mattpocock/skills

The two compose: harness-creator readies a repo (instruction file, feature state, verification, scope); Matt Pocock's skills then drive work inside that scaffolded repo. Keep them installed separately so the suite updates upstream — agent-workbench references it, it doesn't vendor it. The harness-creator toolchain pattern points agents at these capabilities via a ## Toolkit section.

Usage

Skills are automatically available once installed. The agent will use them when relevant tasks are detected.

Examples:

Deploy my app

Review this React component for performance issues

Help me optimize this Next.js page

Skill Structure

Each skill contains:

• SKILL.md - Instructions for the agent
• scripts/ - Helper scripts for automation (optional)
• references/ - Supporting documentation (optional)

License

MIT