القائمة
Purposeful motion for mobile UIs — easing, duration scales, and reduced-motion. Use this when designing or reviewing animations.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Android adaptive icons and iOS app icon light/dark/tinted modes. Use this when creating or revising app launcher icons.
Cross-platform icon pipeline — SVG source, Android VectorDrawable, SF Symbols, Flutter/RN delivery, sizing, and parity. Use this when adding or refactoring the icon set.
Scalable, theme-aware illustrations for mobile — pipeline, tokenization, and platform delivery. Use this when authoring or shipping illustrations.
Structuring a cross-platform component library into primitives, patterns, and compositions with predictable folder layout and public API. Use this when starting or reorganizing a component library.
Slots, compound components, and headless primitives for flexible mobile component APIs. Use this when a component needs to serve many callers without becoming a grab-bag of props.
Modeling component variants as a closed matrix of size × intent × state, with explicit enums and slot APIs. Use this when designing or refactoring a component's public API.
| name | motion-principles |
| description | Purposeful motion for mobile UIs — easing, duration scales, and reduced-motion. Use this when designing or reviewing animations. |
Motion communicates causality, hierarchy, and feedback. If it does not do one of those three things, it is noise. Every animation in the design system must have an intent, a token-backed duration, and a reduced-motion fallback.
Every motion answers one question:
If none apply, ship a cut, not a transition.
Small, named scale. No magic milliseconds in component code.
| Token | ms | Use |
|---|---|---|
motion.duration.instant | 0 | Reduced-motion fallback |
motion.duration.xs | 80 | Micro-feedback (press, toggle) |
motion.duration.sm | 150 | Small UI state changes, tooltip |
motion.duration.md | 250 | Surface enter/exit, sheet, drawer |
motion.duration.lg | 400 | Hero / shared element |
motion.duration.xl | 600 | Onboarding, first-run reveal |
Rule: most durations in a mobile app live between 150–300ms. Anything longer than 400ms needs justification.
| Token | Curve | Use |
|---|---|---|
motion.easing.standard | cubic-bezier(0.2, 0.0, 0, 1.0) | Enter + exit balanced |
motion.easing.emphasized | cubic-bezier(0.2, 0.0, 0, 1.0) with longer duration | Emphasize arrival |
motion.easing.accelerate | cubic-bezier(0.3, 0.0, 1, 1) | Exit off-screen |
motion.easing.decelerate | cubic-bezier(0, 0, 0, 1) | Enter from off-screen |
motion.easing.linear | linear | Opacity, crossfades, loading |
Prefer emphasized easing (Material 3) for full-screen transitions; it feels purposeful without being theatrical.
Stagger lists with 20–40ms between items, capped at ~6 visible items (beyond that, reveal the remainder without stagger). Never stagger in a loading state — it implies progress where there is none.
Honor the system preference always.
LocalAccessibilityManager.current or Settings.Global.TRANSITION_ANIMATION_SCALE.@Environment(\.accessibilityReduceMotion).MediaQuery.disableAnimations / MediaQueryData.accessibleNavigation.AccessibilityInfo.isReduceMotionEnabled().When enabled, motion tokens collapse:
export function resolveMotion(base: Motion, reduce: boolean): Motion {
if (!reduce) return base;
return { ...base, duration: { instant: 0, xs: 0, sm: 0, md: 0, lg: 0, xl: 0 } };
}
Replace translation/scale animations with instant changes; keep opacity crossfades under 150ms for state legibility.
.animation(.spring(response: 0.35, dampingFraction: 0.82), value: isOpen)
Thread.sleep(300) or setTimeout(300) to coordinate animations — use completion callbacks / withAnimation.