Domains
Forms
Mechanism
Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.
When the user wants to add page transitions, animate route changes, create shared element animations, animate component enter/exit, list reorder, directional navigation, or integrate view transitions in Next.js without third-party libraries.
<ViewTransition> to declare what animates; trigger via startTransition, useDeferredValue, or Suspense.addTransitionType for context-specific animations.references/implementation.md step by step; copy CSS from references/css-recipes.md.Smooth native-feeling UI animations in React/Next.js with graceful degradation, improved perceived performance and spatial continuity, no external animation deps.
Use Cases
A developer builds a Next.js e-commerce site and wants list-to-detail navigation with shared image morph. Using this skill, they follow the audit and implementation steps, add nested `<ViewTransition>` for list identity and shared element, copy CSS recipes, and get a smooth hierarchical navigation animation that communicates spatial depth, improving UX without extra libraries.
A team maintains a React dashboard and needs to animate enter/exit of panels and list reorder on filter. They use the skill to wrap items in `<ViewTransition>` with keys, trigger inside `startTransition`, and apply type-keyed directional slides for hierarchical filters. Result is clearer state changes and reordered items with native transitions, boosting perceived performance.
Skill Relationships
Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.
Tier 1 · These Skills Use Me
Tier 2 · Current Skill
Tier 3 · I Use These Skills
Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.
Skill File