What about Next.js’s own agent setup?

Use it too. From Next.js 16.3, `next dev` writes an AGENTS.md that points the agent at docs bundled with your exact version. On older versions, `npx @next/codemod@canary agents-md` does the same. Next.js also ships a few workflow skills, such as cache components and prefetching, in the Next.js repo.

Can I install them all at once?

Yes. `npx skills add vercel-labs/agent-skills` lists every skill in the repo and lets you pick. It includes the React Native skills, which belong in the Expo stack.

Do these work with Cursor and Codex?

Yes. They are skills, and the `skills` command can put them in Claude Code, Cursor, Codex and other agents.

Do I need Vercel to use them?

Only the three deploy and optimize skills need Vercel. Mobbin and the React, composition, view transition and review skills work on any host.

Stacks

The AI coding setup for Next.js apps.

For Next.js it is Mobbin for design, then Vercel’s own agent skills: rules for fast React code, components that stay simple, motion, reviews for the UI and the copy, and deploying.

Start here

This sits on top of the agents stack

In short

VMGM Software builds Next.js apps with an AI coding agent that uses the Mobbin MCP and the Vercel Labs agent skills.
The Mobbin MCP lets the agent look at real web app screens before it designs a page.
Vercel’s React best practices and composition patterns give the agent rules for fast React code and components that stay simple as they grow.
The React view transitions skill teaches the agent to animate page changes with the View Transition API.
The web design and writing guidelines skills review the UI and the copy before a page ships.
The deploy-to-vercel, Vercel CLI and vercel-optimize skills cover deploying and keeping a live project fast and cheap.

What is in the Next.js stack?

DesignMCP
Mobbin MCP
by Mobbin
Searches screens and flows from real, shipped web apps, so the agent does not design every page the same default way.
How we use it: Before the agent builds or redesigns a page, it searches how other web apps do it and writes down what to borrow and what to skip.
bash
```
claude mcp add mobbin --scope user --transport http https://api.mobbin.com/mcp
```
Our Mobbin MCP guide Mobbin MCP docs
Fast React codeSkill
React best practices
by Vercel
Vercel’s rules for fast React and Next.js code, ranked by impact: extra re-renders, data fetching and bundle size.
How we use it: The agent reads these whenever a page re-renders too often, fetches in a waterfall or ships too much JavaScript.
bash
```
npx skills add vercel-labs/agent-skills --skill vercel-react-best-practices
```
React best practices on GitHub
ComponentsSkill
Composition patterns
by Vercel
React patterns for components that stay simple as they grow: compound components, lifted state and context instead of a pile of true-or-false props.
How we use it: When a component keeps gaining props, the agent splits it into smaller parts that fit together.
bash
```
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns
```
Composition patterns on GitHub
MotionSkill
React view transitions
by Vercel
Teaches the agent React’s View Transition API: page transitions, shared elements that move between pages, and items entering, leaving and reordering.
How we use it: Our pick whenever a page change or a list should animate.
bash
```
npx skills add vercel-labs/agent-skills --skill vercel-react-view-transitions
```
React view transitions on GitHub
UI reviewSkill
Web design guidelines
by Vercel
Reviews UI code against Vercel’s Web Interface Guidelines: accessibility, focus, forms, layout and the small details that make a page feel finished.
How we use it: The agent runs it on every new page before it ships.
bash
```
npx skills add vercel-labs/agent-skills --skill web-design-guidelines
```
Web design guidelines on GitHub
Copy reviewSkill
Writing guidelines
by Vercel
Reviews docs and page copy against Vercel’s writing handbook: voice, tone and clarity.
How we use it: A pass over the words on a page before it goes live.
bash
```
npx skills add vercel-labs/agent-skills --skill writing-guidelines
```
Writing guidelines on GitHub
DeploySkill
Deploy to Vercel
by Vercel
Lets the agent deploy the app to Vercel and hand back the link, for a preview or for production.
How we use it: The agent puts up a preview for every change worth looking at, so we review a link, not a diff.
bash
```
npx skills add vercel-labs/agent-skills --skill deploy-to-vercel
```
Deploy to Vercel on GitHub
Deploy without a loginSkill
Vercel CLI with tokens
by Vercel
Runs the Vercel CLI with an access token instead of an interactive login: deploys, environment variables and project setup.
How we use it: For agents running in the cloud or in CI, where nobody is there to click through a browser login.
bash
```
npx skills add vercel-labs/agent-skills --skill vercel-cli-with-tokens
```
Vercel CLI with tokens on GitHub
Cost and speedSkill
vercel-optimize
by Vercel
Reads a live project’s Vercel metrics, usage and config, then ranks fixes for cost and speed, each backed by a real number.
How we use it: When a Vercel bill jumps or a page slows down, the agent starts here instead of guessing.
bash
```
npx skills add vercel-labs/agent-skills --skill vercel-optimize
```
vercel-optimize on GitHub

How do they work together?

Design. The agent searches Mobbin for how real web apps do the page, then builds it with our own colours and fonts.
Build. The agent writes the page with the React rules and the composition patterns, and view transitions where it moves.
Review. Before it ships, the web design and writing guidelines check the UI and the words.
Deploy. The agent puts up a preview on Vercel and hands back the link.
Keep it fast. Once it is live, vercel-optimize reads the real numbers and ranks what to fix.

Frequently asked questions

What about Next.js’s own agent setup?: Use it too. From Next.js 16.3, next dev writes an AGENTS.md that points the agent at docs bundled with your exact version. On older versions, npx @next/codemod@canary agents-md does the same. Next.js also ships a few workflow skills, such as cache components and prefetching, in the Next.js repo.
Can I install them all at once?: Yes. npx skills add vercel-labs/agent-skills lists every skill in the repo and lets you pick. It includes the React Native skills, which belong in the Expo stack.
Do these work with Cursor and Codex?: Yes. They are skills, and the skills command can put them in Claude Code, Cursor, Codex and other agents.
Do I need Vercel to use them?: Only the three deploy and optimize skills need Vercel. Mobbin and the React, composition, view transition and review skills work on any host.

None of these makers pay us to list them. Setup commands checked on September 30, 2026.

We set this up on your team’s codebase, with the rules that make the agent use it well.

Talk to us about your team

The AI coding setup for Next.js apps.

What is in the Next.js stack?

Mobbin MCP

React best practices

Composition patterns

React view transitions

Web design guidelines

Writing guidelines

Deploy to Vercel

Vercel CLI with tokens

vercel-optimize

How do they work together?

Frequently asked questions