메뉴
Control the user Chrome browser via Playwriter extension with Playwright code snippets in a stateful local js sandbox. Automate web interactions, take screenshots, inspect accessibility trees, and debug web applications.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
MANDATORY entry point for ALL research tasks. Orchestrates gatherer agents — brain decides agent count, languages, iterations, and depth at runtime based on the actual question. Default languages: EN + ZH + ZH-TW. Triggers: any research request, 'research X', 'what's the best', 'compare X vs Y', 'how should I approach', 'evaluate X', 'deep research', 'comprehensive analysis', 'team research' (live supervised agent-team venue). ALL research goes through lead-researcher first — never spawn gatherer agents directly.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing, layout, alignment, color, motion, micro-interactions, UX copy, error states, edge cases, i18n, and reusable design systems or tokens. Also use for bland designs that need to become bolder or more delightful, loud designs that should become quieter, live browser iteration on UI elements, or ambitious visual effects that should feel technically extraordinary. Not for backend-only or non-UI tasks.
Visual design verification loop for matching a goal PNG to a live render. Use when the user shares a design mock / goal image and asks to match the UI to it, asks to "iterate on this design" or "match this 1:1", or calls out visual drift in a previous UI iteration. Provides histogram color sampling, shape inspection (radius/border/shadow/bg-mode/fill-vs-context), computed-style checking on the live render, snap, and side-by-side diff. After every UI change the assistant MUST snap the live render and Read the snap with the Read tool before reporting the change done — skipping that is the
Deep internet gathering — the search-fetch loop, query templates, multi-source/GitHub patterns, and retrieval tools. ONE job: collect raw sources and data from the internet on an assigned topic/language. Run standalone to deep-gather a topic, or as the GATHER-DATA step of lead-researcher's research loop. Does NOT reason, steer, or synthesize — that is lead-researcher's brain. Triggers: 'deep gather', 'gather sources/data on X', 'collect everything about Y'.
Search GitHub for repos, code, and usage examples using gh CLI. Capabilities: repo discovery, code search, finding library usage patterns, issue/PR search. Actions: search, find, discover repos/code/examples. Keywords: gh, github, search repos, search code, find examples, how to use library, stars, language filter. Use when: finding repositories, searching code patterns, discovering how libraries are used, exploring open source.
ALWAYS invoke this skill when the user asks about Claude Code features, configuration, extensibility, or project setup. ALWAYS invoke when the user wants to create, improve, or refine a Claude Agent Skill — including 'make this a skill', 'turn this into a skill', 'create a skill for X', or asks about SKILL.md authoring, frontmatter, description optimization, progressive disclosure, or triggering strategy. Modules: CLI tool (setup, slash commands, MCP servers, hooks, plugins, CI/CD), extensibility (agents, skills, output styles), CLAUDE.md (project instructions, optimization). Keywords: Claude Code, skill, SKILL.md, agent, hook, plugin, MCP, CLAUDE.md, skill architecture, description optimization, progressive disclosure. For skill body content quality (soul, tensions, mental models), also invoke prompt-architect. Do NOT use for general prompt engineering without a Claude Code context.
| name | playwriter |
| description | Control the user Chrome browser via Playwriter extension with Playwright code snippets in a stateful local js sandbox. Automate web interactions, take screenshots, inspect accessibility trees, and debug web applications. |
# Get a session ID first
playwriter session new
# => 1
# Execute code with your session
playwriter -s 1 -e "await page.goto('https://example.com')"
playwriter -s 1 -e "console.log(await accessibilitySnapshot({ page }))"
playwriter -s 1 -e "await page.screenshot({ path: 'shot.png', scale: 'css' })"
If playwriter is not found, use npx playwriter@latest or bunx playwriter@latest.
Always run playwriter skill to get the complete, up-to-date skill instructions.
The skill command outputs detailed docs on:
state, page, context)getCleanHTML, getCDPSession, createDebugger, etc.)playwriter skill