相关职业SOC
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill visual-excellence-enforcer命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| id | visual-excellence-enforcer |
| name | visual-excellence-enforcer |
| type | Encoded Preference Workflow |
| version | 2.0.0 |
| created | 20/03/2026 |
| modified | 26/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 | > |
| context | fork |
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(, -, , );
: (, , , );
: (, , , );
: (, , , );
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.
After the audit report is produced, rank all violations by impact and generate an incremental fix plan.
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 |
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).
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 |
| 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).
Comprehensive checklist imported from the redesign-skill pattern. Run through each section during audit.
max-w-[65ch])font-variant-numeric: tabular-numstext-wrap: balance)#050505 (not #000000)min-h-[100dvh] instead of h-screen for full-height sectionsscale-[0.98] or translateY(1px))window.alert())99.99%), or company names ("Acme")<nav>, <main>, <article>, <aside>)alt text<title>, description, og:image)Route complex requests to the right specialist agent or chain of agents. This skill acts as the central brain of an agent swarm — it analyses what the user needs, determines which specialist domain(s) are required, and coordinates parallel or sequential agent execution. Use this skill when a request spans multiple domains (e.g., "research competitors and create a pitch deck"), when you need to decide which specialist should handle an ambiguous request, or when a task requires a multi-step pipeline across different skills. Triggers on: multi-step requests, cross-domain tasks, "coordinate", "plan this out", "I need help with multiple things", or any complex request that touches more than one specialist area. Also triggers when the user seems unsure which tool or approach to use.
>-
Hybrid DAG execution primitive combining deterministic and agentic nodes with hard iteration caps