@poteto/interaction-design
Orchestrate agents using skills
No skills found in this collection.
SKILL.md
| name | interaction-design |
| description | > |
Interaction Design
Create engaging, intuitive interactions through motion, feedback, and thoughtful state transitions.
Project Conventions
- Preferred library: Framer Motion for React component animations
- CSS animations: Use
transformandopacityonly for 60fps performance - Spring physics: Prefer spring animations over linear/eased for interactive elements
- Interruptible: Users must be able to cancel or override any animation
Timing Scale
| Duration | Use Case |
|---|---|
| 100-150ms | Micro-feedback (hovers, clicks) |
| 200-300ms | Small transitions (toggles, dropdowns) |
| 300-500ms | Medium transitions (modals, page changes) |
| 500ms+ | Complex choreographed animations |
Accessibility
Always respect prefers-reduced-motion: reduce. Set animation duration to 0 when the user prefers reduced motion. This is non-negotiable.
Reference Files
Read these on demand based on the task:
| File | When to read |
|---|---|
| animation-libraries.md | Choosing or configuring Framer Motion, GSAP, or CSS-based approaches |
| microinteraction-patterns.md | Building button feedback, toggles, ripples, loading indicators, toasts |
| scroll-animations.md | Implementing scroll-triggered reveals, parallax, or intersection-based animations |
Loading...
Select a file to preview
Analyzing security...
Checking scan reports and verification data.
Bill of Materials
Everything this skill can do — files, network, commands, and more.
No demos yet. To add one, ask your AI agent: "Submit a demo for @poteto/interaction-design" — or upload via the API.
To add a demo, ask your AI agent: "Submit a demo for @poteto/interaction-design"
No eval data yet. Eval results are published via the SkillSafe API.