Vercel Labs

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

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

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

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

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

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

JSONの画面仕様に、日付や通貨の整形、計算、文字列加工、多言語表示を加えます。既成の処理を組み合わせ、独自の変換処理の定義も支援するスキルです。

• 日付・通貨・割合を整形したいとき
• 価格と数量から合計を計算したいとき
• 本文の省略やタグの連結をしたいとき

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

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

Vueのjson-renderアプリに検査パネルを組み込み、画面の定義や状態、操作・ストリームの履歴を確認できるよう、導入・設定・問題調査を支援します。

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

JSONで書かれた画面仕様をReactの画面部品に変換します。部品の登録から、入力値の連動、条件付き表示、操作に応じた処理まで実装を支援するスキルです。

• AI生成のJSONを画面にしたいとき
• 再利用する画面部品を定義したいとき
• フォーム入力と共有データを連動したいとき

JSONで定義したメールをHTMLやプレーンテキストへ変換する実装を支援します。登録通知や販促メールの部品定義、条件別の内容表示、プレビューまで扱います。

• 登録完了などの通知メールの作成
• JSON仕様から販促メールを作りたいとき
• 状態や条件でメール内容を変えたいとき

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

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

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

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

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

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

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

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

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

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

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

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

ClaudeやChatGPTなどのクライアント内に、JSONから作る操作可能な画面を組み込むスキル。json-renderを使ったMCPサーバーと表示用アプリの実装を支援します。

• MCPクライアント内の操作画面作り
• 既存MCPサーバーへの表示機能追加
• React画面の単一HTML化

JSONで記述したタイムラインから、タイトルや画像、字幕を組み合わせた動画を構成するスキル。Remotionでの表示や、独自の映像部品の追加を支援します。

• JSONから動画を構成したいとき
• タイトルや画像スライドの作成
• 字幕や名前テロップの追加

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

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

JSONで記述した画面仕様から、入力欄や選択メニュー、表、グラフを備えたターミナル画面を組み立てます。状態に応じた表示切り替えや独自部品の追加も扱います。

• JSONからターミナル画面を作りたいとき
• 入力欄や選択メニューのあるフォーム作成
• 独自のターミナル部品を定義したいとき

json-renderのJSON仕様からSolidJSの画面を作る実装を支援します。部品の登録、入力値と状態の連動、操作の処理、画面が更新されない問題まで扱います。

• JSONからSolidJSの画面を作りたいとき
• 入力値とアプリの状態を連動したいとき
• 画面が更新されない原因の調査

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

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

AIが生成する画面や動画のJSON定義に、構造のルールと部品カタログを用意するスキル。プロンプト作成、逐次生成の処理、状態連携、定義の検証・修正を支援します。

• AI画面生成で使う部品を定義したいとき
• JSON生成・編集用プロンプトの作成
• AI応答から画面定義を逐次組み立てたいとき

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

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

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

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

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

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