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.

Quality

73%

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

Fix and improve this skill with Tessl

tessl review fix ./skills/view-transitions/SKILL.md

Quality

Content

71%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 well-structured, lean overview that uses progressive disclosure effectively to push code and verification into references/rule.md. The main weakness is actionability in the body itself, which offers API one-liners but no complete executable code blocks.

Suggestions

Add one minimal copy-paste code snippet to the body (e.g. a startViewTransition wrapper) so the overview is self-sufficient for the common case without requiring the reference.

Trim the motivational opening paragraph ('Jarring instant page changes...') to a single sentence or fold it into the Quick Reference to reduce over-explanation.

Make the Check/Fix/Explain/Code Review flow more explicitly sequenced with a short validation checkpoint tying back to the Verification steps in references/rule.md.

Dimension	Reasoning	Score
Conciseness	The body is a lean overview with a concrete Quick Reference and short Check/Fix/Explain/Code Review sections, but the motivational opening paragraph ('Jarring instant page changes are one of the most noticeable perceived-performance problems...') is mild over-explanation Claude could infer.	4 / 5
Actionability	Concrete API calls appear as one-liners ('document.startViewTransition()', '@view-transition { navigation: auto }'), but the body contains no full executable code blocks — all complete examples are deferred to references/rule.md, leaving key details out of the overview.	3 / 5
Workflow Clarity	The Check → Fix → Explain → Code Review structure gives a clear review sequence, and the Code Review section lists explicit checkpoints (reduced-motion guards, duplicate view-transition-name, layout thrash); it is a categorized guide rather than a strictly sequenced process, leaving minor gaps.	4 / 5
Progressive Disclosure	The body is a concise overview with clear sections and a single, well-signaled one-level-deep reference ('see references/rule.md', verified to exist), with full code examples and verification appropriately split into that reference file.	5 / 5
	Total	16 / 20 Passed

Description

75%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 solid, third-person trigger-led description with concrete transition types and clear use-when guidance. It answers both what and when, though the two are fused and a few natural synonyms are missing.

Dimension	Reasoning	Score
Specificity	Names several concrete capability areas — 'page transition animations', 'image expand/contract effects', 'shared-element transitions' — though the final 'improving navigation UX' is comparatively generic, leaving minor coverage gaps short of a fully comprehensive 5.	4 / 5
Completeness	Has an explicit 'Use when...' trigger clause and the listed actions convey what the skill does, but the 'what' and 'when' are fused into a single clause rather than a distinct capability statement followed by separate trigger guidance.	4 / 5
Trigger Term Quality	Includes natural phrases users would say ('page transition animations', 'shared-element transitions', 'navigation UX', 'single-page/multi-page') with good keyword coverage, though common synonyms like 'route transitions' or 'page change animations' are absent.	4 / 5
Distinctiveness Conflict Risk	The View Transitions niche is fairly distinct with specific triggers, but there is minor overlap risk with broader CSS animation or general navigation-UX skills.	4 / 5
	Total	16 / 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: thedaviddias/Front-End-Checklist
Path: skills/view-transitions/SKILL.md
Commit: 30756a7

Reviewed: 4 days 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.