CtrlK
BlogDocsLog inGet started
Tessl Logo

shadcn-svelte

Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.

65

Quality

78%

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

Fix and improve this skill with Tessl

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

Quality

Content

82%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-organized, highly actionable single-file skill: complete executable setup code, a lean component catalog with props, and concrete validation/event details. Minor room remains in moving the per-component prop reference to a bundle file and adding a verification step for the catalog/registry wiring.

DimensionReasoningScore

Conciseness

The body is lean: no explanations of concepts Claude already knows, one-line-per-component prop summaries, and a single complete code example. A few tokens are trimmable (the trailing Svelte render snippet and some prose in Important Notes), fitting the 'efficient with minor over-explanation' anchor rather than the fully lean top anchor.

4 / 5

Actionability

Copy-paste-ready TypeScript showing exact imports, catalog definition with explicit component selection, and matching registry setup, plus concrete validateOn values and event names. This matches the anchor for fully executable, copy-paste-ready guidance covering common cases.

5 / 5

Workflow Clarity

The catalog-then-registry-then-render sequence is clearly ordered and annotated in code ("// Catalog: pick definitions", "// Registry: pick matching implementations"), and the two entry points table guides file choice. There are no explicit validation checkpoints or error-recovery guidance, so it fits the clear-sequence-with-minor-gaps anchor rather than the top anchor with explicit validation loops.

4 / 5

Progressive Disclosure

The single SKILL.md is well-sectioned (Entry Points, Usage Pattern, Available Components, Validation Timing, Important Notes) and easy to navigate with no bundle files to misplace. The ~45-line, 36-component prop reference is inline lookup material that could live in a references file, and the file exceeds the simple-skill line count, so it fits the good-structure-with-minor-organization-gaps anchor rather than the top one.

4 / 5

Total

17

/

20

Passed

Description

73%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, third-person description with an explicit multi-clause 'Use when' trigger and a highly distinctive niche. Its main weakness is a thin 'what' — a single deliverable noun phrase rather than concrete actions a user could match against their task.

Suggestions

Expand the 'what' clause into concrete actions, e.g. 'Add 36 pre-built shadcn-svelte UI components to a json-render catalog and render them in Svelte apps' to raise specificity and completeness.

Add a couple of natural synonyms users might say, such as 'shadcn UI components' or 'Svelte component library', to broaden trigger coverage without adding conflict risk.

DimensionReasoningScore

Specificity

The description names a concrete domain and deliverable ("Pre-built shadcn-svelte components for json-render Svelte apps") but only one capability, without enumerating actions like adding components to a catalog or rendering them. This matches the anchor for naming the domain with 1-2 concrete actions but not comprehensive coverage, not the level above which requires several listed actions.

3 / 5

Completeness

Both what ("Pre-built shadcn-svelte components for json-render Svelte apps") and when ("Use when working with..., adding..., or building...") are present, with the when explicit and multi-clause. The what is a single noun phrase rather than a list of concrete actions, so it fits the anchor where the what could be more specific rather than the top anchor that lists multiple what-actions.

4 / 5

Trigger Term Quality

Natural trigger phrases are present ("working with @json-render/shadcn-svelte", "adding standard UI components to a Svelte catalog", "building Svelte web UIs with shadcn-svelte + Tailwind CSS components") and match what a user in this stack would say. A few natural variations (plain "shadcn", "UI components", "component library") are missing, keeping it below comprehensive coverage.

4 / 5

Distinctiveness Conflict Risk

The description targets a clear niche (json-render + shadcn-svelte + Svelte + Tailwind CSS) with distinct package-name triggers, making it unlikely to fire for unrelated skills. It matches the anchor for a clear niche with distinct triggers and minimal conflict risk.

5 / 5

Total

16

/

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.