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

89%

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

78%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 strong, actionable reference with complete code examples across frameworks; its main weakness is progressive disclosure, since a substantial API reference lives inline in SKILL.md with only one external pointer.

Suggestions

Move the detailed Props table and 'Reserved space & docking' internals into a separate REFERENCE.md, keeping only the essentials inline in SKILL.md.

Consider extracting the per-framework drop-in snippets into an examples/ bundle so the body can link out instead of inlining all four adapters.

Trim the 'Under the hood' section to the one or two facts Claude cannot infer (shadow-DOM isolation, data-jr-key tagging) and drop the rest.

Dimension	Reasoning	Score
Conciseness	Largely efficient and assumes Claude's competence (no explanations of React/Vue/etc.), but the 'Reserved space & docking' prose and 'Under the hood' section run long and could be trimmed without losing utility.	4 / 5
Actionability	Fully executable, copy-paste-ready code blocks for all four framework adapters plus install commands, the imperative API, and the server-side stream tap cover the common cases concretely.	5 / 5
Workflow Clarity	The install→drop-in flow and the numbered 5-step multi-renderer recipe are clearly sequenced; because mounting an inspector panel is non-destructive, no validation checkpoint cap applies, though the core flow has no explicit verify step.	4 / 5
Progressive Disclosure	Sections are well-organized with clear headers and one signaled reference ('See examples/devtools'), but the bulk API reference (full props table, docking details, under-the-hood internals) is inlined in SKILL.md rather than split into separate files, and no bundle files exist to offload it.	3 / 5
	Total	16 / 20 Passed

Description

100%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.

An exemplary description: third-person, concrete capability list, explicit 'Use when' triggers with natural phrasings, and a distinct niche that minimizes conflict risk. Every dimension lands at the top anchor.

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' — giving comprehensive coverage rather than a single named action.	5 / 5
Completeness	Explicitly answers both 'what' ('Drop-in inspector panel for any json-render app') and 'when' via a 'Use when the user wants to…' clause with concrete trigger phrases, matching the 5-anchor.	5 / 5
Trigger Term Quality	Natural trigger phrases a user would actually say are provided — 'add devtools', 'debug json-render', 'inspect the spec', 'why is this element not rendering', 'see the state at runtime' — including the package name and varied phrasings.	5 / 5
Distinctiveness Conflict Risk	Targets a clear niche (@json-render/devtools) with triggers specific to that ecosystem, so it is unlikely to fire for unrelated skills.	5 / 5
	Total	20 / 20 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: 0f6798b

Reviewed: 2 days 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.