Animate

Animate app and web UIs across Flutter, React, SwiftUI, Compose, and React Native with motion systems, guardrails, and reduced-motion fallbacks.

Security Scan

The skill is instruction-only and internally consistent with its stated purpose: it helps design and implement UI motion and stores lightweight local memory under ~/animate/ — nothing requested or installed is disproportionate to that goal.

Purpose & Capability

Name and description (UI animation across multiple stacks) match the content of the SKILL.md and the companion docs. There are no unrelated environment variables, binaries, or install steps requested that would be inconsistent with an animation/design helper.

Instruction Scope

The runtime instructions direct the agent to read/write a local memory folder at ~/animate/ and to capture product/platform context and reusable defaults. This is within scope for a design/memory helper, but it means the skill will persist information you provide. The SKILL.md explicitly says to avoid saving secrets and that nothing leaves the machine by default; that is guidance (not an enforcement mechanism) — users should avoid pasting sensitive credentials or PII into the memory files.

Install Mechanism

No install spec or code is present (instruction-only). This is the lowest-risk model: nothing is downloaded or written by an installer beyond the explicit memory files the skill asks to create.

Credentials

The skill requests no environment variables or credentials. The single requested artifact is a config path (~/animate/) for its local memory, which is proportionate to the skill’s purpose of storing motion tokens, patterns, and QA notes.

Persistence & Privilege

The skill persists local memory to ~/animate/ (documented file names and structure). It does not set always:true and does not request broader system privileges. Persisting user-provided product context is expected, but users should be aware this data remains on disk until removed and should set appropriate filesystem permissions if the data is sensitive.

Assessment

This skill is an instruction-only motion-design helper and appears coherent with its description. Before installing or enabling it: 1) Be aware it will create and persist files under ~/animate/ (memory.md, tokens.md, etc.); do not paste or store API keys, passwords, or other secrets in those files. 2) Inspect the created files (and their permissions) after first run; set restrictive permissions (e.g., chmod 700 ~/animate) if you store anything you care about. 3) If you use a shared machine, consider disabling the skill or removing the directory when done. 4) The SKILL.md promises no automatic uploads or telemetry, but that is a behavioral contract in prose — verify behavior by checking for network activity if you are concerned. 5) If you do not want the agent to persist context across sessions, decline activation during setup or delete ~/animate/ after use.

When to Use

User needs motion designed or implemented inside a product UI. Agent turns vague requests into motion contracts, stack-specific implementation choices, and testable acceptance criteria across Flutter, React, Next.js, SwiftUI, Compose, React Native, and broader web stacks.

Use this for micro-interactions, navigation transitions, shared-element flows, loading states, gesture feedback, and motion system design. Do not use it for video editing, GIF rendering, or media encoding.

Architecture

Memory lives in ~/animate/. If ~/animate/ does not exist, run setup.md. See memory-template.md for structure and status fields.

~/animate/
|- memory.md             # Durable motion preferences and platform context
|- tokens.md             # Approved duration, easing, and spring ladders
|- patterns.md           # Proven interaction and transition patterns
|- platform-notes.md     # Stack-specific implementation decisions
`- qa.md                 # Regressions, low-end findings, and accessibility notes

Quick Reference

Use the smallest relevant file for the current task.

Topic	File
Setup flow	setup.md
Memory template	memory-template.md
Motion system and spec contract	motion-system.md
Platform routing by stack	platform-routing.md
Starter snippets by stack	implementation-snippets.md
Common app animation patterns	pattern-catalog.md
Performance and accessibility guardrails	performance-accessibility.md
QA and regression checks	qa-playbook.md

Core Rules

1. Start from Product Intent and State Change

• Define the trigger, user goal, and state transition before choosing an effect.
• Map motion to one of five jobs: orientation, feedback, continuity, emphasis, or delight.
• If the intent is unclear, do not animate yet.

2. Write a Motion Contract Before Code

Every proposal must specify:

• Trigger and affected surfaces
• Initial state, end state, and reduced-motion fallback
• Duration, easing or spring, delay or stagger, and cancellation behavior
• Acceptance criteria: responsiveness, accessibility, parity, and performance

No vague wording like "smooth" or "premium" without values.

3. Route to the Safest Native Abstraction

Use the highest-level API that solves the job:

• Flutter: implicit animation widgets, AnimatedSwitcher, TweenAnimationBuilder, Hero
• React and Next.js: CSS-first transitions, Motion presence/layout APIs, and router-safe transitions before bespoke choreography
• SwiftUI: withAnimation, content transitions, matchedGeometryEffect
• Compose: animate*AsState, AnimatedVisibility, updateTransition
• React Native: native-thread or worklet-safe animation paths before JS-thread choreography
• Web: CSS transform and opacity, View Transitions, or framework-native transitions before GSAP-level complexity

Avoid low-level animation code when a higher-level primitive already handles interruption and lifecycle.

4. Optimize for Compositor-Safe Motion and Interruption

• Prefer transform, opacity, color, and scale patterns that keep layout stable.
• Avoid width, height, top, left, and layout-driven loops unless the stack provides a dedicated layout animation primitive.
• Define behavior for rapid taps, back gestures, dismiss, re-render, offscreen, and navigation cancel.
• Users should never get stuck behind an animation.

5. Ship Accessible Variants by Default

• Respect reduced-motion and system animation-scale settings.
• Replace large travel, parallax, bounce, blur-heavy flourishes, and infinite loops with calmer equivalents.
• Never rely on movement alone to communicate status.
• Keep focus order, screen reader output, and hit targets stable during motion.

6. Cover Real Product States, Not Only the Happy Path

• Animate loading, success, error, empty, disabled, retry, and optimistic-update states when relevant.
• Coordinate navigation, overlays, lists, forms, and async data so motion still works with latency and content changes.
• Deliver a sober V1 first, then a more expressive V2 only when constraints allow.

7. Verify with Previews, Tests, and Device Reality

• Leave deterministic previews, stories, or demo toggles for the motion states you touched.
• Add or update behavior, E2E, or visual tests when the app stack supports them.
• Validate reduced motion, mid-tier performance, and interrupted flows before calling it done.

Common Traps

• Pretty animation without a user-facing reason -> extra motion, less clarity.
• Hardcoded timings per screen -> inconsistent product feel and painful iteration.
• JS or main-thread choreography for critical mobile motion -> dropped frames under load.
• Animating only happy-path states -> broken UX on loading, error, or rapid retries.
• Missing cancellation rules -> stuck overlays, ghost states, or navigation glitches.
• Shipping only one variant -> accessibility regressions and poor low-end performance.

Security & Privacy

Data that leaves your machine:

• None by default from this skill itself.

Data that stays local:

• Motion preferences, approved tokens, platform notes, and QA learnings under ~/animate/.

This skill does NOT:

• Upload builds, videos, or telemetry automatically.
• Modify files outside ~/animate/ for memory.
• Disable accessibility settings.
• Modify its own SKILL.md.

Related Skills

Install with clawhub install <slug> if user confirms:

• flutter - Widget lifecycles and performance rules useful for Flutter motion.
• react - Component and rendering patterns that shape animation behavior in React apps.
• react-native - Mobile lifecycle and animation-thread constraints for React Native.
• swift - Swift and SwiftUI implementation patterns for Apple platforms.
• android - Android and Compose implementation details for native motion.

Feedback

• If useful: clawhub star animate
• Stay updated: clawhub sync