Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
["check the UI","review the design","is the visual quality acceptable","audit visual","does it look good","visual review","design review","UI audit","check the frontend"]
description
>
context
fork
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.
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?
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
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:
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
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
