Search skills/

json-render Claude skills

Vercel Labs' Generative UI framework plus 32 agent skills that document each @json-render package: catalogs, renderers, devtools, codegen and more.

vercel-labs/json-render 32 skills Design & frontendVideo & media

recommended

A maintained Apache-2.0 set of package references that helps an agent write correct json-render code. It is only worth installing if you use the library.

check first: installs packages · relies on an outside CLI → security details

Depth
2/5
Last update
2 days ago
Installs
—
Stars
19K
Forks
1.0K
License
Apache-2.0

What json-render does

json-render is a framework for AI-generated interfaces. You define a catalog of components and actions with Zod schemas, the model returns a JSON spec limited to that catalog, and a renderer displays it. Specs can stream progressively as JSONL. The repo ships renderers for React, Vue, Svelte, Solid, React Native, Next.js, Ink terminal UIs, Remotion video, React PDF, React Email and React Three Fiber, along with 36 prebuilt shadcn/ui components.

The skills are API references for an agent writing code against those packages. The core skill covers defineSchema, defineCatalog, SpecStream and the experimental composeSpec decision-model API. Codegen documents traverseSpec, collectUsedComponents, serializeProps and the CodeGenerator type for building exporters. Other skills cover devtools (with short React, Solid, Svelte and Vue adapter notes), directives, image, ink, jotai, json-render-shadcn, mcp and next. The repo also includes general skills: skill-creator, which has an init_skill.py scaffolding script, and remotion-best-practices, which keeps topic rules files on subjects like maps, GIFs and 3D. An internal technical-writer skill under .agents/skills has three reference docs. Most skills are a single SKILL.md of a few KB with no references, scripts or evals.

Good for

  • Developers building apps on @json-render packages
  • Agents generating catalog-constrained UI specs in React, Vue, Svelte or Solid
  • Writing custom code exporters from json-render specs

Not for

  • Projects that do not use json-render
  • General frontend design guidance or visual polish

What's inside depth 2/5

32 skills averaging about 5.7 KB of API-focused instructions. Nearly all are a single SKILL.md, with a scaffolding script in skill-creator, rules files in remotion-best-practices, and no evals.

Skills
32
Reference docs
41
Scripts
3
Tests / evals
0
Templates
3
Avg SKILL.md
5.6 KB

Counted from the repository file tree. How we score depth.

Dependencies and costs

  • Node.js and the relevant @json-render npm packages
  • Vercel AI Gateway API key (AI_GATEWAY_API_KEY) only for the experimental composeSpec evaluator
  • Free Mapbox account and access token only for the Remotion maps rule
  • @resvg/resvg-js for rendering images to PNG

Security review

Security: Check first

This repo is a set of documentation skills for the json-render libraries, including Remotion best practices and a skill-creator guide. The skills mainly tell the agent how to write code and to install @json-render/* npm packages in your project. The skill-creator bundles Python scripts that create and package skill folders; those scripts, the packages' source, and most repo files were not available for this review.

Worth knowing

  • Installs packages or toolsSkill docs tell the agent to run npm install for @json-render/* packages and peer libraries in the user's project; other skills (core, mcp, react-pdf, redux, jotai, next) give similar instructions.skills/devtools/SKILL.md
  • Relies on a CLI or package we could not reviewThe skills rely on the published @json-render/* npm packages, whose source (packages/) was not among the files provided for review.skills/mcp/SKILL.md

What we checked

The repository (1685 files) on Nov 1, 2026. Not a full review: 1577 of 1685 files were not downloaded (large repository; we reviewed the skill folders); we read 0 of 3 code files; it relies on code outside the repository: skills/skill-creator/scripts/init_skill.py (listed in CODE FILES, full text not provided); skills/skill-creator/scripts/package_skill.py (listed in CODE FILES, full text not provided); skills/skill-creator/scripts/quick_validate.py (listed in CODE FILES, full text not provided).

NVIDIA SkillSpector static scan: 34 pattern hits (MCP Rug Pull 20, Agent Snooping 4, Rogue Agent 3, Privilege Escalation 2, Excessive Agency 2, Anti-Refusal 1). The credential and 'Data Exfiltration' hits are documentation examples: a Mapbox token placeholder, an AI Gateway key in sample server code, and fetch calls to example.com and lottiefiles in Remotion snippets. The 'Anti-Refusal' hit is an API contract ('custom evaluators must answer every offered question'), and the self-modification hits are skill-creator steps telling you to edit SKILL.md. The U+2060 hit is a single stray word-joiner inside a Mapbox style URL string in a code sample, not hidden instructions. 'npx' MCP rug-pull hits are ordinary CLI commands in docs.

A review, not a certification. Skills change after we check them — read the files before installing.

License

Apache-2.0, commercial use allowed.

Can it run unattended?

Not really. These are reference skills consulted while writing library code. They have no loops, stop conditions or verification steps for unattended runs.

Alternatives to json-render

The AI SDK repo's skills: one public ai-sdk skill for building with the SDK plus about a dozen maintainer-only skills for the monorepo.

with caveats Security: Check first depth2/5

shadcn/ui skills

shadcn-ui/ui

The official skills inside the shadcn/ui repo: a shadcn skill for adding, fixing and styling components, plus a Radix-to-Base-UI migration skill.

recommended Security: Check first depth4/5

Remotion Agent Skills

remotion-dev/skills

The Remotion team's twelve skills for building videos as React code: project setup, markup rules, maps, captions, studio, render and upgrades.

recommended Security: Check first depth3/5

Vercel Agent Skills

vercel-labs/agent-skills

Vercel's official 9-skill pack: React and Next.js performance rules, composition patterns, UI and writing review, React Native, deploy and cost audit.

recommended Security: Broad access depth3/5

FAQ

What is json-render?

json-render is a Generative UI framework from Vercel Labs. You define a catalog of components and actions, the model generates a JSON spec that can only use those components, and a renderer displays it. It supports React, Vue, Svelte, Solid, React Native, Next.js, Ink, Remotion, PDF, email and 3D scenes.

How do I install json-render?

Install the core package plus a renderer from npm, for example npm install @json-render/core @json-render/react for React or npm install @json-render/shadcn for prebuilt shadcn/ui components. The agent skills are in the repo's skills/ directory, one folder per package.

Do the json-render skills need an API key?

Most do not. The experimental composeSpec decision-model API runs a server-side evaluator through Vercel AI Gateway with AI_GATEWAY_API_KEY, and the Remotion maps rule needs a free Mapbox access token. The other skills only document npm packages.

Is json-render safe to install as a skill pack?

We found no hidden network calls, credential reads or telemetry. The scanner hits are documentation text. The only executable code is skill-creator's init_skill.py, which scaffolds a new skill folder. One code example in the Remotion maps rule contains a stray invisible character.

json-render vs shadcn/ui: what is the difference?

shadcn/ui is a component library you copy into your project. json-render is a framework that lets a model compose UI from a catalog you define. Its @json-render/shadcn package ships 36 shadcn/ui components ready to use as that catalog.

Curated by , AI enthusiast. Reviews are written by AI reviewers under our rubric and checked against the repository files.

Sources: GitHub repository (stars, license, file tree, last push Oct 30, 2026). Review based on the README and SKILL.md files as published.