Source profileQuality 86/100Review permissions

prisma/prisma/skills/prisma-next-build/SKILL.md

prisma-next-build

Wire Prisma Next into the project's build system with the right build-tool plugin — Vite today via @internal/vite-plugin-contract-emit (Vite 7 / 8); Next.js / Webpack / esbuild / Rollup / Turbopack are named as gaps rather than fabricated. Always offers the Vite plugin proactively when the project is using Vite. Use for vite plugin, vite-plugin, vite.config.ts, prismaVitePlugin, contract emit on save, HMR, hot reload contract, dev server, Next.js plugin, next plugin, withPrismaNext, webpack plug

Source repository stars
47,525
Declared platforms
0
Static risk flags
1
Last source update
2026-08-04
Source checked
2026-08-04

Decision brief

What it does—and where it fits

Edit your data contract. Prisma handles the rest.

Best for

  • The project is using Vite (the agent sees a vite.config.ts or @vitejs/ deps) and the contract is being consumed at runtime — proactively offer the plugin.
  • User asks how to wire Prisma Next into their Vite project.
  • User asks about Next.js integration, Webpack integration, or any other bundler — the answer is "not yet, here's the workaround" and the skill walks them through it.

Not for

  • Pointing the plugin at schema.psl instead of prisma-next.config.ts. The argument is the config path. The plugin reads the config to find the contract source.
  • Vite 6 or earlier. Not supported. Upgrade Vite to 7 or 8.

Compatibility matrix

Platform support, with evidence labels

PlatformStatusEvidenceWhat to check
CodexNot declaredNo explicit evidencePortability before use
Claude CodeNot declaredNo explicit evidencePortability before use
CursorNot declaredNo explicit evidencePortability before use
Gemini CLINot declaredNo explicit evidencePortability before use
Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource
npx skills add https://github.com/prisma/prisma --skill "skills/prisma-next-build"
Safe inspection promptEditorial

