開発のスキル

ChatGPT内で使うアプリのひな形作成や改修、不具合調査を支援します。公式資料を確認し、外部機能をつなぐMCPサーバーと操作画面の実装、接続設定や検証を進めます。

• ChatGPTアプリのひな形を作りたいとき
• アプリのツールと入力項目の設計
• 既存のApps SDKデモの改修

ローカルのCodexスキルを調べ、説明やファイル構成、参照リンク、補助コードの問題と修正の優先順位を整理し、必要に応じてベンチマークの準備まで案内するスキル。

• ローカルのCodexスキルを点検したいとき
• 評価点や指摘の理由を知りたいとき
• スキル改善の優先順位付け

画像やスクリーンショットをもとに、見た目を忠実に再現した画面幅に対応するWeb画面を実装し、主要な操作とブラウザでの表示まで確認するスキル。

• モックアップから動く試作を作りたいとき
• スクリーンショットをWeb化したいとき
• 参考画像からモバイル画面を作りたいとき

アイデアや既存コード、過去のCodexの会話から、OpenAI Agents SDKの動くアプリを作成し、ローカルでの動作確認・評価・デプロイまで進めるスキル。

• アイデアを動く試作品にしたいとき
• 既存コードをエージェント化したいとき
• 過去のCodexの会話を実装したいとき

OpenAI APIを使うアプリやスクリプトの作業前に、キーの有無と再利用・新規作成の希望を確認し、値を表示せず承認されたローカル保存先に設定します。

• OpenAIアプリ開発前の認証確認
• 既存キーの再利用か新規作成かを選択
• コネクター経由でAPIキーを作成・保存

USD形式の3Dシーンの読み込み遅延、メモリ消費、描画の重さを調べ、構造の点検や検証、最適化前後の性能比較から結果レポートの作成までを進めるスキル。

• USDの読み込み遅延を調べたいとき
• CADシーンの描画の重さを診断したいとき
• GPUやシステムのメモリ消費の調査

USD形式の3Dシーンを表示するアプリ開発で、ブラウザ配信やローカル実行に合う手順を選び、描画・カメラ操作・選択・画面構成・検証を支援します。

• ブラウザ向けUSDビューア開発
• ローカル環境向けビューア開発
• カメラ操作と選択機能の追加

ChatGPT Appsの申請用JSONを、MCPサーバーの実装を調べて作成するスキル。アプリ紹介、ツールの動作区分の根拠、テスト例をまとめ、審査前の確認点も報告します。

• ChatGPT Appsの申請JSONを作りたいとき
• ツールの動作区分と実装を照合したいとき
• 審査用の正常系・負例テストを用意したいとき

HyperFramesの再利用ブロックやエフェクト部品を探して導入し、既存の構成へ組み込むスキル。表示時間や重なり順の設定、HTML・CSS・JSの統合を扱います。

• 配布一覧から使える部品を探したいとき
• 導入したブロックを既存の構成に追加
• エフェクトのコード片を統合したいとき

HyperFramesの作品でGSAPを使ったアニメーションを実装し、要素の登場や連続動作、再生制御、画面幅や動きを減らす設定への対応を整えるスキルです。

• HyperFramesで要素を登場させたいとき
• 複数要素の動く順序や開始時間を調整
• 画面幅や動きを減らす設定への対応

Reactアプリに3Dブラウザゲームや操作画面を組み込み、ゲームの処理と画面の状態を分けながら、メニューや設定と連動する構成を整えるスキル。

• Reactアプリに3Dゲームを組み込みたいとき
• 3Dシーンとメニューを連動させたいとき
• 3Dの商品選択画面の作成

ブラウザゲーム用の3Dモデルを整理し、GLB・glTF形式で配布するために軽量化するスキル。テクスチャの圧縮や当たり判定、距離別モデルの準備も扱います。

• Blenderモデルをブラウザ向けに整えたいとき
• GLB・glTFの容量を減らしたいとき
• 当たり判定と距離別モデルの準備

Three.jsで動くブラウザ向け3Dゲームの実装を支援します。シーンやカメラの直接制御、モデル読み込み、物理演算、画面表示の役割を分け、実行時の構造を整えます。

• ブラウザ向け3D探索デモの作成
• 乗り物やキャラクター移動の試作
• GLB読み込みとRapierの物理演算

Phaser・TypeScript・Viteで2Dブラウザゲームを開発し、ゲームルールと描画を分けながら、カメラやアニメーション、操作メニューを実装するスキル。

• マス目を使うターン制ゲームの開発
• 見下ろし探索や横視点アクションの制作
• ステータス表示や操作メニューの追加

ブラウザゲームの実装前に、エンジン選定、ゲーム状態と描画の分離、入力や素材の管理方針を整理し、保存・デバッグ・性能確認まで含めた設計の土台を固めます。

• 2D・3Dゲームのエンジンを選びたいとき
• ゲーム状態と描画の役割を分けたいとき
• 入力操作と素材の管理方針を決めたいとき

FigmaのデザインをSwiftUIで実装したり、SwiftUIの画面をFigmaに反映したりするスキル。iOS標準の画面構成や色、アイコンの対応も扱います。

• Figmaの画面をSwiftUIで実装したいとき
• 既存のSwiftUI画面をFigmaに移したいとき
• iOSの色やアイコンの対応づけ

ブラウザーゲームの構想を整理し、2D・3Dに合う技術と制作手順を選びます。遊びの仕組み、画面、素材、テストを一つの計画にまとめ、専門スキルへつなぎます。

• ブラウザーゲームの試作用技術を選定
• 遊びの流れや失敗条件、進行の設計
• 画面と2D・3D素材の制作計画

Expo SDKの更新に伴う依存関係の調整、診断、設定の整理を進めます。廃止されたパッケージや音声・動画APIの移行、ネイティブ構成の確認も支援します。

• Expo SDK更新と依存関係の修正
• expo-avの音声・動画処理の移行
• 更新に伴うネイティブ構成の確認

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

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

Expoアプリに端末固有の機能や画面部品を追加するため、Swift・Kotlin・TypeScriptを使ったネイティブモジュールの作成と設定を案内します。

• Expoにカメラやセンサー機能を追加
• 既存SDKをReact Native向けに接続
• プロパティとイベントを持つ画面部品の作成

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

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

Expo Routerでアプリの画面を作るために、レイアウトや画面遷移、ネイティブタブ、アニメーションの実装方針とコード例をまとめたスキルです。

• Expo Routerで画面を作りたいとき
• ネイティブタブと画面遷移の整理
• 検索やメニュー、画面効果の追加

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

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

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

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