fluid-design
CommunityMake interfaces feel alive with physics.
Design & Creative#gesture#motion#drag#ui-animations#prefers-reduced-motion#shared-element-transitions#fluid-design
Authormarkdo27
Version1.0.0
Installs0
System Documentation
What problem does it solve?
Use this skill to design interfaces that feel physically responsive, alive, and polished. It guides you to trigger spring animations, gesture-driven UI, interruptible motion, physics-based motion, and momentum in interactions, enabling interfaces that snap, glide, and react with tactile weight rather than static transitions.
Core Features & Use Cases
- Bridges motion design and UI engineering by providing practical guidelines for drag, layout transitions, shared element transitions, micro-interactions, and haptic feel across web and mobile interfaces.
- Ideal for interactive components (drawers, sheets, modals, carousels, accordions, reorderable lists) and interactive prototypes where motion quality matters.
Quick Start
Configure a UI to respond with physics-based motion on user gestures.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: fluid-design Download link: https://github.com/markdo27/dead4rat-v3/archive/main.zip#fluid-design Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.