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

site-e2e-playwright

マーケサイト向け E2E。Playwright CLI、Cursor エージェントのターミナル実行、Playwright MCP(user-playwright)の使い分け。docs/site/e2e-scenarios.md を単一の真実にする(全PJ共通)。

ax-inc-dev/claude-cursor-orchestrationスター 3(GitHub 3 + cccskills 0)
連携ツールPlaywright

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md3.6 KB

SKILL.md(原文)

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

Site E2E + Playwright(全PJ共通)

When to Use

  • ユーザーが E2E実行 と合図したとき
  • site-build-orchestrator の実装後、受け入れを機械的に確認するとき
  • Subagent site-e2e-runner が従う手順の正本

単一の真実

  • docs/site/e2e-scenarios.md — シナリオ・Given-When-Then・回帰チェックリスト
  • リポに Playwright がある場合は e2e/ または tests/e2e/ 等の既存規約に シナリオ ID または見出しで対応づけを書く(本 SKILL の「対応表」節)

実行経路(優先順)

A. Playwright CLI(本命・CI とも一致させやすい)

  1. プロジェクトルートで package.json に @playwright/test または playwright があるか確認。
  2. dev サーバーが必要なら、別ターミナルまたは webServer in playwright.config で起動済みにする。
  3. エージェントは Cursor の Agent チャットからターミナルツールでコマンド実行する(実行環境は Cursor の エージェント用シェル/サンドボックス設定に従う。失敗時はユーザーへ同コマンドの手元実行を依頼)。
  4. 標準コマンド例(プロジェクトの scripts に合わせて置換):
    • npx playwright test
    • npx playwright test --grep "@smoke"
    • プレビュー URL だけ触る場合: npx playwright test --config=playwright.config.ts(中で baseURL を環境変数化)

B. Playwright MCP(user-playwright / playwright)

CLI 不在、或いは 探索的に e2e-scenarios.md をなぞるとき。

  1. MCP ツールのスキーマを mcps/user-playwright/tools/*.json 等で確認してから call_mcp_tool する。
  2. サーバー名: user-playwright(環境により表示名は playwright)。
  3. 典型フロー: browser_navigate → browser_snapshot → browser_click / browser_type → 必要なら browser_take_screenshot。
  4. シナリオごとに結果を簡潔に記録し、最後に パス / 失敗 / 未実施 を一覧にする。

C. 手動

自動化が無い場合でも、e2e-scenarios.md のチェックリストを 人が潰す前提で、エージェントは手順と期待結果だけ出す。

Cursor エージェント環境について

  • ターミナル経由の Playwrightは、Cursor が Agent に与える 隔離・権限制約の影響を受ける(ネットワーク禁止・特定パス読み取り専用等)。失敗したらログを貼り、ユーザー側のローカル or CI で再現させる。
  • MCP ブラウザは 別プロセスのことが多く、CLI と同じ baseURL を明示して揃える。

e2e-scenarios.md に書くとよい追加欄

各シナリオに次を任意で追加:

  • Playwright: ファイル名 + test.describe / テスト名、または @tag
  • MCP: 主要ステップの一行要約

完了の宣言

テストを実際に実行し、終了コード(または MCP 相当の証跡)と要約を出してから「パス」と言う。ホームに verification-before-completion SKILL があればそれにも従う。

参考

レビュー

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

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

b2b-site-strategy-and-ia

無料概要あり

B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用(全PJ共通)。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

babysit

無料

Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.

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

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

biz-presentation-engine

無料概要あり

法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書(アウトライン+テンプレート指定+カラー+コンテンツ)を受け取り、単一HTMLファイルとして実装する。43種テンプレート+14種アニメーション。トリガー:プレゼン実装、スライドHTML生成、提案資料コーディング。

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent, requirements and design before implementation.

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

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

canvas

無料

A Cursor Canvas is a live React app that the user can open beside the chat. You MUST use a canvas when the agent produces a standalone analytical artifact — quantitative analyses, billing investigations, security audits, architecture reviews, data-heavy content, timelines, charts, tables, interactive explorations, repeatable tools, or any response that benefits from visual layout. Especially prefer a canvas when presenting results from MCP tools (Datadog, Databricks, Linear, Sentry, Slack, etc.) where the data is the deliverable — render it in a rich canvas rather than dumping it into a markdown table or code block. If you catch yourself about to write a markdown table, stop and use a canvas instead. You MUST also read this skill whenever you create, edit, or debug any .canvas.tsx file.

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

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

Authors Cursor Rules (.cursor/rules/*.mdc) and custom Subagents (.cursor/agents/*.md or ~/.cursor/agents). Use when creating or refactoring rules/subagents, splitting large rules, choosing subagent vs skill, setting model/readonly/background, or replacing repeated delegation prompts.

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

ax-inc-dev/claude-cursor-orchestration32026年4月25日 更新

ax-inc-dev のスキルをすべて見る

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