From essentials
Browser automation with Playwright CLI. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, extract data, or run e2e tests. Triggers on requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data", "test this web app", "automate browser actions", or any task requiring programmatic web interaction.
npx claudepluginhub sherifattia/my-pluginsThis skill is limited to using the following tools:
If `playwright-cli` is not in PATH, use the plugin-installed binary:
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
If playwright-cli is not in PATH, use the plugin-installed binary:
${CLAUDE_PLUGIN_DATA}/node_modules/.bin/playwright-cli
Every browser automation follows this pattern:
playwright-cli open <url> or just playwright-cli open then playwright-cli goto <url>playwright-cli snapshot — returns element refs like e1, e2, e3playwright-cli open https://example.com/form
playwright-cli snapshot
# Output shows: e1 [input "Email"], e2 [input "Password"], e3 [button "Submit"]
playwright-cli fill e1 "user@example.com"
playwright-cli fill e2 "password123"
playwright-cli click e3
playwright-cli snapshot # check result
playwright-cli open https://example.com
playwright-cli goto https://other.com
playwright-cli click e3
playwright-cli dblclick e7
playwright-cli fill e5 "text"
playwright-cli type "search query"
playwright-cli select e9 "option-value"
playwright-cli hover e4
playwright-cli drag e2 e8
playwright-cli check e12
playwright-cli uncheck e12
playwright-cli upload ./file.pdf
playwright-cli press Enter
playwright-cli go-back
playwright-cli go-forward
playwright-cli reload
playwright-cli snapshot
playwright-cli snapshot --filename=after-login.yaml
playwright-cli screenshot
playwright-cli screenshot --filename=page.png
playwright-cli screenshot e5 # screenshot specific element
playwright-cli pdf --filename=page.pdf
playwright-cli tab-list
playwright-cli tab-new https://example.com
playwright-cli tab-select 0
playwright-cli tab-close
playwright-cli -s=session1 open https://site-a.com
playwright-cli -s=session2 open https://site-b.com
playwright-cli -s=session1 snapshot
playwright-cli -s=session2 snapshot
playwright-cli close-all
playwright-cli eval "document.title"
playwright-cli eval "el => el.textContent" e5
playwright-cli run-code "async page => {
await page.goto('https://example.com');
const title = await page.title();
console.log(title);
}"
playwright-cli route "**/*.jpg" --status=404
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
playwright-cli route-list
playwright-cli unroute "**/*.jpg"
playwright-cli state-save auth.json
playwright-cli state-load auth.json
playwright-cli cookie-list
playwright-cli cookie-set session_id abc123
playwright-cli localstorage-get theme
playwright-cli localstorage-set theme dark
playwright-cli console # view console messages
playwright-cli network # view network requests
playwright-cli tracing-start # start performance trace
playwright-cli tracing-stop # stop and save trace
playwright-cli video-start # record video
playwright-cli video-stop out.webm
playwright-cli close # close current browser
playwright-cli close-all # close all sessions
playwright-cli kill-all # force kill all browsers