🎨 ultra-ui-ux

The Definitive Anti-Slop, Physical Motion, Mobile Ergonomics & Design Engineering Protocol for AI Coding Agents
Synthesizing 39 elite design skills: Apple HIG, Emil Kowalski's Design Engineering, Vercel React Native, Anti-Slop Architecture, High-End Visual Design, Minimalist UI, GPT Taste, Sonner, Shadcn, and Strict Output Enforcement.

⚡ Quick Install

You can use ultra-ui-ux instantly across Claude Code, Cursor, Windsurf, or any modern frontend project:

1. Claude Code Native Plugin (Recommended)

claude plugin install github:prodhokter/ultra-ui-ux

2. Universal CLI Installer (npx, bunx, pnpm dlx)

Install globally or locally to your project in seconds:

# Interactive Mode (select your preferred target)
npx ultra-ui-ux

# Or via your favorite package manager:
bunx ultra-ui-ux
pnpm dlx ultra-ui-ux

Non-Interactive CLI Flags:

npx ultra-ui-ux --global    # Install to ~/.claude/skills/ultra-ui-ux
npx ultra-ui-ux --project   # Install to ./.claude/skills/ultra-ui-ux
npx ultra-ui-ux --cursor    # Export anti-slop rules to .cursorrules
npx ultra-ui-ux --windsurf  # Export anti-slop rules to .windsurfrules
npx ultra-ui-ux --design    # Generate project-level DESIGN.md template

🎯 The 3 Dials Calibration

Before writing a single line of UI code, the agent reads the context and locks in the Three Dials:

Reading this as: [Page / App kind] for [Target Audience], with a [Vibe] language.
Dials: DESIGN_VARIANCE: [1-10] | MOTION_INTENSITY: [1-10] | VISUAL_DENSITY: [1-10]

| Dial | Range | What It Dictates | Default Calibration | | :--- | :--- | :--- | :--- | | DESIGN_VARIANCE | 1 (Symmetric) to 10 (Artsy Chaos) | Asymmetry, layout rhythm, whitespace, grid breaks. | 7-8 (Landing), 4 (Dashboard) | | MOTION_INTENSITY | 1 (Instant) to 10 (Cinematic) | Spring physics, micro-interactions, gestures. | 5-6 (App UI), 8 (Showcase) | | VISUAL_DENSITY | 1 (Spacious) to 10 (Cockpit) | Compactness, padding, typography scale. | 3-4 (Mobile), 8 (Data Grid) |

🚫 The 18 AI-Slop Prohibitions

ultra-ui-ux strictly eliminates generic AI habits:

• ❌ No Lila / Purple button glows on dark backgrounds
• ❌ No centered H1 + 2 identical pill buttons over an empty canvas
• ❌ No horizontal rows of 3 identical card containers
• ❌ No card-in-card-in-card nesting
• ❌ No pure #000000 or #FFFFFF (kills layered depth)
• ❌ Zero em dashes (---) in UI text
• ❌ No AI buzzwords (seamless, elevate, unleash, tapestry)
• ❌ No fake macOS window screenshot frames
• ❌ No decorative emojis as icons in professional interfaces
• ❌ No trendy editorial serifs for technical dashboards
• ❌ No h-screen on mobile (always min-h-[100dvh])
• ❌ No transition: all (explicit properties only)
• ❌ No scale(0) entrance (physics dictates scale(0.95))
• ❌ No placeholders (// TODO: implement later)

🔬 Mathematical & Physical Foundations

1. WCAG 2.2 Mathematical Contrast

$$\text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$

• Minimum 4.5:1 (AA) for body copy.
• Target 7:1 (AAA) for critical telemetry.

2. Concentric Corner Radius Law

$$\text{Radius}{\text{outer}} = \text{Radius}{\text{inner}} + \text{Padding}$$ Prevents optical friction and uneven padding artifacts.

3. Apple Spring Physics

• Damping ratio $\zeta = 1.0$ (Critically damped - no overshoot) for sheets and drawers.
• Damping ratio $\zeta = 0.75$ (Slight lively spring) for button taps and card snaps.

📚 Deep-Dive Documentation

• Detailed Usage Guide (GUIDE.md) - Real-world prompt examples and component recipes.
• Anti-Slop & Taste Rules (references/anti-slop-and-taste-rules.md)
• Motion & Apple Physics (references/motion-and-apple-physics.md)
• Mobile Ergonomics (references/mobile-and-component-architecture.md)
• Generators & Scaffolds (references/generators.md)

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide to get started.

📄 License

MIT © Habib (prodhokter)