# mcp-claude-designer-arabic

> **Claude-level Arabic & RTL UI/UX design suite**
> Arabic typography hardening · BiDi logical CSS engine · Cultural palettes · Anti-AI-slop auditor · MCP server tools

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
[![NPM Version](https://img.shields.io/npm/v/mcp-claude-designer-arabic)](https://www.npmjs.com/package/mcp-claude-designer-arabic)
[![Open Design Compatible](https://img.shields.io/badge/Open%20Design-Compatible-blue)](https://opendesign.dev)
[![GitHub](https://img.shields.io/badge/GitHub-MarwanDevSpace-black?logo=github)](https://github.com/MarwanDevSpace/mcp-claude-designer-arabic)

---

## What This Is

`mcp-claude-designer-arabic` is a production-ready Arabic UI/UX design system built around two layers:

1. **SDK** (`npm install mcp-claude-designer-arabic`) — TypeScript library with Arabic font stacks, curated palettes, RTL logical CSS converter, and typography validator.
2. **MCP Server** (`npm install mcp-claude-designer-arabic-server`) — Model Context Protocol server with 7 tools for AI-assisted Arabic design workflows.

Built to Open Design standards with an active `craft/` layer and 4 Arabic `design-systems/`.

---

## MCP Tools (7 total)

| Tool | Description |
|---|---|
| `get_arabic_design_tokens` | Full font stacks, color palettes, spacing scales, and RTL layout rules |
| `generate_rtl_component` | Production-ready RTL HTML/CSS components: Navbar, Hero, Stat Card, Form, Table |
| `validate_arabic_typography` | Audits CSS/HTML for letter-spacing, line-height, dir="rtl", physical CSS bugs |
| `convert_ltr_to_rtl` | Transforms physical CSS to BiDi logical properties (margin-left → margin-inline-start) |
| `get_craft_rules` | Returns authoritative Arabic craft rules: RTL/BiDi, typography, color, animation, a11y |
| `generate_arabic_design_system` | Generates full DESIGN.md + CSS token set for any Arabic product category |
| `audit_arabic_anti_slop` | Checks for the 7 Arabic AI-slop cardinal sins + soft tells with scored report |

---

## Craft Rules

Six authoritative rule files in `craft/`:

- [`arabic-rtl-and-bidi.md`](craft/arabic-rtl-and-bidi.md) — Full Unicode UAX #9 BiDi spec, logical CSS table, mirror rules, forms in RTL
- [`arabic-typography.md`](craft/arabic-typography.md) — Rule Zero (letter-spacing prohibition), harakat line-height, font stack system
- [`arabic-anti-ai-slop.md`](craft/arabic-anti-ai-slop.md) — 7 cardinal sins, soft tells, soul-without-slop guidance
- [`arabic-color.md`](craft/arabic-color.md) — 4 cultural palettes, WCAG contrast, glassmorphism rules, dark theme
- [`arabic-animation.md`](craft/arabic-animation.md) — RTL-aware slide directions, duration thresholds, prefers-reduced-motion
- [`arabic-accessibility.md`](craft/arabic-accessibility.md) — WCAG 2.2 AA, Arabic screen reader support, RTL keyboard navigation

---

## Design Systems

Four production Arabic design systems in `design-systems/`, each with a full `DESIGN.md`:

| System | File | Best For |
|---|---|---|
| Oasis Emerald (زمرد الواحة) | [`design-systems/oasis-emerald/`](design-systems/oasis-emerald/DESIGN.md) | SaaS, fintech, Islamic finance |
| Lapis Lazuli (لازورد ملكي) | [`design-systems/lapis-lazuli/`](design-systems/lapis-lazuli/DESIGN.md) | Government, banking, enterprise |
| Desert Sunset (غروب الصحراء) | [`design-systems/desert-sunset/`](design-systems/desert-sunset/DESIGN.md) | Consumer, hospitality, food |
| Royal Obsidian (السبج والذهب) | [`design-systems/royal-obsidian/`](design-systems/royal-obsidian/DESIGN.md) | Luxury, premium, VIP |

---

## Quick Start

### SDK

```bash
npm install mcp-claude-designer-arabic
```

```typescript
import {
  ARABIC_FONT_STACKS,
  ARABIC_COLOR_PALETTES,
  validateArabicCss,
  convertCssToRtlLogical,
  getArabicFontSnippet,
  getPaletteCssVariables
} from 'mcp-claude-designer-arabic';

// Validate Arabic CSS
const result = validateArabicCss(`
  body { letter-spacing: 2px; line-height: 1.2; text-align: left; }
`);
console.log(result.score); // 35 — multiple violations flagged

// Convert LTR to RTL logical properties
const converted = convertCssToRtlLogical(`
  .box { margin-left: 20px; padding-right: 10px; }
`);
// → .box { margin-inline-start: 20px; padding-inline-end: 10px; }

// Get CSS variables for a palette
console.log(getPaletteCssVariables('oasisEmerald'));
```

### MCP Server

```bash
npm install -g mcp-claude-designer-arabic-server
```

**Claude Desktop / Cursor / Windsurf `mcp.json`:**

```json
{
  "mcpServers": {
    "claude-designer-arabic": {
      "command": "mcp-claude-designer-arabic"
    }
  }
}
```

**Or run directly:**

```bash
npx mcp-claude-designer-arabic-server
```

---

## Agentic Skill

This package ships a ready-to-use agentic skill at `.agents/skills/claude-designer-arabic/SKILL.md`.

**Auto-triggers on:**
- "arabic design", "rtl design", "arabic ui"
- "واجهة عربية", "تصميم عربي"
- "arabic typography", "convert ltr to rtl", "arabic dashboard"

**Craft rules injected automatically:**
`arabic-rtl-and-bidi`, `arabic-typography`, `arabic-anti-ai-slop`, `arabic-color`, `arabic-animation`, `arabic-accessibility`

---

## Arabic Typography — Rule Zero

**Never apply positive `letter-spacing` to Arabic text.** Arabic is cursive — positive tracking physically severs the joining strokes (kashida) between glyphs.

```css
/* ✓ Correct */
[lang="ar"] { letter-spacing: 0; }

/* ✗ Fatal — destroys Arabic rendering */
[lang="ar"] { letter-spacing: 1px; }
```

**Line-height for harakat:**

| Context | Minimum |
|---|---|
| Arabic body (15–18px) | `1.6`–`1.8` |
| Arabic heading (≥32px) | `1.3` |

---

## Anti-AI-Slop Auditor

The `audit_arabic_anti_slop` tool checks for 7 cardinal sins:

1. Default Tailwind indigo (`#6366f1`) as accent
2. Purple-to-blue hero gradient
3. Emoji as feature icons in Arabic headings
4. Missing `dir="rtl"` on the root element
5. Positive `letter-spacing` on Arabic text
6. Latin Lorem ipsum as Arabic placeholder
7. `text-align: justify` on Arabic paragraphs

---

## Examples

- [`examples/rtl-dashboard.html`](examples/rtl-dashboard.html) — Full Arabic SaaS dashboard (Readex Pro + Oasis Emerald)
- [`examples/arabic-landing-page.html`](examples/arabic-landing-page.html) — Modern Arabic landing page (Kufam + Royal Obsidian)

---

## Open Design Integration

Registered in the Open Design plugin ecosystem via `glama.json` and `plugins/open-design/arabic-designer/`.

Compatible with Open Design's `craft.requires` injection protocol — add to any Open Design skill:

```yaml
od:
  craft:
    requires:
      - arabic-rtl-and-bidi
      - arabic-typography
      - arabic-anti-ai-slop
```

---

## License

MIT © [MarwanDevSpace](https://github.com/MarwanDevSpace)