css-i18nlisted

Audit and convert CSS to use logical properties for RTL/bidirectional layout support. Use when the user asks to "make CSS RTL-safe", "use logical properties", "replace left/right with start/end", "audit CSS for i18n", "CSS internationalization", "fix CSS for RTL", "convert to logical properties", or when setting up any project that targets RTL locales (Arabic, Hebrew, Persian, Urdu). Works with Tailwind, CSS Modules, vanilla CSS, CSS-in-JS, and inline styles. Library-agnostic — works with any i18n setup.
globalize-now/globalize-skills · ★ 3 · Web & Frontend · score 67

Install: claude install-skill globalize-now/globalize-skills

# CSS Internationalization Convert physical CSS properties (`left`, `right`, `margin-left`) to logical equivalents (`inset-inline-start`, `margin-inline-start`) so layouts flip automatically in RTL contexts. **Why this matters:** Physical properties are anchored to the viewport, not the text direction. A `margin-left: 16px` stays on the left even when `dir="rtl"` — breaking the visual flow for Arabic, Hebrew, and other RTL scripts. Logical properties follow the text direction automatically. --- ## Step 1: Detect Styling Approach Determine how the project writes CSS. This decides which patterns to scan for and which reference file to follow. Check in order: 1. **Tailwind CSS** — `tailwind.config.*` exists, or `@tailwind` / `@import "tailwindcss"` appears in CSS files. See `references/tailwind.md`. 2. **CSS Modules** — files matching `*.module.css` or `*.module.scss`. See `references/css-modules-and-vanilla.md`. 3. **CSS-in-JS** — imports from `styled-components`, `@emotion/styled`, `@emotion/css`, `stitches`, `vanilla-extract`. Follow the same property mappings as vanilla CSS, but in camelCase (see Step 2 inline styles section). 4. **Vanilla CSS** — plain `.css` or `.scss` files. See `references/css-modules-and-vanilla.md`. 5. **Inline styles** — `style={{ marginLeft: ... }}` in JSX/TSX. Follow camelCase mappings in Step 2. Projects often use multiple approaches. Scan for all that apply. --- ## Step 2: Scan and Convert Work file-by-file. For each file, find physical