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.

Controls your local Chrome over CDP to navigate, click, type, take screenshots and scrape data, reusing logged-in sessions. Official browser-use skill; install the browser-use CLI with uv first.

Skills from security firm Trail of Bits: 40+ plugins for code auditing, CodeQL and Semgrep static analysis, differential review, smart-contract and cryptography audits, fuzzing and more. Also installable as a Claude Code or Codex plugin marketplace.

A disciplined process for hard bugs and performance regressions: build a reliable reproduction loop, reproduce and minimize, form hypotheses, instrument to verify, then fix and add a regression test, redacting secrets in output. By Matt Pocock.

Forces red-green-refactor: write a test and watch it fail, then write the minimum code to pass. Any code written without a verified failing test gets deleted and redone. From the Superpowers workflow.

Creates generative art such as flow fields and particle systems with p5.js and seeded randomness: first writes an algorithmic design philosophy, then outputs an interactive HTML viewer with tunable parameters. 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.

Develops a design philosophy first, then draws posters, illustrations and other static visuals in code, exporting PNG or PDF. Emphasizes original work rather than copying existing artists. Official Anthropic skill.

Makes GIFs that follow Slack's recommended size, frame rate, color and length for emoji (128x128) and message GIFs (480x480), with animation tips and tools to assemble and validate them. Built on Python and Pillow. Official Anthropic skill.

Ten built-in color and font themes to apply to slides, documents, reports and HTML landing pages, or generate a new theme on demand. Official Anthropic skill.

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.

Skill pack from YC president Garry Tan: slash commands such as /office-hours, /plan-ceo-review, /review, /qa and /ship play CEO, engineering manager, designer, QA and release engineer. Needs Git and Bun; clone the repo and run ./setup as the README describes.

Generates or edits images: photos, illustrations, textures, game sprites, product mockups and transparent assets. A built-in Codex system skill using the image_gen tool, no install needed; with approval it can use a bundled CLI script that needs OPENAI_API_KEY. By OpenAI.

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.

Engineering skill collection spanning define, plan, build, verify, review and ship, with /spec, /plan, /build, /test, /review and /ship commands, including TDD, code review and web performance audits. By Addy Osmani.

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.

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.

Turns natural-language descriptions, Mermaid or a real code repo into interactive single-file HTML diagrams: architecture, flowcharts, sequence diagrams, data flows and state machines. Validates output automatically and exports PNG or SVG.

HeyGen's official HyperFrames skill set: lets agents write deterministic MP4 videos in HTML, CSS and animation, with workflows for promo videos, explainers, captions and beat-synced music. Needs Node.js 22+ and FFmpeg.

Generates self-contained HTML+SVG diagrams in an editorial style: architecture, flowcharts, sequence, swimlane, Gantt and dozens more types. Can match brand colors from a website and redraw imported Mermaid, draw.io and Excalidraw sources.

Conversion rate optimization skill from the marketingskills collection: give it a homepage, landing page, pricing page or form and it diagnoses value proposition, headlines, CTAs, trust signals and friction, returning quick wins, high-impact changes, A/B test ideas and alternative copy.

Design engineering skills by Emil Kowalski, author of Sonner and Vaul: choose animation easing and durations, review and improve motion, apply Apple design principles, make web apps feel native on phones, and help pick UI libraries and prototype multiple versions.

Teaches agents to use the Chrome DevTools MCP efficiently: snapshot first to get element uids, screenshot only when needed, paginate and filter large output, inspect CSS and test browser extensions. Needs chrome-devtools-mcp configured; maintained by the Chrome DevTools team.

Companion skill for the agent-browser CLI: has the agent load usage matching the installed version to navigate, fill forms, take screenshots and run exploratory tests, and can also drive Electron desktop apps. Install the agent-browser CLI first; from Vercel Labs.