開発のスキル

システム構成を決めるために、要件と制約を整理し、設計案の利点と欠点を比較します。重要な判断の理由を設計判断記録に残し、単純な代替案も検討します。

• 設計前に要件を整理したいとき
• 構成案の利点と欠点を比較したいとき
• 設計判断の理由を記録したいとき

PostgreSQLのテーブル構造を、データ型・制約・索引まで具体化します。検索や更新の使われ方に合わせ、大規模データの分割、行単位のアクセス制御、変更時の影響も検討します。

• ユーザーや注文などのテーブル設計
• データ型・制約・索引の見直し
• 大規模テーブルや頻繁な更新への設計

データベースの構造変更やデータ移行を、復旧手順と検証まで含めて進めるスキル。Sequelize・TypeORM・Prismaの移行例や、サービスを止めない段階的な変更を扱います。

• 列の追加・改名・型変更
• 保存データの構造を変えたいとき
• 復旧手順を準備・検証したいとき

開発アイデアを、構成図からファイル単位の実行手順まで具体化する計画用スキル。調査の根拠や設計判断をMarkdownの知識ベースに残し、矛盾の点検や次回の再開を支援します。

• 実装前にシステム全体を設計したいとき
• ファイルと依存関係を含む作業分解
• 設計の抜けや矛盾を点検したいとき

Azure Functionsの開発で、言語別の実装方式や非同期処理、起動時の遅延対策を整理し、本番運用を見据えた関数の設計と実装を支援するスキル。

• 新規.NET関数の実行方式を選びたいとき
• Durable Functionsで非同期処理を連携
• 起動時の遅延やタイムアウトの見直し

TypeScript・JavaScript・React・Node.jsのコードを、読みやすく保守しやすい形に整えます。命名や型、API設計、テストの書き方まで共通の基準を示します。

• チームのコーディング規約をそろえたいとき
• 長い関数や深い条件分岐の整理
• Reactの部品や状態更新のレビュー

Angular v20以降のアプリ開発で、状態管理や画面部品の設計、サーバー側での描画、表示速度の改善からテストまでを支援するスキルです。

• Angularアプリを新規開発したいとき
• NgModulesから段階的に移行したいとき
• Signalsで状態管理を設計したいとき

Reactやshadcn/uiで、状態管理や画面遷移を備えた複数部品の画面を制作し、Claudeの会話で共有できる単一HTMLにまとめるスキル。

• 複数の部品を組み合わせた画面制作
• 状態管理や画面遷移を加えたいとき
• Reactアプリを単一HTMLで共有

通信やデータベースの待ち時間に複数の処理を進める、Pythonの非同期実装を支援するスキル。asyncioの構成選びからタイムアウト、キャンセル、テストまで扱います。

• 非同期Web APIの実装
• スクレイパーで並行通信したいとき
• バックグラウンド処理とキューの設計

RESTやGraphQLのAPI設計を支援します。利用者と用途を整理し、データ構造、エラー、認証、バージョン管理まで一貫した仕様にまとめます。

• RESTやGraphQLを新規設計したいとき
• 実装前にAPI仕様をレビューしたいとき
• チームのAPI設計基準づくり

複雑なSQLの作成、遅いクエリの改善、用途に合うデータベース設計を支援します。実行計画やインデックスを確認し、処理の正確さと負荷時の性能を検証する流れを扱います。

• 遅い分析クエリを改善したいとき
• SaaSのデータベース設計
• 顧客継続率を分析するSQLの作成

APIやデータベースを扱うサーバー側の設計・実装を支援するスキル。Node.js、Express、Next.js向けに、認証やキャッシュなどの実装例を示します。

• APIの構成と処理を整理したいとき
• データベースの問い合わせを減らしたいとき
• 認証と権限確認を実装したいとき

バックエンドのAPI仕様やサービスの役割分担を設計し、認証、障害対策、監視、拡張性、段階的な導入までを整理する設計支援スキルです。

• 注文管理APIを設計したいとき
• 複数サービスの役割を整理したいとき
• 外部連携の障害対策を考えたいとき

Node.js／TypeScriptで、Redisを使うバックグラウンド処理を設計します。BullMQによるジョブの予約、優先度、依存関係、同時実行数を扱います。

• バックグラウンド処理のキュー設計
• 予約・繰り返しジョブを動かしたいとき
• 依存関係のある処理フローの設計

Algoliaを使ったサイト内検索の実装を支援し、Reactでの入力中の検索や絞り込み、Next.jsでのサーバー描画、検索データの更新方針を整理するスキル。

• Reactで入力中の検索を追加したいとき
• 絞り込みと検索結果のページ切り替え
• Next.jsで検索結果をサーバー描画

Avaloniaの画面をZafiro.Avaloniaで整理し、共通スタイルや再利用できる部品へまとめるスキル。XAMLの重複や深い入れ子を減らす設計を支援します。

• 重複した見た目の設定を共通化
• 深い入れ子の画面構成を整理
• 繰り返すレイアウトを部品化

遅いデータベースの原因を実測から調べ、SQLやインデックス、キャッシュ、構成の改善を進め、負荷試験で効果とコストを確かめるためのスキル。

• 遅いSQLと実行計画を分析したいとき
• APIのN+1問題の解消
• 高負荷に備えた索引・キャッシュ設計

長くなったAGENTS.mdやCLAUDE.mdを整理するスキル。共通の指示を冒頭のファイルに残し、詳細は分野別に分割してリンクし、矛盾や重複も点検します。

• 長すぎるAGENTS.mdを短くしたいとき
• CLAUDE.mdを分野別に分けたいとき
• エージェント向け指示の矛盾を解消

WebサイトのアクセシビリティをWCAG 2.1に沿って点検し、画像の代替テキスト、配色、キーボード操作、読み上げ対応を改善するスキルです。

• サイト公開前に使いやすさを点検したいとき
• キーボード操作を改善したいとき
• フォームの読み上げ対応を直したいとき

Bunを使うJavaScript／TypeScript開発で、環境構築から依存パッケージ管理、テスト、ビルド、Node.jsからの移行までを支援します。

• BunでJS／TS開発を始めたいとき
• Node.jsから移行したいとき
• テストと本番ビルドの整備

スクロールに連動して文字や画像が動くWebページを設計・実装します。奥行きのある演出や画面に固定する区間を組み合わせ、読み進める流れを作ります。

• 製品の機能を順番に紹介したいとき
• スクロールで物語を見せたいとき
• 変更前後を比較したいとき

Figmaの指定フレームやレイヤーからデザイン情報と画像素材を取得し、既存プロジェクトの部品やスタイルに合わせて画面をコードに実装するスキル。

• Figmaのリンクから画面を実装したいとき
• 既存の部品でデザインを再現したいとき
• Figmaの画像やSVGを取得したいとき

Webサイトに操作できる3Dモデルやスクロール連動の演出を実装し、用途に合う技術選定からモデルの軽量化、モバイル対応まで進めるスキル。

• 3Dの商品カスタマイズ画面の制作
• ポートフォリオに3Dを加えたいとき
• スクロール連動の3D演出

Tailwind CSS v4で画面を実装する際に、CSSによる設定、親要素の幅に応じた表示、配色や余白の共通化を整理し、一貫したUIづくりを支援するスキル。

• Tailwind CSS v3から移行したいとき
• 親要素の幅に合わせたカードの実装
• 配色・余白・文字のルール統一