ironmind-animations

Define motion tokens and keyframes for IRONMIND UI animations.

Updated Aug 27, 2026

Search Tags:#theming #accessibility #animations #tailwind #framer-motion #ui-motion

Ready to run

npx skills add https://github.com/MorganDevInSA/ironmind --skill ironmind-animations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ironmind-animations
Source: https://github.com/MorganDevInSA/ironmind/tree/main/.cursor/skills/ironmind-animations
Command: npx skills add https://github.com/MorganDevInSA/ironmind --skill ironmind-animations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This animation system provides deliberate, premium UI motion to elevate IRONMIND components, improving perceived quality and user guidance.

Core Features & Use Cases

Swift, purpose-driven motion: fast micro-interactions (150–300ms) and restrained transitions to reinforce feedback without distraction.
Theme-aware tokens: CSS variables and keyframes adapt to color themes for a consistent look with var(--accent) and related tokens.
Reusable patterns: keyframes, utility classes, and patterns for hover, focus, skeleton states, page transitions, and data reveals.

Quick Start

Import and apply the motion tokens and keyframes from this Skill to enable premium, theme-aware micro-interactions.

Frequently Asked Questions about ironmind-animations

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

FAQPage Schema

How do I add premium UI animations to Tailwind components without hurting accessibility?▼

To add premium UI animations without hurting accessibility, you apply theme-aware motion tokens and keyframes that define fast micro-interactions, ensuring transitions remain restrained and performant across color themes.

What's the best way to implement theme-aware skeleton loaders and page transitions?▼

The best way to implement theme-aware skeleton loaders and page transitions is by applying reusable CSS variables and keyframes that adapt to color themes, providing consistent and purposeful motion for data reveals.

How does theme-aware motion work with CSS variables for UI micro-interactions?▼

Theme-aware motion works by utilizing CSS variables like var(--accent) alongside defined keyframes, allowing hover effects, focus states, and loading animations to automatically adapt to the active color theme.

Can I use Framer Motion with these deliberate animation tokens for web interfaces?▼

Yes, you can use Framer Motion with these animation tokens by importing the defined motion patterns and keyframes, applying them to loading states, counters, and page transitions across your web interfaces.

Do I need to install external dependencies to enable hover and focus motion patterns?▼

No, you do not need to install external dependencies to enable hover and focus motion patterns, as the system provides self-contained keyframes and utility classes that integrate directly into your components.

Why does my UI feel distracting when applying transitions to loading states and counters?▼

Your UI feels distracting because transitions lack deliberate timing; applying purpose-driven motion restricts micro-interactions to a fast 150–300ms range, reinforcing user feedback without causing visual distraction.