Inspect the Agent Skill "prisma-next-build" from https://github.com/prisma/prisma/blob/689981aeab99ca2918610f1acbe9c335312b15e8/skills/prisma-next-build/SKILL.md at commit 689981aeab99ca2918610f1acbe9c335312b15e8. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

  1. 01

    Workflow — Vite (the supported path)

    (Or npm install --save-dev, yarn add -D, bun add -d — use what the project's package manager is.)

    Start vite dev.Watch for the success log: [prisma-next] emitted contract.d.ts + contract.json.Edit prisma/schema.psl (e.g. add a field to a model).
  2. 02

    Workflow — React Router v7 Framework Mode

    The Vite plugin is compatible with @react-router/dev/vite. Both plugins are listed in vite.config.ts; there's no ordering constraint between them today, and the Prisma Next plugin's re-emit fires alongside React Router's own SSR re-load.

    The Vite plugin is compatible with @react-router/dev/vite. Both plugins are listed in vite.config.ts; there's no ordering constraint between them today, and the Prisma Next plugin's re-emit fires alongside React Router'…See examples/react-router-demo for the canonical configuration plus a smoke test that proves the dev loop.
  3. 03

    When to Use

    The project is using Vite (the agent sees a vite.config.ts or @vitejs/ deps) and the contract is being consumed at runtime — proactively offer the plugin.

    The project is using Vite (the agent sees a vite.config.ts or @vitejs/ deps) and the contract is being consumed at runtime — proactively offer the plugin.User asks how to wire Prisma Next into their Vite project.User asks about Next.js integration, Webpack integration, or any other bundler — the answer is "not yet, here's the workaround" and the skill walks them through it.
  4. 04

    When Not to Use

    User wants to wire db.ts and middleware → prisma-next-runtime.

    User wants to wire db.ts and middleware → prisma-next-runtime.User wants to file a feature request for an unbuilt bundler plugin → prisma-next-feedback.- User wants to wire db.ts and middleware → prisma-next-runtime. - User wants to file a feature request for an unbuilt bundler plugin → prisma-next-feedback.
  5. 05

    Key Concepts

    The plugin's job is contract emit, on a schedule the bundler knows about. It is not a runtime concern — at runtime, the application reads contract.json / contract.d.ts the same way whether the plugin emitted them or a s…

    The plugin's job is contract emit, on a schedule the bundler knows about. It is not a runtime concern — at runtime, the application reads contract.json / contract.d.ts the same way whether the plugin emitted them or a s…Vite 7 and Vite 8 only. Peer range ^7.0.0 || ^8.0.0. Vite 6 is not on the support matrix.executeContractEmit is the canonical publish path. Custom plugins for other bundlers must also call it — never re-implement the load → emit → publish dance. The atomic-rename invariant (contract.d.ts renamed before cont…

Permission review

Static risk signals and limitations

Runs scripts

medium · line 35

The documentation asks the agent to run terminal commands or scripts.

pnpm add -D @internal/vite-plugin-contract-emit

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial
SignalValueEvidence typeMeaning
Quality score86/100ComputedDocumentation, specificity, maintenance, and trust rules
Repository stars47,525SourceRepository attention, not individual Skill quality
Compatibility0 platformsSourceDeclared in the catalog source record
Usage guideautomated source guideEditorialGenerated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository
prisma/prisma
Skill path
skills/prisma-next-build/SKILL.md
Commit
689981aeab99ca2918610f1acbe9c335312b15e8
License
Apache-2.0
Collected
2026-08-04
Default branch
main
View the original SKILL.md

Prisma Next — Build-System Integration

Edit your data contract. Prisma handles the rest.

This skill covers Prisma Next's build-tool plugins — the dev-server / build-system integrations that re-emit contract artifacts automatically as the user edits the contract source. Today that's @internal/vite-plugin-contract-emit for Vite 7 and Vite 8. Next.js, Webpack, esbuild, Rollup, and Turbopack plugins are documented under What Prisma Next doesn't do yet with the workaround.

If the project is using Vite and consuming the contract, install the plugin. There's no good reason not to — manual prisma-next contract emit during dev is friction the plugin eliminates. The agent should proactively offer the plugin whenever it sees a vite.config.ts in the project; the user doesn't need to ask.

When to Use

  • The project is using Vite (the agent sees a vite.config.ts or @vitejs/* deps) and the contract is being consumed at runtime — proactively offer the plugin.
  • User asks how to wire Prisma Next into their Vite project.
  • User asks about Next.js integration, Webpack integration, or any other bundler — the answer is "not yet, here's the workaround" and the skill walks them through it.
  • User mentions: vite plugin, vite-plugin, vite.config.ts, prismaVitePlugin, contract emit on save, HMR, hot reload contract, dev server, vite 7, vite 8.
  • User mentions Next.js / Webpack / esbuild / Rollup / Turbopack in the context of Prisma Next integration — the gap-listing path fires.

When Not to Use

  • User wants to wire db.ts and middleware → prisma-next-runtime.
  • User wants to file a feature request for an unbuilt bundler plugin → prisma-next-feedback.

Key Concepts

  • The plugin's job is contract emit, on a schedule the bundler knows about. It is not a runtime concern — at runtime, the application reads contract.json / contract.d.ts the same way whether the plugin emitted them or a script did. The plugin saves you the manual command during development.
  • Vite 7 and Vite 8 only. Peer range ^7.0.0 || ^8.0.0. Vite 6 is not on the support matrix.
  • executeContractEmit is the canonical publish path. Custom plugins for other bundlers must also call it — never re-implement the load → emit → publish dance. The atomic-rename invariant (contract.d.ts renamed before contract.json) and the per-output FIFO queue live in @internal/cli/control-api.
  • No build-time / production emission. The Vite plugin runs in vite dev only. For vite build / production, run prisma-next contract emit from a prebuild script.

Workflow — Vite (the supported path)

1. Install the plugin

pnpm add -D @internal/vite-plugin-contract-emit

(Or npm install --save-dev, yarn add -D, bun add -d — use what the project's package manager is.)

2. Wire vite.config.ts

// vite.config.ts
import { defineConfig } from 'vite';
import { prismaVitePlugin } from '@internal/vite-plugin-contract-emit';

export default defineConfig({
  plugins: [prismaVitePlugin('prisma-next.config.ts')],
});

The argument is the path to prisma-next.config.ts relative to Vite root. Not the path to schema.psl or contract.ts — the plugin reads the config to discover the contract source.

3. Configure (optional)

plugins: [
  prismaVitePlugin('prisma-next.config.ts', {
    debounceMs: 150,           // delay before re-emitting (default 150)
    logLevel: 'info',          // 'silent' | 'info' | 'debug' (default 'info')
  }),
],

Set logLevel: 'debug' only while troubleshooting; default 'info' in committed config so the dev server isn't noisy.

4. Verify the dev loop

  1. Start vite dev.
  2. Watch for the success log: [prisma-next] emitted contract.d.ts + contract.json.
  3. Edit prisma/schema.psl (e.g. add a field to a model).
  4. Within ~150ms (the debounce), watch for a re-emit log line.
  5. Type-check your application code that uses the new field — should pass without restarting the dev server.

If the plugin warns about config-only watching, see Common Pitfalls.

5. CI / production builds

The plugin does not run during vite build. For CI and production deploys, run prisma-next contract emit as a prebuild step:

// package.json
{
  "scripts": {
    "prebuild": "prisma-next contract emit",
    "build": "vite build"
  }
}

pnpm build then runs prebuild automatically before build.

Workflow — React Router v7 Framework Mode

The Vite plugin is compatible with @react-router/dev/vite. Both plugins are listed in vite.config.ts; there's no ordering constraint between them today, and the Prisma Next plugin's re-emit fires alongside React Router's own SSR re-load.

import { reactRouter } from '@react-router/dev/vite';
import { prismaVitePlugin } from '@internal/vite-plugin-contract-emit';

export default defineConfig({
  plugins: [
    reactRouter(),
    prismaVitePlugin('prisma-next.config.ts'),
  ],
});

See examples/react-router-demo for the canonical configuration plus a smoke test that proves the dev loop.

Common Pitfalls

  1. Pointing the plugin at schema.psl instead of prisma-next.config.ts. The argument is the config path. The plugin reads the config to find the contract source.
  2. Vite 6 or earlier. Not supported. Upgrade Vite to 7 or 8.
  3. The plugin warns: "watching only the config; loader resolved inputs unavailable." The plugin couldn't resolve contract.source.inputs from the loader. The fallback watches only prisma-next.config.ts itself, so contract edits won't re-emit. Causes: the config file throws during loading; the contract source path resolves outside the Vite root. Fix the config error first, then check that the contract source path in the config is relative to (or inside) the Vite root.
  4. Expecting vite build to re-emit. It doesn't. Add a prebuild script.
  5. Emit errors during dev: the plugin surfaces them via Vite's error overlay. Read the overlay; the underlying cause is a contract authoring problem — chain to prisma-next-debug for resolution (PSL syntax, missing namespace, conflicting extensions).
  6. Re-installing dependencies without the plugin's peer-range move. When PN bumps the plugin's peer range, you must re-run pnpm install so the lockfile picks up the new range. A stale lockfile keeps the old plugin and produces confusing version mismatch warnings.

What Prisma Next doesn't do yet

  • Next.js plugin. No first-party @internal/next-plugin-* exists. Workaround: run prisma-next contract emit from a prebuild script in package.json and run it manually during development when the contract changes. Many Next.js projects also run a dev-time tsx --watch against a small script that calls the CLI on contract-source change. If you want a first-party Next.js plugin, file a feature request via the prisma-next-feedback skill.
  • Webpack, esbuild, Rollup, Turbopack plugins. None exist yet as first-party. Workaround: the canonical executeContractEmit surface lives in @internal/cli/control-api — a small per-bundler plugin can call it from the bundler's prebuild hook, but PN doesn't ship one for you. The vite-plugin-contract-emit source is the reference implementation if you want to write one yourself. If you want a first-party plugin for your bundler, file a feature request via the prisma-next-feedback skill.
  • vite build integration. The plugin runs in vite dev only. Workaround: a prebuild script that runs prisma-next contract emit. If you want the plugin to also run during vite build, file a feature request via the prisma-next-feedback skill.
  • Vite 6 or earlier. Not on the support matrix. Workaround: upgrade Vite to 7 or 8. If you have a hard reason to stay on Vite 6, file a feature request via the prisma-next-feedback skill.

Reference Files

Checklist

  • Plugin pointed at prisma-next.config.ts (not the contract source).
  • Vite version 7 or 8 (pnpm ls vite).
  • vite dev log shows the initial emit on server start.
  • Editing the contract source triggers a re-emit log line.
  • prebuild script (or equivalent) runs prisma-next contract emit for CI / production builds.
  • No vite build expectation that the plugin will run.
  • For non-Vite bundlers: surfaced the What PN doesn't do yet entry and routed the user to prisma-next-feedback if they want first-party support.
  • Did NOT confabulate a @internal/next-plugin-contract-emit package or any other bundler-specific plugin that doesn't exist.

Alternatives

Compare before choosing

Computed 9382

aAAaqwq/AGI-Super-Team

ui-ux-pro-max

UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: g

Computed 9123,781

alirezarezvani/claude-skills

code-to-prd

Reverse-engineer any codebase into a complete Product Requirements Document (PRD). Analyzes routes, components, state management, API integrations, and user interactions to produce business-readable documentation detailed enough for engineers or AI agents to fully reconstruct every page and endpoint. Works with frontend frameworks (React, Vue, Angular, Svelte, Next.js, Nuxt), backend frameworks (NestJS, Django, Express, FastAPI), and fullstack applications. Use when users mention: generate PRD,

Computed 9123,781

alirezarezvani/claude-skills

senior-fullstack

Fullstack development toolkit with project scaffolding for Next.js, FastAPI, MERN, and Django stacks, code quality analysis with security and complexity scoring, and stack selection guidance. Use when the user asks to "scaffold a new project", "create a Next.js app", "set up FastAPI with React", "analyze code quality", "audit my codebase", "what stack should I use", "generate project boilerplate", or mentions fullstack development, project setup, or tech stack comparison.

Computed 9037,425

github/awesome-copilot

markstream-install

Install and configure Markstream streaming Markdown renderers for Vue, React, Svelte, Angular, Nuxt, and Vue 2 applications. Use for package selection, minimal peer dependencies, CSS order, SSR boundaries, streaming mode, and renderer setup.