mirror of
https://github.com/nexu-io/open-design.git
synced 2026-06-01 03:14:35 +07:00
5da21e4054
* feat(craft): add animation-discipline + opt-ins on mobile-app, mobile-onboarding, gamified-app Animation discipline is the second behavioral craft module proposed in #501 and explicitly invited in @mrcfps's post-merge comment on #502. Differentiation from prior art (LottieFiles motion-design-skill, MIT, 96 stars): citation-grounded against primary sources rather than asserted. Anchors: - Tversky/Morrison/Bétrancourt 2002 (IJHCS) on the one demonstrated win-condition for animation - Heer & Robertson TVCG 2007 on staging (with the actual durations they tested, not the laundered '300-1000ms' rule) - Harrison/Yeo/Hudson CHI 2010 on perceived-duration scope (progress bars only, not skeletons) - Doherty & Thadani IBM 1982 productivity numbers - Material 3 motion tokens (M3 standard vs M2 legacy delta) - IBM @carbon/motion durations - Apple SwiftUI Animation API published defaults - W3C View Transitions API + WCAG 2.2.2/2.3.3 calibration - WebKit 2017 prefers-reduced-motion rationale The 'common mistakes (lint these)' section busts five specific folklore claims that don't survive primary-source check, including the Doherty-400ms attribution and the M2-vs-M3 standard easing confusion. Three skills opt in via od.craft.requires: - mobile-app (animation-heavy mobile screens) - mobile-onboarding (multi-screen flow with transitions) - gamified-app (animations central to the format) Refs #501. * fix(craft): address review findings on animation-discipline Six findings from @lefarcen's CHANGES_REQUESTED review on #515, addressed in one pass. Reviewed by codex across three loops before push. P1 integration gaps: - gamified-app and mobile-onboarding skills now require both state-coverage and animation-discipline (both render stateful UI with motion). - craft/README.md silent-fallback example reframed as a planned-but-not-yet-vendored placeholder rather than a hard-coded next-to-ship slug. Note added pointing skill authors who arrive from older guidance at animation-discipline as the equivalent of the earlier 'motion' placeholder. P2 reasoning completeness: - > 500 ms duration row reframed: 'Reserved for cross-screen, staged, or platform-native transitions (e.g. M3 long2-extraLong4, Heer & Robertson 2007's per-stage recommendation)'. Surrounding paragraph rewritten with an enumerated category — 'Non-navigation microinteractions: hover, press, toggle, validation, chip selection, row expansion' — rather than the vague 'routine' term. - New 'Flashing limits' subsection added in the Reduced motion section. WCAG 2.3.1 (Level A) three-flashes-in-any-one-second-period rule with the area/brightness threshold qualifier; WCAG 2.3.2 (AAA) unconditional rule. Photosensitive epilepsy framing. - New 'Repeated and ambient motion' section added. Five rules covering iteration cap, WCAG 2.2.2 pause control after 5s, cancel-on-route, one-shot reward animations, and spinner timeout cross-referencing state-coverage.md. File length now 154 lines (was 130, 80-110 craft target). Trade is citation density and the new sections demanded by the integration context (gamified/onboarding skills with looping motion). Refs #501, #515. |
||
|---|---|---|
| .. | ||
| audio-jingle | ||
| blog-post | ||
| critique | ||
| dashboard | ||
| dating-web | ||
| design-brief | ||
| digital-eguide | ||
| docs-page | ||
| email-marketing | ||
| eng-runbook | ||
| finance-report | ||
| gamified-app | ||
| guizang-ppt | ||
| hatch-pet | ||
| hr-onboarding | ||
| html-ppt | ||
| html-ppt-course-module | ||
| html-ppt-dir-key-nav-minimal | ||
| html-ppt-graphify-dark-graph | ||
| html-ppt-hermes-cyber-terminal | ||
| html-ppt-knowledge-arch-blueprint | ||
| html-ppt-obsidian-claude-gradient | ||
| html-ppt-pitch-deck | ||
| html-ppt-presenter-mode-reveal | ||
| html-ppt-product-launch | ||
| html-ppt-taste-brutalist | ||
| html-ppt-taste-editorial | ||
| html-ppt-tech-sharing | ||
| html-ppt-testing-safety-alert | ||
| html-ppt-weekly-report | ||
| html-ppt-xhs-pastel-card | ||
| html-ppt-xhs-post | ||
| html-ppt-xhs-white-editorial | ||
| hyperframes | ||
| image-poster | ||
| invoice | ||
| kami-deck | ||
| kami-landing | ||
| kanban-board | ||
| live-artifact | ||
| magazine-poster | ||
| meeting-notes | ||
| mobile-app | ||
| mobile-onboarding | ||
| motion-frames | ||
| open-design-landing | ||
| open-design-landing-deck | ||
| pm-spec | ||
| pptx-html-fidelity-audit | ||
| pricing-page | ||
| replit-deck | ||
| saas-landing | ||
| simple-deck | ||
| social-carousel | ||
| sprite-animation | ||
| team-okrs | ||
| tweaks | ||
| video-shortform | ||
| web-prototype | ||
| web-prototype-taste-brutalist | ||
| web-prototype-taste-editorial | ||
| web-prototype-taste-soft | ||
| weekly-update | ||
| wireframe-sketch | ||