with one click
visual-excellence-enforcer
">"
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
">"
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| id | visual-excellence-enforcer |
| name | visual-excellence-enforcer |
| type | Encoded Preference Workflow |
| version | 1.0.0 |
| created | 20/03/2026 |
| modified | 20/03/2026 |
| status | active |
| triggers | ["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 | > |
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.
Use this skill when:
This repository uses the Scientific Luxury design system. Reference: docs/DESIGN_SYSTEM.md.
| 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) |
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);
These patterns indicate factory-default LLM UI and are rejected immediately:
bg-blue-500)bg-white, bg-gray-50, bg-gray-100)<button> without hover state or animationIf 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]
For each design rule, check the screenshot:
#050505?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)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]
═══════════════════════════════════════════════════
Before approving a UI component:
#050505rounded-lg, rounded-full, or larger| 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 |
Component screenshot shows: dark OLED background, sharp corners, cyan accent on active state, JetBrains Mono for API responses, smooth spring animation on hover. — APPROVED
Component screenshot shows: white card on light grey background, blue primary button, rounded-2xl corners, no animation. — REJECTED — 4 critical violations found.
Apply this skill for Unite-Hub Supabase migrations, PostgREST/Data API visibility, founder-scoped Playwright journeys, or errors such as PGRST205, access=denied, stale Supabase linked refs, or migration history drift. Prevents repeating the SQL/cache/auth loop by enforcing the exact verification sequence for core journeys.
The compass for Unite-Hub's road to /shipit. Defines the single NorthStar (a real, comprehensive, working founder CRM in production, every section GREEN), the binding definition of GREEN, and the No-Invaders Manifest that keeps the build honest and surgical. Consult BEFORE deciding what to build/skip/finish — it resolves "200 ≠ real" temptations and scope-creep pressure. P1, auto-loaded.
Apply this skill WHEN scaffolding a new cron "pull" route that syncs external/derived data into Supabase on a schedule (Vercel cron). Encodes the Unite-Hub cron invariants: CRON_SECRET auth, FOUNDER_USER_ID actor, overlap safety, idempotent upsert, last-sync timestamp, and failure surfacing. Generic `cron-scheduler` covers scheduling; this covers the PULL handler body. P3.
Apply this skill WHEN verifying that a route, page, or integration serves REAL data and not silent mock/placeholder data. Detects the "false-green" failure mode: an endpoint returns 200 (or a page renders) while the underlying data is fabricated because a provider is unconnected. Trigger WHENEVER classifying a section's readiness, reviewing integration wrappers, or before marking anything GREEN. P2 — load on audit/verify tasks.
Manifest-first context isolation — each subagent receives only its scope, never the full codebase
Apply this skill for ANY decision with non-obvious tradeoffs: architectural choices, debugging without a clear root cause, performance strategies, security decisions, feature design with competing constraints, refactoring scope decisions. Forces multi-perspective analysis before committing to a solution. P1 auto-load — always active on complex reasoning tasks.