開発のスキル

ExpoのAndroidアプリでJetpack Composeの画面部品を使うための実装支援。部品の選択から配置、スクロール一覧、アイコンの扱いまで案内します。

• ExpoにAndroidの画面部品を加えたいとき
• スクロール一覧を作りたいとき
• AndroidのXMLアイコンを表示したいとき

ExpoプロジェクトをCodex appのRunボタンから起動できるよう、実行スクリプトと設定ファイルを整えます。開発サーバーのログも同じ操作画面で確認できます。

• Codex appのRunでExpoを起動
• iOS・Android・Webの起動ボタン追加
• Codexとシェルの起動手順を統一

Figmaで設計したアニメーションをアプリのコードに反映します。要素の配置と動きのデータを照合し、既存の開発環境に合わせてタイミングや連動を再現します。

• Figmaの動く部品を実装したいとき
• 複数要素の動きを連動させたいとき
• SVGの線のアニメーションを再現

Figmaの公開コンポーネントを既存コードの部品と対応づけ、表示用のコード例を作成します。文字や状態、入れ子の部品を反映する`.figma.ts`を整備します。

• Figmaと実装の部品を対応づけたいとき
• Code Connect用ファイルの作成
• デザインの状態とコードの設定の対応づけ

Figmaのデザインを読み取り、既存プロジェクトに合う画面コードへ落とし込むスキル。部品や配色の定義を再利用し、画像やアイコンも元の素材に沿って実装します。

• Figmaの画面を実装したいとき
• 既存の部品を使って画面を作りたいとき
• 画像やアイコンを元の素材で再現したいとき

Expo Routerにサーバー側のAPI処理を追加し、秘密鍵を隠した外部サービス連携や入力検証、Webhook受信を実装してEAS Hostingへ公開するスキル。

• APIキーを隠して外部APIを使いたいとき
• データ保存前の入力検証
• StripeやGitHubのWebhook受信

独自のネイティブコードを使うExpoアプリ向けに、開発用クライアントのビルドから実機への導入、TestFlight配布、開発サーバーへの接続までを案内します。

• 独自のネイティブ機能を実機で試したいとき
• TestFlightで開発版を配布したいとき
• iOS・Androidをローカルでビルド

Cloudflare Workersのコード作成とレビューを、本番運用向けの実践指針に沿って支援します。最新の公式資料を参照し、設定や非同期処理、秘密情報の扱いを点検します。

• 新しいCloudflare Workerの実装
• 本番投入前のコードレビュー
• wrangler.jsoncと接続設定の点検

依存関係図やER図など、箱と線で表す図の自動配置を設計します。図の構造と読む目的に合わせて、線の交差や重なり、編集時の配置のずれを抑える方法を選びます。

• 依存関係図の交差を減らしたいとき
• ER図の接続線の経路設計
• 木構造やネットワークの配置選定

Cloudflare Workers上に分離されたコード実行環境を構築し、AIが生成したコードの実行、ファイル操作、サービスのプレビューまで実装するスキル。

• AI生成コードの実行環境を作りたいとき
• 分離環境でビルドやテストを実行
• Webサービスのプレビュー公開

Cloudflare Workers上で、状態を保持するAIエージェントやリアルタイムチャット、定期実行処理、MCPサーバーをAgents SDKで実装するスキル。

• 状態を保存・同期するエージェント開発
• 通信復旧に対応したチャットの作成
• 定期実行や複数段階の処理の実装

CodeRabbitを使ってGitのコード変更をレビューし、品質やセキュリティの問題を重要度順に整理して、該当ファイルと具体的な修正案を示すスキル。

• 未コミットの変更をレビューしたいとき
• 基準ブランチとの差分を確認したいとき
• 品質や安全性の問題を重要度順に整理

チャットルームや予約システムなど、状態を共有する機能をCloudflare Durable Objectsで設計・実装し、保存処理やテスト、既存コードの確認まで支援します。

• チャット・ゲーム・予約の共有状態を実装
• RPC・SQLite・接続・アラームの実装
• Workersの連携と移行設定

Cloudflare上で会話履歴や状態を保持するAIエージェントを作り、リアルタイム通信、定期処理、ツール連携から公開までを支援するスキル。

• 会話履歴を保持するチャットを作りたいとき
• WebSocketでチャット画面を接続したいとき
• リマインダーや定期処理を組み込みたいとき

ReactやNext.jsのアプリにグラフや構成図を組み込みます。描画と状態管理の役割分担、サーバーとの境界、遅延読み込み、モバイル表示まで設計を支援します。

• D3グラフをReactに組み込みたいとき
• Next.jsの描画方式を選びたいとき
• グラフの表示条件をURLで共有したいとき

スクロールに合わせてグラフや地図、動画が変化する解説ページを設計・実装するスキル。場面の構成からモバイル対応、動きを抑えた代替表示まで扱います。

• スクロールで変わるグラフを作りたいとき
• 地図と動画で年表を作りたいとき
• スクロール形式と段階表示を比較したいとき

システム構成や処理の流れ、データの関係を伝える図を、読み手と目的に合わせて選び、UMLやMermaidなどで作成・レビュー・実装するスキルです。

• ログイン処理をシーケンス図で説明
• データベースのスキーマをERDに変換
• C4でアプリの構成を文書化

TypeScriptでグラフや対話型の図を作る際に、データの型定義からライブラリ選定、表示・操作・共有状態の設計まで、保守しやすい実装を支援するスキル。

• 可視化ライブラリを選びたいとき
• D3の試作をTypeScriptへ整理
• 選択範囲やツールチップの型設計

macOSのSwiftUIアプリで、ウィンドウのタイトルやドラッグ領域、配置、サイズ、起動時の表示と復元動作を、画面の役割に合わせて調整するスキル。

• タイトルやツールバーの表示調整
• 枠のない画面をドラッグしたいとき
• 動画画面をディスプレイに収めたいとき

SwiftUIの画面を新規作成・整理するために、画面遷移や状態管理、レイアウトの実装パターンを案内し、プレビューとビルドによる確認まで支援するスキル。

• 新規アプリの画面遷移を組みたいとき
• 大きな画面を小さな部品に分けたいとき
• 状態の所有と共有方法の整理

macOSのSwiftUIで肥大化した画面を役割ごとに分割し、ウインドウ単位の状態管理や操作処理、AppKit連携を整理して、既存の動作を保ちながら構造を整えるスキル。

• 大きなSwiftUI画面を分割したいとき
• ウインドウごとの状態を整理したいとき
• ツールバーやコマンド処理の整理

macOS向けSwiftUIアプリのウィンドウ、メニュー、設定、分割画面を設計し、状態管理やファイル構成も含めてデスクトップらしい操作を整えるスキル。

• macOSアプリの土台を作りたいとき
• サイドバーと詳細画面の設計
• 設定画面とショートカットの追加

ReactとNext.jsの実装・レビュー・改修で、データ取得の待ち時間や配信コード量、不要な再描画を点検し、影響の大きい順に性能改善を進めるスキル。

• Reactコンポーネントの性能レビュー
• Next.jsページのデータ取得改善
• 配信コード量と読み込み時間の削減

大きくなったSwiftUIの画面コードを小さなViewに分割し、状態管理やデータの流れを整理します。表示や処理の動作を保ちながら、読みやすくテストしやすい構造へ整えるスキルです。

• 大きなSwiftUI画面を分割したいとき
• 状態管理とデータの流れの整理
• 画面内の業務ロジックを移したいとき