skills.rest
andrewle9510
andrewle9510COMMUNITY
Explore all skills by this author →
GitHub

fd-animations

Provide motion design guidance for UI animations in Next.js 16+ apps with Tailwind CSS v4 and shadcn/ui.

Updated Jan 17, 2026
Search Tags:#performance#accessibility#Tailwind#micro-interactions#shadcn-ui#motion-design#UI-animations
One-click install
npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-animations
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fd-animations
Source: https://github.com/andrewle9510/design-skill-orchestrator/tree/main/.opencode/skill/fd-animations
Command: npx skills add https://github.com/andrewle9510/design-skill-orchestrator --skill fd-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide expert motion design guidance to improve usability and delight in user interfaces by designing purposeful animations and transitions.

Core Features & Use Cases

  • Establish motion principles: timing, easing, and duration guidelines for UI elements.
  • Recommend hover, focus, loading, and modal animations tailored to the product's brand and accessibility needs.
  • Provide implementation tips for Tailwind CSS, shadcn/ui, and React components, with practical examples.

Quick Start

Describe a subtle hover lift for a product card and the system will propose timing, easing, and Tailwind classes to implement it.

Frequently Asked Questions about fd-animations

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

FAQPage Schema
How do I add UI animations to a shadcn/ui component using Tailwind CSS?▼

UI animations in shadcn/ui are added by applying Tailwind CSS classes for hover effects and transitions. This guidance provides timing tokens, easing options, and component motion patterns to ensure performance and accessibility.

What are the best motion design principles for Next.js micro-interactions?▼

The best motion design principles for micro-interactions involve establishing specific timing, easing, and duration guidelines. This ensures UI elements move purposefully, improving usability and delight without compromising web app performance.

Does this motion design guidance support Next.js 16 and Tailwind CSS v4?▼

Yes, the motion design guidance explicitly supports Next.js 16+ web apps using Tailwind CSS v4 and shadcn/ui. It provides implementation tips and practical examples tailored to this React component stack.

How do I create a subtle hover lift for a product card in Tailwind?▼

To create a subtle hover lift, describe the desired effect to receive proposed timing, easing, and Tailwind classes. This provides a quick start implementation for your React components.

What accessibility considerations are needed for loading state animations?▼

Accessibility considerations for loading state animations ensure motion patterns do not hinder usability. The guidance satisfies functional requirements for accessibility, recommending safe timing and easing options for UI elements.

Related Skills

Explore More Design & Creative Skills→
Mischio95Mischio95
1

shadcn-ui

Set up shadcn/ui components and forms with React Hook Form and Zod.

Community
Advanced
sanky369sanky369
29

interaction-physics

Design and audit microinteractions for UI elements with timing, easing, and accessibility.

Community
Intermediate
DITEKmaxDITEKmax

animated-component-libraries

Provide pre-built animated React components for Tailwind CSS and Framer Motion.

Community
Intermediate
deomiarndeomiarn

framer-animations

Automate Framer Motion micro-animations for section reveals, staggered lists, and hover interactions.

Community
Intermediate