RTL & Arabic Web UI Builder
Build, convert and audit right-to-left Arabic web UIs: logical CSS, Arabic fonts, bidi text, forms, icons and Intl formatting.
$7.99
Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsRTL & Arabic Web UI Builder
Example session with this skill installed
Our product card looks wrong in Arabic: the badge is on the wrong side and the arrow points backwards. React + plain CSS.
- Read your context and instructions
- Compiled the rtl & arabic
Diagnosis
The badge uses right: 12px, the text uses text-align: left, and the arrow icon has no mirroring rule.
Before
.card { text-align: left; padding-left: 16px; }
.badge { position: absolute; top: 12px; right: 12px; }
.card-link .arrow { margin-left: 8px; }
After
.card { text-align: start; padding-inline-start: 16px; }
.badge { position: absolute; top: 12px; inset-inline-end: 12px; }
.card-link .arrow { margin-inline-start: 8px; }
[dir="rtl"] .card-link .arrow { transform: scaleX(-1); }
Markup
<html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'}>
Typography fix
Remove letter-spacing: 0.04em from .card-title or scope it to Latin text, because it breaks Arabic letter joining. Add an Arabic-capable font to the stack.
Browser test list
Check the card with dir="rtl", with a long and a short Arabic title, with an English product name inside the Arabic title (wrap it in <bdi>), and with keyboard focus on the link. Confirm the price digit style matches the rest of the page.
Next steps
Ask for an audit of the whole stylesheet, a Tailwind version of this fix, or an Arabic font stack for your brand.
Connects securely to your tools. The creator never sees your data.
About this skill
Arabic and RTL interfaces break in predictable ways: arrows point the wrong way, badges sit on the wrong side, letter-spacing destroys Arabic joining, and numbers and dates format inconsistently. RTL & Arabic Web UI Builder fixes these at the root instead of piling on [dir=rtl] overrides.
Four modes
- Build: new pages and components with correct
lang,dir, logical properties and Arabic typography from the start. - Convert: turn existing LTR CSS into logical properties, with before-and-after for each pattern.
- Audit: search a codebase for RTL bugs and get a ranked fix list (broken layout, misaligned content, typography and formatting, cosmetic).
- Typography: font stacks, sizes and line-height tuned for Arabic.
What is inside
- Logical CSS cheatsheet, including corner radii, transforms and the
--dirvariable pattern - Foundation guide for plain HTML, Tailwind and Next.js, including bidi handling with
<bdi>anddir="auto" - Arabic font guidance and rules such as never using
letter-spacingon Arabic - Component patterns for navigation, forms, tables, icons (what to mirror and what not), carousels, charts and animations
- Intl formatting for numbers, dates, currency, plurals and sorting, with outputs tested in Node
- A 13-pattern audit checklist and a worked conversion example
Honest scope
It writes and reviews code and advice. It does not run your app. Browser support varies, so it tells you what to verify in the browsers you support and gives you a browser test list at the end.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
Fresh listing
Recently published to Agensi
Money-back guarantee
Doesn't do what its page promises? You get your money back.
Trust & safety
Security scanned
Verified clean 9 days ago
- Passed all security checks, Safe to install