開発のスキル

iiiで関数とイベントを結び付け、結果を待つ呼び出しやキュー処理を使い分けるスキル。ワーカーの作成・追加、稼働中の登録情報の確認も扱います。

• HTTPや定期実行で関数を動かしたいとき
• 直接呼び出しとキュー処理の使い分け
• 登録済みワーカーや関数の確認

iiiの関数やキュー、状態管理を組み合わせ、再試行を伴う業務フロー、リアルタイム更新、複数AIエージェントの連携などを要件に応じて設計するスキル。

• 再試行と進捗記録のある注文処理を作りたいとき
• データ変更を画面やキャッシュへ反映したいとき
• 専門別のAIエージェントで作業を引き継ぎたいとき

iiiエンジンの導入からプロジェクト作成、最初のワーカー実装、HTTPでの動作確認までを案内するスキル。言語別SDKの導入と既存ワーカーの追加も扱います。

• iiiを導入して新規プロジェクトを作成
• 使用言語に合わせたSDKの導入
• 最初のHTTPワーカーの実装と確認

リアルタイムデータの保存・更新と、変更に応じた自動処理を組み立てるスキル。購読権限の確認や接続状況の把握も扱い、定期的な問い合わせに頼らず変更を配信します。

• データ変更をリアルタイム配信したいとき
• 購読開始前に権限を確認したいとき
• 接続・切断の状況把握

コードの差分やファイルを読み、命名・型・責務の分け方・重複などを点検し、問題のあるファイルと行、理由、具体的な修正案を示すレビュースキル。

• PRの変更内容をレビューしたいとき
• 命名と関数のインターフェースの点検
• 重複や責務の混在を見つけたいとき

json-renderで使う画面部品を、36種類の標準部品から選んで組み込むスキル。フォームの入力検証や独自部品の追加も含め、Web画面の実装を支援します。

• カタログに標準UI部品を追加したいとき
• 入力検証付きフォームを作りたいとき
• 標準部品と独自部品の組み合わせ

json-renderの画面状態を、XState Storeで管理するための接続を支援します。状態を保持するatomを使い、画面からの読み書きを同じ管理先につなぎます。

• 画面の状態管理にXState Storeを導入
• 既存のatomを画面状態の管理先にする
• StateStoreの接続を設定したいとき

json-renderを使うSvelteアプリに、ボタンやフォームなどの標準UI部品を組み込みます。36種類から必要な部品を選び、定義と実装の登録を進めます。

• Svelteに標準UI部品を追加したいとき
• 入力検証付きフォームの作成
• サーバー用の部品定義を準備したいとき

JSONの画面仕様からTanStack StartのページやURLごとの表示を構築するスキル。共通レイアウト、データ取得、ページ情報、画面遷移の接続を支援します。

• JSON仕様から複数ページを作りたいとき
• ページ間で共通レイアウトを使いたいとき
• 動的URLとデータ取得の接続

JSONで定義した文書から、見出し・表・画像を含むPDFを生成するスキル。ファイル保存やHTTP配信用の出力、独自部品の追加、状態管理の組み込みを支援します。

• JSONから請求書PDFを作りたいとき
• 表や画像を含む文書の生成
• PDFをHTTPで配信したいとき

json-renderの画面で使う値を、Zustandと共有する実装を支援するスキル。ストア全体の接続に加え、入れ子になった一部の状態を選び、更新方法も設定できます。

• 既存のZustandストアを接続したいとき
• アプリの状態の一部を利用したいとき
• 状態の更新方法を調整したいとき

json-renderの画面で扱う値を、Jotaiのatomにつなぐ実装を支援するスキル。既存のストアを共有し、通常のReact部品からも同じ状態を読み書きできます。

• 画面の状態をJotaiのatomで管理
• 既存のJotaiストアを共有したいとき
• useAtom()と画面の状態を共有

JSONで記述した画面をSvelte 5の部品として表示するスキル。部品の定義と登録、入力値の同期、条件付き表示、AIが生成中の画面の逐次表示まで支援します。

• JSONからSvelte画面を表示したいとき
• 再利用する画面部品の定義と登録
• フォーム入力と共有データの同期

json-renderの画面仕様からコードを書き出す仕組みを作るスキル。画面構造の読み取り、使用部品や状態参照の収集、JSX向けの属性の文字列化を支援します。

• Next.jsやRemix向けの出力処理作成
• 画面仕様の部品や操作を一覧にしたいとき
• 属性の値をJSX形式に変換したいとき

JSONの画面仕様をVue 3の部品に変換し、入力値の同期や条件付き表示、ボタン操作を実装するスキル。AIが生成した画面の表示や、既存の状態管理との連携も扱います。

• AI生成のJSON画面をVue 3で表示
• 入力値の同期と検証を備えたフォーム作り
• 状態に応じた表示の切り替え

json-renderの画面に検査パネルを追加し、画面仕様や実行中の状態、操作履歴、生成データの流れを確認するスキル。表示要素から仕様の該当箇所も探せます。

• 要素が表示されない原因を調べたいとき
• 実行中の状態の確認と編集
• 操作処理の結果やエラーの確認

専門知識や定型作業をClaude向けのスキルにまとめ、繰り返し使える形に整えます。指示文と付属資料の設計から初期化、検証、配布用ファイルの作成まで案内します。

• 定型作業をスキル化したいとき
• 社内知識やAPI手順の整理
• 利用結果を基に既存スキルを改善

SolidJSのjson-renderアプリに開発用の検査パネルを組み込みます。画面仕様や状態の確認・編集、操作やストリームの履歴を調べるための設定を支援します。

• SolidJSに検査パネルを追加したいとき
• 画面仕様とアプリの状態を調べたいとき
• 操作やストリームの履歴を確認したいとき

Svelte 5のjson-renderアプリに開発用パネルを導入し、画面定義の検査や状態編集、操作履歴の確認を進めるスキル。設定や不具合の調査にも使えます。

• Svelteに開発用パネルを追加したいとき
• 画面定義の検査と状態編集
• 操作やストリームの履歴確認

JSONで定義した図形や照明、3DモデルをReactの画面に表示するスキル。json-renderと連携し、材質やカメラ、視点操作を含む3Dシーンを組み立てます。

• JSONから3Dシーンを作りたいとき
• GLTF・GLBモデルの表示
• 照明・材質・影の設定

Reactのjson-renderアプリに検査パネルを追加し、画面定義・状態・操作履歴の確認や、コードからのパネル操作とイベント記録の設定を支援します。

• Reactアプリに検査パネルを追加したいとき
• 画面定義・状態・操作履歴を確認したいとき
• Reactのコードからパネルを開閉

JSONで記述した画面仕様から、React Nativeのモバイル画面を組み立てます。標準部品や独自部品を使い、入力値の連携や操作に応じた表示切り替えも扱います。

• JSONからモバイル画面を作りたいとき
• フォーム入力と状態を連携したいとき
• タップによるタブ表示の切り替え

json-renderで、AIが出力するYAMLを受信しながら画面に反映するためのスキル。プロンプト生成から段階的な解析、既存の画面仕様の部分更新までを扱います。

• YAMLの受信中に画面を更新したいとき
• YAML出力用の指示文を作りたいとき
• 既存の画面仕様を部分修正したいとき

JSONで定義した画面構成から、複数ページのNext.jsアプリを組み立てます。共通レイアウト、URLごとの表示、サーバー描画やメタデータ設定を扱うスキルです。

• JSONから複数ページを作りたいとき
• 共通ナビゲーションを設けたいとき
• 表示前にサーバーデータを取得したいとき