feat: スタッフシフト提出画面のモックUI作成・Storybook環境整備・VRTキャプチャ削減 (#278)

* feat: スタッフシフト提出画面のpencilデザイン作成

5画面分のデザインを作成（未提出/提出済み/締切後閲覧/締切後未提出/提出完了）

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: スタッフシフト提出画面のモックUI作成

DayCard, SubmitFormView, ReadOnlySubmitView, ExpiredSubmitView,
SubmitCompleteView, ShiftSubmitPageの各コンポーネントとStorybookを作成

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: Storybook MCP addon追加・開発環境設定更新

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* chore: MCP設定修正・CLAUDE.mdのStoryルール追記

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* refactor: 小コンポーネントのStoriesをVariantsパターンに統合してVRTキャプチャ削減

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* feat: plan

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: yn1323

.gitignore

@@ -35,7 +35,6 @@ convex-seeds/backup
 .serena
 
 settings.local.json
-.mcp.json
 CLAUDE.local.md
 
 character.md

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "storybook-mcp": {
+      "type": "sse",
+      "url": "http://localhost:6006/mcp"
+    }
+  }
+}

.storybook/main.ts

@@ -8,7 +8,7 @@ const config: StorybookConfig = {
     },
   },
   stories: ["../src/**/*.stories.@(ts|tsx)"],
-  addons: ["@storybook/addon-docs", "@storybook/addon-vitest"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-vitest", "@storybook/addon-mcp"],
   framework: {
     name: "@storybook/react-vite",
     options: {},

CLAUDE.md

@@ -158,7 +158,11 @@ import { bar } from "@/convex/...";
 
 ## デザイン
 
-デザイン関連のファイル・ルールは `design/` ディレクトリを参照（`design/CLAUDE.md`）。
+- デザイン関連のファイル・ルールは `design/` ディレクトリを参照（`design/CLAUDE.md`）。
+- デザインをもとにモックを作成する場合、実装後にpencil MCP, Storybook MCP, Playwright MCPでスクショを取ってPencilのデザイン通り実装できているか確認すること（フォント差については許容）
+- VRTは無料枠で毎月のキャプチャ数に限りがあります。小さなコンポーネントはVariants Storyを作成し、1つのStoryにまとめたいです。
+  大きいコンポーネントはそのままでOK。
+  操作用のStoryが必要なら、Interactive Storyを別途作成すること。（小さいコンポーネントのみ）
 
 ## コーディング
 

design/designIndex.md

@@ -34,6 +34,16 @@
 | ~~`K5zai`~~ | ShiftBoard/Confirmed/SP | SP確定済み |
 | ~~`0sBBB`~~ | ShiftBoard/ConfirmDialog/SP | SP確定ダイアログ表示 |
 
+## shift-submit.pen — スタッフシフト提出画面
+
+| ID | Name | Description |
+|---|---|---|
+| `tuyCK` | ShiftSubmit/Unsubmitted | SP未提出＋締切前（状態A） |
+| `AnaaY` | ShiftSubmit/Submitted | SP提出済み＋締切前（状態B） |
+| `8rGfg` | ShiftSubmit/SubmittedExpired | SP提出済み＋締切後（状態C） |
+| `ZNB1Z` | ShiftSubmit/Expired | SP未提出＋締切後（状態D） |
+| `W9WOE` | ShiftSubmit/Complete | SP提出完了画面 |
+
 ## design.pen
 （画面デザイン）