How does it handle accessibility?

It follows an 'Accessibility First' approach, automatically implementing global CSS to respect 'prefers-reduced-motion' settings for sensitive users.

Does this skill support SvelteKit page transitions?

Yes, it is specifically designed to handle navigation transitions and spatial awareness in SvelteKit projects using built-in transitions or custom CSS.

Does it require external libraries like GSAP or Framer Motion?

The skill prioritizes Svelte's lightweight built-in transitions and CSS, but can integrate with external libraries if they are already present in your project.

Can I use it with Tailwind CSS?

Absolutely; the skill is optimized to work with Tailwind utility classes and can extend your tailwind.config.js with custom keyframes and animations.

Svelte UI Animator

Name: Svelte UI Animator
Author: ajianaz

byajianaz

디자인 도구

Implements performant, purposeful UI animations for Svelte and SvelteKit applications using Tailwind CSS.

소개

Svelte UI Animator is a specialized capability for Claude Code designed to help developers integrate smooth, meaningful motion into Svelte-based web applications. It streamlines the process of auditing existing UI components, planning animation strategies (such as scroll reveals and staggered entries), and implementing them using Svelte's native transitions and custom actions. By prioritizing accessibility and performance, it ensures that animations enhance user experience without introducing layout shifts, performance jank, or distracting from the core content.

주요 기능

Custom Svelte actions for scroll-triggered and interactive motion
Automatic accessibility support via prefers-reduced-motion
Svelte-native transition implementation (fade, fly, slide, scale, blur)
Tailwind CSS animation utility integration and configuration
Strategic animation auditing to prioritize performance and UX
0 GitHub stars

사용 사례

Developing seamless page transitions and navigation motion in SvelteKit
Creating engaging hero section intros and content reveal effects
Building interactive feedback loops via micro-interactions and hover states

소개

주요 기능

Custom Svelte actions for scroll-triggered and interactive motion
Automatic accessibility support via prefers-reduced-motion
Svelte-native transition implementation (fade, fly, slide, scale, blur)
Tailwind CSS animation utility integration and configuration
Strategic animation auditing to prioritize performance and UX
0 GitHub stars

사용 사례

Developing seamless page transitions and navigation motion in SvelteKit
Creating engaging hero section intros and content reveal effects
Building interactive feedback loops via micro-interactions and hover states