plugins/core/skills/playwright-browser/SKILL.md
Use when automating browsers, testing pages, taking screenshots, checking UI, verifying login flows, or testing responsive behavior
npx skillsauth add technickai/ai-coding-config playwright-browserInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
node $SKILL_DIR/run.js /tmp/playwright-task.js
For inline code (variables are auto-injected, see below):
node $SKILL_DIR/run.js "const b = await chromium.launch(); const p = await b.newPage(); await p.goto('http://localhost:3000'); console.log(await p.title()); await b.close();"
$SKILL_DIR is where you loaded this file from. </execution>
<headless-vs-headed> Default: headless (invisible, less intrusive).Use { headless: false } when user wants to see the browser. You know when that is.
</headless-vs-headed>
BASE_URL - from PLAYWRIGHT_BASE_URL env varCI_ARGS - browser args for CI (['--no-sandbox', '--disable-setuid-sandbox'])EXTRA_HEADERS - from PW_HEADER_NAME/VALUE or PW_EXTRA_HEADERSchromium, firefox, webkit, devices - from playwrightExample:
node $SKILL_DIR/run.js "
const browser = await chromium.launch({ args: CI_ARGS });
const page = await browser.newPage();
await page.goto(BASE_URL || 'http://localhost:3000');
console.log(await page.title());
await browser.close();
"
</injected-variables>
<auto-install>
run.js auto-installs Playwright on first use. No manual setup needed.
</auto-install>
<advanced-patterns>
For network mocking, auth persistence, multi-tab, downloads, video, traces:
[API_REFERENCE.md](API_REFERENCE.md)
</advanced-patterns>research
Use when analyzing YouTube videos, extracting insights from tutorials, researching video content, or learning from talks and presentations
tools
Use when writing prompts, agent instructions, SKILL.md, commands, system prompts, Task tool prompts, prompt engineering, or LLM-to-LLM content
development
Use when writing, reviewing, or refactoring React or Next.js code, optimizing React performance, fixing re-render issues, reducing bundle size, eliminating waterfalls, or improving data fetching patterns
development
Use when debugging bugs, test failures, unexpected behavior, or needing to find root cause before fixing