insight-error-page

Name: insight-error-page
Author: vercel

141kstars31kforks

How to install insight-error-page?

vercel/next.js/insight-error-page

$npx -y skills add vercel/next.js --skill insight-error-page

Installs into the current project.

Summary

Write or audit an insight-kind error page for the Next.js dev overlay. Use when creating a new errors/<slug>.mdx page, auditing an existing one, or checking that a page matches the framework fix cards. Covers page structure, title alignment, FixCard cards with Copy prompt butto

Files · 1

View on GitHub

SKILL.md

1	# Insight Error Page — Write & Audit
2
3	Write or audit an `errors/<slug>.mdx` insight-kind page that ships from this repo to `nextjs.org` and mirrors the fix-card set in the Next.js dev overlay.
4
5	> Terminology: the frontmatter uses `kind: insight` but the body text calls these "errors" — never "insights". Write "this error", "error pages", "dismiss the error".
6
7	## When to use this skill
8
9	- Write mode: "create the error page for `next-prerender-random`", "write the sync IO docs"
10	- Audit mode: "audit the blocking-prerender-dynamic page", "check the error pages match the framework"
11	- Any task involving `errors/*.mdx` insight pages (frontmatter has `kind: insight`)
12
13	## Source of truth chain
14
15	Every decision traces back to one of these. When in doubt, read the source — don't guess.
16
17	\| What \| Source file \| How to read it \|
18	\| --------------------------------------------- \| --------------------------------------------------------------------------------------------- \| ---------------------------------------------------------------------------------------------------- \|
19	\| Card titles, IDs, groups, snippets, link URLs \| `packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts` \| Each `FixCard[]` array is one error family \|
20	\| Error headline (literal text user sees) \| `packages/next/src/server/app-render/sync-io-messages.ts`, `blocking-route-messages.ts`, etc. \| `createSyncIOError`, `createDynamicBodyError`, etc. — the template string is the headline \|
21	\| Existing page (content to preserve) \| `errors/<slug>.mdx` in this repo \| Read the full file; relocate useful content that doesn't fit fix cards into Gotchas or Other options \|
22	\| Canonical API docs (terminology) \| `docs/01-app/` in this repo \| Cross-check every API name, directive name, and concept against the published docs \|
23	\| Template structure \| This skill file (below) \| The canonical shape of the page \|
24	\| Vercel writing style \| The `vercel-technical-writing` skill in `vercel/front` (not present here) \| Apply end-to-end; see "Voice and style" below for the rules condensed \|
25
26	## Before you start
27
28	1. Read the framework card data for the error family you're writing. Find the matching `FixCard[]` in `instant-guidance-data.ts`. Note every card's `id`, `title`, `group`, `link`, and `snippets`.
29	2. Read the factory message that produces the dev-overlay headline. Find `createSyncIOError`, `createSyncIOClientError`, `createDynamicBodyError`, etc. The headline template (minus the `Route "..."` prefix) becomes the page `title`.
30	3. Read the existing `errors/<slug>.mdx` if it exists. Note every pattern, code example, and caveat. You must preserve all useful content — relocate it if the new structure doesn't have a 1:1 slot for it.
31	4. Read the canonical docs for every API you'll reference: `use cache`, `cacheLife`, `cacheTag`, `connection`, `Suspense`, `useEffect`, `use client`, `generateStaticParams`, etc. Use the exact terminology from the published docs.
32	5. Apply Vercel technical writing style (active voice, sentence-case headings, no banned words). The full `vercel-technical-writing` skill lives in `vercel/front`; the condensed rules below are the minimum bar.
33
34	## Page structure (mandatory)
35
36	Every page follows this exact shape. Do not add, remove, or reorder sections.
37
38	```
39	---
40	title: <literal dev-overlay headline, no period, strip Route "..." prefix>
41	kind: insight
42	---
43
44	<the Instant Navigations callout div — the styled box linking the blog post and the Ensuring instant navigations guide; copy it from any existing insight page>
45
46	<Framing, 2-3 paragraphs. Paragraph 1 opens "During <phase>, <event>" in past tense (e.g. "During prerendering, a Server Component called ..."), names the APIs, and states the mechanism or consequence. Never open a paragraph with inline code — lead with a word (

People who liked this also viewed

6 picks

Type

insight-error-page

141kstars31kforks

View on GitHub

How to install insight-error-page?

vercel/next.js/insight-error-page

$npx -y skills add vercel/next.js --skill insight-error-page

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Insight Error Page — Write & Audit
2
3	Write or audit an `errors/<slug>.mdx` insight-kind page that ships from this repo to `nextjs.org` and mirrors the fix-card set in the Next.js dev overlay.
4
5	> Terminology: the frontmatter uses `kind: insight` but the body text calls these "errors" — never "insights". Write "this error", "error pages", "dismiss the error".
6
7	## When to use this skill
8
9	- Write mode: "create the error page for `next-prerender-random`", "write the sync IO docs"
10	- Audit mode: "audit the blocking-prerender-dynamic page", "check the error pages match the framework"
11	- Any task involving `errors/*.mdx` insight pages (frontmatter has `kind: insight`)
12
13	## Source of truth chain
14
15	Every decision traces back to one of these. When in doubt, read the source — don't guess.
16
17	\| What \| Source file \| How to read it \|
18	\| --------------------------------------------- \| --------------------------------------------------------------------------------------------- \| ---------------------------------------------------------------------------------------------------- \|
19	\| Card titles, IDs, groups, snippets, link URLs \| `packages/next/src/next-devtools/dev-overlay/components/instant/instant-guidance-data.ts` \| Each `FixCard[]` array is one error family \|
20	\| Error headline (literal text user sees) \| `packages/next/src/server/app-render/sync-io-messages.ts`, `blocking-route-messages.ts`, etc. \| `createSyncIOError`, `createDynamicBodyError`, etc. — the template string is the headline \|
21	\| Existing page (content to preserve) \| `errors/<slug>.mdx` in this repo \| Read the full file; relocate useful content that doesn't fit fix cards into Gotchas or Other options \|
22	\| Canonical API docs (terminology) \| `docs/01-app/` in this repo \| Cross-check every API name, directive name, and concept against the published docs \|
23	\| Template structure \| This skill file (below) \| The canonical shape of the page \|
24	\| Vercel writing style \| The `vercel-technical-writing` skill in `vercel/front` (not present here) \| Apply end-to-end; see "Voice and style" below for the rules condensed \|
25
26	## Before you start
27
28	1. Read the framework card data for the error family you're writing. Find the matching `FixCard[]` in `instant-guidance-data.ts`. Note every card's `id`, `title`, `group`, `link`, and `snippets`.
29	2. Read the factory message that produces the dev-overlay headline. Find `createSyncIOError`, `createSyncIOClientError`, `createDynamicBodyError`, etc. The headline template (minus the `Route "..."` prefix) becomes the page `title`.
30	3. Read the existing `errors/<slug>.mdx` if it exists. Note every pattern, code example, and caveat. You must preserve all useful content — relocate it if the new structure doesn't have a 1:1 slot for it.
31	4. Read the canonical docs for every API you'll reference: `use cache`, `cacheLife`, `cacheTag`, `connection`, `Suspense`, `useEffect`, `use client`, `generateStaticParams`, etc. Use the exact terminology from the published docs.
32	5. Apply Vercel technical writing style (active voice, sentence-case headings, no banned words). The full `vercel-technical-writing` skill lives in `vercel/front`; the condensed rules below are the minimum bar.
33
34	## Page structure (mandatory)
35
36	Every page follows this exact shape. Do not add, remove, or reorder sections.
37
38	```
39	---
40	title: <literal dev-overlay headline, no period, strip Route "..." prefix>
41	kind: insight
42	---
43
44	<the Instant Navigations callout div — the styled box linking the blog post and the Ensuring instant navigations guide; copy it from any existing insight page>
45
46	<Framing, 2-3 paragraphs. Paragraph 1 opens "During <phase>, <event>" in past tense (e.g. "During prerendering, a Server Component called ..."), names the APIs, and states the mechanism or consequence. Never open a paragraph with inline code — lead with a word (

People who liked this also viewed

6 picks

Type