CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

next-dev-loop

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running `next dev`.

Quality

83%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

The canonical home for this skill is next-dev-loop in vercel/next.js

SKILL.md
Quality
Evals
Security

Quality

Content

81%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A well-crafted operational skill body: every section teaches tool-specific behavior Claude could not guess, commands are copy-paste ready, and the preflight/loop/teardown sequence is validated with explicit refusal branches and recovery loops. The only real room for improvement is splitting the long gotchas/reference material into bundle files and trimming the small redundancies around session environment variables.

DimensionReasoningScore

Conciseness

The body is dense with skill-specific operational knowledge — session scoping, restore semantics, SSE parsing, launch-flag gotchas — and explains nothing Claude already knows. It falls short of anchor 5 on small redundancies: the AGENT_BROWSER_SESSION/RESTORE exports are explained in both preflight and gotchas, and the "Report Next.js friction" section is wordy for a conditional behavior. Not anchor 3 — there is no padded or unnecessary conceptual explanation anywhere.

4 / 5

Actionability

Copy-paste-ready commands throughout: the session-id derivation block, `agent-browser --session "$SESSION" --restore --enable react-devtools open <url>`, the exact refusal error string "Turbopack project is not available", `sed -n 's/^data: //p'` for SSE, and the teardown close. Minor gaps keep it from anchor 5: the `/_next/mcp` probe gives no exact command for calling `tools/list`, "Check `package.json` to disambiguate" lacks specifics, and `<url>`/`<port>` are placeholders rather than worked examples.

4 / 5

Workflow Clarity

The sequence is explicit and fully validated: preflight probes each view with failure branches that say exactly when to refuse and why (unreachable → check package.json → refuse; missing get_compilation_issues → below 16.3 → upgrade); the loop is ordered (before the edit — narrow scope via the running app; after the edit — four named failure modes as a checklist); gotchas supply error-recovery feedback loops (blank read → reopen with same flags → close and reopen); and teardown is a concrete command. This matches the anchor-5 pattern of clear sequence with explicit validation and recovery loops.

5 / 5

Progressive Disclosure

No bundle files exist; the skill is a single ~200-line file with clean, well-ordered sections (requires, preflight, loop, gotchas, reference, teardown) and a compact inline tool-reference table that is appropriately placed. It cannot take the under-50-line simple-skill 5, and anchor 5's shape (well-signaled one-level-deep external references) does not apply since nothing is split out — the gotchas and reference table are plausible candidates for separate files at this length. Anchor 4 (good structure, most content appropriately placed, minor organization gaps) is the best fit.

4 / 5

Total

17

/

20

Passed

Description

78%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: concrete, distinct, and honest about scope and preconditions, with an explicit use-clause and named tooling. Its main gaps are a narrow action vocabulary (verify/confirm without enumerating the verification dimensions) and a purpose-framed trigger rather than natural user-utterance phrasing.

Suggestions

Add a user-utterance trigger phrase to the when-clause, e.g. "Use when the user edits app code during `next dev` and wants to confirm the change works at runtime — not just that it compiles or type-checks."

Briefly enumerate what verification covers (compiles, runs without errors, behaves as intended in the DOM, React-level render behavior) so the what is comprehensive, not a single verb family.

DimensionReasoningScore

Specificity

Quotes several concrete elements — "Verify Next.js runtime behavior after editing app code", "Combines /_next/mcp (Next.js's view) with agent-browser (the browser's view)", "Requires a running `next dev`" — naming the domain, specific tools, and a precondition. It stays below anchor 5 because the action vocabulary is narrow (verify/confirm) and never enumerates what verification covers (compiles, runs, behaves, React-level); above anchor 3 because it goes well beyond 1-2 generic actions by naming concrete mechanisms and constraints.

4 / 5

Completeness

Both parts are explicit: what — "Verify Next.js runtime behavior after editing app code… confirm a change actually works in a running app"; when — "Use this skill to confirm a change actually works… not just that it compiles or type-checks" plus "Requires a running `next dev`". It is not capped at 3 because an explicit "Use this skill to…" trigger clause exists, but it falls short of anchor 5 because the when is purpose-framed rather than a concrete user-trigger phrase like "when the user edits Next.js app code and asks whether it works".

4 / 5

Trigger Term Quality

Natural terms users would say include "Next.js", "next dev", "running app", "compiles or type-checks", "runtime". Good coverage but a few natural variations are missing (e.g., "test my change", "does it work", "smoke test"), so it fits anchor 4 rather than the comprehensive synonym/extension coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche — runtime verification of a running Next.js dev server via two named views (/_next/mcp and agent-browser) — with distinct triggers and essentially no overlap risk with generic build, test, or code-verification skills.

5 / 5

Total

17

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository

boranfurkan/reproducer-hackathon

Path

skills/.agents/skills/next-dev-loop/SKILL.md

Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.