Skill
accessible-content
Use when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text,…
@owl-listenerInstall SkillDesign
Skill
/motion-choreography
Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
Install
$ npx -y skills add Owl-Listener/designpowers --skill motion-choreography --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/motion-choreography
Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
SKILL.md
motion-choreography.SKILL.mdname: motion-choreography
description: Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
Motion Choreography
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
The Three Questions
Before adding any animation: 1. **What changed?** — the animation makes it visible 2. **What should I look at next?** — directs attention 3. **How are these related?** — shows spatial/hierarchical relationship
Can't answer at least one? The animation is decoration. Cut it.
Duration Guide
| Context | Duration | |---------|----------| | Micro-interaction (button, toggle) | 100-200ms | | State change (card expand, tab) | 200-300ms | | Screen transition | 250-400ms | | Complex choreography | 400-700ms total |
Nothing over 1 second unless it's a loading indicator.
Easing Reference
| Context | Easing | |---------|--------| | Entering | ease-out (decelerate) | | Leaving | ease-in (accelerate) | | State change | ease-in-out | | Micro-interaction | spring (stiffness 300-500) |
Stagger Patterns
- 50-80ms delay between items
- Maximum 5 items staggered, rest appear instantly
- Follow reading order
- Reveal hierarchy — important items first
Reduced Motion
`prefers-reduced-motion: reduce` means reduce, not remove.
| Standard | Reduced alternative | |----------|-------------------| | Slide in | Fade in | | Scale with bounce | Instant appearance | | Parallax scroll | Static | | Staggered reveal | Simultaneous fade | | Continuous pulse | Static state |
**Every animation must have a reduced-motion alternative. No exceptions.**
What NOT to Animate
- Text colour changes (photosensitive risk)
- Layout properties in performance paths (use transform)
- Anything that delays task completion
- Decorative loops without user control
Performance
Only animate: `transform`, `opacity`, `filter`. These are GPU-composited.
What You Deliver
- Animation specs with durations, easings, triggers
- Reduced-motion alternatives for every animation
- Performance annotations
- Sequence diagrams for complex choreography
Integration
- **Informed by:** `design-lead`, `interaction-design`
- **Feeds into:** `motion-designer` agent, `accessibility-reviewer`, `design-builder`
Read more
name: motion-choreography description: Use when designing animation sequences, page transitions, micro-interactions, loading states, or any motion that communicates meaning — ensures motion is purposeful, performant, and safe for motion-sensitive users
Motion Choreography
Motion is communication. Every animation answers a question the user didn't know they had. If it doesn't answer one, cut it.
The Three Questions
Before adding any animation: 1. **What changed?** — the animation makes it visible 2. **What should I look at next?** — directs attention 3. **How are these related?** — shows spatial/hierarchical relationship
Can't answer at least one? The animation is decoration. Cut it.
Duration Guide
| Context | Duration | |---------|----------| | Micro-interaction (button, toggle) | 100-200ms | | State change (card expand, tab) | 200-300ms | | Screen transition | 250-400ms | | Complex choreography | 400-700ms total |
Nothing over 1 second unless it's a loading indicator.
Easing Reference
| Context | Easing | |---------|--------| | Entering | ease-out (decelerate) | | Leaving | ease-in (accelerate) | | State change | ease-in-out | | Micro-interaction | spring (stiffness 300-500) |
Stagger Patterns
- 50-80ms delay between items
- Maximum 5 items staggered, rest appear instantly
- Follow reading order
- Reveal hierarchy — important items first
Reduced Motion
`prefers-reduced-motion: reduce` means reduce, not remove.
| Standard | Reduced alternative | |----------|-------------------| | Slide in | Fade in | | Scale with bounce | Instant appearance | | Parallax scroll | Static | | Staggered reveal | Simultaneous fade | | Continuous pulse | Static state |
**Every animation must have a reduced-motion alternative. No exceptions.**
What NOT to Animate
- Text colour changes (photosensitive risk)
- Layout properties in performance paths (use transform)
- Anything that delays task completion
- Decorative loops without user control
Performance
Only animate: `transform`, `opacity`, `filter`. These are GPU-composited.
What You Deliver
- Animation specs with durations, easings, triggers
- Reduced-motion alternatives for every animation
- Performance annotations
- Sequence diagrams for complex choreography
Integration
- **Informed by:** `design-lead`, `interaction-design`
- **Feeds into:** `motion-designer` agent, `accessibility-reviewer`, `design-builder`
Ships withdesignpowers
An agent design team you control. 10 agents that run an inclusive design process while you direct. The system notices how you design and reflects it back. Designpowers is an open, model-agnostic design workflow that gives you a team of 10 design agents.
Get the whole plugin
Other skills on designpowers.
@owl-listenerInstall SkillSkill
adaptive-interfaces
Use when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density,…
@owl-listenerInstall SkillSkill
cognitive-accessibilit…
Use when evaluating mental load, wayfinding, focus management, memory demands, or decision complexity in any interface — ensures…
@owl-listenerInstall SkillSkill
design-debate
Use when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing…
@owl-listenerInstall SkillSkill
design-debt-tracker
Use when critique or review produces deferred findings, when checking accumulated design compromises, or when deciding what to…
@owl-listenerInstall SkillSkill
design-discovery
You MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying…
@owl-listenerInstall Skill