frontend-ui-animator

사용 방법

설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.

npx skills add https://github.com/julianromli/opencode-template --skill frontend-ui-animator

시작 전 확인

설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.

원본 Skill 문서

원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.

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 in components/
Check existing setup - Review tailwind.config.ts for 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, useMousePosition if needed
Apply animations per component - Follow patterns in references/animation-patterns.md

Performance rules:

tsx

// ✅ 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-motion works
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:

tsx

{items.map((item, i) => (
  <div 
    key={item.id}
    style={{ animationDelay: `${i * 100}ms` }}
    className="animate-fade-slide-in"
  />
))}

Scroll reveal hook:

tsx

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:

tsx

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:

css

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}