開発のスキル

AOSを使い、スクロールで要素が画面に入ったときにフェードやスライドなどの基本的な表示アニメーションを設定するスキルです。

• LPにフェード表示を加えたいとき
• ブログ記事をスクロール演出したいとき
• カードを順番に表示したいとき

PixiJSで2Dゲームやインタラクティブなキャンバスを作り、スプライト、パーティクル、図形、フィルターを描画するスキルです。

• ブラウザーで2Dゲームを作りたいとき
• パーティクル表現を描画したいとき
• スプライトアニメーションを実装したいとき

Motion（Framer Motion）でReactやJavaScriptの画面に、ホバーやドラッグ、スクロール、画面遷移などのアニメーションを加えるスキルです。

• ボタンの反応をアニメーションにしたいとき
• モーダルの終了演出を付けたいとき
• ページ遷移を滑らかにしたいとき

Webページに滑らかなスクロールや視差効果を加え、要素の表示に合わせた演出、固定表示、横スクロールを組み立てるスキルです。

• 視差効果のあるページを作りたいとき
• スクロール連動アニメーションを加えたいとき
• 要素の固定表示や横スクロールを使いたいとき

After Effectsで作成したLottieアニメーションをWebやReactに表示し、再生や停止、スクロール連動などを制御するスキルです。

• ReactにLottieを表示したいとき
• アイコンにアニメーションを付けたいとき
• スクロールと再生を連動させたいとき

Webページに軽い立体感を加えるため、疑似3Dイラストや動く背景、マウス操作に反応するカードの傾きを実装するスキルです。

• ヒーロー領域に動く背景を加えたいとき
• カードに傾きや光沢を付けたいとき
• 疑似3Dのアイコンを作りたいとき

DOM・CSS・SVGやJavaScriptの値を動かすアニメーションを組み立て、タイムラインや順番表示、SVGの線描画・形状変化を実装するためのスキルです。

• 画面要素を順番に表示したいとき
• SVGの線や形をアニメーションしたいとき
• 複数の動きをタイムラインで組みたいとき

GSAPとScrollTriggerで、スクロールに連動する演出や視差効果、要素の固定、複数アニメーションの連続表示を組み立て、DOMやSVG、Canvas、WebGLの動きを調整するスキルです。

• スクロールに合わせて要素を動かしたいとき
• 固定表示や横スクロール演出を作りたいとき
• 複数のアニメーションを連続させたいとき

React Springのばね物理とPopmotionのアニメーション機能を使い、ドラッグやスクロールに反応する自然な動きや、勢いを保つUI演出を設計します。

• ReactのUIにばねの動きを加えたいとき
• ドラッグ後の慣性を表現したいとき
• リストの追加や削除を滑らかに見せたいとき

Three.jsでブラウザー向けの3Dシーンを作り、モデルや光、アニメーション、操作を組み合わせて表示するためのスキルです。

• Webに操作できる3Dシーンを作りたいとき
• 商品コンフィギュレーターを作りたいとき
• 3Dモデルに光や影を設定したいとき

コードの目的を把握したうえで、品質・安全性・性能・保守性を確認し、重要度別の問題点と具体的な改善案をまとめるコードレビュー用スキルです。

• 変更をマージする前に確認したいとき
• コードの安全性を点検したいとき
• 品質改善の優先順位を知りたいとき

プロジェクト内のファイル構成を操作できるツリー表示にし、新しいリポジトリの探索やコードベースの構造把握を助けるスキルです。

• 初めてのリポジトリを探索したいとき
• プロジェクトのフォルダー構成を見たいとき
• コードベース全体をツリーで把握したいとき

Express.jsのソースを調べ、各APIルートのHTTPメソッド、パス、定義ファイルと行番号を一覧化し、適用ミドルウェアやルート形式も含むJSON互換マニフェストにまとめるスキルです。

• Express.jsのAPIルートを一覧にしたいとき
• APIドキュメント用のルート情報を集めたいとき
• 各ルートのミドルウェアを確認したいとき

APIのURL命名、レスポンス形式、HTTPステータス、認証、バージョン管理の規約を参照し、エンドポイントの設計や実装、レビュー時の判断をそろえるスキルです。

• 新しいAPIのURLを設計したいとき
• レスポンス形式を統一したいとき
• 認証とエラー応答を確認したいとき

Reactのコンポーネント設計、状態の置き場所、HooksやContextの使い方、性能改善の考え方を参照し、目的に応じた実装方針を整理します。

• Reactの状態を置く場所を考えたいとき
• コンポーネントの分割方針を確認したいとき
• HooksやContextの指針を調べたいとき

指定したディレクトリのコードを調べ、ファイル構成、エラー処理、基本的な安全性、重複や依存関係などの問題を重要度別に整理した健康状態レポートを作成します。

• ディレクトリのコード品質を点検したいとき
• 基本的なセキュリティ上の問題を探したいとき
• 修正箇所を重要度順に把握したいとき

仕様やコードをもとにREST APIのエンドポイント実装やルートハンドラーを作成し、API文書やOpenAPI仕様書も生成するスキルです。

• 仕様からREST APIを作りたいとき
• 新しいルートハンドラーを用意したいとき
• API文書やOpenAPI仕様書を生成したいとき

コードからAPIのエンドポイントや入出力、認証要件を読み取り、MarkdownのAPIリファレンスやOpenAPI仕様書にまとめるスキルです。

• APIをREADME向けに文書化したいとき
• エンドポイント一覧を作りたいとき
• OpenAPI仕様書を生成したいとき

曖昧な作業目標をプログラムで判定できる完了条件に変え、チェック用スクリプトを作成します。必要なら試行回数を制限したエージェント実行ループも用意します。

• 曖昧な作業の完了条件を決めたいとき
• エージェントの終了判定スクリプトを作るとき
• 試行回数を制限した実行ループを組みたいとき

コードの役割や設計理由、採用されたパターンと代替案を学習向けに解説し、指定範囲の構造監査もMarkdownにまとめます。既存コードやAI生成コードの理解に使えます。

• AI生成コードの意図を知りたいとき
• 知らない既存コードを学びたいとき
• 設計の選択肢を監査したいとき

ローカルのMCPサーバーを保守し、ツールの更新やホスト設定、実行時の問題に対応します。安全設定を保ちながら変更箇所を確認し、型チェックとビルドで検証します。

• MCPツールを更新したいとき
• ホスト設定を見直したいとき
• 実行時トラブルを調べたいとき

リポジトリの構成や担当範囲、実行すべき確認コマンドを調べ、変更に着手する前の実装計画を立てるスキルです。

• 初めてのリポジトリを把握したいとき
• 変更対象のファイルを絞り込みたいとき
• 実装前に確認コマンドを決めたいとき

Agent Monitorの実行履歴からマルチエージェントの失敗を深さごとに追跡し、発生元や親エージェントへの波及、影響を受けた範囲を整理します。

• 失敗した実行の原因を追いたいとき
• エラーが親へ伝わった経路の確認
• 影響を受けたエージェントの把握

画面文言やガイドを編集するとき、ダッシュボード、Wiki、各言語版の文書、言語切替、地域別表示の翻訳を対応する言語間でそろえます。

• 画面文言を全対応言語に反映したいとき
• 英語ガイドの変更を各言語版にそろえたいとき
• 新しい言語を複数の画面や文書に追加したいとき