Is the View Transitions API compatible with all browsers?

It targets modern browsers like Chrome 126+ and Safari 18.2+. This skill provides progressive enhancement patterns to ensure your site remains fully functional in unsupported environments.

How does it handle accessibility and motion sensitivity?

The patterns include built-in logic to respect the prefers-reduced-motion media query, ensuring that animations are automatically disabled or simplified for users with motion sensitivities.

Can I use this for Multi-Page Applications (MPA)?

Absolutely. The skill includes CSS-driven patterns for cross-document transitions that work between separate HTML pages without requiring a JavaScript framework.

Does this skill support React Router?

Yes, it includes specific implementation patterns for React Router 7.x, including the viewTransition prop and useViewTransitionState hook for seamless integration.

View Transitions API Patterns

Name: View Transitions API Patterns
Author: yonatangross

byyonatangross

•

设计工具

Implements seamless page transitions and shared element animations using the native View Transitions API in React and MPA environments.

The View Transitions skill empowers developers to integrate sophisticated, native-feeling animations into web applications with minimal overhead. It provides production-ready patterns for React Router 7 integration, cross-document (MPA) transitions, and shared element morphing, such as hero image transitions between list and detail views. By leveraging the latest browser standards, it ensures smooth UX while maintaining accessibility through reduced-motion support and progressive enhancement techniques, effectively replacing heavy animation libraries for many common UI patterns.

主要功能

01Cross-document (MPA) navigation patterns using @view-transition CSS

02Native SPA navigation transitions using React Router 7.x integration

03Shared element 'morph' animations for galleries and card layouts

04Automatic accessibility handling for prefers-reduced-motion users

05Progressive enhancement wrappers for cross-browser compatibility

0669 GitHub stars

使用场景

01Adding polished navigation animations to Multi-Page Applications without heavy JS libraries

02Creating smooth 'hero' image transitions between list and detail views

03Implementing native-feeling page fades and slides in React applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit view-transitions

For use in Claude.ai and ChatGPT

Download Skill