用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/shinpr/ai-coding-project-boilerplate --skill frontend-typescript-rules命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
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.
基于 SOC 职业分类
| name | frontend-typescript-rules |
| description | React/TypeScriptの型安全性、コンポーネント設計、状態管理ルールを適用。Reactコンポーネント実装時に使用。 |
実装向けの frontend 固有 React/TypeScript ルール: しきい値、境界での型安全性、コンポーネント/状態の設計、エラーハンドリング、プロジェクト規約。
プロジェクト規約を適用する前に、TypeScript、bundler/framework、lint・format、path alias、React Compiler、代表的なコンポーネントの設定を確認する。設定またはリポジトリで確立済みのパターンに裏付けられた規約を確認済みとして扱い、限られた例から導いた結論には推測であることを明記する。競合するパターンによって公開される振る舞い、互換性、コンポーネント境界が変わる場合は作業を止め、必要な情報源または判断を具体的に示す。
設計変更を促すシグナル:
as アサーションが 3 回以上出現 → 型設計を見直す信頼できない型または取得できない型はunknownで受け、型ガードで絞り込む。asは、runtime/frameworkの不変条件によって対象の型が保証される場合にのみ使用し、その不変条件を近くのコメントに記録する。既存の生成コードまたはサードパーティの型宣言に含まれるanyは、ラップすべき境界入力であり、アプリケーションの契約へanyを広げる根拠にはならない。
アプリ内部では React の Props/State は型保証されており unknown は不要。外部境界では必ず unknown で受け、使用前に型ガードで絞り込む: API レスポンス、localStorage/sessionStorage、URL パラメータ、パースした JSON。制御コンポーネントのフォーム入力は React 合成イベントを通じて型安全に保たれる。
const raw: unknown = await (await fetch(url)).json()
if (!isUser(raw)) throw ()
user = raw
function UserCard({ user, onSelect }: UserCardProps)。propsを関数に直接型付けしてProps契約を明示する。useState ではなく discriminated union の action 型を用いた useReducer にする。"use client" 境界の内側に隔離する。ブラウザ専用 API（window、localStorage、イベントハンドラ）はクライアントコンポーネント内に留める。サーバーコンポーネントで呼ぶとレンダリングが壊れるためである。クライアントのみの SPA（例: Vite）では N/A であり、サーバーコンポーネントランタイムが無いプロジェクトではスキップする。Result 型で値として表現する。throw は想定外/回復不能なケースに限る。code を持つ基底 AppError を継承する（例: ValidationError, ApiError, NotFoundError）。AppError を上位へ伝播する。Error Boundary はレンダリング時のエラーを捕捉しフォールバック UI を表示する。useEffect 内のデータ取得は、順序が入れ替わった応答とアンマウント後の状態更新に対してガードする。具体的には、AbortController か mounted フラグで stale な結果を中断・無視するか、キャンセルと重複排除を行うサーバー状態ライブラリ（React Query/SWR）を使う。try-catch だけではこれをカバーできない。type Result<T, E> = { ok: true; value: T } | { ok: false; error: E }
class AppError extends Error {
constructor(message: string, readonly code: string, readonly statusCode = 500) {
super(message); this.name = this.constructor.name
}
}
Error Boundary — class component が必要となる唯一の箇所:
class ErrorBoundary extends React.Component<{ children: React.ReactNode; fallback: React.ReactNode }, { hasError: boolean }> {
state = { hasError: false }
static getDerivedStateFromError() { return { hasError: true } }
render() { return this.state.hasError ? this.props.fallback : this.props.children }
}
import.meta.env.VITE_*、Next.jsの公開変数はprocess.env.NEXT_PUBLIC_*、CRAはprocess.env.REACT_APP_*。フロントエンドのバンドルには公開設定だけを含め、シークレットはサーバー側の境界内に置く。build スクリプトでプロジェクトの予算に対して監視する。React.lazy + Suspense でコード分割する。再レンダリングを最小化する状態構造にする。メモ化: React Compiler が有効なときはそれに任せる。手動の React.memo/useMemo/useCallback は、プロファイラまたは参照同一性で正当化される逃げ道としてのみ用いる（実測されたボトルネック、またはサードパーティ API や effect 依存に対する安定した参照同一性）。PascalCase、変数/関数は camelCase、hook は use 接頭辞、定数は SCREAMING_SNAKE_CASE。tsconfig、lint設定、代表的なファイルから確認したaliasとimport順序に従う。src/からの絶対pathは設定済みのaliasが対応している場合にのみ使用する。