🎿

React開発のカスタムインストラクションをSkillsへ切り出し

に公開
React
Claude
Skills
tech

はじめに

https://zenn.dev/hiroharu8864/articles/df7edcee9701b3

上記記事において、React開発ユースケース用のカスタムインストラクションを記載した。コンテキスト管理の観点から、「具体的なワークフローはSkillsに切り出し、CLAUDE.mdは最小限にする」のが望ましい。CLAUDE.md(カスタムインストラクションファイル)にワークフローを含んだコンテキストが記載されているので、内容を精査して、トークン消費を抑える(=必要なときに必要なぶんだけトークンを消費するように構成する)ことができるようになると、更に良くなる。

ワークフローをSkillsに切り出す

  • CLAUDE.md (カスタムインストラクションファイル)
    • プロジェクト固有の情報。コピーしても他プロジェクトにおいては、意味が通らないもの。
  • Skills
    • 汎用的なルール・ワークフロー。他プロジェクトにおいても普遍的に利用できる。
      上記の判断軸で分離する。

CLAUDE.md

  • npm run dev、npm run build などのコマンド: 別プロジェクトではコマンドが異なる可能性がある
  • React 19 + Vite 7 + TanStack Query + Material UI: 別プロジェクトでは技術スタックが違う
  • src/pages/、src/hooks/、src/types/ というフォルダ構成: プロジェクトごとに設計判断が異なる。他プロジェクト含めた標準とするのであれば、Skills側にする。
  • tsconfig の設定内容: プロジェクトごとに違う。他プロジェクト含めた標準とするのであれば、Skills側にする。
  • ESLint の設定内容: プロジェクトごとに違う。他プロジェクト含めた標準とするのであれば、Skills側にする。
  • Atomic Design の採用: プロジェクトごとに違う。他プロジェクト含めた標準とするのであれば、Skills側にする。

Skills

  • useEffectは外部システムとの同期のみに利用: どのReactプロジェクトでも同じ原則とする。
  • ユーザーアクションはイベントハンドラで処理する: どのReactプロジェクトでも同じ原則とする。
  • memo化はProfilerで計測してから適用する: どのReactプロジェクトでも同じ判断フローとする。
  • Suspenseでローディング状態を表示する: どのReactプロジェクトでも使えるパターン
  • APIエラーは統一されたエラーコンポーネントで表示する: どのReactプロジェクトでも適用できる方針

つまり、以下が成り立つ。

  • CLAUDE.md = 「このプロジェクトはこうなっている」という個別の事実
  • Skills = 「他プロジェクトではいつもこうする」という横断的な標準
    Skillsを ~/.claude/skills/ に置いて、全プロジェクトで共有する。CLAUDE.mdはプロジェクトごとに違うが、Skillsは同じものを使い回すことに意味がある。

変更後構成

変更後の設定ファイル構成は以下の形になる。

react-application/
├── CLAUDE.md                          # プロジェクト固有（最小限）
└── .claude/
    └── skills/
        ├── react-useeffect/
        │   └── SKILL.md               # useEffect使用原則
        ├── react-suspense-loading/
        │   └── SKILL.md               # Suspense + TanStack Queryパターン
        ├── react-performance/
        │   └── SKILL.md               # パフォーマンス最適化の判断フロー
        └── react-error-handling/
            └── SKILL.md               # エラーハンドリング方針

Claude Codeさんにアプリケーション作成依頼。

APIを叩いて、レスポンスを表示する簡易なアプリケーションを作成します。利用APIは、JSON placeholderの以下のAPIを利用して下さい。
https://jsonplaceholder.typicode.com/users

利用APIに記載されたJSON placeholderにアクセスしてレスポンス結果を表示するアプリケーション。APIレスポンス待ちに伴うアプリケーションの動作を確認するため、指定された秒数だけAPIレスポンス返却を待機する。指定された秒数はトップ画面の指定秒数項目から、選択できる。選択できる値は、0秒、5秒、10秒、15秒、20秒、25秒、30秒より選択する。トップページのAPIアクセスボタンを押下したら、APIアクセスを開始する。

APIアクセスでレスポンス待ちの状態は、Suspenseコンポーネントを利用して、ローディングが完了するまで、fallback propsに指定したJSX要素を表示する。fallbackのページも合わせて作成する。

設定ファイルとして以下を読み込んでください。
CLAUDE.md
.claude/skills/*

作成アプリケーション

https://github.com/hiroharu8864/react-skills

CLAUDE.mdには「このプロジェクトはこうなっている」という個別の事実を、Skillsには「自分のプロジェクトではいつもこうする」という横断的な標準を記載する。この分離を行うことで、コンテキストウィンドウの圧迫、設定ファイルの見やすさ 等を解決する。

Discussion