القائمة
フロントエンドの環境変数、コンポーネント設計、データフローを定義。React環境設定時に使用。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
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 - 全体統合チェック