From zero to AI hero
Superpowers PackGet superpowers
From zero to AI hero

Must-haves for…

Start in 10 minutes

Plain-word guides and superpowers for Claude Code, Codex and Gemini.

Free Free catalog: tested by us, made by others

All add-ons

Add-ons give your assistant new abilities: skills teach it a job, agents are helpers it can hand work to, and connectors link it to other programs. Every add-on here was installed on a clean test system first.

The tabs filter the list below for that kind of work.

Skills, Agents and Connectors Explained

Start here: must-haves for web developers

Most useful first. Install the first one, try it, then add more.

Start with this one

  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. 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. 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

17 add-ons match your filters

17 add-ons match your filters.

  • Good habits for building websites

    Addy Osmani Agent Skills

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

    RecommendedskillInstalls cleanly
    Install line
    Paste this in the terminal
    npx skills add addyosmani/agent-skills

    For any assistant. All steps and how we tested it

  • 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

  • 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

  • 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

  • Pick colours, fonts and layouts

    UI/UX Pro Max

    Helps the assistant choose colours, fonts and layouts that look good.

    RecommendedskillPartly tested (needs an account)
    Install: step 1 of 2
    Step 1 of 2 · Type this inside Claude Code
    /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill

    For Claude Code. All steps and how we tested it

  • Security review of your code

    Trail of Bits Skills

    Security experts’ checklists to review your own code.

    RecommendedskillPartly tested (needs an account)
    Install: step 1 of 2
    Step 1 of 2 · Type this inside Claude Code
    /plugin marketplace add trailofbits/skills

    For Claude Code. All steps and how we tested it

  • 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

  • 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

  • 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

  • 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

  • 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

  • Add payments with Stripe

    Stripe AI Toolkit

    Stripe's official plugin with skills and tools that help an agent add payments, check out pages and billing to an app.

    skillPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude plugin install stripe@claude-plugins-official

    For Claude Code. All steps and how we tested it

  • Build phone apps

    Expo Skills

    Helps the assistant build phone apps.

    skillPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude plugin install expo@claude-plugins-official

    For Claude Code. All steps and how we tested it

  • Design a safe database

    pg-aiguide

    Helps the assistant design a safe, tidy database for your app.

    skillInstalls cleanly
    Install: step 1 of 2
    Step 1 of 2 · Paste this in the terminal
    claude plugin marketplace add timescale/pg-aiguide

    For Claude Code. All steps and how we tested it

  • Look up Cloudflare docs

    Cloudflare MCP servers

    Lets your assistant look up Cloudflare’s own docs instead of guessing.

    connectorPartly tested (needs an account)
    Install line
    Paste this in the terminal
    claude mcp add --transport http cloudflare-docs https://docs.mcp.cloudflare.com/mcp

    For Claude Code. All steps and how we tested it

  • Quality and security reviewers

    VoltAgent quality and security subagents

    Reviewers for quality and safety: a security auditor, a tester and an accessibility checker.

    agentInstalls cleanly
    Install: step 1 of 2
    Step 1 of 2 · Paste this in the terminal
    claude plugin marketplace add VoltAgent/awesome-claude-code-subagents

    For Claude Code. All steps and how we tested it

  • Security check for Gemini

    Gemini CLI Security extension

    Lets Gemini check your own code for security problems.

    skillPartly tested (needs an account)
    Install line
    Paste this in the terminal
    gemini extensions install https://github.com/gemini-cli-extensions/security

    For Gemini CLI. All steps and how we tested it

Every must-have for web developers: skills, agents and connectors