Agent Skills

codegen

★ 15,622

by vercel

Code generation utilities for json-render. Use when generating code from UI specs, building custom code exporters, traversing specs, or serializing props for @json-render/codegen.

🧰 Not standalone — use together with vercel-labs/json-render

core

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

devtools

★ 15,622

by vercel

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

🧰 Not standalone — use together with vercel-labs/json-render

directives

★ 15,622

by vercel

Pre-built custom directives for json-render — formatting, math, string manipulation, and i18n. Use when working with @json-render/directives, defining custom directives with defineDirective, or adding $format, $math, $concat, $count, $truncate, $pluralize, $join, or $t to specs.

🧰 Not standalone — use together with vercel-labs/json-render

image

★ 15,622

by vercel

Image renderer for json-render that turns JSON specs into SVG and PNG images via Satori. Use when working with @json-render/image, generating OG images from JSON, creating social cards, or rendering AI-generated image specs.

🧰 Not standalone — use together with vercel-labs/json-render

ink

★ 15,622

by vercel

Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from JSON, creating terminal component catalogs, or rendering AI-generated specs in the terminal.

🧰 Not standalone — use together with vercel-labs/json-render

jotai

★ 15,622

by vercel

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

🧰 Not standalone — use together with vercel-labs/json-render

mcp

★ 15,622

by vercel

MCP Apps integration for json-render. Use when building MCP servers that render interactive UIs in Claude, ChatGPT, Cursor, or VS Code, or when integrating json-render with the Model Context Protocol.

🧰 Not standalone — use together with vercel-labs/json-render

next

★ 15,622

by vercel

Next.js renderer for json-render that turns JSON specs into full Next.js applications with routes, layouts, SSR, and metadata. Use when working with @json-render/next, building Next.js apps from JSON specs, or creating AI-generated multi-page applications.

🧰 Not standalone — use together with vercel-labs/json-render

react-email

★ 15,622

by vercel

React Email renderer for json-render that turns JSON specs into HTML or plain-text emails using @react-email/components and @react-email/render. Use when working with @json-render/react-email, building transactional or marketing emails from JSON, creating email catalogs, rendering AI-generated email specs, or when the user mentions react-email, HTML email, or transactional email.

🧰 Not standalone — use together with vercel-labs/json-render

react-native

★ 15,622

by vercel

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

🧰 Not standalone — use together with vercel-labs/json-render

react-pdf

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

react-three-fiber

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

redux

★ 15,622

by vercel

Redux adapter for json-render's StateStore interface. Use when integrating json-render with Redux or Redux Toolkit for state management via @json-render/redux.

🧰 Not standalone — use together with vercel-labs/json-render

remotion

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

remotion-best-practices

★ 15,622

by vercel

Best practices for Remotion - Video creation in React

🧰 Not standalone — use together with vercel-labs/json-render

shadcn

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

shadcn-svelte

★ 15,622

by vercel

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

🧰 Not standalone — use together with vercel-labs/json-render

skill-creator

★ 15,622

by vercel

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

🧰 Not standalone — use together with vercel-labs/json-render

solid

★ 15,622

by vercel

SolidJS renderer for json-render. Use when building @json-render/solid catalogs/registries, wiring Renderer providers, implementing bindings/actions, or troubleshooting Solid-specific reactivity patterns.

🧰 Not standalone — use together with vercel-labs/json-render

svelte

★ 15,622

by vercel

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

🧰 Not standalone — use together with vercel-labs/json-render

vue

★ 15,622

by vercel

Vue 3 renderer for json-render. Use when building Vue UIs from JSON specs, working with @json-render/vue, defining Vue component registries, or rendering AI-generated specs in Vue.

🧰 Not standalone — use together with vercel-labs/json-render

xstate

★ 15,622

by vercel

XState Store adapter for json-render's StateStore interface. Use when integrating json-render with @xstate/store for state management via @json-render/xstate.

🧰 Not standalone — use together with vercel-labs/json-render

yaml

★ 15,622

by vercel

YAML wire format for json-render with streaming parser, prompt generation, and AI SDK transform. Use when working with @json-render/yaml, YAML-based spec streaming, yaml-spec/yaml-edit fences, or YAML prompt generation.

🧰 Not standalone — use together with vercel-labs/json-render

zustand

★ 15,622

by vercel

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

🧰 Not standalone — use together with vercel-labs/json-render

react

★ 15,622

by vercel

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.

🧰 Not standalone — use together with vercel-labs/json-render

oauth

★ 10,047

by vercel

Configure OAuth providers (Google, Apple, Microsoft, Facebook, GitHub, etc.) to work with portless local dev URLs. Use when setting up OAuth redirect URIs, fixing "redirect_uri_mismatch" or "invalid redirect" errors, configuring sign-in providers for local development, or when a provider rejects .localhost subdomains. Triggers include "OAuth not working with portless", "redirect URI mismatch", "Google/Apple/Microsoft sign-in fails locally", "configure OAuth for local dev", or any task involving

🧰 Not standalone — use together with vercel-labs/portless

portless

★ 10,047

by vercel

Set up and use portless for named local dev server URLs (e.g. https://myapp.localhost instead of http://localhost:3000). Use when integrating portless into a project, configuring dev server names, setting up the local proxy, working with .localhost domains, or troubleshooting port/proxy issues.

🧰 Not standalone — use together with vercel-labs/portless

deepsec

★ 5,095

by vercel

Use deepsec (an AI-powered vulnerability scanner) — running scans, configuring projects, writing matchers, and authoring plugins. Activates when the user asks how to scan, configure, or extend deepsec in a project that has deepsec installed.

🧰 Not standalone — use together with vercel-labs/deepsec

opensrc

★ 2,759

by vercel

Fetch dependency source code to give AI agents deeper implementation context. Use when the agent needs to understand how a library works internally, read source code for a package, fetch implementation details for a dependency, or explore how an npm/PyPI/crates.io package is built. Triggers include "fetch source for", "read the source of", "how does X work internally", "get the implementation of", "opensrc path", or any task requiring access to dependency source code beyond types and docs.

🧰 Not standalone — use together with vercel-labs/opensrc