Synthesising Code & Craft

# Browse the plugin manager — Discover / Installed / Marketplaces / Errors tabs
/plugin

# Install from the official marketplace
/plugin install frontend-design@claude-plugins-official

# Add the community marketplace, then install from it
/plugin marketplace add anthropics/claude-plugins-community
/plugin install <name>@claude-community

# Any GitHub repo with .claude-plugin/marketplace.json works as a marketplace
/plugin marketplace add owner/repo

# Manage without opening the panel
/plugin list
/plugin disable <name>@<marketplace>
/plugin uninstall <name>@<marketplace>
/reload-plugins        # apply changes without restarting

// .claude/agents/design-reviewer.md
---
name: design-reviewer
description: Reviews rendered UI against the design system. Use after any component change.
tools: Read, Grep, Glob
model: sonnet
skills:
  - frontend-design
memory: project
---

You are a design reviewer. For every issue, name the token or rule
it violates, quote the offending code, and give the corrected version.

Check spacing scale adherence, type hierarchy, contrast ratios,
and interaction states. Be specific — never say "improve spacing".

# Three ways to invoke
Use the design-reviewer agent to check my changes   # natural language
@"design-reviewer (agent)" audit the settings panel  # explicit, guaranteed
claude --agent design-reviewer                       # as the main thread

// .claude/settings.json — run the formatter after every write
{
  "hooks": {
    "PostToolUse": [
      {
        "matcher": "Write|Edit",
        "hooks": [
          {
            "type": "command",
            "command": "jq -r '.tool_input.file_path' | xargs npm run lint:fix",
            "statusMessage": "Formatting…",
            "timeout": 30
          }
        ]
      }
    ]
  }
}

# Compare options instead of describing them
Make an artifact with four distinctly different layouts for the settings
panel. Vary density and grouping, lay them out as a grid with a one-line
tradeoff under each.

# Tune values directly rather than guessing
Build an artifact with sliders for the easing curve, duration and delay
so I can try values on this transition. Show the animation live.

# Bring the decision back into the session
Make a triage board with each issue as a draggable card. Add a
"Copy as prompt" button that gives me the final ordering to paste back.

# Update one from a different session — the URL is required
Update https://claude.ai/code/artifact/<id> with today's numbers.