Must-haves · Web developers

Must-haves for web developers

For people who build or change websites. These add-ons let the assistant open your site in a real browser, read current docs and review its own changes.

Most useful first. Start with one, try it, then add the next.

What do you want to do?

Pick a task. Each page lists the free add-ons we tested for it, in order, and what the Superpowers Pack will add for web developers.

Skills

  1. RecommendedskillInstalls cleanly

    Good habits for building websites

    Addy Osmani Agent Skills

    Good working habits for building websites: clear plans, tests and reviews.

    Test: installs cleanly and works without an account. Not yet used on real work.

    EveryoneWatch outThe skills are text instructions, so the direct risk is low. The agent still runs commands that you approve.

    For any assistant
    Paste this in the terminal
    npx skills add addyosmani/agent-skills
    Other ways to install, and how we tested it
  1. Plan, test and check its own work

    Superpowers

    Makes the assistant ask questions, plan, test and check its own work.

    RecommendedskillInstalls cleanly
    Install line
    Type this inside Claude Code
    /plugin install superpowers@claude-plugins-official

    For Claude Code. All steps and how we tested it

All skills

Agents

  1. Plan and review code changes

    Feature Dev plugin (Anthropic)

    Three helpers that look at your code, plan a change and check it before you accept it.

    agentInstalls cleanly
    Install line
    Type this inside Claude Code
    /plugin install feature-dev@claude-plugins-official

    For Claude Code. All steps and how we tested it

  2. Reviewers for code changes

    PR Review Toolkit (Anthropic)

    Six reviewers that check a change for missing tests, hidden errors and unclear code.

    agentInstalls cleanly
    Install line
    Type this inside Claude Code
    /plugin install pr-review-toolkit@claude-plugins-official

    For Claude Code. All steps and how we tested it

  3. A shop of focused helpers

    wshobson agents

    A large shop of focused helpers. You install only the few you need.

    agentInstalls cleanly
    Install: step 1 of 2
    Step 1 of 2 · Type this inside Claude Code
    /plugin marketplace add wshobson/agents

    For Claude Code. All steps and how we tested it

All agents

Connectors (MCP servers)

  1. Control a browser

    Playwright MCP

    Lets your assistant open web pages and click and type like you do.

    RecommendedconnectorPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude mcp add playwright npx @playwright/mcp@latest

    For Claude Code. All steps and how we tested it

  2. Current docs for code libraries

    Context7

    Gives your assistant the current docs for code libraries, so it stops using old commands.

    RecommendedconnectorPartly tested (needs an account)
    Install line
    Paste this in the terminal
    npx ctx7 setup

    For any assistant. All steps and how we tested it

  3. Check your site in Chrome

    Chrome DevTools MCP

    Lets your assistant open your site in Chrome, read its errors and check its speed.

    connectorPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

    For Claude Code. All steps and how we tested it

  4. Work with your GitHub projects

    GitHub MCP Server

    Lets your assistant work with your GitHub projects, issues and pull requests.

    connectorPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude mcp add github -e GITHUB_PERSONAL_ACCESS_TOKEN=$GITHUB_PAT -- docker run -i --rm -e GITHUB_PERSONAL_ACCESS_TOKEN ghcr.io/github/github-mcp-server

    For Claude Code. All steps and how we tested it

All connectors

Superpowers Pack · early access

The Web Developer Superpowers Pack

Everything on this page is free to install by hand. The Superpowers Pack is our paid product: one command with your licence key superpowers and configures your AI: rules, safe settings and ready skills, plus premium superpowers for this kind of work.

Premium superpowers: Get found on Google · Speed doctor · Schema builder · Semantic content brief.

Help included: if the install does not work or you get stuck, email us and a person helps you. Prices include VAT.

Get early access