skills.rest
dvorkinguy
dvorkinguyCOMMUNITY
Explore all skills by this author →
GitHub

rtl-css

Replace physical CSS properties with logical equivalents for RTL compliance.

Updated Aug 27, 2026
Search Tags:#ui#frontend#css#tailwind#rtl#logical-properties#rtl-css
One-click install
npx skills add https://github.com/dvorkinguy/claude-skills-agents --skill rtl-css
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: rtl-css
Source: https://github.com/dvorkinguy/claude-skills-agents/tree/main/skills/rtl-css
Command: npx skills add https://github.com/dvorkinguy/claude-skills-agents --skill rtl-css

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

RTL CSS for Hebrew and Arabic. Use when building UI that needs RTL support, fixing RTL layout issues, or auditing CSS for RTL compliance.

Core Features & Use Cases

  • Audit RTL compliance: identify physical properties and replace with logical properties (padding-left → padding-inline-start, padding-right → padding-inline-end, etc.)
  • Property mapping guide: mapping table for paddings, margins, insets, text direction, and borders using logical properties
  • Tailwind compatibility: examples mapping to ps-/pe- and text-start/text-end
  • Icon flipping guidance: ensure directional icons flip correctly in RTL contexts
  • Audit command: run the included audit script to detect RTL violations

Quick Start

Run scripts/audit_rtl.sh to scan your codebase for RTL violations and update CSS to use logical properties. Follow the mapping guidance to replace physical properties with their logical equivalents.

Frequently Asked Questions about rtl-css

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

FAQPage Schema
How do I fix RTL layout issues in my CSS?▼

Fix RTL layout issues by replacing physical CSS properties with logical properties—change padding-left to padding-inline-start, margin-right to margin-inline-end, and similar mappings. This ensures your layout renders correctly in right-to-left languages like Hebrew and Arabic without separate RTL stylesheets.

Can I use logical properties with Tailwind CSS?▼

Yes, Tailwind supports logical properties through ps-* (padding-inline-start) and pe-* (padding-inline-end) classes, plus text-start and text-end for text alignment. This allows you to build RTL-compatible UIs directly in your markup without custom CSS.

How do I audit my codebase for RTL compliance?▼

Run the included audit script to scan your React, Next.js, or Tailwind codebase for physical CSS properties and RTL violations. The script identifies non-compliant properties and guides you through mapping them to their logical equivalents.

What's the best way to handle directional icons in RTL layouts?▼

Use icon flipping guidance to ensure directional icons (arrows, chevrons) flip automatically in RTL contexts. Apply locale-based dir handling and CSS transforms so icons render correctly without duplicating assets for each text direction.

Does this work with Next.js and React projects?▼

Yes, the Skill is designed for React and Next.js codebases. It scans your component styling, provides Tailwind-specific mappings, and supports modern frontend patterns including locale-based dir attributes for seamless RTL rendering.

Related Skills

Explore More Software Engineering Skills→
ProfPowellProfPowell
1

open-props

Import modular CSS custom properties for design systems.

Community
Basic
otto-poblyshotto-poblysh

internationalization-i18n

Implement i18next-based internationalization with translation catalogs, pluralization, and locale-aware formatting.

Community
Intermediate
oakossoakoss
14

localization-engineer

Implement framework-agnostic i18n and l10n patterns for multilingual applications.

Official
Advanced
Moshe-shipMoshe-ship
29

raqeeb

Detect and score RTL issues in HTML/CSS with remediation guidance.

Community
Intermediate