// Deterministic motion and animation design guidance for OpenDevBrowser agents building web and mobile UI with real-browser temporal evidence.
| name | opendevbrowser-motion-design |
| description | Deterministic motion and animation design guidance for OpenDevBrowser agents building web and mobile UI with real-browser temporal evidence. |
| version | 1.0.0 |
Use this skill when a task asks for animation, motion language, transition systems, scroll choreography, gesture motion, reduced-motion audits, browser replay evidence, or motion-heavy UI implementation.
artifacts/motion-terminology.mdartifacts/motion-pattern-catalog.mdartifacts/platform-framework-guide.mdartifacts/device-breakpoint-posture.mdartifacts/accessibility-reduced-motion.mdartifacts/performance-frame-budget.mdartifacts/open-dev-browser-motion-evidence.mdartifacts/motion-release-gate.mdartifacts/motion-anti-patterns.mdassets/templates/motion-contract.v1.jsonassets/templates/motion-audit-report.v1.mdassets/templates/motion-viewport-matrix.v1.jsonassets/templates/motion-release-gate.v1.jsonscripts/motion-workflow.shscripts/validate-skill-assets.shopendevbrowser-best-practices first for OpenDevBrowser runtime rules.opendevbrowser-design-agent for the parent UI implementation workflow, design contract, /canvas, and real-surface validation.opendevbrowser-motion-design for motion language, pattern selection, platform policy, device posture, reduced motion, frame budget, and temporal proof.opendevbrowser-motion-design skill root, run:./scripts/validate-skill-assets.sh
./scripts/motion-workflow.sh contract-first
./scripts/motion-workflow.sh temporal-proof
When an InspireDesign harvest bundle is available, inspect nextStepGuidance.readiness and doNotProceedIf before selecting motion patterns. Read meta-prompt.md, ranked-references.json, visual-evidence.json, screenshot-index.json, and the referenced PNG files only after the bundle is ready or while following recovery guidance. Treat harvested motion posture as evidence-backed design intent, not permission to add dependencies or copy source-brand choreography. Carry accepted cues into the motion contract with explicit reduced-motion behavior, device posture, frame budget, and temporal proof requirements.
Motion is a contract field, not decoration. Before implementation, fill assets/templates/motion-contract.v1.json and connect it to the design-agent motionSystem, performanceModel, responsiveSystem, and accessibilityPolicy fields.
The contract must define:
artifacts/motion-pattern-catalog.mdartifacts/device-breakpoint-posture.mdprefers-reduced-motion behavior from artifacts/accessibility-reduced-motion.mdartifacts/performance-frame-budget.mdartifacts/open-dev-browser-motion-evidence.mdChoose patterns by user job, not visual novelty. Start with the smallest motion grammar that clarifies hierarchy or state:
Every selected pattern needs a reduced-motion fallback, device posture, and temporal evidence.
Frameworks are implementation primitives, not permission to add dependencies. Prefer existing project libraries and platform primitives. New runtime dependencies require separate explicit approval and must be recorded in libraryPolicy.
Use artifacts/platform-framework-guide.md for CSS transitions, CSS keyframes, Web Animations API, View Transition API, CSS scroll-driven animations, Motion for React with motion/react, GSAP 3.x, Anime.js 4.x, react-spring, Lottie, Rive, Three.js, react-three-fiber, Spline/WebGL advisory, SwiftUI, UIKit/Core Animation, Jetpack Compose, Android MotionLayout, React Native Reanimated 4.x, Flutter animation APIs, and haptics.
Motion must change across phones, tablets, laptops, desktops, large monitors, short viewports, coarse pointers, fine pointers, keyboard-only use, reduced-power devices, high-refresh displays, and foldable posture. Use artifacts/device-breakpoint-posture.md and assets/templates/motion-viewport-matrix.v1.json before coding responsive animation.
Reduced motion is mandatory. Follow WCAG 2.2 SC 2.3.3 and prefers-reduced-motion. The reduced path must preserve meaning and task completion. It may remove travel, parallax, pinning, looping, and large transform distance, but it must not hide information, reorder focus, or remove feedback.
Prove motion in a real browser. Static code review is not enough for timing, choreography, scroll stages, or gesture behavior.
Required evidence for motion-heavy work:
snapshotscreenshotdebug-trace-snapshotscreencast-startscreencast-stop/canvas preview evidence when using design-agent canvas workflowUse scripts/motion-workflow.sh temporal-proof and artifacts/open-dev-browser-motion-evidence.md.
Do not ship motion when any of these are true:
Use artifacts/motion-anti-patterns.md before release.
opendevbrowser-best-practices: runtime, CLI, browser, evidence, and release governance.opendevbrowser-design-agent: parent UI design, InspireDesign harvest review, and /canvas implementation workflow.opendevbrowser-motion-design: motion-specific terminology, pattern catalog, platform policy, device posture, reduced motion, performance, and temporal evidence.This skill should be used when the user asks to design or run OpenDevBrowser provider workflows, scraping pipelines, QA/debug automation, parity checks across modes, or resilient browser operations with codified scripts and artifacts.
This skill should be used when the user asks to design, redesign, audit, or implement frontend/UI work with OpenDevBrowser, screenshots, or the /canvas surface. It turns briefs and existing interfaces into contract-first, real-browser-validated design execution.
Skill-guided, evidence-gated research workflow for provider-constrained public source gathering and auditable artifact review.
Collects product metadata, copy, and optional visual assets into a local folder pack for video workflows.
This skill should be used when the user asks to "extract data from a page", "scrape tables", "collect paginated results", "parse list/card content", or "export structured web data" with OpenDevBrowser.
This skill should be used when the user asks to "test a form", "verify validation", "check submission behavior", "test multi-step forms", or "debug form errors" with OpenDevBrowser.