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

0•

设计工具

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.

主要功能

01Custom Svelte actions for scroll-triggered and interactive motion

02Automatic accessibility support via prefers-reduced-motion

03Svelte-native transition implementation (fade, fly, slide, scale, blur)

04Tailwind CSS animation utility integration and configuration

05Strategic animation auditing to prioritize performance and UX

060 GitHub stars

使用场景

01Developing seamless page transitions and navigation motion in SvelteKit

02Creating engaging hero section intros and content reveal effects

03Building interactive feedback loops via micro-interactions and hover states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ajianaz/skills-collection svelte-ui-animator

For use in Claude.ai and ChatGPT

Download Skill