Add case study: Playwright MCP best practices for Claude Code CLI

[konard]

Summary

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

Key Findings

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

2. The frontend-design plugin is NOT related to Playwright — it's an Anthropic design aesthetics skill (324K+ installs)

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

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

[konard]

🤖 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]

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]

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

[konard]

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]

🤖 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]

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

[konard]

🔄 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]

✅ 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