Vercel Labs

Build interactive terminal interfaces from JSON specifications with @json-render/ink. The skill covers standard and custom components, input handling, state connections, conditional display, and progressively rendering specifications generated by AI.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Building a terminal dashboard from JSON
• Creating forms with input fields and selection menus
• Defining a catalog of custom terminal components

Build json-render interfaces with 36 ready-made UI components, including forms, tables, and navigation. This skill guides component selection, connects definitions to React implementations, and explains custom components and input validation.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add standard components to a json-render interface
• Build forms with input validation
• Combine ready-made and custom components

Connect json-render interfaces to XState Store for state management. The skill shows how to adapt an atom, a container holding application state, so json-render reads and writes through it.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connecting json-render screens to XState Store
• Using an existing atom as the source of UI state
• Setting up a StateStore adapter and StateProvider

Add and troubleshoot a developer panel in Svelte 5 json-render apps. Inspect JSON screen definitions, edit application state, review action and streaming timelines, browse component catalogs, and select elements directly from the page.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add a developer panel to a Svelte app
• Inspect screen definitions and edit application state
• Review action and streaming timelines

Connect json-render to Redux or Redux Toolkit so UI state reads and writes use a Redux store. The skill explains how to select the relevant state and dispatch actions that replace it when updates occur.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connecting json-render to an existing Redux store
• Using a Redux Toolkit slice for UI state
• Configuring state selection and update actions

Create HTML or plain-text emails from JSON specifications with React Email. This skill guides reusable email components, conditional content, server-side rendering, and browser previews for transactional messages such as signup notifications and marketing emails.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create signup notifications and other transactional emails
• Build marketing emails from JSON specifications
• Vary email content using state and conditions

Debug json-render interfaces with an inspector panel that shows screen specifications, editable runtime state, action history, and streamed updates. Select a rendered page element to locate its definition and investigate display or interaction problems.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Investigate missing or incorrectly displayed elements
• Inspect and edit application state at runtime
• Review action results and errors

Turn JSON timelines into Remotion video compositions with titles, images, text overlays, and animated statistics. The skill covers playback setup, reusable video components, transitions, effects, and adding custom clips to a video catalog.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a video composition from a JSON timeline
• Create title cards and image slides
• Add captions and name overlays

Set up an inspection panel in React json-render apps to examine UI definitions, edit state, and review action and stream timelines. The skill also covers opening or toggling the panel and recording events from React code.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding an inspection panel to a React app
• Inspecting UI definitions, state, and action history
• Opening or toggling the panel from React code

Build 3D scenes in React from JSON specifications using json-render. The skill covers shapes, lighting, model loading, materials, cameras, and view controls, plus connecting component definitions to their rendering implementations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a 3D scene from JSON
• Display GLTF or GLB models
• Configure lighting, materials, and shadows

Build multi-page Next.js applications from JSON specifications. This skill guides route setup, shared layouts, page metadata, and server-side rendering, which prepares pages on the server, with optional data loading before display.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a multi-page app from JSON specifications
• Share navigation and layouts across pages
• Load server data before rendering a page

Add and troubleshoot the json-render inspection panel in SolidJS applications. This skill covers panel setup for examining specifications, editing state, reviewing action and stream timelines, browsing component catalogs, and selecting page elements for inspection.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add an inspection panel to a SolidJS app
• Inspect JSON specifications and edit application state
• Review action and stream timelines

Create or update Claude skills that capture specialized knowledge and repeatable workflows. Guides the organization of instructions, scripts, references, and templates, then covers initialization, validation, and packaging into a distributable skill file.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Turning recurring work into a reusable Claude skill
• Organizing internal knowledge and API instructions
• Revising an existing skill after practical use

Add formatting, arithmetic, text processing, and translated labels to json-render specifications. This skill explains ready-made directives, or value-processing rules, how to combine them, and how to define custom rules for application-specific transformations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Format dates, currencies, and percentages
• Calculate totals from prices and quantities
• Shorten text and join lists of tags

Helps integrate YAML output into json-render, turning incoming text into incremental UI updates. Covers prompt generation, streaming parsing, and targeted edits to existing UI specifications through merge, patch, or diff formats.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Render UI updates as YAML arrives
• Generate prompts for YAML output
• Apply partial edits to existing UI specifications

Helps connect json-render to a Zustand store, where application values are managed. Covers sharing the entire store or selecting a nested portion, with configurable update behavior for the selected state.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Connect an existing Zustand store to json-render
• Use a nested portion of application state
• Customize how state updates are applied

Build TanStack Start pages from JSON specifications. This skill connects URL routes, shared layouts, server-side data loading, page metadata such as titles, and client navigation, including loading, error, and missing-page displays.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build multiple pages from JSON specifications
• Share layouts across pages
• Connect dynamic URLs to page data loading

Helps build custom code exporters from json-render UI specifications. Covers walking the UI tree, collecting components, state references, and actions, and formatting property values for JSX, the markup syntax used in React.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a custom exporter for Next.js or Remix
• List components and actions used in a UI specification
• Convert property values into JSX attributes

Helps connect json-render to a writable Jotai atom, a unit that holds application state. Covers adapter setup and sharing a Jotai store so json-render and React components read and update the same values.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Manage json-render state with a Jotai atom
• Share an existing Jotai store with json-render
• Share state between useAtom() and json-render

Define the structure and available components for AI-generated JSON screens or videos. Build generation prompts, process incremental updates, connect values to application state, and validate or repair definitions before passing them to a renderer.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Define allowed components for AI-generated screens
• Build prompts for generating or editing JSON definitions
• Assemble definitions from streamed AI responses

Turn JSON layout definitions into SVG or PNG images with Satori. Use this skill to create social sharing previews and cards, assemble standard layout and text components, or define custom components for image specifications.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating social sharing preview images from JSON
• Building social cards with standard components
• Rendering AI-generated JSON image definitions

Build Svelte interfaces for json-render using 36 ready-made components. This skill guides component selection, connects component definitions to implementations, and explains form validation settings for apps using Svelte 5 and Tailwind CSS.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Add standard UI components to a Svelte app
• Build forms with configurable validation
• Prepare component definitions for server-side prompts

Turn JSON screen descriptions into Svelte 5 interfaces. This skill covers component catalogs, registration, shared state, form bindings that keep inputs and data synchronized, conditional display, and streaming AI-generated interfaces as they arrive.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Render a Svelte interface from JSON
• Define and register reusable screen components
• Synchronize form inputs with shared state

Build MCP Apps that display interactive json-render interfaces inside clients such as Claude and ChatGPT. The skill covers a Node.js server, a React view, and packaging the interface into a single HTML file.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build an interactive UI inside an MCP client
• Add json-render tools to an existing MCP server
• Package a React interface into one HTML file