/bdbdesignpro — Motion Engine Router & BDB Anti-Slop Gate
Routes creative-motion decisions to the right engine and enforces BDB-specific motion policy (brand tokens, accessibility, anti-slop). It does not teach any third-party library's API — that's the vendor's job, or an installed upstream skill's (see engine-routing.md).
🎯 When to Use
- Choosing between GSAP, Motion.dev, Anime.js, React-Spring, Three.js, or CSS Native for a specific interaction.
- Defining or applying BDB-branded motion tokens (durations, easing, brand-locked colors).
- Auditing existing motion for
prefers-reduced-motion, layout thrashing, or cleanup leaks.
- Scaffolding the Interaction & Motion Strategy section of a
01_frontend_spec.md during /startcycle.
🔄 The 4-Phase Flow
[1. Stack & Context Scan] ──▶ [2. Interaction Thesis] ──▶ [3. Engine Routing]
│
[4. Anti-Slop & a11y Audit] ◀──────────────┘
Phase 1: Stack & Environment Scan
- Framework & runtime: React 19, Next.js App Router, Vite, Astro, Svelte, Vue, or vanilla.
- Check
package.json for already-installed motion libraries (gsap, motion, framer-motion, animejs, @react-spring/web, three, @react-three/fiber) — and their exact version. Anime.js v3 and v4 are not API-compatible; never assume a version.
- For Next.js App Router, confirm animated components declare
'use client'.
Phase 2: The Interaction Thesis Gate
Never inject animation blindly. Before writing code, state:
- Role & purpose: what does this motion communicate — spatial orientation, hierarchy, feedback, narrative?
- Timing tier: micro (150ms), state transition (300ms, ceiling 400ms), or scroll-scrubbed (no fixed duration). See bdb-motion-tokens.md.
- Reduced-motion fallback: the zero-motion alternative, defined now, not retrofitted later.
Phase 3: Engine Routing
Full routing table, decision flowchart, and anti-patterns: engine-routing.md.
The only engine documented in this skill directly is CSS Native (css-native-patterns.md) — no vendor owns plain CSS. Every other engine's API detail is owned by its vendor docs or an installed upstream skill (e.g. greensock/gsap-skills for GSAP); this skill routes to it, it does not re-teach it.
Phase 4: Anti-Slop & a11y Audit
Four mechanically-checkable gates, with grep commands: antislop-gate.md.
- Zero layout thrashing (GPU-accelerated properties only)
- Deterministic cleanup (no leaked timelines/observers)
prefers-reduced-motion honored — with a real fallback, not just a mention- ≤400ms for standard UI transitions
🔗 Ecosystem Integrations
- In
/bdbrainstorm: runs the Interaction Thesis Interview during Pillar 5 before architectural sign-off. See bdbrainstorm-hook.md.
- In
/startcycle: feeds motion tokens, engine choice, and a11y fallback into 01_frontend_spec.md; Reviewer applies antislop-gate.md's four checks. See startcycle-hook.md.
- Agent wiring: listed in
godmode-ui-ux's skills: — verify this is still true after any agent-roster change; an unwired skill is a stale claim, not a feature.
1---2name: bdbdesignpro3description: Use when choosing an animation engine, defining motion tokens, adding scroll effects or micro-interactions, or auditing motion for accessibility and performance in BDB projects. Covers engine selection (GSAP, Motion.dev, Anime.js, React-Spring, Three.js, CSS Native), BDB brand-locked motion tokens, and the anti-slop/a11y quality gate.4---56# `/bdbdesignpro` — Motion Engine Router & BDB Anti-Slop Gate78Routes creative-motion decisions to the right engine and enforces BDB-specific motion policy (brand tokens, accessibility, anti-slop). It does not teach any third-party library's API — that's the vendor's job, or an installed upstream skill's (see [engine-routing.md](./references/engine-routing.md)).910---1112## 🎯 When to Use13- Choosing between GSAP, Motion.dev, Anime.js, React-Spring, Three.js, or CSS Native for a specific interaction.14- Defining or applying BDB-branded motion tokens (durations, easing, brand-locked colors).15- Auditing existing motion for `prefers-reduced-motion`, layout thrashing, or cleanup leaks.16- Scaffolding the **Interaction & Motion Strategy** section of a `01_frontend_spec.md` during `/startcycle`.1718---1920## 🔄 The 4-Phase Flow2122```23[1. Stack & Context Scan] ──▶ [2. Interaction Thesis] ──▶ [3. Engine Routing]24 │25 [4. Anti-Slop & a11y Audit] ◀──────────────┘26```2728### Phase 1: Stack & Environment Scan291. Framework & runtime: React 19, Next.js App Router, Vite, Astro, Svelte, Vue, or vanilla.302. Check `package.json` for already-installed motion libraries (`gsap`, `motion`, `framer-motion`, `animejs`, `@react-spring/web`, `three`, `@react-three/fiber`) — **and their exact version.** Anime.js v3 and v4 are not API-compatible; never assume a version.313. For Next.js App Router, confirm animated components declare `'use client'`.3233### Phase 2: The Interaction Thesis Gate34Never inject animation blindly. Before writing code, state:35- **Role & purpose:** what does this motion communicate — spatial orientation, hierarchy, feedback, narrative?36- **Timing tier:** micro (150ms), state transition (300ms, ceiling 400ms), or scroll-scrubbed (no fixed duration). See [bdb-motion-tokens.md](./references/bdb-motion-tokens.md).37- **Reduced-motion fallback:** the zero-motion alternative, defined now, not retrofitted later.3839### Phase 3: Engine Routing40Full routing table, decision flowchart, and anti-patterns: [engine-routing.md](./references/engine-routing.md).41The only engine documented in this skill directly is **CSS Native** ([css-native-patterns.md](./references/css-native-patterns.md)) — no vendor owns plain CSS. Every other engine's API detail is owned by its vendor docs or an installed upstream skill (e.g. `greensock/gsap-skills` for GSAP); this skill routes to it, it does not re-teach it.4243### Phase 4: Anti-Slop & a11y Audit44Four mechanically-checkable gates, with grep commands: [antislop-gate.md](./references/antislop-gate.md).451. Zero layout thrashing (GPU-accelerated properties only)462. Deterministic cleanup (no leaked timelines/observers)473. `prefers-reduced-motion` honored — with a real fallback, not just a mention484. ≤400ms for standard UI transitions4950---5152## 🔗 Ecosystem Integrations5354* **In `/bdbrainstorm`:** runs the Interaction Thesis Interview during Pillar 5 before architectural sign-off. See [bdbrainstorm-hook.md](./integrations/bdbrainstorm-hook.md).55* **In `/startcycle`:** feeds motion tokens, engine choice, and a11y fallback into `01_frontend_spec.md`; Reviewer applies `antislop-gate.md`'s four checks. See [startcycle-hook.md](./integrations/startcycle-hook.md).56* **Agent wiring:** listed in `godmode-ui-ux`'s `skills:` — verify this is still true after any agent-roster change; an unwired skill is a stale claim, not a feature.
hybridlabor-api