SkillsAdd

jamalmohafil/claude-skills

arabic-design

Make AI-generated designs render Arabic text correctly — clean, connected, professional.

First seen Jul 19, 2026

Installation

$ npx skills add jamalmohafil/claude-skills --skill arabic-design
View on skills.sh ↗ GitHub repository ↗

Summary

  • Make AI-generated designs render Arabic text correctly — clean, connected, professional.
  • Fixes the letter-spacing trap that breaks connected script, wrong font fallbacks, clipped diacritics, and RTL/bidi bugs in mixed Arabic+English text.
  • Use whenever generating or styling ANY Arabic text in HTML/CSS/React/UI — especially when Arabic "looks broken", letters overlap or disconnect, words render in the wrong order, or diacritics get clipped.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs
ux-writing-arabic Similar name
itady74/ux-writing-arabic

دليل شامل لكتابة تجربة المستخدم (UX Writing) والتصميم المحتوى العربي. Use when writing Arabic …

157 installs
arabic-presentations Similar name
sultanalsafran/agent-skills

Create, edit, repair, and validate Arabic-first or Arabic-English PowerPoint decks with native …

107 installs

Also in this package

Other skills from jamalmohafil/claude-skills.

npx skills add jamalmohafil/claude-skills
agent-starter-kit 100 security-review 9 claude-arabic 7

Browse all from jamalmohafil/claude-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 24
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 5,738 B
  • docs SUMMARY.md 467 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 179 installs

SKILL.md

Arabic Design — clean Arabic in AI-generated UI

Arabic is a cursive, connected script: letters join, and diacritics (ً ّ َ) sit above/below the baseline. Most AI-generated CSS is tuned for Latin type — and that's exactly what breaks Arabic. Apply these rules by default whenever the design contains Arabic; don't wait to be told.

Rule 1 — NEVER negative letter-spacing on Arabic (the #1 bug)

Latin design trends love tight tracking (letter-spacing: -0.02em). On Arabic, negative tracking overlaps the letter joins and crushes words into an unreadable blur. Positive tracking is just as wrong — it disconnects letters that must join.

/* ❌ WRONG — crushes connected letters into a blur */
h1 { letter-spacing: -1.5px; }        /* element contains Arabic */

/* ✅ RIGHT */
h1 { letter-spacing: normal; }        /* or 0 — always, for any element containing Arabic */
  • Any element containing Arabic (or mixed Arabic+Latin) → letter-spacing: normal. Full stop.
  • Negative/positive tracking is allowed only on pure-Latin/numeric elements (big stat numbers,

$99, VS, all-caps Latin labels).

Rule 2 — Use a real Arabic font (never Latin-font fallback)

A Latin font with no Arabic glyphs silently falls back to a system font — mismatched weight, broken look. Always declare an Arabic-capable font explicitly, with a full stack:

/* pick one that matches the design's mood: */
font-family: "Cairo", "Tajawal", "IBM Plex Sans Arabic", "Noto Kufi Arabic", sans-serif;      /* modern UI */
font-family: "Almarai", "Rubik", "Baloo Bhaijaan 2", sans-serif;                              /* rounded/friendly */
font-family: "Noto Naskh Arabic", "Amiri", serif;                                             /* editorial/classic */
  • Load the Arabic weights you actually use (400/700 at minimum).
  • Never apply font-style: italic to Arabic (fake oblique breaks the script) and never rely on

text-transform (Arabic has no case).

Rule 3 — Line-height must clear the diacritics

Bold display Arabic needs vertical room, or dots/diacritics collide with the line above.

Context Safe line-height
Display headline (large, bold) 1.3
Mid headline 1.35
Body / captions 1.5–1.7

If unsure, go looser. Clipped diacritics are an instant "looks broken" tell.

Rule 4 — Direction & bidi (the "words are reversed" family of bugs)

  • Set direction once at the root (<html dir="rtl"> for Arabic-first pages) — children inherit.

Don't sprinkle dir attributes on every element.

  • Use logical CSS properties so layout flips correctly: margin-inline-start,

padding-inline-end, text-align: start — instead of margin-left, text-align: left.

  • Wrap embedded Latin words/numbers inside Arabic text in an isolated span so the bidi

algorithm doesn't reorder them: ``css .ltr { display: inline-block; direction: ltr; } ` `html حدد أول <span class="ltr">MVP</span> قبل ما تبدأ ``

  • The direction: ltr parent leak (root cause of reversed word order): layout containers set to

direction: ltr for card/column order leak LTR into the Arabic text inside — so Marketplace مدمج renders as مدمج Marketplace. Fix: LTR only for layout order; every Arabic text block inside gets explicit direction: rtl.

  • The الـ + Latin-word trap: never place the Arabic definite-article prefix (الـ, بالـ,

للـ) immediately before an isolated Latin word — the detached letters jump to the wrong side. Drop the article (عبر CLI not عبر الـ CLI) or rephrase.

  • Flip directional icons (arrows) in RTL contexts; a "next" arrow points left in Arabic UI.

Rule 5 — Punctuation & line breaks

  • Use Arabic punctuation in Arabic sentences: ؟ not ?, ، not ,.
  • If a ? or ، floats to the wrong side, the cause is almost always a straddling Latin token —

wrap it in .ltr or rephrase so the sentence doesn't break mid-clause around it.

  • When splitting a headline across lines, each line must continue the sentence naturally — Arabic

readers read stacked lines as one flowing thought.

Rule 6 — Mobile legibility

Arabic letterforms are denser than Latin at the same px size. For social/mobile canvases (e.g. 1080px wide), keep body text ≥ ~36–40px and prefer heavier weights (600–800) for display text.

Pre-ship checklist

  1. No negative letter-spacing on any Arabic-containing selector:

``bash grep -nE "letter-spacing:\s*-" file.html ` Every hit must be pure-Latin/numeric. If it wraps Arabic → normal`.

  1. Every Arabic element has an explicit Arabic-capable font-family.
  2. Display Arabic has line-height ≥ 1.3; body ≥ 1.5.
  3. Embedded Latin words/numbers wrapped in .ltr; no الـ/بالـ/للـ directly before a Latin word:

``bash grep -noE "(الـ|بالـ|للـ) ?<?[A-Za-z]" file.html ``

  1. No direction: ltr ancestor leaking into Arabic text blocks.
  2. Render and look. Screenshot the result and inspect: letters connected (not crushed, not

separated), diacritics not clipped, punctuation on the correct side, word order correct.