Communityコーディング&開発github.com

vercel-labs/react-native

json-render 用の React Native レンダラーで、JSON 仕様をネイティブモバイル UI に変換します。@json-render/react-native を使用する際、JSON から React Native UI を構築する際、モバイルコンポーネントカタログを作成する際、または AI 生成仕様をモバイル上でレンダリングする際に使用します。

react-native とは?

このスキルは、vercel-labs/react-native パッケージをベースにした React Native レンダラーで、JSON 形式の仕様(スペック)を解析し、ネイティブモバイル UI に変換する機能を提供します。主に @json-render/react-native と連携して動作し、開発者が JSON データから動的に React Native のコンポーネントツリーを生成できるようにします。これにより、AI エージェントが生成した UI 仕様をそのままモバイルアプリ上でレンダリングしたり、サーバーから取得した JSON 設定に基づいて動的な UI を構築したり、モバイルコンポーネントカタログを自動的に作成したりすることが可能になります。Claude Code、Cursor、Codex などの AI エージェントプラットフォームで利用でき、開発者はモバイル UI の迅速なプロトタイピングや、AI 支援による動的 UI 生成のワークフローを効率化できます。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/vercel-labs/json-render/tree/main/skills/react-native

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

react-native は何をしますか?

json-render 用の React Native レンダラーで、JSON 仕様をネイティブモバイル UI に変換します。@json-render/react-native を使用する際、JSON から React Native UI を構築する際、モバイルコンポーネントカタログを作成する際、または AI 生成仕様をモバイル上でレンダリングする際に使用します。

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

vercel-labs/core

Core package for defining schemas, catalogs, and AI prompt generation for json-render. Use when working with @json-render/core, defining schemas, creating catalogs, or building JSON specs for UI/video generation.

vercel-labs/react

React renderer for json-render that turns JSON specs into React components. Use when working with @json-render/react, building React UIs from JSON, creating component catalogs, or rendering AI-generated specs.

vercel-labs/react-pdf

React PDF renderer for json-render. Use when generating PDF documents from JSON specs, working with @json-render/react-pdf, or rendering specs to PDF buffers/streams/files.

vercel-labs/react-three-fiber

React Three Fiber 3D renderer for json-render. Use when working with @json-render/react-three-fiber, building 3D scenes from JSON specs, rendering meshes/lights/models/environments, or integrating Three.js with json-render catalogs.

vercel-labs/remotion

Remotion renderer for json-render that turns JSON timeline specs into videos. Use when working with @json-render/remotion, building video compositions from JSON, creating video catalogs, or rendering AI-generated video timelines.

vercel-labs/shadcn

Pre-built shadcn/ui components for json-render. Use when working with @json-render/shadcn, adding standard UI components to a catalog, or building web UIs with Radix UI + Tailwind CSS components.

vercel-labs/zustand

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

関連スキル