Claude Code Plugin
Purpose
- Use
/plugin to add a plugin marketplace and install reusable plugins.
- A plugin is a packaged capability (prompt/workflow/tooling guidance) that can be reused in Claude Code.
- Typical flow: add marketplace source → install plugin → use plugin in task flow.
Commands
/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins
Command 1: Add Marketplace
- Command:
/plugin marketplace add anthropics/claude-code
- What it is:
- This points Claude Code to a GitHub-based marketplace source.
- Marketplace sources expose one or more installable plugins.
- How to use:
- Run the command in Claude Code.
- Open
/plugin UI and confirm the marketplace appears.
- Browse available plugins from that source.
- If it fails:
- Verify repo path and visibility (public/private access).
- Confirm your Claude Code version supports plugins/marketplace.
Command 2: Install frontend-design
- Command:
/plugin install frontend-design@claude-code-plugins
- What it is:
- Installs the
frontend-design plugin from marketplace claude-code-plugins.
- Intended to improve frontend output quality (layout, visual hierarchy, consistency, implementation patterns).
- How to use after install:
- Start a frontend task normally.
- Explicitly ask Claude Code to apply
frontend-design rules for that task.
- Validate output with quick checks: responsiveness, spacing/typography consistency, and component structure.
- Suggested prompt pattern:
Use frontend-design plugin for this page refactor. Keep existing design system tokens.
Verification Checklist
/plugin page shows:
- Marketplace added successfully.
frontend-design listed as installed.
- First real usage:
- Run on one page/component first.
- Compare before/after and keep only useful deltas.
Notes
- Plugin ecosystem can evolve; marketplace names and available plugins may change over time.
- Keep plugin usage scoped and explicit in prompts to avoid unintended broad changes.
References