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.

74

Quality

91%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Low

Low-risk findings worth noting

SKILL.md
Quality
Evals
Security

Quality

Content

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

The body is well-structured, executable, and free of concept padding, with strong code examples and real, correctly-linked reference files. Its main weaknesses are minor prose verbosity and the missing AGENTS.md compiled-document target.

Suggestions

Either add the AGENTS.md compiled document to the bundle or remove the 'Full Compiled Document' pointer so every reference resolves.

Tighten the prose gotchas in the Shared Element Transitions and How Multiple VTs Interact sections into terse bullets to recover tokens.

Inline the key validation/verification checkpoint from implementation.md (e.g., confirm the morph pair mounts in the same Transition) so the workflow has an explicit feedback loop without forcing a file hop.

DimensionReasoningScore

Conciseness

Largely lean and decision-table-driven with no concept padding, but a few prose elaborations (e.g. the shared-element gotchas list and the 'How Multiple VTs Interact' re-explanation of default="none") could be trimmed.

4 / 5

Actionability

Abundant copy-paste-ready JSX covering the common cases (enter/exit, shared-element name pairing, list reorder, directional wrapper) with concrete prop values, type-keyed maps, and explicit worked/broken placement examples.

5 / 5

Workflow Clarity

The Implementation Workflow section gives clear directional sequencing and a non-skippable audit step, but the validate→fix→retry checkpoints are delegated to the external reference rather than shown inline.

4 / 5

Progressive Disclosure

Clear overview with four verified, well-signaled one-level-deep references and a Reference Files index; the only gap is the dangling 'AGENTS.md' Full Compiled Document pointer, which is not present in the bundle.

4 / 5

Total

17

/

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.

The description is exemplary: third-person, comprehensive in named actions and triggers, and explicitly covers both what the skill does and when to use it. It is clearly distinguishable from other animation skills.

DimensionReasoningScore

Specificity

Lists many concrete actions (page transitions, route changes, shared element morphs, enter/exit, list reorder, directional navigation, Next.js integration) plus names the API surface (<ViewTransition>, addTransitionType, CSS pseudo-elements), matching the comprehensive-coverage anchor.

5 / 5

Completeness

Explicitly answers both what ('Guide for implementing...animations using React's View Transition API') and when via two concrete trigger clauses ('Use this skill whenever...' and 'Also use when...').

5 / 5

Trigger Term Quality

Comprehensive natural and technical trigger terms including synonyms and API names ('view transitions', 'startViewTransition', 'ViewTransition', 'transition types', 'forward/back', 'animating between UI states in React'); file extensions don't apply to an API skill.

5 / 5

Distinctiveness Conflict Risk

Scoped to a distinct React API niche with unique trigger tokens (startViewTransition, ViewTransition, addTransitionType) and explicit disambiguation ('without third-party animation libraries'), giving minimal conflict risk.

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.