i18n-and-rtl

Translate physical CSS to logical CSS for RTL and i18n support.

3|Updated Mar 11, 2026

Search Tags:#localization #i18n #rtl #logical-css #css-mapping #directionality #rtl-mapper

Ready to run

npx skills add https://github.com/mkatogui/universal-design-system --skill i18n-and-rtl

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: i18n-and-rtl
Source: https://github.com/mkatogui/universal-design-system/tree/main/plugins/universal-design-system/skills/i18n-and-rtl
Command: npx skills add https://github.com/mkatogui/universal-design-system --skill i18n-and-rtl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate physical CSS to logical CSS and enable RTL and i18n support for UDS-based UI layouts.

Core Features & Use Cases

Physical → logical mapping data and a direction-aware approach to locale-aware styling.
RTL mapper script: map_all to convert CSS to logical properties and support for locale expansion.
Direction-sensitive tooling: provides guidance for RTL/LTR in multilingual interfaces and dynamic UI.

Quick Start

Provide RTL support by enabling dir="rtl" on the root and run the RTL mapper to convert CSS to logical properties.

Frequently Asked Questions about i18n-and-rtl

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

FAQPage Schema

How do I convert physical CSS to logical CSS for RTL support?▼

You can convert physical CSS to logical CSS by running an RTL mapper script with the map_all command, which translates existing physical properties into direction-aware logical properties to support RTL layouts.

What is logical CSS mapping and when do I need it for i18n?▼

Logical CSS mapping translates physical properties like margin-left into direction-aware properties like margin-inline-start, which you need when building multilingual interfaces that require dynamic directionality switching for internationalization.

How do I enable RTL directionality in a UDS-based UI layout?▼

To enable RTL directionality in a UDS-based UI layout, you set dir="rtl" on the root element and run the RTL mapper to convert your CSS to logical properties, ensuring the layout adapts safely to locale-aware text expansion.

Does logical CSS mapping handle locale-aware text expansion in multilingual interfaces?▼

Logical CSS mapping supports locale-aware text expansion by providing direction-sensitive tooling and guidance for RTL and LTR multilingual interfaces, ensuring dynamic UI layouts render consistently across different locales.

What is the best way to support both RTL and LTR directionality without rewriting CSS entirely?▼

The best way to support both directions without rewriting CSS entirely is using physical to logical mapping data with an RTL mapper script, which automatically converts direction-aware properties for safe rendering across multilingual interfaces.

Why does my CSS layout break when switching to RTL in a multilingual interface?▼

CSS layouts break in RTL when physical properties are hardcoded, but translating physical CSS to logical CSS with an RTL mapper script fixes directionality issues and ensures consistent multilingual rendering across dynamic UI layouts.