Add next-dev-loop and next-ppr-optimizer skills#93943
Merged
Merged
Conversation
2 tasks
Contributor
Tests PassedCommit: b359d7c |
Contributor
Stats from current PR🟢 1 improvement
📊 All Metrics📖 Metrics GlossaryDev Server Metrics:
Build Metrics:
Change Thresholds:
⚡ Dev Server
📦 Dev Server (Webpack) (Legacy)📦 Dev Server (Webpack)
⚡ Production Builds
📦 Production Builds (Webpack) (Legacy)📦 Production Builds (Webpack)
📦 Bundle SizesBundle Sizes⚡ TurbopackClient Main Bundles
Server Middleware
Build DetailsBuild Manifests
📦 WebpackClient Main Bundles
Polyfills
Pages
Server Edge SSR
Middleware
Build DetailsBuild Manifests
Build Cache
🔄 Shared (bundler-independent)Runtimes
📝 Changed Files (21 files)Files with changes:
View diffsapp-page-exp..ntime.dev.jsfailed to diffapp-page-exp..time.prod.jsDiff too large to display app-page-tur..ntime.dev.jsfailed to diffapp-page-tur..time.prod.jsDiff too large to display app-page-tur..ntime.dev.jsfailed to diffapp-page-tur..time.prod.jsDiff too large to display app-page.runtime.dev.jsfailed to diffapp-page.runtime.prod.jsDiff too large to display app-route-ex..ntime.dev.jsDiff too large to display app-route-ex..time.prod.jsDiff too large to display app-route-tu..ntime.dev.jsDiff too large to display app-route-tu..time.prod.jsDiff too large to display app-route-tu..ntime.dev.jsDiff too large to display app-route-tu..time.prod.jsDiff too large to display app-route.runtime.dev.jsDiff too large to display app-route.ru..time.prod.jsDiff too large to display server.runtime.prod.jsDiff too large to display use-cache-pr..ntime.dev.jsDiff too large to display use-cache-pr..ntime.dev.jsDiff too large to display use-cache-pr..ntime.dev.jsDiff too large to display use-cache-pr..ntime.dev.jsDiff too large to display 📎 Tarball URLCommit: b359d7c |
gaojude
changed the title
Two paired skills for the next dev agentic workflow. next-dev-loop is the edit-then-verify rhythm during next dev, combining /_next/mcp (framework view) with agent-browser (browser view). Its preflight opens a headed agent-browser session at the user's target URL with react-devtools enabled and pauses, so the user can log in or set state before the agent proceeds. next-ppr-optimizer is the first sibling — an agentic loop for optimizing the static shell of a cacheComponents page. Diagnoses via suspense tree + /__nextjs_original-stack-frames, ranks by rendered area, and picks between push-down (autonomous for trivial cases) and cache (always collaborative — never invents a cacheLife profile). Removes the old next-compile placeholder skill (next-dev-loop's get_compilation_issues check supersedes it).
gaojude
force-pushed
the
jude/dev-loop-skill-v2
branch
from
bf4f122 to
3c3edd8
Compare
The copy_skills task was copying skills/**/* into packages/next/dist/skills at build time. Nothing in the runtime reads dist/skills, and the skills are intended to ship via the Next.js plugin for Claude Code / Codex, not as part of the npm package. Removing the task.
- 'just' -> 'only' in next-dev-loop intro - 'hole' -> 'gap' in next-ppr-optimizer (twice) - drop 'sanity check' phrasing in verify step (refer to the diagnose-step-1 check directly)
aurorascharff
approved these changes
May 21, 2026
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
Got accidentally tracked. Adding to .gitignore alongside the other .claude/ session files.
2 tasks
gaojude
added a commit
that referenced
this pull request
May 22, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 22, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 22, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
gaojude
added a commit
that referenced
this pull request
May 23, 2026
Merges next-ppr-optimizer (#93943) and a drafted next-instant-nav-optimizer into one skill with two sub-loops sharing a preflight, lever set, anti-pattern list, and reference table. The gating requirement (cacheComponents: true) is what unifies both loops, hence the rename. - SKILL.md — top-level router; shared preflight, two-lever rules, no-shell bailout, assess-before-applying gate, visible-delta verify requirement, anti-patterns, gotchas, teardown, and the page-render-vs-nav decision. - ppr-loop.md — page-render diagnose loop (pixel-area ranking). - instant-nav-loop.md — nav diagnose loop (Cap2 − Cap1 diff after pushstate).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two related skills for the
next devagentic workflow. They're paired: one establishes a shared session and view of the running app, and the other builds on it for a specific kind of work.next-dev-loopis the edit-then-verify rhythm duringnext dev. After making a change, the agent needs to know whether it actually works at runtime — not just whether it type-checks or compiles. The skill teaches the agent to use the two views Next.js exposes about itself:/_next/mcp(framework-side — routes, segments, RSC, server logs, errors) andagent-browser(browser-side — DOM, console, network, React fiber, vitals). The two views cross-check each other.The preflight is the load-bearing part. It opens a headed
agent-browsersession at the user's target URL with React DevTools enabled, then pauses — because the page might be behind a login wall or need specific state the user has to set up. Once the user confirms, the agent probes/_next/mcp, confirms Turbopack, and pulls the route map. Sibling skills can assume this setup is done.next-ppr-optimizeris the first sibling. It's the agentic loop for optimizing the static shell of acacheComponentspage: diagnose the shell, pick the highest-ROI refactor, apply it, confirm the shell grew. Two levers — push down (extract an I/O into a Suspense-wrapped child so the parent stays static; autonomous for trivial cases) or cache (wrap in'use cache'with acacheLifeprofile chosen with the user — the skill never invents one). Diagnosis uses the suspense tree +/__nextjs_original-stack-framesfor source resolution, with the H4 anti-pattern guardrail (one dominant boundary covering the viewport is not a push-down candidate; recurse inside it instead).