オープンソース エージェント スキル for TypeScript、React、Next.js パターン

ある開発者が、AIコーディングアシスタントがTypeScript、React、Next.jsプロジェクトのコードを生成・レビューする方法を改善するためのオープンソース「Agent Skill」—構造化マークダウンリファレンス—を公開しました。

概要

このスキルは17ファイルに収められた4,000行のリファレンスです。チュートリアルやnpmパッケージではなく、AIエージェントが参照するためのドキュメントです。作者がAI生成のフロントエンドコードで頻繁に遭遇した問題に対処するために作成されました。問題には以下が含まれます：

• APIレスポンスに実行時バリデーションではなくas User型アサーションを使用すること。
• "use client"ディレクティブをページ全体に誤って配置すること。
• 不安定なオブジェクト依存関係を持つuseEffectフックを記述すること。
• コードレビュー時に実際のバグと単なるスタイルの好みを区別できないこと。

主な機能と構造

このリファレンスは、エージェントの判断を導く特定のラベルで構造化されています：

• [HARD RULE]：必ず従うべきパターン。
• [DEFAULT]：推奨される標準的なアプローチ。
• [SITUATIONAL]：特定の状況でのみ適用すべきパターン。

正しいパターンを選択するための意思決定フローチャート、型エラー・ハイドレーション問題・useEffect問題の3つのデバッグプレイブック、実際のリスクとスタイルの好みを分離するコードレビュー経験則が含まれています。

インストールと互換性

インストールするには、以下を実行します：

git clone https://github.com/leejpsd/typescript-react-patterns ~/.claude/skills/typescript-react-patterns

作者は、Claude Code、Cursor、Codex、Gemini CLIで動作すると述べています。不足しているパターンや誤ったガイダンスに関するフィードバックを求めています。