CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

ui-demo

Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

Quality

83%

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

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.

This is a highly actionable, well-sequenced skill: the three-phase workflow with a hard rehearsal gate and recovery loop is exemplary, and all code is copy-paste ready. Its weaknesses are repetition between the checklist/pitfalls sections and the body, and the absence of any bundle structure — the reusable helper library is inlined in SKILL.md instead of shipped as a script file.

Suggestions

Move the generic helpers (injectCursor, injectSubtitleBar, showSubtitle, moveAndClick, typeSlowly, ensureVisible, panElements) into a bundle file like scripts/demo-helpers.js and require() it from the template, so they are written once instead of pasted per demo.

Trim the overlap between 'Checklist Before Recording' and 'Common Pitfalls' — several items (re-inject after navigation, discover before scripting, no silent catches) are stated three times; consolidate into one section.

The 'Why' subsections under Phase 1 and Phase 2 restate the section heading's point at length; a single sentence each would preserve the rationale at lower token cost.

DimensionReasoningScore

Conciseness

The body is mostly dense, non-obvious guidance (rehearsal gates, pacing tables, overlay code), but the 13-item 'Checklist Before Recording' and 12-item 'Common Pitfalls' substantially restate guidance already given in the body (e.g. 're-inject after every navigation' appears three times; 'discover fields first' appears in Phase 1, pitfall 9, pitfall 10, and pitfall 11). This matches anchor 3 ('mostly efficient but includes some unnecessary explanation or could be tightened') rather than anchor 4, where over-explanation would be only minor.

3 / 5

Actionability

Every helper (ensureVisible, injectCursor, moveAndClick, typeSlowly, panElements, injectSubtitleBar/showSubtitle) is given as complete executable JavaScript, plus a full runnable script template with bash invocation ('node demo-script.cjs --rehearse') and concrete timings (e.g. 'Typing delay: 25-40ms'). This matches anchor 5: copy-paste-ready code covering the common cases.

5 / 5

Workflow Clarity

The three-phase 'Discover -> Rehearse -> Record' process has an explicit gate ('Never skip straight to recording'), a validation step that fails loudly ('REHEARSAL FAILED - fix selectors before recording' / process.exit(1)), a feedback loop ('When rehearsal fails: 1. Read the dump ... 5. Only proceed when every selector passes'), and a pre-recording checklist. This matches anchor 5 (explicit validation steps, error-recovery loops, checklists).

5 / 5

Progressive Disclosure

Section headers are clear, but the skill bundles no files at all: ~200 lines of generic, demo-agnostic helper code (the cursor/subtitle/click/typing helpers) live inline in SKILL.md, and the template even instructs 'Paste injectCursor, injectSubtitleBar, showSubtitle... here', forcing duplication on every use. This reusable library belongs in a scripts/ file, fitting anchor 3 ('content that should be separate is inline'); it is not anchor 2 (structure and headers are good) nor anchor 4 (content placement has a real gap, not a minor one).

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.

The description is strong: it explicitly answers both what and when with concrete trigger phrases, names the tool and output format, and occupies a clear niche. Weaknesses are minor — some missing natural synonyms ('screencast') and a touch of fluff ('professional feel').

Suggestions

Add common synonyms users say, e.g. 'screencast' or 'record a video of', to the 'Use when' clause to improve trigger recall.

Replace vague phrases like 'professional feel' with a concrete differentiator (e.g. 'injected SVG cursor and subtitle overlays') for higher specificity.

DimensionReasoningScore

Specificity

Quotes: 'Record polished UI demo videos using Playwright', 'Produces WebM videos with visible cursor, natural pacing'. Names the tool, output format, and concrete output characteristics (visible cursor, pacing), but 'professional feel' is fluffy and coverage is essentially one core action plus output details — between anchor 3 ('1-2 concrete actions') and anchor 5 ('comprehensive coverage'), so 4.

4 / 5

Completeness

Quotes: 'Record polished UI demo videos using Playwright' (what) and 'Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application' (when). Both what and when are explicitly stated with concrete trigger phrases, matching the anchor-5 example structure exactly.

5 / 5

Trigger Term Quality

Quotes: 'demo', 'walkthrough', 'screen recording', 'tutorial video'. Good coverage of natural phrases a user would say, but common synonyms like 'screencast', 'record a video of my app', or 'showcase video' are missing, which keeps it below the comprehensive-synonyms anchor 5.

4 / 5

Distinctiveness Conflict Risk

Quotes: 'demo videos', 'screen recording', 'video of a web application'. A clear niche distinct from screenshot/testing skills, but 'walkthrough' and 'tutorial' are generic words that carry minor overlap risk with tutorial-writing or code-walkthrough skills, fitting anchor 4 ('minor overlap risk with closely related skills') rather than 5.

4 / 5

Total

17

/

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

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository

affaan-m/ECC

Path

skills/ui-demo/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.