git:20260812.5850392 to git:20260813.63a11f3

114 added, 39 removed. Audit A to A.

---

name: godmode-ui-ux

- description: BDB UI/UX Godmode. The absolute Gold-Standard for frontend design. Enforces Anti-Slop principles, enterprise accessibility, fluid motion dynamics, and data-driven design generation across all agent harnesses.

+ description: "BDB UI/UX Godmode. The authoritative design skill for all frontend work. Enforces Brand Discovery, contextual Anti-Slop rules, DTCG design tokens, fluid motion physics, enterprise accessibility, and data-driven design generation across all agent harnesses."

---

- # 🎨 BDB UI/UX Godmode

+ # BDB UI/UX Godmode

- This skill replaces all legacy design and UX skills. It represents the absolute pinnacle of frontend engineering and design craft in the BDB ecosystem. As an agent, you must execute these principles rigorously across all supported harnesses (Cursor, Claude Code, Agy, Copilot).

+ This skill is the single source of truth for all design decisions. It replaces: design-taste-frontend, frontend-design.

- ## 1. The Anti-Slop Directive

- You must actively resist generating generic "AI-look" interfaces. The internet is flooded with low-effort, generic layouts. Your job is to craft intent-driven design.

- * **No Generic Gradients:** Do not use arbitrary purple/blue glowing gradients or mesh backgrounds unless explicitly requested by the brand guidelines.

- * **No Arbitrary Border Radii:** Do not mix `rounded-md` and `rounded-2xl` arbitrarily. All border radii must follow a strict, nested mathematical token system.

- * **No Default Dashboards:** Do not build a sidebar/header dashboard layout for a tool that would be better served as a modal, a command palette, or a single-column focused view.

- * **Elevations & Shadows:** Flat is not an excuse for lacking hierarchy. Shadows must mimic real-world lighting (multi-layered diffuse shadows), not hard black boxes.

+ ## 0. Brand Discovery (MANDATORY FIRST STEP)

- ## 2. Inspiration & Retrieval Layer

- Never guess a layout if the user hasn't provided one. You must act as a design researcher before acting as a coder.

- * **Ask for References:** Prompt the user to provide references from highly curated galleries.

- * **Curated Sources:** When searching for inspiration, rely on real-world patterns. Internally map your layout generation to standards found on top-tier UI galleries (e.g., refero.design, open-design).

- * **Moodboard First:** Define the visual signature (Typography paired, Primary/Secondary/Surface colors defined) in markdown before writing a single line of React/HTML/CSS.

+ Before ANY design work, gather project context. Never assume colors, fonts, or visual direction.

- ## 3. Data-Driven Architecture (Design Tokens)

- Design is math. You do not guess spacing, and you do not guess colors.

- * **Color Space:** Use `oklch()` for programmatic color generation to ensure perceptual uniformity (no more muddy yellows or overly bright blues when generating palettes).

- * **Spacing System:** Strictly adhere to a 4pt or 8pt grid (`4, 8, 12, 16, 24, 32, 48, 64, 96`). Do not use random pixel values like `17px` or `21px`.

- * **Modular Typography:** Generate font sizes using a modular scale (e.g., Major Third or Perfect Fourth). Define explicit `line-height` (tighter for headings ~1.1, looser for body ~1.5) and tracking/letter-spacing (tighter for large text, looser for microcopy).

+ ### Discovery Checklist:

+ 1. Ask: "Do you have existing brand assets? (Logo, CI guideline, Styleguide, screenshots)"

+ 2. Ask: "What are your brand colors? (Hex, oklch, or description)"

+ 3. Ask: "Do you use specific fonts?"

+ 4. Ask: "Any websites/apps whose look you admire?"

+ 5. Ask: "Should it feel minimalist, playful, luxurious, or technical?"

- ## 4. Fluid Motion & Physics

- Animation is not decoration; it is spatial orientation.

- * **Interruptible Animations:** State transitions must be fluid. If a user closes a modal while it is still opening, it must smoothly reverse from its current physical state, not snap back to zero.

- * **Spring Physics:** Avoid fixed-duration CSS `ease-in-out` for interactive elements. Use spring physics (Stiffness, Damping, Mass) via tools like Framer Motion or React Spring so elements feel tactile and physically grounded.

- * **Spatial Consistency:** Elements must expand from their origin point (Shared Element Transitions) rather than fading in from nowhere.

+ ### Output: Project DESIGN.md

+ Generate a project-specific DESIGN.md containing:

+ - Primary/Secondary/Accent colors (oklch)

+ - Font stack

+ - Spacing preference

+ - Motion intensity (1-10)

+ - Visual density (1-10)

+ - Design variance (1-10)

+ - Brand constraints and things to avoid

- ## 5. Enterprise Density & Accessibility

- An interface that cannot be used by everyone is broken.

- * **High-Density Data:** When building B2B tables or forms, apply strict compact density rules. Minimize padding, use tabular numbers (`font-variant-numeric: tabular-nums;`), and align numerical data to the right.

- * **WCAG 2.1 AA:** Enforce strict contrast ratios (4.5:1 for normal text).

- * **Keyboard Navigation:** Focus states must be highly visible (e.g., `focus-visible:ring-2 focus-visible:ring-offset-2`). Every interactive element must be reachable via `Tab` and executable via `Enter/Space`.

+ ### Anti-Slop Context Logic:

+ - IF brand colors defined → Color bans (Lila Ban, etc.) = SUSPENDED

