CtrlK
BlogDocsLog inGet started
Tessl Logo
SkillPublic

transitions-ui-generation

Make any UI appear as if an AI agent is generating it. A dotted wireframe is drawn from the element's own structure (outline, boxes, text lines, icon paths, with guides, corner handles and size labels), then the real UI is revealed behind a scan line with a fade on a smooth ease-out. Two modes, skeleton and skeleton + generation texts (an agent log, the motion CSS being written, and a step line). One dependency-free runtime that works with any framework (vanilla, React, Next.js, Vue, Svelte). Use when the user asks for a "generation animation", "AI generating the UI", "agent building the component", "build-in animation", "wireframe to UI reveal", "skeleton generation", "dotted wireframe", "matrix dots", "make it look generated", "futuristic reveal", "generative UI loading", or for an AI product that should show its output being built. Also the commands transitions generate, transitions generate texts and transitions generate preview.

Quality

89%

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

78%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 strong, unusually actionable guide: complete executable wiring across five frameworks, concrete decision rules, and a confirm-before-acting command workflow. Its two real weaknesses are token cost of the visual phase narration and a bundle whose referenced files are entirely missing, which breaks the progressive-disclosure design.

Suggestions

Ship the referenced bundle files (01-skeleton.md, 02-skeleton-texts.md, ui-generation.js, ui-generation.css, demo.html) alongside SKILL.md — every reference in the body currently resolves to nothing.

Trim the five-phase 'What it draws' narration to one line per phase or move it into the per-mode reference files to cut tokens without losing actionability.

Add an explicit post-wiring verification step, e.g. confirm `run.finished` resolves and the element is visible after `cancel()`, to close the workflow feedback loop.

DimensionReasoningScore

Conciseness

Efficient and dense with no re-teaching of concepts Claude already knows, but the five-phase 'What it draws' visual narration and editorial asides like "Grey dots read as 'the agent's working layer'" could be trimmed without losing actionability. Not 5 because a few descriptive passages do not earn their tokens; not 3 because there is no padded or redundant explanation anywhere.

4 / 5

Actionability

Provides copy-paste-ready wiring for five environments (vanilla, attribute API, React/Next.js, Vue, Svelte), a concrete 3-step install, an options table with defaults and bounds ("Keep it between `1600` and `3600`"), and a mistakes section with specific remedies ("Await `document.fonts.ready` ... first"). Fully executable and covers the common cases, matching the 5 anchor.

5 / 5

Workflow Clarity

The 'transitions generate' command is a clear 4-step sequence with an explicit propose-and-confirm checkpoint ("Propose it in one line ... Confirm?") and ambiguity handling ("If it is ambiguous, ask which"), plus a sequenced Install/Wiring flow. Not 5 because there is no post-run verification step (e.g., confirm `run.finished` resolves and the element is visible after `cancel()`); the operation is non-destructive, so the destructive/batch cap does not apply.

4 / 5

Progressive Disclosure

References are well-signaled and one level deep (mode details in 01-skeleton.md / 02-skeleton-texts.md, runtime in ui-generation.js/.css), but none of the referenced files exist in the bundle — there are no references/, scripts/ or assets/ directories, so every referenced path dead-ends. Not 4 because missing bundle files are more than a minor organization gap; not 2 because SKILL.md itself is well-sectioned and keeps mode detail out of the main body.

3 / 5

Total

16

/

20

Passed

Description

96%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 model description: concrete capabilities, an explicit 'Use when' clause with a dozen natural trigger phrases plus command names, and a distinctive niche. The only weakness is minor overlap risk with skeleton-loading skills via the 'skeleton generation' and 'generative UI loading' triggers.

DimensionReasoningScore

Specificity

Lists multiple concrete actions with comprehensive coverage: "A dotted wireframe is drawn from the element's own structure (outline, boxes, text lines, icon paths, with guides, corner handles and size labels)", "the real UI is revealed behind a scan line", both modes with their contents ("an agent log, the motion CSS being written, and a step line"), and framework support. Not 4 because the drawing, reveal, modes and runtime are all covered with no gaps and no vague filler.

5 / 5

Completeness

Explicitly answers both questions: the what ("Make any UI appear as if an AI agent is generating it... Two modes, skeleton and skeleton + generation texts... One dependency-free runtime that works with any framework") and the when ("Use when the user asks for a 'generation animation', 'AI generating the UI'...") with concrete trigger phrases. Exactly the 5 anchor; not 4 because the when-clause is already fully explicit.

5 / 5

Trigger Term Quality

The 'Use when' clause lists twelve natural trigger phrases including colloquial synonyms users would actually say — "generation animation", "wireframe to UI reveal", "matrix dots", "make it look generated", "futuristic reveal", "generative UI loading" — plus the three command names. This matches comprehensive natural-term coverage with synonyms; not 4 because even informal variants are present.

5 / 5

Distinctiveness Conflict Risk

A clear niche (agent-generating-UI animation) with highly distinctive triggers, but "skeleton generation" and "generative UI loading" overlap with skeleton-loader / loading-state skills, a closely related family. Not 5 because of that minor overlap risk; not 3 because the trigger set is far too specific to fire on generic skills.

4 / 5

Total

19

/

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

relative_links

Relative link issues: 11 missing

Warning

Total

15

/

16

Passed

Repository

Jakubantalik/transitions.dev

Path

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