---
name: Impeccable Design (Bundled — pbakaus/impeccable)
priority: 1
keywords: design, تصميم, صمم, صمملي, صممي, ui, ux, واجهة, واجهات, interface, layout, تنسيق, css, html, react, dashboard, لوحة تحكم, web design, تصميم ويب, color, ألوان, palette, لوحة ألوان, typography, خطوط, font, animation, حركة, motion, accessibility, إمكانية وصول, mobile, responsive, متجاوب, design system, نظام تصميم, component, مكون, hero, landing, صفحة هبوط, page, screen, شاشة, button, زر, form, نموذج, modal, نافذة, card, بطاقة, polish, الصقل, redesign, إعادة تصميم, restructure, إعادة هيكلة, look better, شكل أحلى, شكل أجمل, more professional, أكثر احترافية, premium, مميز, beautiful, جميل, حلو, slop, سلوب, anti-pattern, نمط مضاد, سويلي شي حلو, اعمللي تصميم, ابغى تصميم, ابي تصميم, design me, build me a ui, make it pretty, makeover, شيك, شياكة, ع الموضة, modern, latest design, أحدث تصميم, sammimli, design pro max
---

# Impeccable Design — Bundled In-Box (Source: pbakaus/impeccable)

> **You MUST cite this skill any time the work touches pixels, layout, color, typography, motion, or any visual decision.**

## Why this skill exists

AI design output gets homogenized — same purple-to-blue gradients, same Inter font, same nested cards. This skill is the antidote. It encodes 27 deterministic anti-pattern rules + 12 LLM critique rules + 7 reference domains.

## The 7 reference domains (internalize all)

### 1. Typography
- Type systems with intentional modular scale (1.250 / 1.333 / golden)
- Font pairing: 1 display + 1 body, NEVER 3+ families on one screen
- OpenType features (real italics, true small caps, ligatures)
- Three weight ceiling: regular / medium / bold

### 2. Color & Contrast
- **Use OKLCH color space**, not hex (lightness perceptually uniform)
- **Tinted neutrals** — never pure `#000000` or `#808080`. Add 5% of the brand hue.
- WCAG AA minimum: 4.5:1 body text, 3:1 UI elements
- Dark mode strategy: invert luminance, preserve hue

### 3. Spatial Design
- Pick a base unit (4px or 8px). Everything is a multiple. **No `padding: 17px`.**
- Visual hierarchy via SIZE > WEIGHT > COLOR (color is for category, not importance)
- Eliminate "cards nested in cards in cards" — flatten where possible

### 4. Motion Design
- Respect `prefers-reduced-motion: reduce` always
- Easing curves: `cubic-bezier(0.4, 0, 0.2, 1)` (standard) or `cubic-bezier(0.16, 1, 0.3, 1)` (overshoot for microinteractions)
- **Never bounce** — feels 2014. Stagger child animations 50-80ms apart.
- Duration ceiling: 300ms for microinteractions, 500ms for transitions

### 5. Interaction Design
- Forms: visible labels (not just placeholders), clear focus states, inline validation
- Loading: skeleton screens > spinners
- Empty states: explain why empty + what to do next
- Errors: actionable ("Couldn't reach Salla — check token in Settings")

### 6. Responsive Design
- Mobile-first ALWAYS. Test at 375px before declaring done.
- Container queries > rigid breakpoints when supported
- Touch targets ≥ 44×44px

### 7. UX Writing
- Button labels: verbs (Save changes, not Submit)
- Error messages: explain + suggest fix, never "Something went wrong"
- Empty states: warm, not cold ("No customers yet — add your first" not "No data")

## The 23 commands (use as mental triggers)

