菜单
リポジトリの根拠に基づき、Reactの環境、コンポーネントアーキテクチャ、状態・データフロー、ビルド検証、フロントエンドの非機能基準を定義。Reactフロントエンド、そのビルド、ランタイム境界の設定・設計時に使用。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/shinpr/ai-coding-project-boilerplate --skill frontend-technical-spec命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Detects code smells, anti-patterns, and readability issues. Use when implementing features, reviewing code, or refactoring.
Determines which PRD, ADR, UI Spec, Design Doc, and Work Plan a change requires and where each is stored. Use when deciding documentation scope or creating or reviewing a technical document.
Selects implementation strategy (vertical slice, horizontal, or hybrid) with risk assessment. Use when planning feature implementation.
正在显示 SKILL.md
| name | frontend-technical-spec |
| description | リポジトリの根拠に基づき、Reactの環境、コンポーネントアーキテクチャ、状態・データフロー、ビルド検証、フロントエンドの非機能基準を定義。Reactフロントエンド、そのビルド、ランタイム境界の設定・設計時に使用。 |
ツールやフレームワークに固有のルールを適用する前に、package.json、ロックファイル、TypeScript・ビルド設定、CI定義、代表的なコンポーネントを確認する。React、Vite、Next.js、状態管理ライブラリ、フォームライブラリ、スクリプトは、リポジトリ内の根拠に明記されている場合にのみ利用可能として扱う。周辺のパターンから導いた結論には推測であることを明記する。不足している判断によってレンダリングアーキテクチャ、互換性、セキュリティ、検証方法が変わる場合は作業を止め、必要な根拠またはユーザー判断を具体的に示す。
リポジトリ設定からTypeScriptベースのReactアプリケーションであることを確認できる場合に、このルールを適用する。現行要件と制約を、コンポーネントの責務、状態の所有者、サーバー/クライアント境界、観測可能な検証点へ対応づけてアーキテクチャを選択する。
// ビルドツールの環境変数（公開値のみ。クライアント公開変数は 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ファイルはバージョン管理の対象外とし、必要な変数名はシークレットを含まないサンプルファイルで示す秘密情報の正しい取り扱い:
// セキュリティリスク: 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型として保証
}
packageManagerフィールド、ロックファイル、CIコマンドの順にパッケージマネージャーを判定する。選択したマニフェストに存在するスクリプトだけを実行する。
test - テスト実行test:safe - 安全なテスト実行（自動クリーンアップ付き）cleanup:processes - Vitestプロセスのクリーンアップ実装完了時に品質チェックは必須：
Phase 1-3: 基本チェック
check - Biome（lint + format）build - TypeScriptビルドフェーズ移行の証跡: 設定済みのlint、format、型、ビルドのチェックがすべて正常終了していること。必須スクリプトが存在しない場合は、リポジトリ内の同等コマンドを特定するまで次のPhaseへ進まない。
Phase 4-5: テストと最終確認
test - テスト実行check:all - 全体統合チェック完了証跡: 設定済みのテストと本番ビルドが成功し、テストに伴う修正後も統合チェックが成功していること。環境依存のテストを実行できない場合は、ブロック要因となる前提条件を具体的に記録する。