devtools

Drop-in inspector panel for any json-render app. Use when the user wants to debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys. Triggers include "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", or requests to tap streams / capture action logs for `@json-render/devtools`.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

85%

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

A well-structured, highly actionable reference for a multi-framework devtools panel, with executable code throughout and a clear multi-renderer workflow. The main weakness is minor redundancy between the Props and docking sections plus some implementational exposition that could be trimmed.

Suggestions

Consolidate the `position`, `allowDockToggle`, and `reserveSpace` explanations so each is defined once — keep the brief contract in Props and let "Reserved space & docking" reference it rather than restate it.

Trim or move the "Under the hood" internals (ring-buffer, action observer registry mechanics) unless they directly aid usage; the picker's `data-jr-key` behavior is the only piece cited elsewhere.

Consider splitting the full Props API reference into a `REFERENCE.md` so the SKILL.md overview stays lean, leaving the docking guidance and examples inline.

Dimension	Reasoning	Score
Conciseness	Mostly efficient with no basic-concept padding, but it could be tightened: `position`/`allowDockToggle`/`reserveSpace` are described in the Props section and re-explained in "Reserved space & docking", and the "Under the hood" internals add explanatory length not strictly needed for use.	2 / 3
Actionability	Install commands, per-framework drop-in usage, imperative API calls, and the server-side `tapJsonRenderStream` snippet are all executable and copy-paste ready.	3 / 3
Workflow Clarity	The install → drop-in → controls flow is unambiguous, and the multi-renderer recipe is a clearly numbered 5-step sequence; no destructive/batch operation is present that would require validation checkpoints.	3 / 3
Progressive Disclosure	Well-organized into clearly signaled sections with a single one-level-deep reference ("See `examples/devtools`"); no nested/deep reference chains, and the single-file overview is coherent and easy to navigate.	3 / 3
	Total	11 / 12 Passed

Description

100%

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, third-person description that states concrete capabilities, gives explicit "Use when" trigger guidance with natural user phrasing, and occupies a clear niche. It mirrors the rubric's good examples closely.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions: "debug a generative UI, inspect the spec tree, edit state at runtime, see dispatched actions, follow stream patches live, browse a catalog, or pick DOM elements to find their spec keys" — matching the multi-action anchor.	3 / 3
Completeness	Explicitly answers both what ("Drop-in inspector panel for any json-render app") and when ("Use when the user wants to..." with a concrete trigger list), satisfying the both-what-and-when anchor.	3 / 3
Trigger Term Quality	Natural phrases a user would say are well covered: "add devtools", "debug json-render", "inspect the spec", "why is this element not rendering", "see the state at runtime", plus tap-streams/capture-action-logs variants.	3 / 3
Distinctiveness Conflict Risk	Niche is clearly scoped to `@json-render/devtools` with distinctive triggers, making conflict with unrelated skills unlikely.	3 / 3
	Total	12 / 12 Passed

Validation

100%

Warnings & errors only

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: vercel-labs/json-render
Path: skills/devtools/SKILL.md
Commit: 9d3dfc8

Reviewed: about 13 hours ago

Table of Contents

Discovery Implementation Validation

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.