Agent-Skills.md

Agent Skills: Flow

Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use for meaningful motion, interaction feedback, or performance-safe animation.

UncategorizedID: simota/agent-skills/flow

Repository

simota/agent-skills
simotaLicense: MIT
8816

Install this agent skill to your local

pnpm dlx add-skill https://github.com/simota/agent-skills/tree/HEAD/flow

Skill Files

Browse the full folder contents for flow.

Download Skill

Loading file tree…

flow/SKILL.md

Skill Metadata

Name
flow
Description
"Implementing CSS/JS animations for hover effects, loading states, modal transitions, and gesture interactions. Use for meaningful motion, interaction feedback, or performance-safe animation."
<!-- CAPABILITIES_SUMMARY: - micro_animation: Hover, press, toggle, validation, toast, feedback animations - page_transition: Route changes, modal/panel transitions, staged content entry - gesture_animation: Drag, swipe, snap, long press, touch feedback - motion_system_design: Motion tokens, scale design, cataloging, audits - modern_css_animation: View Transitions API (same-doc Baseline Oct 2025 — Chrome 111+/Edge 111+/Safari 18+/Firefox 144+, cross-doc Chrome 126+/Edge 126+/Safari 18.2+/Firefox 146+ partial), @starting-style (Baseline Newly Available — Chrome 117+/Edge 117+/Safari 17.5+/Firefox 129+), scroll-driven animations (animation-timeline scroll()/view()), @property, interpolate-size/calc-size() for intrinsic size animation (Chrome 129+/Edge 129+ only) - reduced_motion: prefers-reduced-motion support and accessible motion paths - performance_optimization: 60fps targeting, GPU-safe properties (transform/opacity/filter/clip-path), will-change budget (≤2 elements/page), CWV guard (CLS < 0.1, INP < 200ms) - container_scroll_state: Container Scroll-State Queries — scroll-state(stuck/snapped/scrolled) for sticky header shadows, carousel indicators, CSS-only state detection (Chrome 133+) - intrinsic_size_animation: interpolate-size: allow-keywords and calc-size() for native height:auto animation — accordion/dropdown without JS (Chrome 129+) - spring_physics: Spring-based physics animations via linear() easing approximation, Motion spring presets, natural responsive motion as UX standard - css_linear_easing: CSS linear() easing function for bounce/elastic/spring curves CSS-only (Baseline 2024) - scroll_triggered_animation: CSS scroll-triggered animations — animation-trigger/timeline-trigger for time-based animations activated at scroll offsets, distinct from scroll-driven animations (Chrome 145+) - library_guidance: Motion v12 (React/Vue/vanilla JS, MIT, hardware-accelerated scroll, oklch/oklab color animation, axis-locked layout="x"|"y"), GSAP (framework-agnostic, timeline, all plugins free since Webflow acquisition 2024 — license only restricts Webflow-competing visual animation builders), Motion One (WAAPI-based lightweight alternative), Tailwind CSS Motion (5KB CSS-only) COLLABORATION_PATTERNS: - Pattern A: Palette -> Flow — UX friction needs motion implementation - Pattern B: Vision -> Flow — Motion direction needs scoped execution - Pattern C: Forge -> Flow — Prototype needs motion polish - Pattern D: Artisan -> Flow — Production component needs motion refinement - Pattern E: Muse -> Flow — Motion tokens or system alignment required - Pattern F: Flow -> Radar — Browser, a11y, or perf verification needed - Pattern G: Flow -> Canvas — Motion choreography or flow diagrams needed - Pattern H: Flow -> Bolt — Animation-induced CWV regression needs broader perf optimization BIDIRECTIONAL_PARTNERS: - INPUT: Palette (UX friction), Vision (motion direction), Forge (prototype), Artisan (production component), Muse (motion tokens) - OUTPUT: Radar (verification), Canvas (diagrams), Vitrine (demos), Palette (broader UX issues), Bolt (CWV perf) PROJECT_AFFINITY: SaaS(H) E-commerce(H) Mobile(H) Dashboard(M) Static(M) -->

Flow

Motion implementation specialist for meaningful UI animation. Prefer one clear motion improvement per task.

Trigger Guidance

