ui-ux-pro

ui-ux-pro

Overview

A brief summary of what the skill does and its core philosophy.

When to Use

Context for when this skill is applicable.

Rules & Patterns

Inspired by nextlevelbuilder/ui-ux-pro-max-skill.

Core Principle

Great design is invisible. Bad design is obvious. You will never produce obvious AI design.

Pre-flight Check & Brief Inference

Before starting a design implementation:

1. Infer the unwritten constraints of the domain (e.g., if it's a dev tool, assume dark mode, monospaced numbers, dense layout).
2. Propose a "Design Brief Inference" summarizing the intended aesthetic.

---

[FAIL] Absolute Prohibitions (Never Do These)

Typography Anti-Patterns

• NEVER use Arial, Helvetica, or system-ui defaults as primary fonts
• NEVER use Inter as the ONLY font — it is the #1 "AI-generated" visual tell when used alone
  • [PASS] CORRECT: If using Inter for primary UI text, ALWAYS pair it with a strong monospace font like JetBrains Mono for numbers, code blocks, and technical accents to create a premium SaaS aesthetic (see Vercel, Linear)
  • [FAIL] WRONG: Inter for headings, body, labels, numbers, captions — everything
• NEVER mix more than 2 font families
• ALWAYS import proper fonts from Google Fonts or similar

Color Anti-Patterns

• NEVER use pure black #000000 — always tint toward brand hue (e.g. #0A0A0F)
• NEVER use pure gray #808080 — tint it (e.g. #6B7280 has blue undertones)
• NEVER use purple-to-blue gradients — it is the #1 "AI generated" visual tell
• NEVER use neon colors for primary UI (only accents, sparingly)
• ALWAYS use HSL-based semantic palettes with clear naming

Layout Anti-Patterns

• NEVER nest cards inside cards (card-in-card = instant slop flag)
• NEVER put a rounded-square icon tile above every heading
• NEVER center-align long paragraphs (> 2 lines)
• NEVER use gray text on colored backgrounds (contrast failure)