CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

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
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Quality

Content

85%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 highly actionable, well-organized usage reference: executable code for every framework, a complete props/panels contract, and non-obvious layout guidance Claude could not infer. The gaps are structural: everything lives inline in SKILL.md with zero bundle files, and the one external reference (examples/devtools) cannot be resolved.

Suggestions

Move the docking/reserved-space deep-dive and the per-framework drop-in variants into a references/ file (e.g. references/docking.md, references/frameworks.md) and link them from the body, keeping SKILL.md as a lean overview with the core drop-in flow.

Fix or remove the "See `examples/devtools`" pointer — that path does not exist in the skill bundle, so it is currently unresolvable.

Trim duplicated/over-explained content: describe the hotkey once (Props), and drop the "styles never leak" clause that re-explains what Shadow DOM isolation means.

DimensionReasoningScore

Conciseness

The body is dense and almost entirely product-specific (props table, CSS custom properties, docking behavior, multi-renderer recipe), with no padding about concepts Claude already knows. Minor trimmable spots remain: "the panel's styles never leak into the host app and vice versa" re-explains Shadow DOM, and the hotkey is described in both Controls and Props. Fits anchor 4 ('efficient; minor instances of over-explanation') rather than 5.

4 / 5

Actionability

Install commands, copy-paste drop-in code for all four frameworks, the imperative-API hook with a runnable example, the server-side stream tap with a complete code block, and opt-in CSS snippets — all fully executable with no pseudocode. Matches anchor 5 ('copy-paste ready; specific examples cover the common cases').

5 / 5

Workflow Clarity

The core flow (install core + adapter, place `<JsonRenderDevtools />` inside the provider) is unambiguous, and the advanced multi-renderer case is a clearly sequenced 5-step recipe with rationale per step. No destructive or batch operations exist that would require validation checkpoints, and the simple-skill exception applies to the drop-in flow.

5 / 5

Progressive Disclosure

No bundle files exist at all (no references/, scripts/, or assets/), so all material — per-framework usage variants, the docking/reserved-space deep-dive, the multi-renderer recipe — is inlined in one ~185-line file, and the sole external pointer "See `examples/devtools`" targets a path that is not present in the bundle. This matches anchor 3 ('content that should be separate is inline'; the single reference is not usable) rather than 4, whose 'references mostly clear' does not hold for a dangling reference.

3 / 5

Total

17

/

20

Passed

Description

96%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, comprehensive capability list, explicit 'Use when' guidance with natural trigger phrases, and a clearly scoped niche. The only weakness is that the trigger "add devtools" is generic enough to collide with framework-devtools skills.

DimensionReasoningScore

Specificity

"Drop-in inspector panel for any json-render app" names the domain, and the description lists seven 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" — comprehensive coverage of the package's capabilities. Anchor 4 ('minor gaps in coverage') is too low since nothing material is omitted for this tool.

5 / 5

Completeness

Both 'what' and 'when' are explicit: the what is a drop-in inspector panel with enumerated capabilities, and the when appears twice — "Use when the user wants to..." and "Triggers include..." with concrete trigger phrases. This clearly matches the top anchor; anchor 4's 'when could be more explicit' does not apply.

5 / 5

Trigger Term Quality

Triggers include natural phrases users would actually say: "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" and the package name `@json-render/devtools`. Coverage includes both short commands and full sentence-style requests, matching the comprehensive-synonyms anchor.

5 / 5

Distinctiveness Conflict Risk

The niche is clear (json-render spec/state/stream inspection, distinct triggers like "inspect the spec" and "spec keys"), but the bare trigger "add devtools" overlaps with browser/framework devtools skills (React DevTools, Vue Devtools), which is exactly anchor 4's 'minor overlap risk with closely related skills'. Not 5 because of that generic trigger; not 3 since the remaining triggers are unambiguously json-render-scoped.

4 / 5

Total

19

/

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

vercel-labs/json-render

Path

skills/devtools/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.