CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

stageshow

Build faux product UI that looks like a real product, as a still illustration or an animated demo with a cursor. Browser and app windows, dashboards, phones, notifications, terminals, bento grids and cursor walkthroughs, framed, masked and cropped the way a marketing page, feature card or docs hero needs them. Use whenever someone wants a fake or mocked UI, a product demo or walkthrough animation, a hero or feature-card illustration of an app, a product shot in the style of a polished marketing site, or an animated cursor doing things in an interface, even if they never say "faux UI". React and plain CSS.

Quality

92%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Failed to scan

The risk profile of this skill

SKILL.md
Quality
Evals
Security

Quality

Content

81%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 dense, high-craft workflow document: an explicit seven-step process with real validation gates and feedback loops, concrete film commands and dimensions, and a well-signaled one-level reference layer with every references/*.md path verified. The main deductions are repeated framing rules across sections and the unresolved examples/, kit/, and teaching/ paths that the core copy-a-gold-example and kit workflows depend on.

Suggestions

De-duplicate the framing rules between step 4's short form and the recurring-faults checklist — keep one canonical statement and let the faults list cite only the reference section.

Inline a minimal, self-contained kit/Act usage snippet (e.g. Stage + a three-line script) in SKILL.md so the core workflow is executable even before references/kit.md or the kit/ folder is consulted.

Clarify where examples/, kit/, and teaching/ live relative to the skill (or trim the example tables to what ships in the bundle) so every referenced path resolves from SKILL.md.

DimensionReasoningScore

Conciseness

The body assumes Claude's competence — no concept explanations, no filler — but framing rules are stated twice (step 4's "short form" and again in the recurring-faults checklist) and step 4 is an overloaded paragraph mixing copying, reading craft.md, layout choice, and framing. This fits 'efficient; minor instances that could be trimmed' rather than the every-token-earns-its-place anchor.

4 / 5

Actionability

Concrete, copy-paste-ready commands are present ("node scripts/film.mjs \"<preview>/?capture=<gold>\" --select '#example' --still --out gold.png", "npm run dev", "film.mjs --gate") alongside exact dimensions (720 × 340, 358 compact) and named API parts (Stage, Act, Bar/Text/Row, data-target, rect()). It falls short of fully executable because the central workflows depend on examples/ and kit/ directories that are not present in the bundle, and no minimal kit/Act usage snippet is inlined to compensate.

4 / 5

Workflow Clarity

Seven clearly sequenced steps (plan → look → story → copy gold → build → choreograph → rehearse) with explicit validation feedback loops: film stills beside the gold, a contact sheet at two widths, "fix the largest visible fault first... re-film", "film.mjs --gate ending 'rehearsal passed' is necessary, not sufficient", a fresh-eye review, and a REHEARSAL.md handover. This matches the anchor with explicit validation steps, feedback loops, and a checklist; anchor 4's 'minor validation gaps' does not apply.

5 / 5

Progressive Disclosure

References are one level deep and well signaled — every citation names the file and its section (e.g. "references/framing.md, Small formats and the page") and all 15 referenced reference files verified to exist, with a closing map section. It is not the clear-anchor-5 case because examples/, kit/, and teaching/ paths referenced throughout do not resolve in the provided bundle, leaving the three example tables and kit instructions without their targets.

4 / 5

Total

17

/

20

Passed

Description

100%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 exemplary: third-person, concrete about actions and output forms, technologically specific (React and plain CSS), and with an explicit, richly paraphrased 'Use whenever...' trigger clause that even covers users who never say 'faux UI'. Both what and when are answered explicitly with no fluff or over-claims.

DimensionReasoningScore

Specificity

"Build faux product UI... as a still illustration or an animated demo with a cursor", "Browser and app windows, dashboards, phones, notifications, terminals, bento grids", "framed, masked and cropped", and "React and plain CSS" list multiple concrete actions, output forms, and the tech stack with no material gaps, matching the comprehensive-coverage anchor rather than the minor-gaps anchor below it.

5 / 5

Completeness

It explicitly answers what ("Build faux product UI... framed, masked and cropped the way a marketing page, feature card or docs hero needs them") and when ("Use whenever someone wants a fake or mocked UI..."), with concrete trigger phrases, matching the anchor for both clearly present; anchor 4's weaker 'when' does not apply.

5 / 5

Trigger Term Quality

Natural phrases users would say are covered exhaustively — "fake or mocked UI", "product demo", "walkthrough animation", "hero or feature-card illustration", "product shot", "animated cursor" — and it explicitly anticipates unspoken variants ("even if they never say 'faux UI'"), fitting the comprehensive-synonyms anchor rather than anchor 4's "a few natural terms missing".

5 / 5

Distinctiveness Conflict Risk

"Faux product UI" with mock/demo/product-shot triggers carves a clear niche distinct from real UI development or general design skills; triggers are specific enough that conflict risk is minimal, fitting the clear-niche anchor.

5 / 5

Total

20

/

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

englishstreetventures/osn

Path

.agents/skills/stageshow/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.