CtrlK
BlogDocsLog inGet started
Tessl Logo

view-transitions

Use when adding page transition animations, image expand/contract effects, shared-element transitions, or improving navigation UX in a single-page or multi-page application.

60

Quality

70%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/view-transitions/SKILL.md
SKILL.md
Quality
Evals
Security

Quality

Content

57%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is well-organized with a lean Quick Reference and a clearly signaled, one-level-deep reference to references/rule.md for full code and framework guidance. Its weaknesses are an unnecessary motivation paragraph, the absence of inline executable code examples, and a Fix step presented as a one-liner without a sequenced workflow or validation checkpoints.

Suggestions

Trim the opening motivation paragraph (the 'Jarring instant page changes...' rationale and 'Previously, achieving this required complex JavaScript animation libraries' history) and lead directly with the Quick Reference — Claude does not need the pitch.

Add at least one minimal inline executable snippet in the Fix section (a complete document.startViewTransition() call and the @view-transition { navigation: auto } CSS block) so the body is copy-paste ready without opening rule.md.

Sequence the Fix implementation as numbered steps with a validation checkpoint (e.g., verify the transition animates and confirm prefers-reduced-motion falls back to instant updates) instead of a single one-liner.

DimensionReasoningScore

Conciseness

Mostly efficient (tight Quick Reference and section bullets), but the opening motivation paragraph — 'Jarring instant page changes are one of the most noticeable perceived-performance problems...' and 'Previously, achieving this required complex JavaScript animation libraries' — is rationale Claude does not need and could be trimmed; not the lean 'every token earns its place' anchor.

2 / 3

Actionability

Names exact APIs and CSS syntax ('document.startViewTransition()', '@view-transition { navigation: auto }', 'view-transition-name'), giving concrete guidance, but the body contains no complete executable code block — full examples are deferred to references/rule.md — so it stops short of 'copy-paste ready'.

2 / 3

Workflow Clarity

Content is organized into labeled sections (Check/Fix/Explain/Code Review) with a Code Review checklist, but the core Fix task is a one-liner with no sequenced implementation steps and no validation checkpoint (e.g., verify the transition renders, confirm prefers-reduced-motion fallback); it does not reach the 'clear sequence with explicit validation steps' anchor.

2 / 3

Progressive Disclosure

The body is a concise overview that clearly signals a one-level-deep reference — 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md' — and that file exists, so content is appropriately split with easy navigation; not the level below because the reference is well-signaled and shallow.

3 / 3

Total

9

/

12

Passed

Description

82%

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 uses concrete, natural trigger terms with an explicit 'Use when' clause and a clear, distinct niche. Its main weakness is completeness: it leads with the 'when' trigger but never states a standalone 'what this skill does' capability, leaving the skill's purpose implied rather than explicit.

DimensionReasoningScore

Specificity

Lists multiple concrete actions/scenarios — 'adding page transition animations', 'image expand/contract effects', 'shared-element transitions' — matching the 'lists multiple specific concrete actions' anchor rather than the vague 'names domain and some actions' level below.

3 / 3

Completeness

Has an explicit 'Use when...' trigger (the 'when'), but no standalone 'what this skill does' capability statement — the skill's purpose (implementing transitions via the View Transitions API) is only implied through the trigger scenarios, so it does not reach the 'clearly answers both what AND when' anchor.

2 / 3

Trigger Term Quality

Uses natural terms a frontend developer needing this skill would actually say ('page transition animations', 'image expand/contract effects', 'navigation UX', 'single-page or multi-page application'), giving good coverage; not the level below because the terms are concrete and audience-natural rather than generic jargon.

3 / 3

Distinctiveness Conflict Risk

Targets a clear niche (view/shared-element transitions) with distinct, specific triggers, making it unlikely to fire for unrelated skills; it is more specific than the 'somewhat specific but could overlap' anchor below.

3 / 3

Total

11

/

12

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.

Validation15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

metadata_version

'metadata.version' is missing

Warning

Total

15

/

16

Passed

Repository
thedaviddias/Front-End-Checklist
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.