本文へ移動
cccskills
無料GitHub で公開

playwright-cli

Use Playwright CLI for ad hoc browser automation and interactive verification of Core UI: opening local routes, navigating, inspecting snapshots, using element refs, checking console/network activity, capturing evidence, tracing, and reproducing flows. Do not use it as a substitute for committed `@playwright/test` coverage or for non-browser unit tests.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md4.6 KB
  • references/upstream.md1.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Playwright CLI in Core

Use Playwright CLI as a token-efficient interactive browser driver. Keep Core's committed Playwright Test suites as the regression and CI source of truth.

Boundary

  • Use this skill to inspect a running app, reproduce a UI problem, exercise a flow, or gather browser evidence.
  • Use docs/ai/skills/playwright-best-practices/SKILL.md when authoring or repairing @playwright/test specs.
  • Use docs/ai/skills/accessibility-review/SKILL.md for accessibility review; a CLI snapshot is useful evidence but is not an axe or WCAG audit.
  • Do not add @playwright/cli to package.json for one-off agent work. Prefer an available playwright-cli binary; otherwise use a Bun one-off invocation.
  • The CLI compares .agents/skills/playwright-cli and .claude/skills/playwright-cli byte-for-byte with its bundled generic skill. Core's repository-adapted skill intentionally differs, so the CLI may print a version-mismatch notice. Do not run its suggested install --skills command; that would overwrite generated mirrors. Refresh the canonical skill and run Core's sync workflow instead.

Start by checking the live command surface:

playwright-cli --help
# If the binary is unavailable:
bunx --bun @playwright/cli@latest --help

Use the same available command prefix for the rest of the session. Help output is authoritative because the CLI evolves independently of Core's pinned @playwright/test package.

Workflow

  1. Find the target. Check whether the relevant Core dev server is already running before starting one. Confirm the exact local URL and expected app state; use Next.js devtools when it can answer route/runtime questions.
  2. Open and snapshot. Open the route and save a shallow snapshot under ignored test-results/; the CLI's default .playwright-cli/ output would dirty this repository. Use find or a focused element snapshot rather than loading an unnecessarily large page tree.
  3. Act through user-facing controls. Prefer snapshot refs or role locators. Refresh the snapshot after navigation or material DOM changes because refs are session state, not durable test selectors.
  4. Observe the result. Confirm visible state and URL, then inspect console messages and network requests when the claim depends on runtime behavior. Use tracing only for failures that need a timeline.
  5. Capture bounded evidence. Store screenshots, traces, videos, PDFs, and saved auth state only under ignored test-results/ or .auth/ paths. Never print, persist, or commit credentials, cookies, service tokens, or Vercel bypass secrets.
  6. Close the session. Close browsers and clean up disposable routes/mocks. If the behavior can regress, convert the proof into a committed Playwright Test spec and run the applicable Core package script.

Compact command set

playwright-cli open http://localhost:3000
playwright-cli snapshot --filename=test-results/playwright-cli/snapshot.yaml --depth=4
playwright-cli find "Sign in"
playwright-cli click e15
playwright-cli fill e21 "demo value"
playwright-cli press Enter
playwright-cli console error
playwright-cli requests
playwright-cli screenshot --filename=test-results/playwright-cli/result.png
playwright-cli close

For multiple roles or apps, use named sessions (-s=<name>) rather than sharing cookies or page state. Prefer demo/test accounts and Core's existing auth helpers. Do not use eval or storage mutation to bypass the behavior being verified; reserve them for narrow inspection or explicitly tested setup.

Checklist

  • The task needs live browser interaction rather than a unit test or static read.
  • An existing dev server and the exact route were checked first.
  • The CLI help for the available version was consulted.
  • Interactions use current refs or user-facing locators and verify outcomes.
  • Console/network/trace evidence is collected only when relevant.
  • Artifacts and auth state stay in ignored paths with no secrets in output.
  • The session is closed, and regression-worthy behavior becomes a test.

Provenance

See references/upstream.md for the reviewed official source, Apache-2.0 license, Core adaptations, and refresh workflow.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Audit and fix accessibility in Core UI. Use when changing or reviewing buttons, links, forms, validation, dialogs, menus, tabs, tables, keyboard interactions, focus management, accessible names, announcements, contrast, touch targets, reduced motion, or WCAG/a11y behavior.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

Use when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted inbound email. Always use this skill when the user wants to receive emails and act on them programmatically, even if they don't mention "agent" — the skill contains critical security patterns (sender allowlists, content filtering, sandboxed processing) that prevent untrusted email from controlling your system.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

anim

無料

Tasteful, subtle web UI animation following Emil Kowalski / animations.dev principles. Use when adding or reviewing interface motion — hover and press feedback, entrances and exits, modals, toasts, menus, loading and skeleton states, staggered reveals, page or view transitions — so motion stays refined and purposeful, not decorative. Covers CSS, Web Animations, and React timing/easing. Pair with the motion skill for motion/react API specifics.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

animate

無料

Build an animation from scratch, making the decisions in the order that determines whether it feels right — should it animate at all, what purpose, which tool, which properties, which curve and duration, how it interrupts, how it exits. Writes the implementation. Use when asked to animate something, add motion, make a component feel alive, or build a transition. For critiquing existing motion use review-animations; for auditing a whole codebase use improve-animations. Only runs when explicitly invoked; it does not trigger on its own.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

Build animations for Expo and React Native only, using Reanimated, Gesture Handler, Expo Router, and expo-haptics. Use when the target runtime is an Expo or React Native app. Do not use it for Core Next.js web motion; use `animate` for web. Only runs when explicitly invoked; it does not trigger on its own.

日本語の概要は準備中です。原文の説明を表示しています。

Asymmetric-al/core3812026年10月10日 更新

Asymmetric-al のスキルをすべて見る

このスキルの問題を報告する