Phase 4: Add Framer Motion scroll reveals (IntersectionObserver), hover scale/opacity transitions, focus ring states, loading skeletons, glassmorphism blur layers, gradient orb backgrounds — all via modify_frontend.
From fuse-designnpx claudepluginhub fusengine/agents --plugin fuse-designThis skill uses the workspace's default tool permissions.
references/entrance-patterns.mdreferences/glassmorphism-advanced-ref.mdreferences/interactive-states-ref.mdreferences/layered-backgrounds-ref.mdreferences/micro-interactions.mdreferences/motion-patterns.mdreferences/motion-principles.mdreferences/page-transitions.mdreferences/patterns-buttons.mdreferences/patterns-cards.mdreferences/patterns-microinteractions.mdreferences/patterns-navigation.mdreferences/reduced-motion.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Migrates code, prompts, and API calls from Claude Sonnet 4.0/4.5 or Opus 4.1 to Opus 4.5, updating model strings on Anthropic, AWS, GCP, Azure platforms.
Details PluginEval's skill quality evaluation: 3 layers (static, LLM judge), 10 dimensions, rubrics, formulas, anti-patterns, badges. Use to interpret scores, improve triggering, calibrate thresholds.
After Phase 3 components are generated. Before design audit.
design-system.md (corporate / modern / playful / luxury).design-system.md — determines timing, easing, and intensity.references/page-transitions.md — route-level animations.mcp__gemini-design__modify_frontend to inject Framer Motion code into existing components.prefers-reduced-motion support required. Timing limits: hover <100ms, modal <300ms, page <400ms (see references/motion-principles.md).5-design-audit/SKILL.md — Audit visual consistency, accessibility, and anti-AI-slop.
| File | Purpose |
|---|---|
references/motion-patterns.md | Core Framer Motion patterns |
references/motion-principles.md | Timing limits and principles |
references/entrance-patterns.md | Entrance animation patterns |
references/interactive-states-ref.md | State definitions (hover, focus, etc.) |
references/micro-interactions.md | Micro-interaction patterns |
references/glassmorphism-advanced-ref.md | Glassmorphism techniques |
references/layered-backgrounds-ref.md | Layered background effects |
references/page-transitions.md | Route-level transitions |
references/patterns-cards.md | Card animation patterns |
references/patterns-buttons.md | Button animation patterns |
references/patterns-navigation.md | Navigation animations |
references/patterns-microinteractions.md | Detail micro-interactions |
references/reduced-motion.md | prefers-reduced-motion a11y patterns |