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.