Menü
フロントエンドの環境変数、コンポーネント設計、データフローを定義。React環境設定時に使用。
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
PRD、ADR、Design Doc、UI Spec、作業計画書の作成を支援。技術ドキュメントの作成・レビュー時、または「UI Spec/画面設計/コンポーネント分解」が言及された時に使用。
入力・出力・成功基準・決定事項・未解決条件を明確化し、下流エージェントが推測せず実行できるようにする。LLM向けのプロンプト・ハンドオフ・計画成果物・レビュー・レポート・生成指示を記述または改訂する時に使用。
タスクの本質を分析し適切なスキルを選択。規模見積もりとメタデータを返却。タスク開始時、スキル選択時に使用。
Guides PRD, ADR, Design Doc, UI Spec, and Work Plan creation. Use when creating or reviewing technical documents, or when "UI spec/screen design/component decomposition" is mentioned.
Clarifies inputs, outputs, success criteria, decisions, and unresolved conditions so downstream agents can execute without guessing. Use when writing or revising LLM-facing prompts, handoffs, planning artifacts, reviews, reports, or generated instructions.
Analyzes task essence and selects appropriate skills. Returns scale estimates and metadata. Use when starting tasks or selecting skills.
| name | frontend-technical-spec |
| description | フロントエンドの環境変数、コンポーネント設計、データフローを定義。React環境設定時に使用。 |
TypeScriptベースのReactアプリケーション実装。アーキテクチャパターンはプロジェクトの要件と規模に応じて選択する。
process.envはブラウザ環境で動作しない// ビルドツールの環境変数（公開値のみ。クライアント公開変数は VITE_ 接頭辞が必要）
const config = {
apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000',
appName: import.meta.env.VITE_APP_NAME || 'My App'
}
// フロントエンドでは動作しない
const apiUrl = process.env.API_URL // NG
.envファイルをGitに含めない（バックエンドと同様）秘密情報の正しい取り扱い:
// セキュリティリスク: APIキーがブラウザで露出
const apiKey = import.meta.env.VITE_API_KEY
const response = await fetch(`https://api.example.com/data?key=${apiKey}`)
// 正しい: バックエンドが秘密情報を管理、フロントエンドはプロキシ経由でアクセス
const response = await fetch('/api/data') // バックエンドがAPIキー認証を処理
Reactコンポーネントアーキテクチャ:
状態管理パターン:
useStateReactアプリケーション全体で一貫したデータフローを維持：
Single Source of Truth: 各状態には1つの権威あるソースがある
単方向フロー: データはPropsを通じて上から下へ流れる
APIレスポンス → State → Props → Render → UI
ユーザー入力 → イベントハンドラ → State更新 → 再レンダリング
Immutable Updates: State更新には不変パターンを使用
// 不変なState更新
setUsers(prev => [...prev, newUser])
// 可変なState更新（禁止）
users.push(newUser)
setUsers(users)
unknown） → 型ガード → State（型保証済み）// 型安全なデータフロー
async function fetchUser(id: string): Promise<User> {
const response = await fetch(`/api/users/${id}`)
const data: unknown = await response.json()
if (!isUser(data)) {
throw new Error('Invalid user data')
}
return data // User型として保証
}
package.jsonのpackageManagerフィールドに応じた実行コマンドを使用すること。
test - テスト実行test:coverage - カバレッジ付きテスト実行test:coverage:fresh - カバレッジ付きテスト実行（キャッシュクリア）test:safe - 安全なテスト実行（自動クリーンアップ付き）cleanup:processes - Vitestプロセスのクリーンアップ実装完了時に品質チェックは必須：
Phase 1-3: 基本チェック
check - Biome（lint + format）build - TypeScriptビルドPhase 4-5: テストと最終確認
test - テスト実行test:coverage:fresh - カバレッジ測定check:all - 全体統合チェック