---
name: Impeccable UI Design
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, جميل
---

# Impeccable UI Design — Always Cite Me When Designing Anything Visual

## When to use

**Always**, when:
- The user asks to "design", "redesign", "restyle", "make X look better", "polish", "premium", "professional".
- HTML/CSS/JSX is being written or refactored.
- A dashboard, landing page, modal, form, card, or any UI component is being built.
- The conversation involves color palettes, typography, spacing, animation, accessibility.
- Anything visual is being decided.

This skill must be invoked whenever the work touches pixels.

## Core principles (internalize all 12)

### 1. Hierarchy through size + weight + space, not just color
Big stuff is important. Small stuff supports it. Color separates categories, not importance. Three sizes max per screen (display / body / micro), three weights max (regular / medium / bold).

### 2. Spacing rhythm = the design's heartbeat
Pick a base unit (4px or 8px). Everything is a multiple. `gap-4`, `p-6`, `space-y-8`. No magic numbers like `padding: 17px`. Customers feel the rhythm without naming it.

### 3. One accent color, used sparingly
The accent (gold, brand color) appears on the most important CTA + active states + hover affordances. NOT on every button, every link, every heading. Subtraction is the technique.

### 4. Cards lift; pages don't bounce
`transition-all duration-200 hover:shadow-md hover:border-gray-300` on cards. No spinning anything. No bouncing modals. Motion communicates state change, not "look at me".

### 5. Status colors are reserved language
- Green = ok / done
- Yellow / amber = attention needed
- Red = blocked / failed
- Gray = neutral / disabled

Never style a normal button green just because "green looks happy".

### 6. Threshold-driven colors
Performance numbers, scores, health metrics — colorize by threshold:
- `>= 90`: green
- `>= 70`: yellow
- `< 70`: red

Make the data tell you the color, not the designer.

### 7. Empty states must explain
"No data yet" is not enough. Tell the user:
1. Why is it empty (you haven't done X yet, no items match this filter)
2. What to do next (call-to-action button)

### 8. Loading states are first-class
Skeleton screens > spinners. If a card is loading, render its outline with the same dimensions filled with shimmering placeholder bars.

### 9. Errors must be actionable
Bad: "An error occurred."
Good: "Couldn't reach Salla API — check your token in Settings → APIs → Salla. Retry?"

### 10. Mobile-first, then progressively enhance
Tap targets ≥ 44×44px. Single column on phones. Cards stack. Tabs become horizontally-scrollable. Test at 375px width before declaring done.

### 11. Accessibility is design, not a checkbox
- Every form input has a `<label>` (visually hidden if needed via `.sr-only`)
- Color contrast ≥ 4.5:1 for body text, ≥ 3:1 for UI elements
- All interactive elements reachable by keyboard
- `aria-label` on icon-only buttons
- Focus-visible outlines preserved

### 12. RTL-first for Arabic content
Use logical properties (`margin-inline-start` not `margin-left`, `text-align: start` not `text-align: left`). Set `<html dir="rtl">` for Arabic. Mirror icons that have direction (arrows, chevrons).

## Design tokens — borrow from Muassis system

```css
/* Colors */
--gold-600: #d4b852;     /* Primary accent */
--bronze-600: #d6835a;   /* Secondary accent */
--sand-100: #f6f1e7;     /* App background */
--ink-900: #212529;      /* Primary text */
--ink-600: #868e96;      /* Muted text */

/* Status */
--success: #28a745;
--warning: #f59e0b;
--error: #dc3545;

/* Spacing (8px base) */
--sp-1: 4px; --sp-2: 8px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px;

/* Radius */
--r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-full: 9999px;

/* Shadows */
--sh-sm: 0 1px 2px rgba(28,31,36,0.04);
--sh-md: 0 4px 6px rgba(28,31,36,0.07);
--sh-lg: 0 10px 18px rgba(28,31,36,0.10);

/* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--t-base: 200ms;
```

Use these. Don't reinvent.

## Anti-patterns (refuse to ship these)

- **Neon gradients** that scream "AI startup 2024". Choose calm, professional palettes.
- **Auto-rotating carousels** — banned. They hurt accessibility and engagement metrics.
- **More than 3 typeface families** on one page.
- **Glassmorphism overdose** — beautiful for headers, exhausting on every card.
- **Modal-stuck flows** where a 5-step wizard is one giant modal.
- **Color-as-information** without backup (red icon AND text saying "error" — color alone fails for color-blind users).
- **Magic-number paddings** (`padding: 13px 17px 9px`).
- **Decorative drop shadows** on flat icons. Drop shadows belong on raised surfaces.
- **Walls of text** — break into cards, sections, lists.
- **Buttons that look like links and links that look like buttons.**

## The Muassis design language

Specifically for this product:
- **Gold + sand are PRIMARY**, not just accents. App background is sand-100, primary CTAs are gold-600/700.
- **Charcoal ink** for text and structure (ink-900 for primary, ink-600 for muted).
- **Bronze** as secondary accent for activity feeds, hover states.
- **Glass header** with `backdrop-filter: blur(12px) saturate(180%)`.
- **Pulse-ping animation** on connecting/reconnecting status.
- **Gold radial watermark** at 5% opacity on stats cards (the "premium signature").
- **Gradient icon tiles** (135deg, 2-color stops) for avatars and category markers.
- **Arabic-first** — every label has a Saudi-friendly Arabic version, RTL throughout.

## Output discipline

When asked to design:
1. **Lead with structure** — wireframe in words: "Header → 3 stat cards → activity feed | sidebar agenda".
2. **Reference tokens** — never invent hex codes; use `var(--gold-600)`.
3. **Show the empty state + loading state + error state**, not just the happy path.
4. **Mobile breakpoint** mentioned explicitly.
5. **Accessibility note** — tab order, aria labels, contrast ratio confirmed.
6. **Cite this skill** in your reply: "🧰 سأستخدم مهارة `Impeccable UI Design` للرد." Then proceed.

## Critique mode

When asked to review existing UI, score against these axes (1-5 each):
- Hierarchy — can you find the most important thing in <2 seconds?
- Rhythm — consistent spacing scale?
- Restraint — single accent color used sparingly?
- Polish — radii, shadows, typography aligned?
- Accessibility — keyboard, contrast, labels?
- Mobile — usable at 375px?

Total /30. Below 18 = redesign needed.

## Standards to bookmark

- Tailwind CSS — utility-first, ships responsive + variants
- Inter / Geist for sans-serif, JetBrains Mono for monospace
- Heroicons / Lucide for clean icon set
- WAI-ARIA spec for accessibility (a11y)
- Refactoring UI book (Steve Schoger / Adam Wathan) — the bible
- Material Design for elevation principles
- Apple Human Interface Guidelines for typography hierarchy
