Rtl design

Skill Baghlani/rtl-design/skills/rtl-design

RTL/Persian UI design skill for AI coding agents (Claude Code, Cursor, Codex) — correctness rules, Persian typography recipes, and a zero-dependency violation detector. Agent Skills standard.

Install

npx -y skills add Baghlani/rtl-design --skill rtl-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

12 days oldThe repository was created 12 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when designing, building, reviewing, or fixing any right-to-left (RTL) user interface — Persian/Farsi (فارسی), Arabic, Hebrew, Urdu — on web (React, Next.js, Vue, Tailwind, plain CSS) or Flutter, even if the user only says the app is Persian/Iranian without mentioning RTL. Covers layout direction and mirroring, which icons flip and which never do, bidirectional (bidi) text with LTR islands (URLs, emails, phone numbers, code), Persian vs Arabic-Indic vs Latin digits, Jalali (Shamsi) dates, Persian typography (font pairing, line-height, the letter-spacing trap, ZWNJ نیم‌فاصله), font licensing, logical CSS properties, form input direction, and long-text overflow. Also use when Persian/Arabic text renders wrong or "off", when localizing an LTR app to RTL, or to audit existing code for RTL violations with the bundled zero-dependency detector. Not for backend-only or non-UI tasks.

The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

6.5 KB, ~1.4k tokens by cl100k_base, as published. Nobody here has run it

RTL Design

Make RTL interfaces that are correct (direction, bidi, digits, calendar, Unicode) and beautiful (Persian-tuned typography and pairing recipes) — never a mirrored afterthought of an LTR design. Persian is the deep module; the direction layer applies to Arabic and Hebrew too.

Two failure modes to prevent: LTR habits leaking in (physical CSS, unflipped icons, Latin type metrics), and "technically RTL" slop (correct direction, cramped Latin line-height, one default font everywhere).

Core rules — always apply

Direction & layout

Set direction once at the root (<html dir="rtl" lang="fa"> / Flutter locale fa). Never fake RTL with text-align/float/reversed rows.
Write logical, not physical: margin-inline-start not margin-left, EdgeInsetsDirectional not EdgeInsets.only(left:), start/end not left/right. Physical values only for physically-anchored things (video controls, maps, code editors).
Mirror directional icons: chevrons, arrows, back/next, undo/redo, reply, send, pagination. Never mirror: play/pause, media seek/rewind, volume, phone, clocks, logos, checkmarks, search, refresh. Flip via transform: scaleX(-1) / matchTextDirection, not duplicate assets.

Text & data 4. Persian uses ی (U+06CC) and ک (U+06A9) — Arabic ي/ك in Persian text is a bug. Normalize at input boundaries. 5. Digits: Persian ۰–۹ in UI text; Latin digits for phone numbers, OTP/codes, card and technical IDs (as LTR islands); Arabic-Indic ٠–٩ never in Persian. 6. Dates for Persian users: Jalali calendar, Persian month names, Persian digits — «۵ مرداد ۱۴۰۵». Store ISO/Gregorian; convert at presentation. 7. Isolate LTR islands (emails, URLs, phones, code, Latin names) with dir="auto"/<bdi>/unicode-bidi: isolate — scrambled punctuation means a missing isolate. 8. Respect ZWNJ (نیم‌فاصله): می‌شود not «می شود»/«میشود». Preserve U+200C through storage, search, and truncation.

Typography (minimum — full taste layer in references/typography.md) 9. Persian body line-height 1.8–2.0 (Latin's 1.5 is cramped); headings 1.4. 10. Never letter-spacing on Persian — it tears the joined script and breaks PDF text layers. Zero out design-system defaults (Material 3 has them). 11. Never a single font at default weights everywhere: pick a pairing recipe (typography.md §3), stack-first with free fallbacks. Hierarchy comes from weight/size — Persian has no uppercase. 12. Test every constrained surface with real long Persian strings («استانداردسازی زیرساخت‌های بین‌المللی»), not «تست».

Routing — read on demand

Situation	Read
Building/reviewing web UI (CSS, React/Next, Tailwind, icons, bidi, forms, motion)	`references/web.md`
Flutter project (Directional widgets, icons, Jalali packages, TextField, testing)	`references/flutter.md`
Choosing fonts, type scale, pairing recipes, digits/ZWNJ detail, licensing, specimen page	`references/typography.md`

Audit mode — zero-token detector

For existing code, run the deterministic detector first (no LLM, no dependencies):

python3 scripts/detect.py <path>

JSON on stdout: findings with rule id, severity, file:line, snippet, and suggestion. Exit 0 = clean, 1 = findings, 2 = usage error. --format text for humans. Output is bounded (default 300 findings; counts always holds the full totals and truncated flags the cap) — on a huge violation count, fix by rule or directory using --rules.

It catches the mechanical violations (Arabic ي/ك, wrong digits, physical CSS/Flutter props, letter-spacing on Persian, missing/hardcoded dir, missing ZWNJ after می). Fix every error; review each warning in context (some have legit exceptions — the finding says which). Legit-by-design lines (e.g. digit/yeh normalization maps) get an inline rtl-ignore comment, or rtl-ignore-next on the line above. The detector is a floor, not coverage — always also review what no regex can see: gesture/drag math and nested direction islands (flutter.md §10, web.md §6), visual hierarchy, icon direction semantics, overflow behavior, recipe quality.

Coexistence with other design skills

This skill composes with general design skills (taste, structure, color, motion stay theirs). On conflict, RTL/Persian script needs win — general skills assume Latin script: reject their letter-spacing on headings, Latin line-height (1.4–1.5), and Latin font suggestions (Inter etc.) for Persian text; apply this skill's metrics, font recipes, and icon-mirroring rules instead.

Workflow

New UI: confirm target platform and language(s) → apply core rules from the first line of code (retrofitting RTL costs 10×) → pick a typography recipe by mood, don't default → load the platform reference for specifics → stress-test with long strings and mixed bidi content.
Localizing LTR → RTL: run the detector for the mechanical list → sweep icons against the mirror/never lists → replace physical props with logical → then re-design typography (metrics, not just fonts) — translation without Persian type metrics is where "technically RTL" slop comes from.
"Which font?": never answer with one font. Use the ladder + recipes in typography.md, respect licensing (free-first, commercial by name with official links only, never bundle commercial files), and offer a specimen page (typography.md §9) when the user wants to see options.

Gives 0 of the 12 instructions most css styling skills give in ~1.4k tokens

Counted across 586 of the 596 authors here whose files we hold, read 2026-08-06

avoid excessive centered layoutsin 55 of 586, across 12 files
bundle code into single HTML filein 54 of 586, across 14 files
Respect prefers-reduced-motion user settingsin 52 of 586, across 35 files
avoid purple gradientsin 51 of 586, across 11 files
avoid uniform rounded cornersin 51 of 586, across 11 files
avoid Inter fontin 51 of 586, across 11 files
edit generated files to develop artifactin 50 of 586, across 10 files
animate only transform and opacity propertiesin 43 of 586
Make touch targets at least 44x44 pixelsin 41 of 586, across 15 files
Ensure minimum color contrast of 4.5:1in 39 of 586, across 10 files
use tailwind cssin 39 of 586, across 24 files
Use SVG icons instead of emojisin 38 of 586, across 11 files

Said here and by no other author read

set direction once at root
use correct Persian letters and digits
store dates as ISO and convert to Jalali at presentation
isolate LTR text islands in bidirectional content
preserve ZWNJ characters through all data processing
use higher line-height for Persian body text

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.