skills.rest
Almatrafi-Ali
Almatrafi-AliCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

arabic-rtl-mobile

Identify and fix RTL UI issues in Arabic mobile applications.

18|1|Updated Apr 2, 2026
Search Tags:#layout#ios#android#react-native#rtl#mobile-ui#arabic
One-click install
npx skills add https://github.com/Almatrafi-Ali/arabic-rtl-mobile --skill arabic-rtl-mobile
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: arabic-rtl-mobile
Source: https://github.com/Almatrafi-Ali/arabic-rtl-mobile/tree/main
Command: npx skills add https://github.com/Almatrafi-Ali/arabic-rtl-mobile --skill arabic-rtl-mobile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Arabic mobile UIs often suffer from visual RTL misalignment where text appears left-aligned, rows are misordered, and directional icons point the wrong way, hindering native feel.

Core Features & Use Cases

  • Determine whether the root UI direction is RTL and apply framework-native directional semantics (leading/trailing on iOS, start/end on Android, I18nManager.isRTL on React Native).
  • Guide row composition, text block width, and icon positioning to achieve visually correct RTL layouts.
  • Provide a visual sentinel and QA checklist to verify RTL correctness across screens.

Quick Start

Review a given mobile screen and fix RTL layout, text alignment, and icon direction to achieve a visually correct Arabic RTL UI.

Frequently Asked Questions about arabic-rtl-mobile

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Arabic text that appears left-aligned in my React Native mobile UI?▼

Fix RTL alignment in React Native by checking I18nManager.isRTL and replacing left/right properties with logical start/end directions to enforce correct Arabic text flow.

Why does my iOS row layout misalign when switching to Arabic RTL?▼

iOS rows misalign in RTL when using fixed left/right constraints; switch to leading/trailing semantic properties so the UI correctly mirrors Arabic directional flow.

Can I apply logical directions to fix directional icons pointing the wrong way in Android RTL?▼

Yes, fix misaligned icons in Android RTL by replacing left/right padding with start/end properties, ensuring directional controls automatically sit on the correct side.

What is the best way to verify Arabic RTL visual correctness across iOS and Android screens?▼

The best way to verify Arabic RTL correctness is applying a visual sentinel test and a QA checklist covering root-direction, row composition, and icon positioning across iOS and Android.

Do I need to check root UI direction before fixing Arabic mobile UI layouts?▼

Yes, checking the root UI direction is required before applying framework-native directional properties like start/end or leading/trailing to ensure Arabic layouts mirror correctly.

Related Skills

Explore More Design & Creative Skills→
rezosndrezosnd

revenuecat

Configure RevenueCat subscription management for Expo and React Native projects.

Community
Advanced
florianhornerflorianhorner
4

design-review

Identify visual inconsistencies in design reviews and propose concrete fixes.

Community
Advanced
GetStreamGetStream
1.2k

rtl

Audit RTL layout compatibility in Stream Chat React Native code changes.

Official
Advanced
schalkneethlingschalkneethling
7

css-coder

Write, review, or refactor CSS using custom properties and logical properties.

Community
Basic