메뉴
Design quality auditor. Detects 24 anti-patterns in UI code (impeccable patterns), critiques visual hierarchy and UX, polishes components to shipping quality. Provides /critique, /audit, /polish, and /bolder commands.
기본적으로 소스를 먼저 확인하는 Prompt가 선택됩니다. 직접 명령으로 전환하거나 로컬 사본을 다운로드할 수도 있습니다.
설치 여부를 결정하기 전에 SKILL.md와 SkillsMP에 표시된 보조 파일을 읽어 보세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/CleanExpo/RestoreAssist --skill design-audit명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Catch the "same data lives in two differently-keyed tables, two features read different ones, they silently disagree" failure class. Use whenever two models hold overlapping fields, a reader picks a pricing/config/settings store, or two surfaces (e.g. Margot vs the estimator, dashboard vs API) should show the SAME number but might not.
Catch the "importer reads a JSON key the external API never returns → silently imports zero rows, mocked tests stay green" failure class BEFORE it ships. Use whenever you write or change code that parses a third-party API response (Ascora, Xero, any REST/webhook payload), map its fields, or write a mock/fixture for one.
Catch "content that should never have entered the shared vector corpus" BEFORE ingest — tenant-specific or product-specific dollar figures (a global rate card, cross-product training $ rates) that a no-tier-weighting retriever can surface into the wrong answer. Use whenever you ingest into IicrcChunk / any RAG corpus, author a KNOWLEDGE doc, or change retrieval.
SKILL.md 표시 중
SOC 직업 분류 기준
| name | design-audit |
| description | Design quality auditor. Detects 24 anti-patterns in UI code (impeccable patterns), critiques visual hierarchy and UX, polishes components to shipping quality. Provides /critique, /audit, /polish, and /bolder commands. |
| automation | manual |
| intents | design, review |
The quality gate of the design stack. Runs after ui-component-builder ships a component
and before it goes to production. Identifies technical flaws, UX problems, and aesthetic
anti-patterns without touching functionality.
Read DESIGN.md before auditing. Audit against the project's design system, not generic best practices.
Technical quality check — no edits, only findings.
Reports issues across: accessibility, performance, responsive layout, token compliance, animation correctness.
Output format:
AUDIT FINDINGS — [component name]
🔴 Critical (must fix before ship)
- [issue] at [file:line]
🟡 Warning (should fix)
- [issue] at [file:line]
🟢 Passed
- [checks that passed]
Score: X/10
UX + visual design review — no edits, only observations.
Evaluates: visual hierarchy, content clarity, emotional resonance, information density, consistency with DESIGN.md.
Final pass before shipping. Makes targeted improvements to:
Amplify a design that's too timid. Use when a design is correct but forgettable. Increases visual contrast, strengthens typographic hierarchy, adds one deliberate moment of delight.
Tone down a design that's fighting for attention. Use when too many elements compete. Reduces weight of secondary elements, simplifies colour usage, creates clear focal point.
Strip to essence. Remove every element that doesn't answer: "does the user need this to complete their task?"
npx impeccable detect src/)These are automatically detectable flaws. A design audit must check all 24:
flex: 0 0 33.333% instead of CSS Grid. Breaks at edge cases.mt-7, px-3.5, gap-[13px] — values not in the design system.from-purple-500 to-blue-600 is the default AI aesthetic. Replace.shadow-lg on dark backgrounds has zero visibility. Shadows are for light UIs.bg-black/50 on a dark surface — undetectable.gray-* classes instead of zinc-* or brand-tinted equivalents.<h1> to <h3> with no <h2> — accessibility and hierarchy violation.font-normal. No hierarchy established through weight.font-variant-numeric: tabular-nums cause column misalignment.cubic-bezier(0.34,1.56,0.64,1) for UI transitions — feels cartoonish.top, left, width, height instead of transform.prefers-reduced-motion: reduce.useMotionValue.:focus-visible with no visible indicator. Keyboard users invisible.<button><svg /></button> with no aria-label.Before selecting or validating a font choice, ask: what are 3 concrete words describing the brand personality?
When auditing colour choices, evaluate in OKLCH space (not HSL):
hsl(220, 70%, 50%) can look different at same lightness across huesoklch(55% 0.18 250) provides perceptually uniform lightnessTo convert hex → OKLCH: use oklch.com or the CSS color() function.
Flag these in any copy within components:
| Bad | Better |
|---|---|
| "Click here" | "[specific action]" |
| "Error occurred" | "[what failed] — [how to fix]" |
| "Loading..." | "Loading [specific content]..." |
| "No data" | "No [specific content type] yet — [action to add]" |
| "Are you sure?" | "Kill session RA-1234? This cannot be undone." |
| "Success!" | "[What specifically succeeded]" |
| "Invalid input" | "[Which field] [what's wrong]" |
| Dimension | 1–3 (Fail) | 4–6 (Marginal) | 7–9 (Pass) | 10 (Ship) |
|---|---|---|---|---|
| DESIGN.md compliance | Token violations throughout | Minor deviations | All tokens correct | Exemplary — extends the system |
| State completeness | Missing 2+ states | Missing 1 state | All states present | All states + edge cases |
| Accessibility | Missing labels, focus, targets | One a11y gap | WCAG AA compliant | WCAG AAA |
| Anti-patterns | 5+ present | 2–4 present | 0–1 present | Zero, and pattern actively avoided |
| Typography | No hierarchy | Weak hierarchy | Clear hierarchy | Masterful — every level earns its role |