関連職種SOC
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/CleanExpo/NodeJS-Starter-V1 --skill visual-excellence-enforcerコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
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
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)