B2B サイトの戦略・情報設計。価値提案・メッセージマップ・ジャーニー導線・意思決定マップ・信頼棚卸・トーン/禁止表現まで一気通貫でテンプレ化する。実装前フェーズ専用(全PJ共通)。
site-e2e-playwright
マーケサイト向け E2E。Playwright CLI、Cursor エージェントのターミナル実行、Playwright MCP(user-playwright)の使い分け。docs/site/e2e-scenarios.md を単一の真実にする(全PJ共通)。
実行スコア 未検証
インストール方法を見る含まれるファイル(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 とも一致させやすい)
- プロジェクトルートで
package.jsonに@playwright/testまたはplaywrightがあるか確認。 - dev サーバーが必要なら、別ターミナルまたは
webServerinplaywright.configで起動済みにする。 - エージェントは Cursor の Agent チャットからターミナルツールでコマンド実行する(実行環境は Cursor の エージェント用シェル/サンドボックス設定に従う。失敗時はユーザーへ同コマンドの手元実行を依頼)。
- 標準コマンド例(プロジェクトの scripts に合わせて置換):
npx playwright testnpx playwright test --grep "@smoke"- プレビュー URL だけ触る場合:
npx playwright test --config=playwright.config.ts(中でbaseURLを環境変数化)
B. Playwright MCP(user-playwright / playwright)
CLI 不在、或いは 探索的に e2e-scenarios.md をなぞるとき。
- MCP ツールのスキーマを
mcps/user-playwright/tools/*.json等で確認してからcall_mcp_toolする。 - サーバー名:
user-playwright(環境により表示名はplaywright)。 - 典型フロー:
browser_navigate→browser_snapshot→browser_click/browser_type→ 必要ならbrowser_take_screenshot。 - シナリオごとに結果を簡潔に記録し、最後に パス / 失敗 / 未実施 を一覧にする。
C. 手動
自動化が無い場合でも、e2e-scenarios.md のチェックリストを 人が潰す前提で、エージェントは手順と期待結果だけ出す。
Cursor エージェント環境について
- ターミナル経由の Playwrightは、Cursor が Agent に与える 隔離・権限制約の影響を受ける(ネットワーク禁止・特定パス読み取り専用等)。失敗したらログを貼り、ユーザー側のローカル or CI で再現させる。
- MCP ブラウザは 別プロセスのことが多く、CLI と同じ
baseURLを明示して揃える。
e2e-scenarios.md に書くとよい追加欄
各シナリオに次を任意で追加:
Playwright: ファイル名 +test.describe/ テスト名、または@tagMCP: 主要ステップの一行要約
完了の宣言
テストを実際に実行し、終了コード(または MCP 相当の証跡)と要約を出してから「パス」と言う。ホームに verification-before-completion SKILL があればそれにも従う。
参考
- Playwright: https://playwright.dev
- Cursor Subagents: https://cursor.com/docs/subagents.md
レビュー
まだレビューはありません。使ってみた感想をお寄せください。
コメント
ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。
まだコメントはありません。最初のコメントを書いてみませんか。
同じリポジトリのスキル
babysit
無料Keep a PR merge-ready by triaging comments, resolving clear conflicts, and fixing CI in a loop.
日本語の概要は準備中です。原文の説明を表示しています。
法人向けHTMLプレゼンスライドの実装エンジン。Claude Codeから指示書(アウトライン+テンプレート指定+カラー+コンテンツ)を受け取り、単一HTMLファイルとして実装する。43種テンプレート+14種アニメーション。トリガー:プレゼン実装、スライドHTML生成、提案資料コーディング。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。
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.
日本語の概要は準備中です。原文の説明を表示しています。