skills.rest
gabelul
gabelulCOMMUNITY
Explore all skills by this author →
Website𝕏@GabiExploresGitHub

stitch-animate

Add tiered motion layers to Stitch-generated UI components with reduced-motion compliance.

38|5|Updated Feb 18, 2026
Search Tags:#accessibility#svelte#nextjs#animation#ui-components#framer-motion#reduced-motion
One-click install
npx skills add https://github.com/gabelul/stitch-kit --skill stitch-animate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: stitch-animate
Source: https://github.com/gabelul/stitch-kit/tree/main/skills/stitch-animate
Command: npx skills add https://github.com/gabelul/stitch-kit --skill stitch-animate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Stitch-generated UI components are often static and lack polished motion design, while manually adding animations risks inconsistent user experience and accessibility violations for users with reduced motion preferences.

Core Features & Use Cases

  • Tiered Animation System: Applies micro (interactive states), meso (viewport reveals), and macro (page transitions) animations based on element purpose to avoid over-animation.
  • Multi-Framework Support: Uses CSS transitions for universal compatibility, Framer Motion for React/Next.js projects, and native Svelte transitions for SvelteKit applications.
  • Accessibility-First: All animations include mandatory prefers-reduced-motion overrides to ensure compliance for users with motion sensitivities.
  • Use Case: After generating a set of Stitch e-commerce product card components, use this skill to add subtle hover lift effects, staggered scroll reveals for the product grid, and smooth modal transitions for the product detail view.

Quick Start

Use the stitch-animate skill to add accessible hover and scroll reveal animations to your recently generated Stitch Next.js dashboard component set.

Frequently Asked Questions about stitch-animate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add accessible animations to UI components without breaking reduced-motion preferences?▼

To add accessible UI animations with reduced-motion compliance, apply tiered motion layers using Framer Motion, Svelte transitions, or CSS transitions. This ensures interactive elements and page transitions automatically respect user motion sensitivity preferences.

What is the best way to animate a SvelteKit component grid on scroll reveal?▼

The best way to animate SvelteKit component scroll reveals is using native Svelte transitions mapped to a meso animation tier. This applies purposeful viewport reveals while maintaining built-in accessibility compliance.

Can I use Framer Motion to add page transitions to Next.js projects?▼

Yes, you can use Framer Motion to add macro tier page transitions to Next.js projects. The system applies context-aware motion layers that automatically include mandatory prefers-reduced-motion overrides for accessibility.

How do I structure micro and macro animations for interactive elements to avoid over-animation?▼

Structure micro animations for interactive states and macro animations for page transitions by applying a tiered animation system. This context-aware approach assigns motion based on element purpose to prevent over-animation.

Does adding motion design to static HTML require external animation libraries?▼

Adding motion design to static HTML does not require external libraries if using CSS transitions. The system supports vanilla HTML projects alongside Framer Motion for React and native transitions for SvelteKit.

Related Skills

Explore More Design & Creative Skills→
hospitaljobsinhospitaljobsin
7

frontend-design

Create production-grade frontend interfaces with React, Vue, Svelte, or vanilla HTML/CSS/JS.

Official
Advanced
alicanerdoganalicanerdogan
1

i-animate

Plan and implement animations and micro-interactions for web and app interfaces.

Community
Advanced
toddmoytoddmoy
1

animate

Design performant UI animations with CSS and Framer Motion.

Community
Advanced
AzamCodesAzamCodes

animation-designer

Create web animations with Framer Motion and CSS for frontend UIs.

Community
Advanced