Visual Excellence Enforcer

Visual Excellence Enforcer Skill

Purpose: The system does not accept generic LLM UI as complete. Every UI component must meet the Scientific Luxury standard before shipping. Proof required: screenshot, not description.

When to Use

Use this skill when:

• A UI component, page, or layout is claimed to be complete
• Before merging any frontend PR
• When a screenshot or visual proof is requested
• When design QA is required

Scientific Luxury Design Standard

This repository uses the Scientific Luxury design system. Reference: docs/DESIGN_SYSTEM.md.

Non-Negotiable Rules

Approved CSS Easings

Only these easing functions are approved for animations:

--ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);

Generic UI Patterns (Auto-Reject)

These patterns indicate factory-default LLM UI and are rejected immediately:

• Unstyled shadcn components with no customisation
• Blue primary buttons (bg-blue-500)
• White card backgrounds (bg-white, bg-gray-50, bg-gray-100)
• Default Tailwind grey palette as primary colour
• <button> without hover state or animation
• Placeholder text that says "Lorem ipsum" or "Click here"
• Images that are placeholder grey boxes
• Default browser scrollbar (must be styled or hidden)

Procedure

Step 1: Request screenshot

If no screenshot has been provided:

VISUAL REVIEW REQUIRED
A screenshot of the actual rendered component/page is required.
Description of UI is not accepted as visual proof.
Please provide: [screenshot path or image]

Step 2: Audit screenshot against rules

For each design rule, check the screenshot:

• Background colour: is it #050505?
• Border radius: are corners sharp (rounded-sm)?
• Typography: is JetBrains Mono visible for data/code?
• Animations: are they smooth with approved easings (cannot verify from static screenshot — check code)?
• Banned patterns: any generic blue buttons, white backgrounds, placeholder text?

Step 3: Audit code for banned patterns

Search the component file for:

• rounded-lg, rounded-full, rounded-xl — FAIL
• bg-white, bg-gray-, bg-slate- — FAIL (unless intentional contrast element)
• transition-all linear or transition: all 0.3s — FAIL
• animate- Tailwind animation classes — FAIL (use Framer Motion)

Step 4: Generate visual audit report

VISUAL AUDIT REPORT
═══════════════════════════════════════════════════
Component: [component name / page]
Date: [DD/MM/YYYY]

SCREENSHOT REVIEW
─────────────────
[Screenshot: PROVIDED / NOT PROVIDED]

DESIGN RULE CHECKS
─────────────────
PASS | Background: OLED Black #050505 confirmed
FAIL | Border radius: rounded-lg found on line 23 — replace with rounded-sm
PASS | Typography: JetBrains Mono visible
FAIL | Banned pattern: bg-white on card component — replace with bg-[#050505]
PASS | No placeholder text
PASS | Framer Motion used for animations

SCORE: [N]/[total] rules passing

STATUS: APPROVED | REJECTED
[If rejected: list exact fixes required]
═══════════════════════════════════════════════════

Validation Gates

Before approving a UI component:

• Screenshot provided (not description)
• Background is OLED Black #050505
• No rounded-lg, rounded-full, or larger
• No generic blue/grey colour palette
• No placeholder content
• Animations verified (Framer Motion in code)
• JetBrains Mono present for any data/code display

Failure Modes

Eval Examples

Pass

Component screenshot shows: dark OLED background, sharp corners, cyan accent on active state, JetBrains Mono for API responses, smooth spring animation on hover. — APPROVED

Fail

Component screenshot shows: white card on light grey background, blue primary button, rounded-2xl corners, no animation. — REJECTED — 4 critical violations found.

Prioritised Remediation

After the audit report is produced, rank all violations by impact and generate an incremental fix plan.

Step 5: Rank Fixes by Impact

Classify each violation from the audit:

Step 6: Generate Incremental Fix Plan

Produce an ordered list of atomic changes, starting with highest-impact violations:

## Fix Plan (ordered by impact)

### Fix 1 [Critical]: Replace background colour
- **File**: `apps/web/app/layout.tsx`
- **Change**: `bg-white` → `bg-[#050505]`
- **Estimated lines**: 1
- **Commit**: `fix(ui): enforce OLED black background`

### Fix 2 [Critical]: Replace border radius
- **File**: `apps/web/components/ui/Card.tsx`
- **Change**: `rounded-lg` → `rounded-sm` (all instances)
- **Estimated lines**: 3
- **Commit**: `fix(ui): enforce rounded-sm corners`

### Fix 3 [High]: Replace animation engine
...

Each fix should be independently committable (atomic).

Scoring Rubric

Four weighted criteria for quantitative design assessment:

Scoring Scale (per criterion)

Overall score = weighted sum / 5 × 100

Weight rationale: Design Quality and Originality are weighted higher because Claude already scores well on Craft and Functionality by default (per Anthropic's harness design research).

Design Audit Checklist

Comprehensive checklist imported from the redesign-skill pattern. Run through each section during audit.

Typography

• No Inter, Roboto, or Arial — use JetBrains Mono (data), Editorial New (headings)
• Headlines have presence — large size, tight tracking, reduced line-height
• Body text width limited to ~65 characters (max-w-[65ch])
• Medium (500) and SemiBold (600) weights used for hierarchy (not just 400/700)
• Numbers use monospace font or font-variant-numeric: tabular-nums
• No orphaned words on last line (text-wrap: balance)

Colour & Surfaces

• Background is OLED Black #050505 (not #000000)
• Max 1 accent colour family (spectral colours)
• Shadows tinted to match background hue (not pure black)
• Consistent warm OR cool grays (not mixed)
• No purple/blue "AI gradient" aesthetic

Layout

• No symmetrical grids — use asymmetric splits
• No 3-column equal card rows — use zig-zag, masonry, or horizontal scroll
• min-h-[100dvh] instead of h-screen for full-height sections
• CSS Grid over complex flexbox percentage math
• Max-width container (1200-1440px) with auto margins
• Optical alignment adjustments where mathematical centering looks wrong

Interactivity & States

• Hover states on all interactive elements
• Active/pressed feedback (scale-[0.98] or translateY(1px))
• Visible focus ring for keyboard navigation
• Loading states (skeleton loaders, not spinners)
• Empty states (composed onboarding view)
• Error states (inline, not window.alert())

Content

• No generic names ("John Doe"), numbers (99.99%), or company names ("Acme")
• No AI copywriting cliches ("Elevate", "Seamless", "Unleash")
• No Lorem Ipsum — use real draft copy in en-AU
• Sentence case for headers (not Title Case)

Code Quality

• Semantic HTML (<nav>, <main>, <article>, <aside>)
• No inline styles mixed with Tailwind classes
• No arbitrary z-index values — follow depth layering scale
• All images have meaningful alt text
• Proper meta tags (<title>, description, og:image)