CtrlK
BlogDocsLog inGet started
Tessl Logo

svelte

Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON, creating component catalogs, or rendering AI-generated specs.

64

Quality

76%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

Fix and improve this skill with Tessl

tessl review fix ./skills/svelte/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

71%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-structured, highly executable reference for the @json-render/svelte package: every topic ships runnable code and there is no padding. The main improvements are splitting detailed API reference material into a separate file, deduplicating the repeated Button/BaseComponentProps examples, and filling in the two stub code fragments.

Suggestions

Move the 'Context Helpers', 'Dynamic Props and Two-Way Binding' expression forms, built-in actions list, and provider table into a references/ file (e.g., reference.md), keeping SKILL.md as a quick-start overview — this is the biggest progressive-disclosure win.

Deduplicate the Button.svelte example (shown in both 'Defining Components' and 'Event System') and the inline BaseComponentProps interface to trim tokens.

Complete the stub fragments: give the 'submit' action handler a real body and show the spec-side 'bindings'/'bindState' declaration that the getBoundProp example depends on.

DimensionReasoningScore

Conciseness

The body is dense, reference-style, and assumes competence — no boilerplate explanation of what Svelte or JSON is — but the Button.svelte example appears nearly verbatim twice (in 'Defining Components' and 'Event System') and the BaseComponentProps interface is spelled out inline then re-imported per example. Minor duplication keeps it below the 'every token earns its place' anchor.

4 / 5

Actionability

Most sections give complete, copy-paste-ready code (Quick Start, catalog, registry, components, streaming), but the registry's submit handler body is just '// handle action' and the getBoundProp snippet is a fragment that omits how the binding is declared in the spec. These minor gaps fit 'mostly executable guidance with concrete code' better than the fully copy-paste-ready anchor.

4 / 5

Workflow Clarity

As a reference-style skill it presents a coherent implicit sequence — Quick Start, then catalog → components → registry → spec structure → advanced features — with each section building on the prior. It is not a 5 because there is no explicit stepwise framing or any validation/troubleshooting checkpoint (e.g., what a misconfigured registry or missing provider looks like), though no destructive operations demand them.

4 / 5

Progressive Disclosure

Sections are well-organized with clear headers, but ~280 lines of API reference (context helpers list, binding expression forms, built-in actions table, provider table) are all inlined in SKILL.md with no bundle files at all. This matches the anchor of 'content that should be separate is inline' rather than the 4 anchor's 'bulk in a separate file'.

3 / 5

Total

15

/

20

Passed

Description

82%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: third-person, concise, with an explicit 'Use when...' clause covering four concrete triggers and a clearly stated niche. Its only weakness is the thin 'what' clause — a single capability — which leaves specificity below the top anchor.

Suggestions

Broaden the 'what' clause with 1-2 more concrete capabilities (e.g., 'supports streaming UI generation and two-way state bindings') to raise specificity.

Consider a natural synonym or file-form trigger term (e.g., '.svelte components from specs') to widen keyword coverage.

DimensionReasoningScore

Specificity

Names the domain ('Svelte 5 renderer for json-render') and a single concrete action ('turns JSON specs into Svelte component trees'), matching the anchor for 1-2 concrete actions without comprehensive coverage. It is not a 4 because only one capability is stated — streaming, two-way bindings, catalogs, and the event system are absent from the 'what' clause.

3 / 5

Completeness

Explicitly answers both what ('Svelte 5 renderer ... turns JSON specs into Svelte component trees') and when ('Use when working with @json-render/svelte, building Svelte UIs from JSON, creating component catalogs, or rendering AI-generated specs') with four concrete trigger phrases — a clear anchor-5 match.

5 / 5

Trigger Term Quality

Includes natural trigger terms users would say — 'building Svelte UIs from JSON', 'creating component catalogs', 'rendering AI-generated specs', plus the package name '@json-render/svelte'. Not a 5 because common variations like '.svelte', 'JSON schema', or 'spec renderer' phrasings are missing.

4 / 5

Distinctiveness Conflict Risk

A clear niche (the json-render ecosystem on Svelte 5) with distinct trigger phrases tied to '@json-render/svelte' and JSON-spec rendering; conflict risk with other skills is minimal. The 4 anchor's 'minor overlap risk with closely related skills' is less fitting since the triggers are package-specific.

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
vercel-labs/json-render
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.