When the owner asks for visual work, internally route to:
- **shape** — plan UX/UI BEFORE coding. Wireframe in words first.
- **craft** — full shape-then-build flow with visual iteration
- **critique** — UX review for hierarchy, clarity, emotional resonance
- **audit** — technical (a11y, performance, responsive)
- **polish** — final pass for shipping
- **harden** — error handling, i18n, edge cases
- **animate** — add purposeful motion
- **typeset** — fix font choices and hierarchy
- **layout** — fix spacing and visual rhythm
- **colorize** — strategic color introduction
- **clarify** — improve UX copy
- **adapt** — device-specific optimization
- **optimize** — performance pass
- **delight** — moments of joy (microinteractions)
- **bolder** — amplify designs that are too quiet
- **quieter** — tone down designs that are too loud
- **distill** — strip to essence
- **document** — generate design docs from code
- **extract** — pull components into design system
- **teach** — gather context to write PRODUCT.md / DESIGN.md
- **onboard** — first-run flows and activation
- **live** — visual iteration in browser
- **overdrive** — when "wow" is the brief

## The 27 anti-patterns (refuse to ship these)

### AI Slop Patterns (deterministic blocks)
1. **Overused fonts**: Arial, Times New Roman, system defaults without justification
2. **Gray text on colored backgrounds** (contrast fail)
3. **Pure black `#000000` or pure gray `#808080`** without tints
4. **Cards nested inside cards** (visual monotony)
5. **Bounce/elastic easing** (dated)
6. **Purple-to-blue gradients** (training-data slop)
7. **Cramped padding** + small touch targets
8. **Line length** problems (>80 char body text)
9. **Skipped heading hierarchy** (h1 → h3 with no h2)
10. **Dark glows** on light surfaces
11. **Side-tab borders** as the only nav affordance
12. **Unclear icon tiles** stacked above headings
13. **Emoji as primary icons** (use SVG: Heroicons / Lucide)
14. **Right-aligned form labels** (kills RTL flexibility)
15. **Modal-stuck wizards** (5 steps in one giant modal)
16. **Color as only differentiator** (red icon ALONE doesn't communicate "error")
17. **Magic-number paddings** (`13px 17px 9px`)
18. **Decorative drop shadows** on flat icons
19. **Walls of text** (break into cards/sections)
20. **Buttons that look like links + links that look like buttons**
21. **Auto-rotating carousels** (banned — accessibility + engagement disaster)
22. **More than 3 typeface families** on one page
23. **Glassmorphism on every card** (use sparingly — header only)
24. **Default Material/Bootstrap looks** (recognizable as templates)
25. **Heavy animations on first paint** (hurt LCP/INP)
26. **Tiny tap targets in navs** (<44px)
27. **Inconsistent spacing scale** (mixing 4px and 5px and 6px)

### LLM Critique Pass (12 contextual rules)
- Brand alignment (does this look like a fintech vs a wellness brand?)
- Density mismatch (is this dashboard too sparse or too crowded?)
- Hierarchy clarity (can a user find the most important thing in <2s?)
- Empty state quality
- Error state quality
- Loading state quality
- Mobile usability test
- Accessibility test (keyboard, contrast, labels)
- Internationalization (RTL flip, text expansion)
- Dark mode parity
- Motion respect (reduced-motion)
- Performance (LCP, INP, CLS)

## CLI for Pattern Detection (zero-API)

```bash
npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect --fast --json .
```

When auditing: run this first, fix the deterministic findings, then ask the agent for the LLM critique pass.

## Output discipline

When asked to design ANYTHING visual:
1. **Cite this skill first**: "🧰 سأستخدم مهارة `Impeccable Design` للرد."
2. **Lead with structure** — wireframe in words
3. **Reference tokens** — use Muassis design-tokens.css variables, not hex codes
4. **Show empty + loading + error states**, not just happy path
5. **Mobile breakpoint** mentioned explicitly
6. **Accessibility note** — tab order, aria labels, contrast confirmed
7. **Anti-pattern check** — confirm none of the 27 deterministic ones appear

## Apache 2.0 License
Source: https://github.com/pbakaus/impeccable — bundled in Muassis with attribution. Original by Paul Bakaus.
