📋 概要
職場の健康状態・労働生産性を評価するWebアンケートアプリを作成・管理するためのClaude Codeスキルコマンドです。
7画面のアンケート
同意〜結果まで完全フロー
自動診断
ワークエンゲージメント・労働損失
エクスポート
Excel / PDF 出力対応
プライバシー
匿名化・ブラウザ内完結
⚡ コマンド一覧
/web-health-app
新規作成
健康チェックアプリを新規作成するコマンド
使用方法
/web-health-app [プロジェクト名]
例
/web-health-app my-company-survey
実行される処理
- Vite + React + TypeScript プロジェクト作成
- 必要なパッケージインストール（react-router-dom, xlsx, jspdf等）
- 型定義ファイル作成（survey.ts）
- 計算ロジック作成（productivity-calculation.ts）
- 7画面のページコンポーネント作成
- ルーティング設定
- E2Eテスト作成
- Vercelデプロイ設定
/web-build-health-app
ビルド・デプロイ
既存アプリをビルド・テスト・デプロイするコマンド
使用方法
/web-build-health-app
実行される処理
- 依存関係の確認・インストール
- TypeScriptビルド
- E2Eテスト実行（3件すべてパス必須）
- Git コミット・プッシュ
- Vercel自動デプロイ
📱 アプリ仕様
画面構成（7ページ）
| 順番 | 画面名 | パス | 内容 |
|---|---|---|---|
| 1 | 同意画面 | / |
調査説明、同意チェック |
| 2 | 基本情報 | /basic-info |
社員番号、年齢、性別、雇用形態 |
| 3 | 健康問題選択 | /health-issues |
15項目から複数選択 |
| 4 | 健康詳細 | /health-detail |
症状日数、欠勤、仕事量/質 |
| 5 | ワークエンゲージメント | /work-engagement |
UWES-3（活力・熱意・没頭） |
| 6 | 確認画面 | /confirm |
入力内容の確認 |
| 7 | 結果画面 | /result |
診断結果、グラフ、エクスポート |
技術スタック
| カテゴリ | 技術 | バージョン |
|---|---|---|
| フレームワーク | React | ^19.2.0 |
| 言語 | TypeScript | ~5.9.3 |
| ビルドツール | Vite | ^7.2.4 |
| ルーティング | React Router DOM | ^7.13.0 |
| テスト | Playwright | ^1.58.1 |
| デプロイ | Vercel | - |
🧮 計算ロジック
ワークエンゲージメント
| スコア範囲 | 判定 |
|---|---|
| 0.0 〜 1.99 | 低い |
| 2.0 〜 3.49 | 中程度 |
| 3.5 〜 4.99 | 高い |
| 5.0 〜 6.0 | 非常に高い |
労働損失額（日給）
| 雇用形態 | 日給 |
|---|---|
| 正社員 | ¥13,500 |
| パート・アルバイト | ¥8,000 |
| その他 | ¥10,000 |
⚠️ 計算式
月間損失額 = 欠勤日数 × 日給
年間損失額 = 月間損失額 × 12
労働損失率 = (欠勤日数 / 22) × 100%
📁 関連ファイル
| ファイル | パス |
|---|---|
| 要件定義書 | C:\Users\kawag\work\productivity-health-survey\REQUIREMENTS.md |
| 新規作成スキル | C:\Users\kawag\.claude\skills\web-health-app.md |
| ビルドスキル | C:\Users\kawag\.claude\skills\web-build-health-app.md |
| 参考実装 | C:\Users\kawag\work\productivity-health-survey\ |
💡 使用例
🆕 新しいアプリを作成する場合
/web-health-app company-wellness-2026
→ 新規プロジェクトが作成され、すべての画面とロジックが自動生成されます。
🔧 既存アプリを更新・デプロイする場合
/web-build-health-app
→ ビルド、テスト、Gitプッシュ、Vercelデプロイが実行されます。