CtrlK
BlogDocsLog inGet started
Tessl Logo

frontend-slides

Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.

67

Quality

80%

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

The canonical home for this skill is frontend-slides in affaan-m/ECC

SKILL.md
Quality
Evals
Security

Quality

Content

77%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 body with an excellent gated workflow and validation steps. The dominant defect is the dangling `STYLE_PRESETS.md` reference: the body points to it three times for the CSS base and preset catalog, but the file is absent from the bundle, so the skill's core payload is unavailable. Minor trimming (OS opener commands, attribution) would improve token efficiency.

Suggestions

Add the missing `STYLE_PRESETS.md` (or a `references/STYLE_PRESETS.md`) containing the viewport-safe CSS base, mandatory CSS block, preset catalog, and CSS gotchas — the body depends on it three times, so its absence breaks the skill's core payload.

Alternatively, inline the mandatory CSS block into SKILL.md and keep only the preset catalog in the reference file, so the hard-gate viewport-fit rules are self-contained even if the reference is unavailable.

Trim known-knowledge content such as the per-OS opener commands (`open`/`xdg-open`/`start`) and the inspiration attribution line to raise token efficiency from good to lean.

DimensionReasoningScore

Conciseness

Mostly lean directive lists ('every `.slide` must use `height: 100vh; height: 100dvh; overflow: hidden;`', the density-limit table) with minor over-explanation Claude doesn't need, such as the per-OS opener commands ('macOS: `open file.html`') and the inspiration attribution line. Fits anchor 4's 'minor instances of over-explanation' rather than anchor 5's every-token-earns-its-place.

4 / 5

Actionability

Concrete, executable guidance throughout — exact CSS rules, the density-limit table, five validation viewport sizes, and the `python-pptx` extraction path — matching anchor 4's 'minor gaps'. Not anchor 5 because the critical deliverable details (viewport-safe CSS base, preset catalog, mandatory CSS block) are deferred to `STYLE_PRESETS.md`, which is not present in the bundle.

4 / 5

Workflow Clarity

The 7-step workflow has explicit validation ('Check the finished deck at these sizes... 1920x1080... 667x375'), a hard gate ('Treat this as a hard gate' for viewport fit), an error-recovery rule ('when content does not fit, split into multiple slides'), and a final Deliverable Checklist — matching anchor 5's sequence + validation + feedback loops + checklist.

5 / 5

Progressive Disclosure

References are well-signaled and one level deep ('read `STYLE_PRESETS.md` for the viewport-safe CSS base, density limits, preset catalog, and CSS gotchas'), but that file does not exist in the bundle — no references/ directory or STYLE_PRESETS.md is present anywhere. Since the skill defers its most important material to a missing file, structure and navigation are only partially effective, matching anchor 3 rather than anchor 4's 'minor organization gaps'.

3 / 5

Total

16

/

20

Passed

Description

83%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 voice, explicit 'Use when' triggers with file extensions, and several concrete capabilities. Weaknesses are minor — a buzzword ('stunning'), a couple of missing synonyms ('deck', 'PowerPoint'), and omission of the enhancement mode covered in the body.

DimensionReasoningScore

Specificity

Lists several concrete actions — 'Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files' and 'Helps non-designers discover their aesthetic through visual exploration' — with only minor gaps (the enhancement mode from the body is unmentioned) and the buzzword 'stunning' adding slight fluff. Fits anchor 4 rather than 5 because coverage is not comprehensive, and above anchor 3 because more than 1-2 specific actions are named.

4 / 5

Completeness

Explicitly answers both what ('Create... HTML presentations from scratch or by converting PowerPoint files') and when ('Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch') with concrete trigger phrases. This matches the anchor-5 example pattern exactly and clearly exceeds anchor 4's weaker 'when'.

5 / 5

Trigger Term Quality

'build a presentation', 'convert a PPT/PPTX to web', and 'create slides for a talk/pitch' are natural user phrases including file extensions, but common synonyms like 'deck', 'PowerPoint', and 'slideshow' are missing. Good coverage with a few natural terms absent, matching anchor 4 rather than 5.

4 / 5

Distinctiveness Conflict Risk

A clear niche (browser-based HTML presentations) with distinct triggers around PPT conversion and slide creation, but 'converting PowerPoint files' creates minor overlap risk with a generic pptx-editing skill. Mostly distinct per anchor 4, not the minimal-conflict clarity of anchor 5.

4 / 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
affaan-m/ECC
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.