CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

component-canvas

Build a full-screen, interactive canvas to explore existing UI components and their variants with pan and zoom.

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/component-canvas/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

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

The body is an exceptionally lean, directive-driven specification with a clear build order, explicit validation checks, and a required reporting format. Its only structural weakness is that all detail lives in one file, which keeps progressive disclosure and actionability at 4 rather than 5.

DimensionReasoningScore

Conciseness

Every line is a terse directive ("Keep native gestures inside previews and portals", "Apply gesture transforms at most once per animation frame") with zero padding and no explanation of concepts Claude already knows; every token earns its place.

5 / 5

Actionability

Concrete, executable guidance throughout — "Place its plain title 8px above the border, using the muted text color without opacity", "Use an existing muted color at roughly 25% opacity", and a worked example ("every button reads 'Continue' and uses `variant="default"`. Only `size` changes"). It stays at 4 rather than 5 only because no copy-paste code or commands exist, which is justified for a framework-agnostic instruction skill but still short of the top anchor.

4 / 5

Workflow Clarity

Clear build sequence ("1. Add a minimal canvas route or entry point with one group and one component. Confirm it works..."), an explicit verification checklist in the Checks section, feedback loops ("If they break, report it or propose a separate preview document"), and a pass-only-if-run standard ("A check counts as passing only if it was run").

5 / 5

Progressive Disclosure

The single-file bundle (no references/, scripts/, or assets/ exist) is well-sectioned and navigable, with nothing buried and no nested references. It sits at 4 rather than 5 because at ~118 lines the detailed Camera and Persistence specifications are all inline and the skill exceeds the under-50-line simple-skill exception.

4 / 5

Total

18

/

20

Passed

Description

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

The description states a clear, moderately specific capability with a distinctive niche, but it entirely lacks 'when to use it' trigger guidance and misses several natural trigger phrases. Adding a 'Use when...' clause would materially raise its score.

Suggestions

Add an explicit trigger clause, e.g. "Use when the user wants to browse, preview, or compare the project's UI components or their variants in a gallery/canvas view."

Include natural synonyms users would say — "component gallery", "showcase", "preview components" — alongside the existing "canvas", "variants", and "pan and zoom" terms.

Optionally mention one or two concrete capabilities like side-by-side variant comparison or saved camera state to round out coverage.

DimensionReasoningScore

Specificity

Lists several specific actions — "build a full-screen, interactive canvas", "explore existing UI components and their variants", "with pan and zoom" — with minor gaps in coverage (no mention of variant comparison, persistence, or verification). Fits the 'several specific actions; minor gaps' anchor rather than the '1-2 concrete actions' anchor below, and falls short of the comprehensive anchor above.

4 / 5

Completeness

The 'what' is clear (build an interactive component-exploration canvas with pan and zoom), but there is no 'Use when...' clause or equivalent explicit trigger guidance, which caps completeness at 3 per the judging guidelines. Not score 4 because 'when' is entirely absent rather than merely imprecise.

3 / 5

Trigger Term Quality

Relevant natural keywords are present ("canvas", "UI components", "variants", "pan and zoom", "full-screen"), but common variations users would say — "gallery", "showcase", "preview", "component library" — are missing, matching the 'some relevant keywords but missing common variations or synonyms' anchor.

3 / 5

Distinctiveness Conflict Risk

"Interactive canvas to explore existing UI components and their variants with pan and zoom" carves a distinct niche with little conflict risk against generic UI-development skills, though minor overlap with dashboard/showcase skills keeps it below the 'clear niche with minimal conflict' anchor.

4 / 5

Total

14

/

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

ibelick/ui-skills

Path

skills/component-canvas/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.