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.

72

Quality

87%

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

75%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 a well-structured, action-dense overview that defers detail to four real reference files and prescribes a clear implementation workflow. It loses points only for minor cross-section repetition, a couple of partial code blocks, and a dangling AGENTS.md reference.

Suggestions

Consolidate the repeated 'use default="none" liberally' and 'always pair enter with exit' guidance into a single rules section to remove cross-section repetition.

Close or complete the asymmetric enter/exit JSX example so all code blocks are copy-paste ready.

Either provide the referenced AGENTS.md compiled document or remove the 'Full Compiled Document' pointer to avoid a dead reference.

DimensionReasoningScore

Conciseness

The body is dense, table-driven, and assumes Claude's competence without explaining basic concepts, but a few rules (notably 'use default="none" liberally' and the enter/exit pairing) are restated across several sections and could be consolidated. Efficient with minor trimmable repetition, matching the 4 anchor rather than the fully lean 5.

4 / 5

Actionability

Provides numerous executable JSX snippets, concrete prop values, placement rules, and pointer to copy-ready CSS recipes covering the common cases; a couple of examples are partial (e.g., the asymmetric enter/exit block has unclosed JSX), keeping it just short of fully copy-paste ready.

4 / 5

Workflow Clarity

Directs the reader to follow references/implementation.md step by step starting with a mandatory audit, and that reference contains a clear 7-step sequence with a verification step (Step 7) plus a 'Common Mistakes' feedback section; verification is a walkthrough rather than an explicit validate-fix-retry gate, so it sits at 4 rather than 5.

4 / 5

Progressive Disclosure

SKILL.md is a clear overview with well-signaled one-level-deep references (implementation.md, css-recipes.md, patterns.md, nextjs.md), each summarized in a Reference Files section, and all four referenced files exist; the only gap is the 'Full Compiled Document: AGENTS.md' pointer, which does not exist in the bundle, a minor organization gap keeping it at 4.

4 / 5

Total

16

/

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: it states concrete capabilities, provides exhaustive natural and technical trigger terms, and explicitly answers both 'what' and 'when' in third person. It is comprehensive without being padded.

DimensionReasoningScore

Specificity

Lists multiple concrete actions (page transitions, route changes, shared element animations, enter/exit, list reorder, directional navigation, Next.js integration) alongside specific API primitives (<ViewTransition>, addTransitionType, CSS pseudo-elements), giving comprehensive coverage.

5 / 5

Completeness

Explicitly states what the skill does ('Guide for implementing smooth, native-feeling animations...') and when to use it via two explicit trigger clauses ('Use this skill whenever the user wants to...' and 'Also use when the user mentions...'), with concrete trigger phrases.

5 / 5

Trigger Term Quality

Comprehensive coverage of natural user phrasing ('page transitions', 'animate route changes', 'shared element animations', 'list reorder') plus technical synonyms and exact API names (startViewTransition, ViewTransition, transition types), matching the top anchor.

5 / 5

Distinctiveness Conflict Risk

A clear niche (React View Transition API) with triggers tied to distinctive API names and animation-specific phrasing, making conflict with other skills unlikely.

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