+ - IF brand fonts defined → Font bans (Inter Ban, etc.) = SUSPENDED

+ - Pattern-level Anti-Slop (no generic dashboards, no emojis, no card overuse) = ALWAYS ACTIVE

+ - IF no brand defined → Use defaults from design-tokens.json + all Anti-Slop bans ACTIVE

- ## 6. Creator Extension & BDB MediaStorm Governance

- This Godmode extends beyond standard software development. It STRICTLY governs creative-tech and show-control workflows (BDB Creator Extension).

- * **MediaStorm Validations:** When executing `/bdbmediastorm` for TouchDesigner, Unreal Engine, or Adobe Suite workflows, UX principles must translate to operator panels, perform mode interfaces, and VJ dashboards.

- * **Performance vs UI:** In real-time rendering environments, UI must not block the main render thread. Anti-slop applies to creative tech: avoid generic generative noises and default particle systems.

+ ## 1. Anti-Slop Directive

- ## Universal Agent Harness Integration

- This Godmode is universally compatible and governs all extensions, including the BDB Creator Engine.

- * **Cursor:** Auto-injected via `.cursor/rules/godmode-ui-ux.mdc`.

- * **Claude Code:** Reads principles via `CLAUDE.md`.

- * **Agy / CLI Agents:** Natively enforced via the prompt orchestrator.

- * **Execution:** You (the AI) must silently validate your planned UI code against these 5 pillars before outputting code to the user.

+ These pattern rules are ALWAYS active regardless of brand:

+ - No default sidebar/header dashboard layouts unless explicitly requested

+ - No emoji icons — use Phosphor, Radix, or Lucide SVG only

+ - No arbitrary border-radius mixing (follow token scale)

+ - No flat design without hierarchy — use multi-layered diffuse shadows

+ - No centered hero sections when design variance > 4

+ - No 3-column equal card grids

+ - No generic names ("John Doe", "Acme") in mockups

+ - No filler words ("Elevate", "Seamless", "Next-Gen")

+ - No broken Unsplash links — use picsum.photos or SVG avatars

+ Color/Font bans (ONLY when no brand is defined):

+ - No AI Purple/Blue gradient aesthetic as default

+ - No Inter font — use Geist, Outfit, Cabinet Grotesk, or Satoshi

+ - No oversaturated accent colors (saturation < 80%)

+ Full ban reference: → references/anti-slop-rules.md

+ ## 2. Design Tokens (Machine-Readable)

+ All design values MUST come from design-tokens.json (DTCG format).

+ - Color: oklch() for perceptual uniformity

+ - Spacing: 8pt grid (4, 8, 12, 16, 24, 32, 48, 64, 96)

+ - Typography: Modular scale (Major Third 1.25)

+ - Motion: Spring physics presets (subtle, default, bouncy)

+ - Radius: Nested mathematical scale (6, 12, 16, 24, 40)

+ Never guess spacing values. Never use arbitrary hex colors.

+ ## 3. Motion & Physics

+ - Use spring physics (stiffness/damping/mass), not fixed-duration ease-in-out

+ - Animations must be interruptible (reverse from current state, don't snap)

+ - Elements expand from origin point (Shared Element Transitions)

+ - Use useMotionValue/useTransform for continuous tracking (NOT useState)

+ - Perpetual animations must be React.memo'd in isolated Client Components

+ - Stagger children for list/grid reveals

+ - Never animate top/left/width/height — only transform + opacity

+ - Grain/noise filters on fixed pointer-events-none layers only

+ Spring presets: → design-tokens.json > motion

+ Creative arsenal: → references/creative-arsenal.md

+ Bento paradigm: → references/bento-paradigm.md

+ ## 4. Enterprise Density & Accessibility

+ - WCAG 2.1 AA: contrast ratio ≥ 4.5:1 for normal text

+ - Keyboard: all interactive elements reachable via Tab, executable via Enter/Space

+ - Focus: visible focus-visible:ring-2 ring-offset-2 states

+ - High-density B2B: tabular-nums, right-aligned numbers, compact padding

+ - Touch targets: minimum 44x44px

+ - prefers-reduced-motion: disable perpetual animations

+ - min-h-[100dvh] instead of h-screen (iOS Safari fix)

+ ## 5. Verification Gate (Mandatory before Code Output)

+ Silently validate ALL code against this before presenting to user:

+ ### Brand

+ - [ ] Brand Discovery completed or user declined?

+ - [ ] Colors from DESIGN.md or design-tokens.json defaults?

+ - [ ] No hardcoded hex values outside token system?

+ ### Anti-Slop

+ - [ ] No forbidden pattern from §1?

+ - [ ] No emoji icons?

+ ### Motion

+ - [ ] Springs for interactive elements?

+ - [ ] Perpetual animations in isolated Client Components?

+ ### Accessibility

+ - [ ] Contrast ≥ 4.5:1?

+ - [ ] Keyboard navigable?

+ - [ ] Focus states visible?

+ - [ ] prefers-reduced-motion respected?

+ ### States

+ - [ ] Loading (skeleton, not spinner)?

+ - [ ] Empty (friendly + next action)?

+ - [ ] Error (recovery path)?

+ ## 6. Harness Integration

+ - Cursor: injected via .cursor/rules/godmode-ui-ux.mdc

+ - Claude Code: reads via CLAUDE.md

+ - Antigravity: natively enforced

+ - MediaStorm: extends to TouchDesigner/Unreal operator panels via /bdbmediastorm