17 Claude Code Plugins and Skills to Review

These tools solve different parts of the job: finding reusable skills, planning the build, checking interface rules, improving the visual system, and testing the real page in a browser.

What this helps you do

Use the group that matches the reel you watched. The page includes every named tool from the Week 2 and Week 3 plugin reels.

Before you start

Install Claude Code, Git, and Node.js 18 or newer. Use a test repository with a clean commit and no secrets. Inspect each repository, license, install script, permissions, hooks, and open issues before installation.

Terms to know

• Skill: reusable instructions that shape how an agent handles a task.
• Design system: shared rules for type, color, spacing, components, and states.
• Accessibility: whether people with different abilities can use the interface.
• Browser test: opening the real page and checking how it renders and behaves.

Step-by-step

1. Find Skills: search the skills catalog for a narrow need, then inspect the source before installing it.
2. Superpowers: use its planning, implementation, and verification workflow for a structured build.
3. Web Interface Guidelines: review the page against Vercel's interface rules and accessibility checks.
4. Impeccable: critique hierarchy, typography, spacing, color, responsiveness, and component states.
5. Playwright CLI: open the built site, take screenshots, inspect states, and test the interactions that matter.

The five workflow and memory plugins

1. Claude Mem: carries compressed context into later sessions. Verify what it stores and where before enabling it.
2. Superpowers: adds planning, testing, debugging, and review workflows.
3. Ralph Loop: repeats an implementation loop toward a completion condition. Set a hard stop and review budget before running it.
4. GSD: organizes plans and work around smaller context windows to reduce drift.
5. Context7: retrieves current library documentation. Check that the returned version matches your project.

The five maintenance plugins

1. Hookify: turns repeated corrections into markdown guardrails and hooks.
2. Feature Dev: separates exploration, architecture, implementation, and review for a feature.
3. Code Simplifier: removes unnecessary complexity while preserving behavior. Keep tests in place.
4. Claude MD Management: reviews and updates project instructions so stale rules do not keep winning.
5. Session Report: shows where a session used context, agents, skills, and tools so you can find expensive or noisy steps.

The five review plugins

1. Security Guidance: checks for secrets, authentication mistakes, and injection risks while code is written.
2. Playwright: opens the real site, clicks through it, and captures screenshots and browser errors.
3. Frontend Design: applies design-system, layout, and accessibility guidance.
4. Code Simplifier: reviews changed code for unnecessary complexity.
5. Code Review: uses specialized review passes and confidence filtering before a pull request is accepted.

Several names are available through the Claude plugin directory. Search the exact name, confirm the publisher, read the files and requested hooks, and use the live listing as the install source. Do not install a same-named community package just because the title matches.

Current install paths

Type this inside Claude Code:

/plugin install superpowers@claude-plugins-official

Run these from your test project's normal terminal:

# Find Skills search
npx skills find [DESIGN OR DEVELOPMENT NEED]

# Vercel's Web Interface Guidelines skill
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

# Impeccable for Claude Code, project scope
npx impeccable install --providers=claude --scope=project

# Microsoft's Playwright CLI and its agent skills
npm install -g @playwright/cli@latest
playwright-cli install --skills

Impeccable can add a project hook and may download its engine on first use. Read the prompt and inspect the files before approving the hook. Playwright CLI requires Node.js 18 or newer.

Copy this

Search for a skill from your normal terminal:

npx skills find [DESIGN OR DEVELOPMENT NEED]

Use this review request after the site is running:

Open [LOCAL OR STAGING URL]. Check desktop and mobile. Take screenshots of the landing page, navigation, form states, and one error state. Review hierarchy, type, spacing, contrast, keyboard use, focus states, labels, overflow, and broken interactions. Give me the evidence first. Do not change code until I approve the fixes.

Things to know

These projects are not one official Claude package. Install instructions can change. A guideline audit can miss problems, and a visually attractive page can still fail accessibility or usability checks. Browser automation sees the states you test, not every device or user path. Never give an unknown skill access to production credentials on its first run.

If something goes wrong

• If npx skills returns the wrong project, stop and verify the repository and publisher.
• If Playwright cannot open the page, confirm the development server and URL first.
• If a screenshot looks right but interaction fails, test keyboard, hover, focus, loading, empty, and error states separately.
• If a skill makes broad changes, inspect the Git diff and keep only the reviewed edits.

Final check

The workflow passes when the page follows one clear design system, major accessibility issues are addressed, desktop and mobile screenshots are reviewed, critical interactions work, and every installed tool can be removed cleanly.