Is accessibility included by default?

Absolutely. Every implementation includes a global CSS reset that respects the 'prefers-reduced-motion' media query to ensure the UI remains accessible.

Can I use it on an existing project?

Yes, it is designed to scan your project's app/ and components/ directories to identify the best candidates for animation without breaking existing code.

Does this skill support Framer Motion?

Yes, it can implement complex animations using Framer Motion while also providing CSS and Tailwind-only alternatives for simpler requirements.

How does it handle performance?

The skill strictly follows performance best practices, focusing on GPU-accelerated properties like transforms and opacity to avoid layout shifts and maintain 60fps.

Frontend UI Animator

Name: Frontend UI Animator
Author: julianromli

byjulianromli

•

101

•

디자인 도구

Implements purposeful, high-performance UI animations for Next.js and Tailwind CSS projects to enhance engagement and user experience.

Frontend UI Animator is a specialized Claude Code skill designed to integrate sophisticated motion design into React-based applications. It automates the process of auditing project structures, planning animation strategies—such as staggered reveals and scroll-triggered effects—and implementing them using performance-optimized techniques. By focusing on key interaction moments like hero intros, micro-interactions, and navigation transitions, the skill ensures that animations add professional polish without compromising performance or accessibility.

주요 기능

01101 GitHub stars

02Built-in accessibility support for prefers-reduced-motion

03Tailwind CSS keyframe and utility configuration

04Custom React hooks for scroll-reveal and interaction triggers

05Performance-optimized animations using transforms and opacity

06Automated animation audit and component prioritization

사용 사례

01Adding professional hero intros and scroll-reveal effects to landing pages

02Implementing seamless page transitions and spatial awareness in Next.js

03Enhancing component feedback with micro-interactions and hover states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-ui-animator

For use in Claude.ai and ChatGPT

주요 기능

01101 GitHub stars

02Built-in accessibility support for prefers-reduced-motion

03Tailwind CSS keyframe and utility configuration

04Custom React hooks for scroll-reveal and interaction triggers

05Performance-optimized animations using transforms and opacity

06Automated animation audit and component prioritization

사용 사례

01Adding professional hero intros and scroll-reveal effects to landing pages

02Implementing seamless page transitions and spatial awareness in Next.js

03Enhancing component feedback with micro-interactions and hover states

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add julianromli/opencode-template frontend-ui-animator

For use in Claude.ai and ChatGPT