CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

frontend-slides

OpenDesign as a worked AI-workflow example: how local agents read your files and design on your desktop — concretely. Built as a decision-grade AI literacy deck for teams new to AI, leadership.

51

Quality

64%

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 ./plugins/_official/examples/frontend-slides/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

72%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 a lean, highly actionable hard spec with exemplary reference structure — exact measurements, class names, and gotchas throughout, and an on-demand references table whose files all exist. Its main weaknesses are the absent example.html seed the body tells the reader to copy verbatim (mitigated by html-template.md), and the lack of an explicit build sequence or validation checkpoint in the body itself.

Suggestions

Add an explicit ordered workflow (e.g. 1. copy seed from references/html-template.md, 2. pick a preset from STYLE_PRESETS.md, 3. ask density mode, 4. compose slides from the layout vocabulary, 5. verify no overflow/overlap at 1920×1080 before delivering) with a final validation checkpoint.

Fix the dangling seed reference: either ship example.html (and the LICENSE file the Attribution section promises) in the bundle, or repoint the 'Start from example.html' instruction to references/html-template.md, which does contain the controller and stage CSS.

Trim the duplication between the intro and the Attribution section (the upstream repo link is stated twice) and the repeated 'embed viewport-base.css in full' instruction.

DimensionReasoningScore

Conciseness

The ~72-line body is dense, project-specific spec ('factor = min(innerWidth/1920, innerHeight/1080)', exact class names, '~650ms' debounce, '≥40px' swipe threshold, the calc(-1 * clamp(...)) fix) that assumes Claude's competence with no concept explanations. Only minor trimming is available — the upstream repo link appears in both the intro and the Attribution section, and 'embed viewport-base.css in full' is stated twice — which fits anchor 4 rather than 5.

4 / 5

Actionability

Guidance is concrete and executable: exact selectors, scaling formula, keyboard keys, easing bezier, output contract, and a specific CSS gotcha with its fix. The gap is that the primary directive 'Start from example.html in this plugin folder... copy... verbatim' cannot be followed as written because example.html is not in the bundle (the SlidePresentation controller does exist in references/html-template.md, which mitigates it). Fits 'Mostly executable guidance... with minor gaps'; not 5 because the named seed file is missing, not 3 because the inline spec plus html-template.md covers the common cases.

4 / 5

Workflow Clarity

The build order is implicit in the section order (copy seed → pick preset → decide density mode → compose slides → output contract) but never given as an explicit sequence, and the body contains no validation or critic checkpoint — the 'critic pass against this rubric' lives only in the frontmatter example_prompt. Fits 'Steps listed but validation gaps; sequence present but checkpoints missing or implicit'; not 4 because no explicit step sequence or verification step is written in the body, not 2 because the sections do define a coherent build order.

3 / 5

Progressive Disclosure

A 'References (read on demand)' table with File/When columns points to four real, verified files in references/ (STYLE_PRESETS.md, viewport-base.css, html-template.md, animation-patterns.md), one level deep, with the essential stage spec inlined in the body. Fits 'Clear overview with well-signaled one-level-deep references; content appropriately split; easy navigation'.

5 / 5

Total

16

/

20

Passed

Description

40%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 describes the subject of one example deck rather than the skill's capability: a user needing animated HTML slides would not recognize this as the right skill from the description alone. What the skill actually does (single-file 1920×1080 HTML presentation generation) is entirely unstated, and no 'use when' trigger guidance is present.

Suggestions

Rewrite the description to state the skill's capability first, e.g. 'Create zero-dependency, animation-rich single-file HTML slide decks on a fixed 1920×1080 stage. Use when the user asks for slides, a presentation, an HTML deck, or slide visuals.'

Replace content-specific proper nouns ('OpenDesign', 'worked AI-workflow example') with trigger-relevant terms ('slides', 'deck', 'presentation', 'HTML') so the description matches what users actually say.

Add an explicit 'Use when...' clause naming audience contexts (e.g. briefing decks, AI-literacy sessions, leadership reviews) instead of relying on the audience phrase 'teams new to AI, leadership' to imply when.

DimensionReasoningScore

Specificity

The description names a subject ('OpenDesign as a worked AI-workflow example', 'decision-grade AI literacy deck') but states almost no capability actions — there is no 'create/build/generate slides' verb describing what the skill does. It matches 'Names the domain but actions are minimal or generic': not 3 because it never lists even 1-2 concrete actions the skill performs, and not 1 because the domain itself is named concretely.

2 / 5

Completeness

The 'what' describes one example deck's subject matter ('how local agents read your files and design on your desktop') rather than the skill's function, and there is no 'Use when...' clause — 'for teams new to AI, leadership' only weakly implies a trigger context. Fits 'Has a vague what and no when'; not 3 because the 'what' is vague with respect to the skill's actual capability (building HTML slide decks), and not 1 because a deck deliverable and audience are named.

2 / 5

Trigger Term Quality

'deck', 'AI literacy', and 'AI-workflow' are plausible user phrases, but the natural terms for this skill ('slides', 'presentation', 'HTML', 'slide deck') are absent, and 'OpenDesign' is content-specific rather than a trigger term. Fits 'Some relevant keywords but missing common variations or synonyms'; not 4 because the core synonyms users would actually say when needing this skill are missing.

3 / 5

Distinctiveness Conflict Risk

The niche phrasing ('OpenDesign', 'worked AI-workflow example', 'AI literacy deck') is specific and unlikely to fire for unrelated skills, so wrong-skill triggering risk is low; residual overlap comes from generic AI wording shared with other AI-literacy skills. Fits 'Mostly distinct; minor overlap risk with closely related skills'; not 5 because the description never states the skill's true function (HTML slide generation), so it cannot anchor a distinct trigger for it.

4 / 5

Total

11

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

frontmatter_unknown_keys

Unknown frontmatter key(s) found; consider removing or moving to metadata

Warning

Total

15

/

16

Passed

Repository

nexu-io/open-design

Path

plugins/_official/examples/frontend-slides/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.