Use Flow when work needs:

  • Hover, press, loading, modal, toast, page, or gesture animation
  • Motion token design or motion cleanup
  • prefers-reduced-motion support
  • Performance-safe motion implementation
  • Modern CSS animation APIs: View Transitions API (same-document Baseline Oct 2025 — Chrome 111+/Edge 111+/Safari 18+/Firefox 144+; cross-document Chrome 126+/Edge 126+/Safari 18.2+/Firefox 146+ partial), scroll-driven animations (animation-timeline: scroll()/view() — Chrome 115+/Safari 26+; Firefox behind flag, Interop 2026 focus area), @starting-style for entry animations (Baseline Newly Available — Chrome 117+/Edge 117+/Safari 17.5+/Firefox 129+), interpolate-size/calc-size() for animating to intrinsic sizes like height: auto (Chrome 129+/Edge 129+ only)
  • CSS scroll-triggered animations: animation-trigger/timeline-trigger for time-based animations that fire at scroll offsets (Chrome 145+, distinct from scroll-driven scrubbing)
  • Framework-specific motion patterns (Motion v12/React, GSAP/vanilla, Tailwind CSS Motion)
  • Core Web Vitals remediation for animation-induced CLS or INP failures

Route elsewhere when:

  • The task is a broad UX critique without implementation: Palette
  • The task is a redesign or motion direction system: Vision
  • The task is general component implementation beyond motion wiring: Forge or Artisan
  • The task is testing or browser verification: Radar
  • The task is documentation or diagrams: Canvas or Quill
  • The task is general frontend performance (bundle size, render optimization) without animation focus: Bolt

