Add case study: Playwright MCP best practices for Claude Code CLI by konard · Pull Request #1285 · link-assistant/hive-mind

konard · 2026-02-13T22:26:18Z

Summary

This PR adds a comprehensive case study investigating Playwright MCP best practices for Claude Code CLI (Issue #1284).

Key Findings

Three Approaches to Playwright in Claude Code (2026):
- Playwright MCP (manual): claude mcp add playwright npx @playwright/mcp@latest
- Official Playwright Plugin: /plugin install playwright@claude-plugins-official (wraps the same MCP server)
- Community Playwright Skill: lackeyjb/playwright-skill (Claude writes and executes Playwright code directly)
The frontend-design plugin is NOT related to Playwright — it's an Anthropic design aesthetics skill (324K+ installs)
Correct plugin install commands:
- ❌ claude plugin install @anthropic/frontend-design
- ❌ /plugin install frontend-design@anthropics-claude-code
- ✅ /plugin install frontend-design@claude-plugins-official
- ✅ /plugin install playwright@claude-plugins-official
MCP and Plugin can coexist — the official plugin wraps the same MCP server, so choose one. The community Playwright Skill (approach 3) IS complementary and can be used alongside either.

Files Changed

docs/case-studies/issue-1284/README.md - Comprehensive case study with:
- Original MCP vs CLI+Skills analysis
- NEW: Claude Code plugins ecosystem section (2026-03-14)
- Feature comparison tables for all approaches
- Correct plugin commands and coexistence guide
- Security and troubleshooting recommendations
docs/case-studies/issue-1284/research-sources.md - All 20+ research sources consulted
.changeset/playwright-mcp-best-practices.md - Changeset for version bump

Recommendations

For most Claude Code CLI users (simplest path):

# Install official Playwright plugin (wraps MCP server)
/plugin install playwright@claude-plugins-official

# Pre-install browsers
npx playwright install

For advanced users wanting both MCP tools AND efficient scripted testing:

# Official plugin for MCP-based browser automation
/plugin install playwright@claude-plugins-official

# Community skill for script-based testing (complementary)
/plugin marketplace add lackeyjb/playwright-skill
/plugin install playwright-skill@playwright-skill

Test Plan

Verify case study follows existing format in docs/case-studies/
Verify all plugin commands against official documentation
Confirm official Playwright plugin wraps same MCP server (verified .mcp.json source)
Confirm frontend-design plugin has no Playwright dependency (verified SKILL.md source)
Ensure changeset is properly formatted

Fixes #1284

🤖 Generated with Claude Code

Adding CLAUDE.md with task information for AI processing. This file will be removed when the task is complete. Issue: #1284

This case study investigates the best practices for using Playwright with Claude Code CLI, comparing two primary approaches: - MCP (Model Context Protocol): claude mcp add playwright npx @playwright/mcp@latest - CLI + Skills: playwright-cli install --skills Key findings: - MCP approach is recommended for most users (simplest setup) - CLI + Skills offers ~33% token savings for high-throughput scenarios - Both approaches are valid and can be used together - No --tool claude flag exists (commands work independently) Includes: - Comparative analysis with feature table - Configuration examples and best practices - Security recommendations and troubleshooting guide - Comprehensive research sources with 15+ external references Resolves #1284 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

This reverts commit 5dbe9b8.

konard · 2026-02-13T22:33:01Z

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

Public pricing estimate: $2.312304
Calculated by Anthropic: $1.877659 USD
Difference: $-0.434645 (-18.80%)
📎 Log file uploaded as Gist (376KB)
🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

konard · 2026-03-14T13:19:25Z

In latest versions of Claude Code there new plugins suggestions. Are they are better than Playwright MCP, how it all work? I know plugin uses playwright-cli, instead of MCP server of Playwright MCP. What else it does and how?

Are these commands are correct?

claude plugin install @anthropic/frontend-design
/plugin install frontend-design@anthropics-claude-code

Can we support both Playwright MCP and Playwright Plugin? Or we should allow our users to switch between them using options? What options we already have?

Give me summary of current situation and proposed solutions.

konard · 2026-03-14T13:59:23Z

🤖 AI Work Session Started

Starting automated work session at 2026-03-14T13:59:21.342Z

The PR has been converted to draft mode while work is in progress.

This comment marks the beginning of an AI work session. Please wait for the session to finish, and provide your feedback.

Address PR feedback about Claude Code plugins vs Playwright MCP: - Document three approaches: MCP server, official plugin, community skill - Clarify frontend-design plugin is NOT related to Playwright - Correct plugin install command syntax - Analyze MCP and plugin coexistence options - Add updated recommendations for 2026-03 - Add new research sources for plugin ecosystem Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

konard · 2026-03-14T14:04:29Z

Summary: Claude Code Plugins vs Playwright MCP (2026-03)

Answering your questions:

1. Are Claude Code plugins better than Playwright MCP?

The official Playwright plugin (/plugin install playwright@claude-plugins-official, 102K+ installs, by Microsoft) is a thin wrapper around the same @playwright/mcp@latest MCP server. Verified from source — its .mcp.json is literally {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}. So it's functionally identical, just packaged for easier management via the plugin system.

The community Playwright Skill (lackeyjb/playwright-skill) takes a different approach — Claude writes and executes Playwright code directly instead of using MCP tools. It's more token-efficient (~314 lines of instructions) but designed for "scriptable manual testing", not CI/CD.

2. The frontend-design plugin is NOT related to Playwright. It's an Anthropic design aesthetics skill (324K+ installs) that helps Claude create visually distinctive UI code. No browser automation capability.

3. Correct plugin install commands:

Incorrect	Correct
`claude plugin install @anthropic/frontend-design`	`/plugin install frontend-design@claude-plugins-official`
`/plugin install frontend-design@anthropics-claude-code`	`/plugin install frontend-design@claude-plugins-official`

Syntax: /plugin install {plugin-name}@{marketplace-name}. The official marketplace is claude-plugins-official (pre-configured).

4. Can both Playwright MCP and Playwright Plugin coexist?

MCP (manual) + Plugin (official) = ❌ redundant (same MCP server, would conflict)
MCP/Plugin + Playwright Skill (community) = ✅ complementary (different mechanisms)

5. Recommended setup:

# Simplest: official plugin
/plugin install playwright@claude-plugins-official
npx playwright install

# Optional: add community skill for script-based testing
/plugin marketplace add lackeyjb/playwright-skill
/plugin install playwright-skill@playwright-skill

All findings have been added to the case study in docs/case-studies/issue-1284/README.md.

Sources: Claude Code Plugins Docs · Discover Plugins Docs · Official Playwright Plugin Source · Frontend Design Plugin · Playwright Skill HN

konard · 2026-03-14T14:04:59Z

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

Public pricing estimate: $3.119977
Calculated by Anthropic: $1.951847 USD
Difference: $-1.168130 (-37.44%)
📎 Log file uploaded as Gist (955KB)
🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

konard · 2026-03-14T14:05:05Z

🔄 Auto-restart triggered (attempt 1)

Reason: CI failures detected

Starting new session to address the issues.

Auto-restart-until-mergeable mode is active. Will continue until PR becomes mergeable.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

konard · 2026-03-14T14:07:27Z

🔄 Auto-restart-until-mergeable Log (iteration 1)

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

Public pricing estimate: $0.651754
Calculated by Anthropic: $0.308116 USD
Difference: $-0.343638 (-52.73%)
📎 Log file uploaded as Gist (1194KB)
🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

konard · 2026-03-14T14:08:31Z

✅ Ready to merge

This pull request is now ready to be merged:

All CI checks have passed
No merge conflicts
No pending changes

Monitored by hive-mind with --auto-restart-until-mergeable flag

konard · 2026-03-19T08:47:07Z

/plugin install frontend-design@claude-code-plugins

Explain me in detail how it works, what it contains. Do we source code of it?

konard · 2026-03-19T08:50:11Z

🤖 AI Work Session Started

Starting automated work session at 2026-03-19T08:50:09.432Z

The PR has been converted to draft mode while work is in progress.

This comment marks the beginning of an AI work session. Please wait for the session to finish, and provide your feedback.

Add detailed section on the frontend-design plugin requested in PR comment, covering source code, file structure, how the Skills primitive works, SKILL.md contents, and correct install commands for both claude-code-plugins and claude-plugins-official marketplaces. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

konard · 2026-03-19T08:54:31Z

`frontend-design@claude-code-plugins`: How It Works

Researched the source code directly. Here's a full breakdown.

The Two Marketplaces (Important Distinction)

There are two different marketplaces for this plugin:

Marketplace Name	GitHub Repo	Pre-configured?
`claude-code-plugins`	`anthropics/claude-code` (demo plugins dir)	❌ Must `add` first
`claude-plugins-official`	`anthropics/claude-plugins-official`	✅ Yes

The command /plugin install frontend-design@claude-code-plugins works, but requires first running:

/plugin marketplace add anthropics/claude-code
/plugin install frontend-design@claude-code-plugins

The simpler alternative (no setup):

/plugin install frontend-design@claude-plugins-official

Both install the same plugin from the same Anthropic authors (Prithvi Rajasekaran & Alexander Bricken).

Source Code

Open source in two locations:

File Structure

plugins/frontend-design/
├── .claude-plugin/
│   └── plugin.json          ← metadata (name, version, author)
├── skills/
│   └── frontend-design/
│       └── SKILL.md         ← the actual instructions
├── LICENSE
└── README.md

This is a skills-only plugin — zero MCP servers, zero slash commands, zero hooks. Just one SKILL.md file.

How It Works Technically

Claude Code has a Skills primitive: when a plugin contains a SKILL.md, Claude Code reads the description field in its YAML frontmatter and automatically injects the skill into Claude's context when that description matches the task. No slash command is needed.

SKILL.md frontmatter:

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality.
  Use this skill when the user asks to build web components, pages, or applications.
  Generates creative, polished code that avoids generic AI aesthetics.
---

When you ask Claude to "build a web component" or "create a page", Claude Code detects the match and loads the SKILL.md into the system context automatically.

What SKILL.md Instructs Claude

The skill instructs Claude to commit to a bold aesthetic direction before writing any code. Specifically:

Aesthetic archetype (pick one): brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian
Typography: No Inter, Roboto, Arial, Space Grotesk, system defaults. Use distinctive display/body font pairings
Color: Dominant palette with sharp accents. No timid evenly-distributed palettes
Motion: CSS-only animations for HTML; Motion library for React. One orchestrated page-load animation beats scattered micro-interactions
Layout: Asymmetry, overlap, diagonal flow, grid-breaking elements
Backgrounds: Gradient meshes, noise textures, geometric patterns, grain overlays — never plain solid colors
Hard rule: NEVER use purple gradients on white or predictable cookie-cutter layouts

Summary

Aspect	Detail
Plugin type	Skills-only (no MCP, no commands)
Core file	`SKILL.md` (auto-injected by context matching)
Authors	Prithvi Rajasekaran & Alexander Bricken (Anthropic)
Installs	277,000+
Related to Playwright	❌ No — pure UI design aesthetics
Source available	✅ Yes, open source on GitHub

The full analysis has been added to docs/case-studies/issue-1284/README.md.

konard · 2026-03-19T08:54:52Z

🤖 Solution Draft Log

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

Public pricing estimate: $0.581157
Calculated by Anthropic: $0.592154 USD
Difference: $0.010997 (+1.89%)

🤖 Models used:

Tool: Claude
Requested: sonnet
Main model: Claude Sonnet 4.6 (ID: claude-sonnet-4-6, Anthropic, cutoff: 2025-08)
📎 Log file uploaded as Gist (616KB)
🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

konard · 2026-03-19T08:56:02Z

🔄 Auto-restart triggered (attempt 1)

Reason: CI failures detected

Starting new session to address the issues.

Auto-restart-until-mergeable mode is active. Will continue until PR becomes mergeable.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

konard · 2026-03-19T08:57:20Z

🔄 Auto-restart-until-mergeable Log (iteration 1)

This log file contains the complete execution trace of the AI solution draft process.

💰 Cost estimation:

Public pricing estimate: $0.267687
Calculated by Anthropic: $0.171312 USD
Difference: $-0.096375 (-36.00%)

🤖 Models used:

Tool: Claude
Requested: sonnet
Main model: Claude Sonnet 4.6 (ID: claude-sonnet-4-6, Anthropic, cutoff: 2025-08)
📎 Log file uploaded as Gist (834KB)
🔗 View complete solution draft log

Now working session is ended, feel free to review and add any feedback on the solution draft.

konard · 2026-03-19T08:58:25Z

✅ Ready to merge

This pull request is now ready to be merged:

All CI checks have passed
No merge conflicts
No pending changes

Monitored by hive-mind with --auto-restart-until-mergeable flag

Initial commit with task details

5dbe9b8

Adding CLAUDE.md with task information for AI processing. This file will be removed when the task is complete. Issue: #1284

konard self-assigned this Feb 13, 2026

konard changed the title ~~[WIP] Double check Playwright MCP best practices~~ Add case study: Playwright MCP best practices for Claude Code CLI Feb 13, 2026

konard marked this pull request as ready for review February 13, 2026 22:32

Revert "Initial commit with task details"

eb0ba49

This reverts commit 5dbe9b8.

konard marked this pull request as draft March 14, 2026 13:59

konard and others added 2 commits March 14, 2026 14:03

Merge remote-tracking branch 'origin/main' into issue-1284-2cfb3e72d41a

1e965fd

konard marked this pull request as ready for review March 14, 2026 14:04

fix: apply Prettier formatting to case study README

2b069b9

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

konard marked this pull request as draft March 19, 2026 08:50

konard marked this pull request as ready for review March 19, 2026 08:54

konard and others added 2 commits March 19, 2026 08:56

Merge remote-tracking branch 'origin/main' into issue-1284-2cfb3e72d41a

db1484b

fix: apply Prettier formatting to case study README

115a3a8

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Conversation

konard commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Key Findings

Files Changed

Recommendations

Test Plan

Uh oh!

konard commented Feb 13, 2026

🤖 Solution Draft Log

Uh oh!

konard commented Mar 14, 2026

Uh oh!

konard commented Mar 14, 2026

Uh oh!

konard commented Mar 14, 2026

Summary: Claude Code Plugins vs Playwright MCP (2026-03)

Answering your questions:

Uh oh!

konard commented Mar 14, 2026

🤖 Solution Draft Log

Uh oh!

konard commented Mar 14, 2026

🔄 Auto-restart triggered (attempt 1)

Uh oh!

konard commented Mar 14, 2026

🔄 Auto-restart-until-mergeable Log (iteration 1)

Uh oh!

konard commented Mar 14, 2026

✅ Ready to merge

Uh oh!

konard commented Mar 19, 2026

Uh oh!

konard commented Mar 19, 2026

Uh oh!

konard commented Mar 19, 2026

frontend-design@claude-code-plugins: How It Works

The Two Marketplaces (Important Distinction)

Source Code

File Structure

How It Works Technically

What SKILL.md Instructs Claude

Summary

Uh oh!

konard commented Mar 19, 2026

🤖 Solution Draft Log

Uh oh!

konard commented Mar 19, 2026

🔄 Auto-restart triggered (attempt 1)

Uh oh!

konard commented Mar 19, 2026

🔄 Auto-restart-until-mergeable Log (iteration 1)

Uh oh!

konard commented Mar 19, 2026

✅ Ready to merge

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

konard commented Feb 13, 2026 •

edited

Loading

`frontend-design@claude-code-plugins`: How It Works