frontend-ui-animator
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
- Installs
- 342
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/julianromli/ai-skills --skill frontend-ui-animator- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads frontend-ui-animator automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Frontend UI Animator
Implement purposeful, performant animations that enhance UX without overwhelming users. Focus on key moments: hero intros, hover feedback, content reveals, and navigation transitions.
Core Philosophy
"You don't need animations everywhere" - Prioritize:
| Priority | Area | Purpose |
|---|---|---|
| 1 | Hero Intro | First impression, brand personality |
| 2 | Hover Interactions | Feedback, discoverability |
| 3 | Content Reveal | Guide attention, reduce cognitive load |
| 4 | Background Effects | Atmosphere, depth |
| 5 | Navigation Transitions | Spatial awareness, continuity |
Workflow
Execute phases sequentially. Complete each before proceeding.
Phase 1: Analyze
- Scan project structure - Identify all pages in
app/and components incomponents/ - Check existing setup - Review
tailwind.config.tsfor existing animations/keyframes - Identify animation candidates - List components by priority category
- Document constraints - Note installed animation libraries (framer-motion, etc.)
Output: Animation audit table. See references/component-checklist.md.
Phase 2: Plan
- Map animations to components - Assign specific animation patterns
- Determine triggers - Load, scroll (intersection), hover, click
- Estimate effort - Low (CSS only), Medium (hooks needed), High (library required)
- Propose phased rollout - Quick wins first
Output: Implementation plan with component → animation mapping.
Phase 3: Implement
- Extend Tailwind config - Add keyframes and animation utilities
- Add reduced-motion support - Accessibility first
- Create reusable hooks -
useScrollReveal,useMousePositionif needed - Apply animations per component - Follow patterns in
references/animation-patterns.md
Performance rules:
// ✅ DO: Use transforms and opacity only
transform: translateY(20px);
opacity: 0.5;
filter: blur(4px);
// ❌ DON'T: Animate layout properties
margin-top: 20px;
height: 100px;
width: 200px;
Phase 4: Verify
- Test in browser - Visual QA all animations
- Test reduced-motion - Verify
prefers-reduced-motionworks - Check CLS - No layout shifts from animations
- Performance audit - No jank on scroll animations
Quick Reference
Animation Triggers
| Trigger | Implementation |
|---|---|
| Page load | CSS animation with animation-delay for stagger |
| Scroll into view | IntersectionObserver or react-intersection-observer |
| Hover | Tailwind hover: utilities or CSS :hover |
| Click/Tap | State-driven with useState |
Common Patterns
Staggered children:
{items.map((item, i) => (
<div
key={item.id}
style={{ animationDelay: `${i * 100}ms` }}
className="animate-fade-slide-in"
/>
))}
Scroll reveal hook:
const useScrollReveal = (threshold = 0.1) => {
const ref = useRef<HTMLDivElement>(null);
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
([entry]) => entry.isIntersecting && setIsVisible(true),
{ threshold }
);
if (ref.current) observer.observe(ref.current);
return () => observer.disconnect();
}, [threshold]);
return { ref, isVisible };
};
Usage:
const { ref, isVisible } = useScrollReveal();
<div ref={ref} className={isVisible ? 'animate-fade-in' : 'opacity-0'} />
Resources
- Animation patterns: See
references/animation-patterns.md - Audit template: See
references/component-checklist.md - Tailwind presets: See
references/tailwind-presets.md
Technical Stack
- CSS animations: Default for simple effects
- Tailwind utilities: For hover states and basic animations
- Framer Motion: For complex orchestration, gestures, layout animations
- GSAP: For timeline-based sequences (if already installed)
Accessibility (Required)
Always include in global CSS:
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
FAQ
What does the frontend-ui-animator skill do?
Analyze and implement purposeful UI animations for Next.js + Tailwind + React projects. Use when user asks to add animations, enhance UI motion, animate pages/components, or improve visual feedback. Triggers on "add animations", "animate UI", "motion design", "hover effects", "scroll animations", "page transitions", "micro-interactions".
How do I install frontend-ui-animator?
Run npx skills add https://github.com/julianromli/ai-skills --skill frontend-ui-animator in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/frontend-ui-animator/ (personal) or .claude/skills/frontend-ui-animator/ (project).
Which AI agents can use frontend-ui-animator?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is frontend-ui-animator safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains frontend-ui-animator?
It is published by julianromli in julianromli/ai-skills. It has 342 recorded installs.
More from julianromli/ai-skills
clone-website
julianromli/ai-skills
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
make-interfaces-feel-better
julianromli/ai-skills
Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typography, micro-interactions, enter/exit animations, or any visual detail work. Triggers on UI polish, design details, "make it feel better", "feels off", stagger animations, border radius, optical alignment, font smoothing, tabular numbers, image outlines, box shadows.
frontend-design
julianromli/ai-skills
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
browser
julianromli/ai-skills
Minimal Chrome DevTools Protocol tools for browser automation and scraping. Use when you need to start Chrome, navigate pages, execute JavaScript, take screenshots, or interactively pick DOM elements.
ui-ux-pro-max
julianromli/ai-skills
UI/UX design intelligence for web and mobile. Includes 50+ styles, 161 color palettes, 57 font pairings, 161 product types, 99 UX guidelines, and 25 chart types across 10 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui, and HTML/CSS). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, and check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, and mobile app. Elements: button, modal, navbar, sidebar, card, table, form, and chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, and flat design. Topics: color systems, accessibility, animation, layout, typography, font pairing, spacing, interaction states, shadow, and gradient. Integrations: shadcn/ui MCP for component search and examples.
agents-md-generator
julianromli/ai-skills
Generate hierarchical AGENTS.md structures for codebases. Use when user asks to create AGENTS.md files, analyze codebase for AI agent documentation, set up AI-friendly project documentation, or generate context files for AI coding assistants. Triggers on "create AGENTS.md", "generate agents", "analyze codebase for AI", "AI documentation setup", "hierarchical agents".
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.