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
| Rule | Required | Banned |
|---|
| Background | OLED Black #050505 | Grey, white, any other |
| Border radius | rounded-sm only | rounded-lg, rounded-full, rounded-xl, rounded-2xl, rounded-3xl |
| Animations | Framer Motion only | CSS transition: all linear, animation: without Framer |
| Typography (code/data) | JetBrains Mono | Any other monospace |
| Typography (names/headings) | Editorial New | System fonts |
| Borders | border-[0.5px] border-white/[0.06] | Solid 1px coloured borders |
| Colours | Spectral palette (Cyan #00F5FF, Emerald #00FF88, Amber #FFB800, Red #FF4444, Magenta #FF00FF) | Bootstrap blues, Material greens |
| Shadows | None or subtle glow effects | box-shadow: 0 4px 6px rgba(0,0,0,0.1) (generic) |
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 — FAILbg-white, bg-gray-, bg-slate- — FAIL (unless intentional contrast element)transition-all linear or transition: all 0.3s — FAILanimate- 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:
Failure Modes
| Failure | Recovery |
|---|
| Screenshot not provided | Block until screenshot is provided |
| Screenshot is localhost, need production | Request production URL screenshot |
rounded-lg found | Replace with rounded-sm across component |
bg-white found | Replace with bg-[#050505] or correct design token |
| Generic animation | Replace with Framer Motion + approved easing |
| Generic button styling | Apply spectral colour palette + hover state |
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:
| Priority | Category | Examples |
|---|
| Critical | Background, border radius, animation engine | Non-#050505 background, rounded-lg, CSS transitions instead of Framer Motion |
| High | Typography, colour palette, banned elements | Wrong font family, non-spectral colours, symmetrical grid, Bootstrap cards |
| Medium | Spacing, opacity, interaction states | Inconsistent spacing rhythm, wrong opacity values, missing hover/active states |
| Low | Minor refinements | Font weight adjustments, minor padding tweaks, icon replacements |
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:
| Criterion | Weight | Description |
|---|
| Design Quality | 30% | Coherent visual whole — OLED black, spectral colours, single-pixel borders, JetBrains Mono for data |
| Originality | 25% | Custom layout decisions, avoidance of template defaults, unique component patterns |
| Craft | 25% | Typography precision, spacing rhythm, colour harmony, contrast ratios, animation smoothness |
| Functionality | 20% | Usability, task completion, loading/error/empty states, responsive behaviour |
Scoring Scale (per criterion)
| Score | Description |
|---|
| 5 | Scientific Luxury exemplar — museum quality, zero AI tells |
| 4 | Strong execution with minor polish needed |
| 3 | Competent dark theme but lacks Scientific Luxury distinction |
| 2 | Generic template with partial design system compliance |
| 1 | Bootstrap/Tailwind defaults — no design system applied |
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
Colour & Surfaces
Layout
Interactivity & States
Content
Code Quality
