Tools

Has the agent commit to a visual direction before building or redesigning an interface, making deliberate choices on color, type and layout instead of generic, templated AI UI. Official Anthropic skill.

Has the agent settle on a clear aesthetic direction first, then write distinctive, production-ready frontend interfaces that avoid the generic AI look. Official Anthropic plugin.

Lets agents drive a real browser through the accessibility tree: navigate, click, fill forms and take screenshots, without needing a vision model. Maintained by Microsoft.

Builds multi-component web pages that need state or routing with React, Tailwind CSS and shadcn/ui, using bundled init and build scripts, then packs them into a single HTML file for a claude.ai Artifact. Official Anthropic skill.

Drives local web apps with Python Playwright scripts to verify features, debug the UI, take screenshots and read browser logs. Includes helper scripts to start and stop dev servers. Official Anthropic skill.

After code changes, has the agent check routes, errors and page behavior in the running Next.js app via /_next/mcp and agent-browser to confirm the change really works. Maintained by Next.js; needs Next.js 16.3+ (Turbopack) and agent-browser.

Official Next.js plugin shipped in the vercel/next.js repo: guides enabling and tuning Cache Components and Partial Prefetching, and verifies changes on a running dev server with the Next.js MCP and agent-browser.

UI design knowledge base skill: looks up UI styles, palettes, font pairings, charts and UX guidelines by product type and generates a full design system, covering 22 stacks including React, SwiftUI and Flutter. Needs Python 3 locally.

Official shadcn/ui skill: uses the shadcn CLI to read project config and component docs, then adds, searches, composes and fixes components following styling, form and accessibility rules. Can also start new projects from presets.

Official shadcn/ui CLI: initializes projects and adds component source to your codebase on demand, with switchable presets. Since v4 it offers --dry-run and --diff so agents can preview changes, and it comes with an agent skill.

MCP server built into the official shadcn CLI: lets agents browse and search components, blocks and templates in any configured registry, including private ones, and install them into your project in plain language. The project needs a components.json.

JavaScript, TypeScript and WebAssembly runtime with built-in formatting, linting, testing and compilation. Scripts get no file, network or environment access unless granted with --allow-* flags, making agent-generated scripts safer to run.

Helps agents build frontends that don't look templated: picks a design direction first, then tunes layout variance, motion intensity and information density. Also includes redesign audits, minimalist and brutalist styles, and design reference generation.

Microsoft's cross-browser end-to-end testing framework: one API drives Chromium, Firefox and WebKit, npx playwright test runs tests in parallel and isolation, with auto-waiting and trace replay for debugging failures.

All-in-one JavaScript and TypeScript toolchain: a single bun binary is a Node.js-compatible runtime, package manager, test runner and script runner, with noticeably faster installs and test runs.

Official Storybook addon that exposes an MCP endpoint on the Storybook dev server so agents can look up component docs and props, write and preview stories, and run component and accessibility tests. Storybook must be running; AI features are in preview.

Static site generator written in Go that builds Markdown content into docs sites, blogs or landing pages in seconds, with a local preview server and an asset pipeline for images, CSS and JS.

Frontend design quality plugin: one skill plus 24 commands (audit, critique, polish and more) and 61 built-in deterministic rules that find common design flaws in AI-generated interfaces and fix them one by one.

Frontend design polish skill: one skill with 24 commands such as polish, audit, critique and typeset, plus 61 deterministic rules that catch typical AI-generated UI problems, with live iteration in the browser. Works with Claude Code, Codex, Cursor and others.

Packs a web page, local HTML or dist folder into a lightweight desktop app with one command (built on Rust Tauri; macOS, Windows, Linux), with --json output and llms.txt for agents. Needs Node.js; installs Rust automatically if missing.

Creates a local CA with one command and issues development HTTPS certificates trusted by your system and browsers, for localhost, IPs and wildcard domains, with no extra configuration. Run mkcert -install once first to add the root certificate to the trust store.

Official Chrome plugin bundling the Chrome DevTools MCP with debugging skills for accessibility, LCP and memory leaks: lets agents drive and inspect a real Chrome and analyze network requests, console logs and performance traces. Collects usage stats by default; can be disabled.

Official daisyUI skill: the agent uses daisyUI 5 component classes, semantic colors and themes whenever it writes HTML or JSX, picking components by intended function, reading their guides and following their exact structure. Includes install, usage, config and color guides. Built on Tailwind CSS 4.

JS/TS development plugin with javascript-pro and typescript-pro subagents, a TypeScript project scaffolding command, and 4 skills on modern JavaScript, advanced TypeScript types, Node.js backends and JS testing. Part of the wshobson/agents marketplace.