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

82%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

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 highly actionable, well-sequenced skill body with executable code and strong validation/feedback loops throughout its three-phase workflow. Its main weakness is progressive disclosure: with no bundle files, a large reusable helper library is inlined rather than split into referenced scripts, and the body could be tightened.

Suggestions

Move the reusable helper functions (injectCursor, injectSubtitleBar, showSubtitle, moveAndClick, typeSlowly, ensureVisible, panElements) into a scripts/ file and reference it from SKILL.md to improve progressive disclosure and reduce body length.

Trim the opening preamble that restates the frontmatter description and other narrative restatements to improve conciseness.

Provide the full script template as a separate reference file (e.g., scripts/demo-template.cjs) rather than inlining the entire template, keeping only the usage commands inline.

Dimension	Reasoning	Score
Conciseness	Largely free of concept-over-explanation, but the body inlines an extensive library of reusable helper functions plus a full template (~460 lines) that mostly earns its place given the absence of bundle files; the opening restatement of the description and a few narrative beats could be trimmed.	3 / 5
Actionability	Provides fully executable, copy-paste-ready Playwright code throughout (discovery dump, ensureVisible, rehearsal loop, injectCursor, moveAndClick, typeSlowly, panElements, subtitle helpers, and a complete script template with bash usage), covering the common cases.	5 / 5
Workflow Clarity	A clearly sequenced Discover -> Rehearse -> Record process with explicit validation checkpoints (ensureVisible fails loudly, process.exit(1), 'Only proceed when every selector passes'), a recovery feedback loop, and a pre-recording checklist.	5 / 5
Progressive Disclosure	No bundle files exist and all reusable helper code plus the template are inlined in SKILL.md rather than split into a referenced scripts/ file; section structure is strong, so it sits above a 2, but the inlined library is content that clearly belongs in separate files.	3 / 5
	Total	16 / 20 Passed

Description

87%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 that clearly states both what the skill does and when to invoke it, with concrete natural-language trigger terms. It would reach full marks on trigger quality and specificity only by adding file-extension triggers and surfacing the subtitle/storytelling capabilities.

Dimension	Reasoning	Score
Specificity	Names the domain and several concrete actions/outputs ('Record polished UI demo videos using Playwright', 'Produces WebM videos with visible cursor, natural pacing, and professional feel'), with only minor coverage gaps (subtitles/storytelling flow are in the body but not the description).	4 / 5
Completeness	Explicitly answers both what ('Record polished UI demo videos using Playwright', 'Produces WebM videos...') and when ('Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video') with concrete trigger phrases.	5 / 5
Trigger Term Quality	Includes natural user phrases ('demo', 'walkthrough', 'screen recording', 'tutorial video') with good synonym coverage, though it omits file-extension triggers like .webm that would push it to a 5.	4 / 5
Distinctiveness Conflict Risk	Occupies a clear niche (web-app demo/walkthrough videos via Playwright) with distinct triggers and minimal overlap risk against other skills.	5 / 5
	Total	18 / 20 Passed

Validation

93%

Warnings & errors only

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

Criteria	Description	Result
metadata_version	'metadata.version' is missing	Warning

	Total	15 / 16 Passed

Repository: affaan-m/ECC
Path: skills/ui-demo/SKILL.md
Commit: d8409a4

Reviewed: 1 day ago

Table of Contents

Discovery Implementation Validation

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.