Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →thedaviddias/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.
Passed 22 of 22 test cases with the skill, and 20 of 22 without it.
and 1 more in the full report
2 fixed20 passed either way0 still failing0 broke
Tokens, turns and time describe resource use, not a dollar price.
One of 2 test cases the skill fixed. Same model, same prompt, with and without the skill.
Can you analyze my page transition stylesheet and script to spot any bugs, accessibility issues, or naming conflicts? Please provide a code review summary detailing what needs fixing and why.
| Checked | Without skill | With skill |
|---|---|---|
| Recommends wrapping DOM updates in document.startViewTransition for page state updates | Missed | Passed |
| Checks for duplicate view-transition-name values across simultaneously captured elements | Missed | Passed |
| Advises adding prefers-reduced-motion media query guards to disable or simplify transition animations | Missed | Passed |
The instructions your model reads when the skill loads.
Jarring instant page changes are one of the most noticeable perceived- performance problems in web applications. Smooth transitions help users maintain context during navigation — they understand where they came from and where they are going. Previously, achieving this required complex JavaScript animation libraries; the View Transitions API delivers it natively at a fraction of the code cost.
Check whether the site uses the View Transitions API or a JavaScript animation library for page and component transitions.
Implement view transitions using document.startViewTransition() for SPA route changes or @view-transition for MPA cross-document navigation.
Explain how the View Transitions API captures before/after snapshots and animates between them, and how view-transition-name enables shared-element transitions.
Review transition implementation for missing prefers-reduced-motion guards, duplicate view-transition-name values (must be unique per snapshot), and transitions that may cause layout thrash in the old/new state.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/rules/css/view-transitions
test cases passed, vs 20 / 22 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.