tdg-personal/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.
90
90%
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Advisory
Suggest reviewing before use
Quality
Discovery
100%Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.
This is an excellent skill description that clearly communicates what the skill does, when to use it, and what it produces. It uses natural trigger terms, specifies the technology (Playwright) and output format (WebM), and occupies a distinct niche that is unlikely to conflict with other skills. The description is concise yet comprehensive.
| Dimension | Reasoning | Score |
|---|---|---|
Specificity | Lists multiple specific concrete actions: 'Record polished UI demo videos using Playwright', 'Produces WebM videos with visible cursor, natural pacing, and professional feel'. Mentions the specific tool (Playwright), output format (WebM), and concrete features (visible cursor, natural pacing). | 3 / 3 |
Completeness | Clearly answers both what ('Record polished UI demo videos using Playwright', 'Produces WebM videos with visible cursor, natural pacing, and professional feel') and when ('Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application') with explicit trigger guidance. | 3 / 3 |
Trigger Term Quality | Includes strong natural trigger terms users would say: 'demo', 'walkthrough', 'screen recording', 'tutorial video', 'web application'. These cover the main variations a user might use when requesting this type of work. | 3 / 3 |
Distinctiveness Conflict Risk | Highly distinctive niche: UI demo video recording via Playwright is very specific and unlikely to conflict with other skills. The combination of Playwright, video recording, and UI demos creates a clear, unique identity. | 3 / 3 |
Total | 12 / 12 Passed |
Implementation
77%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 and well-structured skill with a clear three-phase workflow, complete executable code, and explicit validation checkpoints. Its main weakness is length — the document could benefit from splitting helper functions and the script template into referenced files, and trimming some explanatory text that Claude wouldn't need (e.g., 'You cannot script what you have not seen'). Overall it's a strong skill that would effectively guide Claude through recording polished demo videos.
Suggestions
Extract the full helper function implementations (injectCursor, moveAndClick, typeSlowly, etc.) and the script template into a separate reference file (e.g., HELPERS.md or a template .cjs file), keeping only brief descriptions and signatures in the main SKILL.md.
Trim the 'Why' subsections in Phase 1 and Phase 2 — Claude doesn't need to be told why discovery matters or why silent failures are bad; a single sentence each would suffice.
| Dimension | Reasoning | Score |
|---|---|---|
Conciseness | The skill is quite long (~300+ lines) with some redundancy between sections (e.g., the 'Why' explanations for Discover and Rehearse phases explain things Claude would understand). However, most content is functional code and actionable guidance rather than filler. The Common Pitfalls section has some overlap with earlier content. | 2 / 3 |
Actionability | Excellent actionability throughout. Every concept is backed by complete, executable JavaScript code snippets — injectCursor, moveAndClick, typeSlowly, ensureVisible, panElements, subtitle injection, and a full script template. The code is copy-paste ready with Playwright APIs. | 3 / 3 |
Workflow Clarity | The three-phase Discover → Rehearse → Record workflow is clearly sequenced with explicit validation checkpoints. The rehearsal phase serves as a validation gate ('Only proceed when every selector passes'), and the checklist before recording provides a final verification step. Error recovery is addressed (when rehearsal fails: read dump → fix → re-run). | 3 / 3 |
Progressive Disclosure | The content is well-structured with clear headers and logical sections, but it's a monolithic document with no references to external files. Given its length (300+ lines with extensive code blocks), some content like the full helper function implementations or the script template could be split into separate reference files to keep the main skill leaner. | 2 / 3 |
Total | 10 / 12 Passed |
Validation
90%Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.
Validation — 10 / 11 Passed
Validation for skill structure
| Criteria | Description | Result |
|---|---|---|
frontmatter_unknown_keys | Unknown frontmatter key(s) found; consider removing or moving to metadata | Warning |
Total | 10 / 11 Passed | |
Reviewed
Table of Contents