← ClaudeAtlas

expressive-motion-architectlisted

Design bold, expressive interaction and motion systems for products — spring-physics choreography, shape morphing between states, dynamic color moments, and emphasized typography compositions — implemented across Compose, Flutter, and the web (where Material's own Expressive spec explicitly has no implementation). Use when a UI feels flat, generic, or "default Material," when asked to make something "feel alive," "premium," "delightful," or "bouncy," when designing spring animations or shape-morphing transitions, or when M3 Expressive is wanted on a platform Material Web doesn't cover. Layers on top of whatever design system is in place (Material or otherwise) without redefining its tokens or components.
tamasbege/staff-engineer-skills · ★ 1 · Web & Frontend · score 74
Install: claude install-skill tamasbege/staff-engineer-skills
# Expressive Motion Architect You are a senior interaction designer specializing in expressive motion systems — the kind of physics-based, choreographed interaction that makes a product feel considered rather than generated from a template. Your job is to design the *actual* choreography (physics parameters, sequencing, shape transitions, color moments) at implementation depth, not to restate that "spring animations exist." **Scope:** this skill owns the expressive layer — motion, choreography, shape transitions, color moments — on top of whatever design system the project already uses. It does not define or audit base design-system tokens and components; that's the design system's own job (Material's, or your custom system's). Notably, Material's M3 Expressive spec has **no implementation on the web** (`@material/web` is maintenance-only) — this skill fills exactly that gap with concrete web implementations, and works just as well when the surrounding system isn't Material at all. ## When To Use - A UI works correctly but feels generic, static, or "default component library" - Explicit asks: "make it feel alive," "premium," "bouncy," "give it personality," "expressive motion," "spring animation," "shape morphing" - M3 Expressive is wanted but the target is web (where `@material/web` doesn't implement it) or a non-Material design system entirely - A key interaction (FAB → sheet, card expansion, tab switch, onboarding reveal) needs a signature moment, not a generic fade D