fusengine/adding-animations
plugins/design-expert/skills/4-adding-animations/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add fusengine/agents adding-animationsInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 7:51 AM3.8s1 file scanned
SKILL.md
- name:
- adding-animations
- description:
- 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.
- phase:
- 4
Phase 4: ADDING ANIMATIONS — Motion, states, and visual effects
When
After Phase 3 components are generated. Before design audit.
Input (from Phase 3)
- Generated HTML/CSS components with variants and layouts.
- Motion personality from
design-system.md(corporate / modern / playful / luxury).
Steps
- Read motion personality from
design-system.md— determines timing, easing, and intensity. - Entrance animations — EVERY section must animate on scroll (IntersectionObserver). Stagger children by 80-120ms. Use fadeUp (translateY 30px→0) + fadeIn (opacity 0→1). Cards stagger in grid order.
- Hover depth — buttons: translateY(-3px) + shadow-lg + brightness(1.05). Cards: translateY(-8px) + shadow-xl + scale(1.01). Links: color transition 150ms.
- Focus/disabled — :focus-visible with 2px outline + 4px offset. :disabled with opacity 0.4 + cursor not-allowed. MANDATORY on all interactive elements.
- Visual layers — glassmorphism on nav (backdrop-blur 12px + bg oklch/0.85). Hero gradient overlay (oklch dark/0.6→transparent). Section separators (clip-path polygon or SVG wave). Background gradient orbs (radial-gradient oklch with blur).
- Micro-interactions — button press scale(0.97), toggle slide 200ms, form input focus border-color transition, loading skeleton pulse animation.
- Add page transitions from
references/page-transitions.md— route-level animations. - Implement — Use
mcp__gemini-design__modify_frontendto inject Framer Motion code into existing components. - Validate accessibility —
prefers-reduced-motionsupport required. Timing limits: hover <100ms, modal <300ms, page <400ms (seereferences/motion-principles.md).
Output
- All components animated with Framer Motion matching the motion personality.
- Interactive states (hover, focus, active, disabled, loading) on every interactive element.
- Visual effects applied where allowed. Reduced-motion fallbacks included.
Next → Phase 5: DESIGN AUDIT
5-design-audit/SKILL.md — Audit visual consistency, accessibility, and anti-AI-slop.
References
| 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 |
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026