このプロジェクトのフロントエンド実装フローを定義するスキル。UIコンポーネント・ページ・スタイル・レイアウトを実装するとき、Vueファイルを書くとき、Nuxtのページやcomposableを作るとき、「フロントをどう進めれば？」と聞かれたときに必ず参照すること。mock(.pen)→E2Eテスト→実装→browser-use確認の順序を守る。
このプロジェクトのフロントエンドは Nuxt 4 + Vue 3 + Panda CSS で構成される。
.claude/references/branch-strategy.md を参照。
各ステップが完了したらコミットを作成してユーザーにマージを依頼し、マージされてから次のステップに進む。
.pen 形式で画面レイアウト・コンポーネント構成を設計する。
実装前にビジュアルの合意を取ることで手戻りを防ぐ。
.pen ファイルを作成・編集する✅ Step 1 完了時:
git add .
git commit -m "design: <ストーリー名> のモックデザイン作成"
# PR を作成して us/<story-name> へのマージをユーザーに依頼
# → マージ確認後に Step 2 へ進む
モックをもとに、ユーザーが行う操作と期待する表示を Playwright で記述する。 テストはこの時点で必ず失敗する状態（Red）にしてから実装に入る。
// Given: <前提条件>, When: <操作>, Then: <期待結果>
it("Given 未ログインユーザーが, When ログインページにアクセスすると, Then ログインフォームが表示される", () => {
// Arrange
// Act
// Assert
});
テストはユースケース単位で整理する（正常系・異常系での分類はしない）。
✅ Step 2 完了時:
git add .
git commit -m "test: <ストーリー名> の E2E テスト作成（Red）"
# PR を作成して us/<story-name> へのマージをユーザーに依頼
# → マージ確認後に Step 3 へ進む
テストが通るように実装する。
実装完了後、必ず browser-use で実際の表示を確認する。
UIに関わる変更（コンポーネント追加・スタイル変更・レイアウト修正）はすべてこの確認が必須。
browser-use-cli "http://localhost:3000/<確認するページ>"
確認項目:
✅ Step 3 完了時:
git add .
git commit -m "feat: <タスク名> の実装"
# PR を作成して us/<story-name> へのマージをユーザーに依頼
# → 全タスクが us にマージされたら epic/<epic-name> への PR を作成