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.

76

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

The canonical home for this skill is vercel-react-view-transitions in vercel-labs/agent-skills

SKILL.md
Quality
Evals
Security

Quality

Content

87%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

The body is lean, actionable, and well-structured with strong progressive disclosure to real reference files. Its main weakness is workflow clarity: the multi-step implementation workflow and its validation checkpoints live in a reference rather than being enumerated with inline feedback loops in SKILL.md itself.

Suggestions

Inline a compact version of the implementation.md workflow (audit → wrap → style → validate → test) with at least one explicit validation checkpoint in the 'Implementation Workflow' section so the body is self-contained for the core path.

Fix or remove the dangling 'Full Compiled Document: AGENTS.md' reference — the file does not exist in the bundle, which breaks the otherwise clean one-level-deep navigation.

Add a brief note in the Implementation Workflow on how to verify an animation is actually firing (e.g. checking ::view-transition pseudo-elements or the transition event) as a built-in feedback loop.

DimensionReasoningScore

Conciseness

The body is dense and information-rich, assumes Claude's competence (no 'what is React' padding), and uses compact tables and code blocks where every token earns its place.

3 / 3

Actionability

Provides copy-paste-ready executable JSX throughout (e.g. the ViewTransition wrappers, type-keyed maps, nested shared-element+list-identity example) with specific prop values and CSS pseudo-elements named.

3 / 3

Workflow Clarity

There is clear sequence and priority guidance ('Implement all applicable patterns...in this order', 'Start with the audit — do not skip it'), but the actual validation checkpoints and error-recovery feedback loops are deferred to references/implementation.md rather than shown inline.

2 / 3

Progressive Disclosure

A clear overview body points to four well-signaled one-level-deep reference files (implementation.md, patterns.md, css-recipes.md, nextjs.md), all of which exist and are described in a final Reference Files section.

3 / 3

Total

11

/

12

Passed

Description

100%

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 specific, trigger-rich, and complete, naming concrete capabilities and explicit 'use when' guidance tied to natural user phrasing and API tokens. It is clearly distinguishable from other animation or routing skills.

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' — rather than vague language.

3 / 3

Completeness

Explicitly answers what it does ('Guide for implementing...animations using React's View Transition API') and when to use it ('Use this skill whenever...', 'Also use when the user mentions...').

3 / 3

Trigger Term Quality

Broad coverage of natural terms users would say ('page transitions', 'route changes', 'shared element animations', 'list reorder', 'directional navigation animations') plus API-level terms ('view transitions', 'startViewTransition', 'ViewTransition', 'transition types').

3 / 3

Distinctiveness Conflict Risk

A clear niche — React's View Transition API with named components and APIs — with distinct triggers unlikely to fire for unrelated skills.

3 / 3

Total

12

/

12

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
zhukunpenglinyutong/desktop-cc-gui
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.