CtrlK
BlogDocsLog inGet started
Tessl Logo

vercel-react-view-transitions

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries.

75

Quality

93%

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

86%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 high-quality, expertly structured skill body: actionable code throughout, clear sequencing, and exemplary progressive disclosure that keeps the overview lean while deferring depth to flat reference files. The only meaningful gap is that validation/feedback-loop checkpoints are delegated to the reference files rather than surfaced in the body's own workflow.

Suggestions

Surface 1-2 explicit validation checkpoints in the body's Implementation Workflow (e.g., 'After wiring the named VT, confirm only one instance of each name is mounted at a time') rather than leaving all checkpoints in implementation.md.

Trim the design-philosophy asides in 'When to Animate' ('If you can't articulate what it communicates, don't add it') to keep the body purely instructional.

Consider condensing the 'Choosing Animation Style' table and the surrounding directional-slide prose, which overlap in guidance.

DimensionReasoningScore

Conciseness

Dense and information-rich with token-efficient tables and tight code, assuming Claude's React competence (no generic explanations of what React or transitions are); docked one point because at ~320 lines a few editorial asides ('If you can't articulate what it communicates, don't add it') and elaborated prose could be trimmed without losing clarity.

4 / 5

Actionability

Provides copy-paste-ready JSX for every common case (enter/exit, list reorder, shared-element morph, type-keyed directional slides, Suspense reveal) plus executable setup commands and concrete CSS pseudo-elements, fully covering the common scenarios.

5 / 5

Workflow Clarity

Gives a clear implementation order (priority table, 'follow references/implementation.md step by step, start with the audit — do not skip it') and critical placement/caution rules, but the detailed checkpointed sequence and validate-fix-retry loops live in the referenced files rather than in the body itself.

4 / 5

Progressive Disclosure

Well-structured overview that splits detail into five real, one-level-deep reference files (implementation.md, patterns.md, troubleshooting.md, css-recipes.md, nextjs.md), each clearly signaled both inline and in a dedicated '## Reference Files' section, making navigation easy.

5 / 5

Total

18

/

20

Passed

Description

100%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.

An exemplary description: concrete action list, comprehensive natural and code-level trigger terms, explicit what/when structure, and a sharply bounded niche. Only minor nit is the mild marketing phrase 'smooth, native-feeling', which does not undermine the concrete coverage.

DimensionReasoningScore

Specificity

Lists multiple concrete actions — 'add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js' — giving comprehensive coverage beyond a single domain verb.

5 / 5

Completeness

Explicitly answers both 'what' ('Guide for implementing... animations using React's View Transition API') and 'when' with two concrete trigger clauses ('Use this skill whenever...' and 'Also use when...'), matching the anchor that requires both with concrete trigger phrases.

5 / 5

Trigger Term Quality

Covers natural phrases users would say ('page transitions', 'route changes', 'list reorder', 'shared element animations') plus the exact code identifiers they'd paste ('startViewTransition', 'ViewTransition', 'addTransitionType', 'transition types'), matching the comprehensive-synonym anchor.

5 / 5

Distinctiveness Conflict Risk

Occupies a clear niche (React's native View Transition API) with distinct triggers and an explicit boundary ('without third-party animation libraries'), minimizing overlap with generic animation or motion-library skills.

5 / 5

Total

20

/

20

Passed

Validation

100%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation16 / 16 Passed

Validation for skill structure

No warnings or errors.

Repository
vercel-labs/agent-skills
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.