next Skill (vercel-labs) for Claude Code: What It Does and How to Install It

Teaches Claude the @json-render/next package, which turns a JSON spec into a Next.js app with routes, layouts and SSR.

Installs: 8.6K; on skills.sh
Stars: 18.9K; on GitHub
Updated: Nov 2026; last repo commit

Load it when you work with @json-render/next. It is a reference for the package, not a general Next.js skill. Claude learns how to write a NextAppSpec with metadata, layouts and routes, create the app with createNextApp, and wire up the app/[[...slug]] route files.

It also covers dynamic and catch-all routes, built-in actions, server-side data loaders and the package's client and server exports. The Quick Start tells the agent to install @json-render/core, @json-render/react and @json-render/next into your project.

Good for

Next.js developers using the json-render library
Builders of AI-generated multi-page apps from JSON specs
Teams that want routes, layouts and SEO metadata defined as data

Install next

Claude Code

Copy this prompt.

Install the next skill in Claude Code. Run this command:

npx skills add https://github.com/vercel-labs/json-render --skill next

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

Pick one route. This skill is a reference for the @json-render/next package, and the agent installs packages into your Next.js project, so there is no Claude app upload route. The repo has 31 skill folders under skills/ (git tree); the repo README documents no skill install command.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Quick Start
1. Define Your Spec
2. Create the App
3. Wire Up Route Files
Key Concepts
NextAppSpec
Route Patterns
Layouts
Built-in Components
Built-in Actions
Data Loaders
SSR
Entry Points
API Reference
Server Exports (@json-render/next/server)
Client Exports (@json-render/next)

Key facts

Author: Vercel Labs (the README carries a "Vercel Labs Product" badge)
License: Apache-2.0
Installs on skills.sh: 8,592 (Nov 2, 2026)
GitHub stars: 18,872 for the whole vercel-labs/json-render repo (Nov 2, 2026)
Last repo commit: Nov 1, 2026
What it includes: 1 file: SKILL.md. It bundles no scripts
skills.sh audits: Gen Agent Trust Hub: pass; Socket: pass; Snyk: pass (Nov 2, 2026)
Needs: A Next.js project; the npm packages @json-render/core, @json-render/react and @json-render/next

What it includes

A NextAppSpec with metadata, layouts and routes
Every layout must include a Slot component where page content renders.
Try: “Build a two-page Next.js app from a json-render spec”
Write · Quick start, step 1: define the spec
createNextApp returns Page, generateMetadata and generateStaticParams
Accepts optional server-side loaders that run before the page renders.
Write · Quick start, step 2: create the app
app/[[...slug]]/page.tsx and layout.tsx
The layout wraps children in NextAppProvider with your registry and handlers.
Write · Quick start, step 3: wire route files
Home, static, dynamic, catch-all and optional catch-all routes
For example /blog/[slug], /docs/[...path] and /settings/[[...path]].
Route patterns
setState, pushState, removeState and navigate
They update or navigate state from the spec; Slot and Link are the two built-in components.
Built-in actions
Async server functions whose results merge into page state
The Page component matches the route, runs loaders, builds metadata and hands the spec to the client renderer.
Data loaders and SSR
6 server exports and 6 client exports
Server: createNextApp, schema, matchRoute, resolveMetadata, slugToPath, collectStaticParams. Client: NextAppProvider, PageRenderer and 4 more.
API reference

From the official docs

Permissions

Low risk

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It edits your project code
The Quick Start writes route and layout files under app/. Commit your work first and review the changes. github.com
It adds npm dependencies
The Quick Start installs @json-render/core, @json-render/react and @json-render/next. Check the versions it adds. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. Use version control.
Talks to	npm registry (package installs)
Sign-in and keys	SKILL.md names no account or key.
Scopes	Installs three npm packages with npm install Creates or edits spec, app and route files in your Next.js project (lib/spec.ts, lib/app.ts, app/[[...slug]]/page.tsx and layout.tsx)

Questions

What does the next skill do?

It teaches your agent how to use @json-render/next. That package turns a JSON spec into a Next.js app with routes, layouts, metadata and server-side rendering.

Is it a general Next.js skill?

No. It covers the @json-render/next package only. The name "next" refers to that package, and it is published by Vercel Labs in the json-render repo, not in the Next.js framework repo.

Is it official, and is it by the Next.js team?

It is in Vercel's own vercel-labs organisation, and the README carries a "Vercel Labs Product" badge. It documents the json-render library's @json-render/next package, not the Next.js framework itself.

How do I install it in Claude Code?

Use the install box at the top of this page. The repo README documents no skill install command, so the box uses the skills CLI listing and the standard skills folders.

What does it install in my project?

The Quick Start runs npm install @json-render/core @json-render/react @json-render/next. Your agent adds those packages when it follows the skill.

Does it need an API key?

SKILL.md names no key or account. It documents a library and bundles no scripts.

Are there related skills?

The json-render repo has 31 skill folders, including core and react, which match the other two packages in the Quick Start. SKILL.md does not tell the agent to load them.

Is it safe?

It bundles no scripts. It does lead your agent to install npm packages and write files in your Next.js project, so our advice is to use version control and review the diff.

Information

updated Nov 2, 2026

Repository: vercel-labs/json-render
Folder: skills/next

vercel-labs/json-render skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

next SKILL.md · github.com
json-render README · github.com
next on skills.sh · skills.sh