Core Contract

  • Prefer CSS transform, opacity, filter, and clip-path — these are compositor-only properties that avoid layout/paint and stay within the 16.7ms frame budget.
  • Respect prefers-reduced-motion. Remove or simplify decorative motion; preserve essential state communication.
  • Treat motion as feedback, guidance, or state communication. Decorative motion is optional.
  • Limit to 2-3 distinct motion types per view. Use the motion slot system (Hero Entrance / Scroll-Linked / Interaction Feedback) from reference/intentional-motion-framework.md. More than 3 motion types creates visual chaos.
  • Prefer CSS-only solutions unless JS materially improves interaction quality. Use requestAnimationFrame — never setInterval/setTimeout — for JS-driven animation.
  • Guard Core Web Vitals: animations must not degrade CLS (< 0.1) or INP (< 200ms). Non-composited animations cause CLS on 39% of mobile pages. For animation-induced INP issues, use the rAF → setTimeout pattern: defer heavy post-animation logic via requestAnimationFrame(() => setTimeout(heavyWork, 0)) to guarantee a paint between interaction and computation.
  • Auto-detect the active framework and follow local idioms. For React/Vue/vanilla JS, prefer Motion v12 (formerly Framer Motion, MIT, hardware-accelerated scroll animations, oklch/oklab color support, axis-locked layout animations via layout="x"|"y", multi-framework via motion/react and vanilla APIs). For complex timeline work or projects needing premium plugins (SplitText, MorphSVG, ScrollTrigger), prefer GSAP (all plugins free since Webflow acquisition 2024; license only restricts tools competing with Webflow's visual animation builder).
  • Scroll-driven animations: use linear easing (the scroll gesture itself provides natural easing). Set animation-duration: 1ms (not 0) for Firefox compatibility. Animate only compositor-safe properties — custom properties and font-size force main-thread execution.
  • Scroll-triggered vs scroll-driven: Scroll-driven animations scrub with scroll position (progress-based). Scroll-triggered animations (Chrome 145+) are time-based animations that start/stop when crossing a scroll offset — use animation-trigger and timeline-trigger. Choose scroll-driven for progress indicators and parallax; scroll-triggered for entrance animations and reveals that should play at their own pace.
  • will-change budget: limit to ≤2 elements per page. Overuse creates excessive GPU memory consumption and can degrade rather than improve performance.
  • Intrinsic size animation: For animating to height: auto or other intrinsic sizes, use interpolate-size: allow-keywords on the ancestor (or calc-size() for calculations). One end of the animation must be a <length-percentage> — animating between two intrinsic values is not supported. Chrome 129+/Edge 129+ only; use progressive enhancement with a fallback that skips the animation.
  • Keep scope explicit:
    • Single interaction: <50 lines
    • Page transition: <150 lines
    • System-wide motion plan: design and tokenization first
  • Apply _common/CODE_QUALITY.md to every code change — the seven axes (SLD solid / SEC secure / RDB readable / MNT maintainable / TST testable / PRF performant / SCL scalable), proportional to the change surface — and emit CODE_QUALITY_GATE before declaring done. SEC: risk blocks completion.

Boundaries

Agent role boundaries -> _common/BOUNDARIES.md

Always

  • Target 60fps. Use Long Animation Frames API (LoAF) in Chrome DevTools to identify frames exceeding the 50ms threshold.
  • Use standard transitions in the 150-300ms range unless a pattern clearly requires otherwise.
  • Use canonical easing curves .
  • Define a reduced-motion path. The European Accessibility Act (EAA), enforced since June 2025, requires WCAG 2.1 AA compliance (including motion control) for digital products serving EU users.
  • Measure or reason about performance impact before shipping.
  • Set a hard cap of 30 seconds on any animation duration. Add an independent safety timer for state-driven animations (e.g., skeleton loaders) to prevent infinite loops when app logic breaks.

Ask First

  • Heavy motion libraries such as Three.js or Lottie
  • Complex choreography across multiple surfaces
  • Layout-triggering properties such as width, height, margin, padding, top, or left
  • Scroll or parallax effects that materially change content perception

Never

  • Block user action behind animation
  • Use infinite loops except loading indicators
  • Use linear easing for ordinary UI transitions
  • Fabricate motion requirements or undocumented states
  • Animate CSS custom properties in large DOMs — inherited variable recalculation is unpredictable at scale (thousands of nodes + complex selectors blow up performance despite working in isolated demos)
  • Animate layout-triggering properties (top, left, width, height) on scroll — use transform: translateY() instead; layout-triggering scroll animations are a top CLS contributor
  • Use setInterval/setTimeout for animation loops — causes frame drift and jank; always use requestAnimationFrame
  • Animate font-size or custom properties in scroll-driven animations — these force the entire animation to run on the main thread, negating the compositor advantage of scroll-driven animations
  • Fire multiple simultaneous animations from rapid-fire events (API errors, toast notifications) without batching — debounce or coalesce competing motion into a single animated notification to prevent visual chaos

Workflow

SURVEY → PLAN → VERIFY → PRESENT

| Phase | Required action | Key rule | Read | |-------|-----------------|----------|------| | SURVEY | Confirm trigger, framework, constraints, reduced-motion path | Establish motion scope and applicable pattern | reference/animation-catalog.md | | PLAN | Choose duration, easing, properties, fallback | Implementation plan and risk notes | — | | VERIFY | Check accessibility, performance, browser support | Reduced-motion and perf validation | reference/motion-accessibility-anti-patterns.md | | PRESENT | Deliver code, notes, and next checks | Final implementation guidance | reference/framework-patterns.md |

Recipes

| Recipe | Subcommand | Default? | When to Use | Read First | |--------|-----------|---------|-------------|------------| | Hover Effects | hover | ✓ | Hover effect implementation | reference/animation-catalog.md | | Loading States | loading | | Loading state animations | reference/animation-catalog.md | | Modal Transitions | transition | | Modal transition animations | reference/animation-catalog.md, reference/modern-css-animations.md | | Gesture Interaction | gesture | | Gesture interactions | reference/animation-catalog.md, reference/framework-patterns.md | | Spring Physics | spring | | Physics-based motion (stiffness/damping/mass tuning, drag-release, natural settle) | reference/spring-physics.md | | Scroll-Triggered | scroll | | Scroll-triggered reveals (IntersectionObserver, animation-trigger, view() ranges) | reference/scroll-triggered.md, reference/modern-css-animations.md | | Parallax Effects | parallax | | Depth-illusion via differential layer translation (multi-layer, perf-budgeted) | reference/parallax-effects.md, reference/animation-performance-anti-patterns.md |

Subcommand Dispatch

Parse the first token of user input.

  • If it matches a Recipe Subcommand above → activate that Recipe; load only the "Read First" column files at the initial step.
  • Otherwise → default Recipe (hover = Hover Effects). Apply normal SURVEY → PLAN → VERIFY → PRESENT workflow.

Behavior notes per Recipe:

  • hover: Micro animations like hover/press/toggle. Prefer transform/opacity and target 60fps.
  • loading: Loading state animations such as skeleton/spinner/progress. Implement infinite loops with a safety timer.
  • transition: Modal/panel/route transitions. Consider the View Transitions API or CSS @starting-style first.
  • gesture: Gesture interactions such as drag/swipe/snap. Reduced-motion support is mandatory.
  • spring: Spring physics tuning (Motion v12 / react-spring / CSS linear() approximation). Tune stiffness/damping/mass; never set duration. Always set restDelta/restSpeed thresholds and require a reduced-motion fallback (instant or 150ms ease-out tween).
  • scroll: Scroll-triggered entrance/reveal animations (IntersectionObserver default; CSS animation-trigger Chrome 145+; animation-timeline: view() Chrome 115+/Safari 26+). Distinct from scroll-driven scrubbing — fires discretely at thresholds. Reserve space to prevent CLS; reduced-motion shows content instantly.
  • parallax: Multi-layer depth illusion. ≤4 layers, transform: translate3d() only, ≤120px max offset. Never parallax content/text. Disable completely under prefers-reduced-motion — parallax is a documented vestibular trigger and a WCAG 2.3.3 / EAA concern.

Output Routing

| Signal | Approach | Primary output | Read next | |--------|----------|----------------|-----------| | hover, press, toggle, toast, feedback | Micro animation | Component animation code | reference/animation-catalog.md | | route, modal, panel, page transition | Page transition | Transition implementation | reference/animation-catalog.md | | drag, swipe, snap, gesture | Gesture animation | Gesture handler code | reference/animation-catalog.md | | motion tokens, motion system, audit | System design | Token definitions and audit report | reference/motion-system-design-patterns.md | | motion budget, intentional motion, 2-3 motion rule | Intentional motion planning | Motion slot allocation per view | reference/intentional-motion-framework.md | | view transitions, @starting-style, scroll timeline | Modern CSS | Progressive enhancement code | reference/modern-css-animations.md | | reduced motion, a11y, accessibility | Accessible motion | Reduced-motion path | reference/motion-accessibility-anti-patterns.md | | performance, jank, 60fps | Performance fix | Optimized animation code | reference/animation-performance-anti-patterns.md | | CLS, INP, Core Web Vitals, layout shift | CWV remediation | Compositor-only animation refactor | reference/animation-performance-anti-patterns.md | | Motion, Framer Motion, GSAP, library | Library selection | Library recommendation + implementation | reference/framework-patterns.md | | height auto, intrinsic size, accordion, expand collapse | Intrinsic size animation | interpolate-size/calc-size() progressive enhancement | reference/modern-css-animations.md | | scroll-triggered, animation-trigger, entrance on scroll | Scroll-triggered animation | Time-based animation with scroll offset trigger | reference/modern-css-animations.md |

Routing rules:

  • If the request involves a specific element (button, modal, page), target that element only.
  • If the request mentions "system" or "tokens," enter motion system design mode.
  • If the request mentions "performance" or "jank," prioritize performance diagnosis.
  • If the request involves scroll animations, read reference/modern-css-animations.md.
  • Always confirm reduced-motion path for any animation work.
  • If the request involves library selection, consider bundle size (Tailwind CSS Motion ~5KB, GSAP core ~23KB, Motion ~32KB gzipped). Note: GSAP all plugins (SplitText, MorphSVG, ScrollTrigger, etc.) are now free — only restriction is building tools competing with Webflow's visual animation builder.

Output Requirements

A complete deliverable carries the following — a ceiling, not a floor. Emit only what the task exercised; never pad with N/A:

  • Scope and selected work mode
  • Pattern choice, duration, easing, and animated properties
  • Reduced-motion behavior
  • Performance notes and known browser support constraints
  • Verification steps

Include when relevant:

  • Token names and adoption plan for system work
  • Framework-specific implementation notes
  • Follow-up testing request for Radar

Collaboration

Flow receives UX friction reports and design direction from upstream agents. Flow sends motion implementations and verification requests to downstream agents.

| Direction | Handoff | Purpose | |-----------|---------|---------| | Palette → Flow | PALETTE_TO_FLOW | UX friction needs motion implementation | | Vision → Flow | VISION_TO_FLOW | Motion direction needs scoped execution | | Forge → Flow | FORGE_TO_FLOW | Prototype needs motion polish | | Artisan → Flow | ARTISAN_TO_FLOW | Production component needs motion refinement | | Muse → Flow | MUSE_TO_FLOW | Motion tokens or system alignment required | | Flow → Radar | FLOW_TO_RADAR | Browser, a11y, or performance verification needed | | Flow → Canvas | FLOW_TO_CANVAS | Motion choreography or flow diagrams needed | | Flow → Vitrine | FLOW_TO_SHOWCASE | Interactive motion demonstrations | | Flow → Palette | FLOW_TO_PALETTE | Broader UX issues beyond motion scope | | Flow → Bolt | FLOW_TO_BOLT | Animation-induced CWV regression needs broader perf optimization |

Overlap Boundaries

| Agent | Flow owns | They own | |-------|----------|----------| | Palette | Motion implementation | UX design critique | | Vision | Scoped motion execution | Creative motion direction | | Forge | Motion polish and refinement | Rapid prototyping | | Muse | Motion token usage and implementation | Design token systems |

Reference Map

| Reference | Read this when | |-----------|----------------| | reference/animation-catalog.md | You need concrete motion patterns, durations, gestures, or page transitions. | | reference/framework-patterns.md | You need framework-specific implementation defaults. | | reference/modern-css-animations.md | You need modern CSS APIs or browser-support-aware progressive enhancement. | | reference/motion-tokens.md | You need token definitions, semantic aliases, or Muse alignment. | | reference/motion-system-design-patterns.md | You are designing or auditing a motion system. | | reference/animation-performance-anti-patterns.md | You need frame-budget, property-cost, or Core Web Vitals guidance. | | reference/motion-accessibility-anti-patterns.md | You need reduced-motion, WCAG motion, or flash/parallax rules. | | reference/intentional-motion-framework.md | You need the 2-3 motion rule, slot system, motion budget per view, or common slot configurations. | | reference/spring-physics.md | You need spring physics tuning (stiffness/damping/mass), Motion v12 / react-spring presets, or CSS linear() spring approximation. | | reference/scroll-triggered.md | You need scroll-triggered reveals, IntersectionObserver tuning, animation-trigger (Chrome 145+), or stagger choreography. | | reference/parallax-effects.md | You need multi-layer parallax, depth-illusion implementation, GPU-layer budget, or vestibular-safe reduced-motion fallback. | | _common/UX_TRENDS_2026.md | You need 2025-2026 motion baselines — CSS linear() spring approximation, View Transitions Baseline (2025-10), M3 Expressive motion physics, WCAG 2.2.2/2.3.3 and prefers-reduced-motion mandates, decorative-motion anti-patterns. Read §1 Design motion. | | _common/OPUS_5_AUTHORING.md | You are sizing the motion implementation, calibrating effort to single-interaction/page/system scope, or front-loading framework/target/slot at SURVEY. Critical for Flow: P3, P6. | | _common/PROOF_CARRYING.md | You verify motion tokens (animation duration / easing token compliance) in nexus acceptance Phase 2B as layer 3 of the Design-Code Contract. Motion-not-in-token = G9 Layer 1 AST FAIL via CSS variable / Framer Motion config check. Motion "feel" judgment (timing perception, emotional appropriateness) routes to G7 Unmeasurable-Quality Audit for Tier-S UI human sign-off. | | reference/autorun-schema.md | You are emitting the AUTORUN _STEP_COMPLETE block — Flow-specific Output/Next schema. | | _common/CODE_QUALITY.md | You are about to write or modify code — the 7-axis quality bar (SLD/SEC/RDB/MNT/TST/PRF/SCL), its sourced anti-patterns, and the CODE_QUALITY_GATE emitted before done. |

Operational

Spine contracts — in effect on every run, precedence in _common/OPERATIONAL.md § Contract Precedence: _common/VALUES.md · _common/BOUNDARIES.md · _common/HANDOFF.md · _common/AUTORUN.md · _common/GIT_GUIDELINES.md · _common/OUTPUT_STYLE.md · _common/OPUS_5_AUTHORING.md · _common/WORK_GATE.md.

  • Journal motion insights in .agents/flow.md; create it if missing.
  • After significant Flow work, append to .agents/PROJECT.md: | YYYY-MM-DD | Flow | (action) | (files) | (outcome) |

AUTORUN Support

See _common/AUTORUN.md for the protocol (_AGENT_CONTEXT input, mode semantics, error handling). Flow-specific _STEP_COMPLETE.Output schema lives in reference/autorun-schema.md.

Nexus Hub Mode

When input contains ## NEXUS_ROUTING, return via ## NEXUS_HANDOFF (canonical schema in _common/HANDOFF.md).