メニュー
リポジトリの根拠に基づき、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コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？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 - 全体統合チェック完了証跡: 設定済みのテストと本番ビルドが成功し、テストに伴う修正後も統合チェックが成功していること。環境依存のテストを実行できない場合は、ブロック要因となる前提条件を具体的に記録する。