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.

61

Quality

72%

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

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 lean, well-structured body with concrete API-level guidance in every section and a clean hand-off to a single well-signaled reference file. The only notable weakness is the motivational intro paragraph, which restates knowledge Claude already has.

DimensionReasoningScore

Conciseness

The Quick Reference and Check/Fix/Explain/Code Review sections are lean and information-dense, but the three-sentence intro ('Jarring instant page changes are one of the most noticeable perceived-performance problems... Previously, achieving this required complex JavaScript animation libraries...') is motivational background Claude already knows. Fits anchor 4 (efficient with minor over-explanation that could be trimmed) rather than 5.

4 / 5

Actionability

Concrete, named constructs throughout: 'Wrap DOM mutations in document.startViewTransition()', 'Add view-transition-name to elements', '@starting-style and ::view-transition-* pseudo-elements', '@view-transition { navigation: auto }'. Minor gap: no inline code example, with implementation deferred to references/rule.md, so it fits anchor 4 rather than fully copy-paste-ready anchor 5.

4 / 5

Workflow Clarity

A clear Check → Fix → Explain → Code Review sequence with concrete review criteria ('prefers-reduced-motion guards, duplicate view-transition-name values'). This is not a destructive or batch operation so no validation cap applies, but no explicit verify/test checkpoint exists and the Fix step's details live in the reference — anchor 4 (clear sequence, minor validation gaps).

4 / 5

Progressive Disclosure

The body is a concise overview and the single bundle file (references/rule.md, verified to exist with code examples and framework-specific guidance) is signaled one level deep: 'For full implementation details, code examples, and framework-specific guidance, see references/rule.md'. Matches anchor 5 (clear overview, well-signaled one-level-deep references, appropriate split).

5 / 5

Total

17

/

20

Passed

Description

66%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 trigger-focused description with specific, natural scenario phrases and low conflict risk, but it is missing any statement of what the skill actually does. Adding a leading capability clause naming the View Transitions API would lift completeness and distinctiveness.

Suggestions

Add a 'what' clause before the 'Use when' clause, e.g., 'Implement smooth page and shared-element transitions using the View Transitions API (document.startViewTransition and @view-transition CSS).'

Include the API's own name ('View Transitions API', 'view transitions') as a trigger term, since users asking about this feature will often name it directly.

Tighten or scope 'improving navigation UX' (e.g., 'animating navigation between pages or views') to reduce overlap with general navigation-design skills.

DimensionReasoningScore

Specificity

Lists several concrete scenarios ('adding page transition animations, image expand/contract effects, shared-element transitions'), though 'improving navigation UX' is generic and no implementation actions are stated. Matches anchor 4 (several specific items, minor gaps in coverage) rather than 5, which requires comprehensive concrete actions.

4 / 5

Completeness

Only a 'when' clause is present — the description never states what the skill does (e.g., that it implements transitions via the View Transitions API). The 'when' is explicit and concrete, placing it above the vague anchor-2 example ('Use when working with documents'), but the entirely missing 'what' keeps it below anchors 4-5.

3 / 5

Trigger Term Quality

Natural user phrases like 'page transition animations', 'shared-element transitions', 'image expand/contract', and 'single-page or multi-page application' give good keyword coverage. A few natural terms are missing (e.g., 'View Transitions', 'SPA', 'app-like transitions'), so it fits anchor 4 rather than the comprehensive synonym coverage of anchor 5.

4 / 5

Distinctiveness Conflict Risk

'Page transition animations', 'shared-element transitions', and 'image expand/contract effects' form a clear niche, but 'improving navigation UX' is broad enough to overlap with general navigation or UX-design skills. Fits anchor 4 (mostly distinct, minor overlap risk with closely related skills).

4 / 5

Total

15

/

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

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.