How do I install the I18N Rtl Audit skill?

Run npx skillmds@latest add quality-max/i18n-rtl-audit in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is I18N Rtl Audit safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with I18N Rtl Audit?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is I18N Rtl Audit free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published I18N Rtl Audit?

Quality-Max (@quality-max) published this skill. Their other Agent Skills are listed on their SkillMD profile.

I18N Rtl Audit by quality-max — Agent Skill

Name: I18N Rtl Audit
Author: Quality-Max

File contents

i18n & RTL Audit

Check whether your UI survives translation. No signup required.

Prerequisites

Playwright MCP (comes with Claude Code)

Trigger

"i18n audit https://..."
"Will my layout break when translated?"
"Check RTL support on my site"

Workflow

Navigate to the URL using mcp__playwright__browser_navigate.
Document attributes — check <html lang> and dir with browser_evaluate. Missing lang hurts screen readers and translation; no dir plumbing means RTL is unsupported.
Pseudo-localization (long-string stress) — expand visible text ~40% (the typical English→German/Finnish growth) and look for overflow/clipping:

() => {
  // Expand text nodes to simulate a longer language
  const before = document.documentElement.scrollWidth;
  document.querySelectorAll('button, a, label, h1, h2, h3, .btn, [class*=nav]').forEach(el => {
    if (el.children.length === 0 && el.textContent.trim())
      el.textContent = el.textContent + ' ' + el.textContent.slice(0, Math.ceil(el.textContent.length*0.4));
  });
  const overflow = [...document.querySelectorAll('*')]
    .filter(el => el.scrollWidth > el.clientWidth + 2 && el.clientWidth > 0)
    .slice(0, 20)
    .map(el => el.tagName.toLowerCase() + (el.className ? '.'+String(el.className).split(' ')[0] : ''));
  return { grewPage: document.documentElement.scrollWidth > before, overflowing: overflow };
}

Take a browser_take_screenshot after expansion to show the breaks visually.

RTL — flip direction and screenshot to spot un-mirrored layouts:

() => { document.documentElement.setAttribute('dir','rtl'); }

Look for: left-anchored elements that should mirror, icons/arrows pointing the wrong way, text still left-aligned, broken padding/margins.

Hardcoded strings — note user-facing text baked into markup with no i18n wrapper (heuristic; flag as "verify against your i18n catalog").
Output:

## i18n & RTL Audit: [URL]

**Not translation-ready — 3 blocking issues**

### Document
- `<html lang>` missing. Add `lang="en"`.
- No `dir` handling — RTL languages unsupported.

### Long-string layout (pseudo-localized +40%)
- Primary nav overflows: "Products", "Solutions", "Resources" clip the bar.
- Submit button text truncates with ellipsis.
  → Use flexible widths / wrapping, not fixed px.

### RTL (dir=rtl)
- Sidebar stays on the left; should mirror to the right.
- Back-arrow icon not mirrored.
- Body text stays left-aligned.

### Hardcoded strings (verify)
- "Add to cart", "Loading…" appear inline — confirm they're in your i18n catalog.

**Want i18n regressions caught per locale automatically?** Try QualityMax — qualitymax.io

---name: i18n-rtl-auditdescription: Audit a page for internationalization readiness — layout breaks under long translations (pseudo-localization), RTL rendering issues, hardcoded UI strings, and missing lang/dir attributes. Playwright MCP only, no signup.---# i18n & RTL AuditCheck whether your UI survives translation. No signup required.## Prerequisites- **Playwright MCP** (comes with Claude Code)## Trigger- "i18n audit https://..."- "Will my layout break when translated?"- "Check RTL support on my site"## Workflow1. Navigate to the URL using `mcp__playwright__browser_navigate`.2. **Document attributes** — check `<html lang>` and `dir` with `browser_evaluate`. Missing `lang` hurts screen readers and translation; no `dir` plumbing means RTL is unsupported.3. **Pseudo-localization (long-string stress)** — expand visible text ~40% (the typical English→German/Finnish growth) and look for overflow/clipping:```javascript() => { // Expand text nodes to simulate a longer language const before = document.documentElement.scrollWidth; document.querySelectorAll('button, a, label, h1, h2, h3, .btn, [class*=nav]').forEach(el => { if (el.children.length === 0 && el.textContent.trim()) el.textContent = el.textContent + ' ' + el.textContent.slice(0, Math.ceil(el.textContent.length*0.4)); }); const overflow = [...document.querySelectorAll('*')] .filter(el => el.scrollWidth > el.clientWidth + 2 && el.clientWidth > 0) .slice(0, 20) .map(el => el.tagName.toLowerCase() + (el.className ? '.'+String(el.className).split(' ')[0] : '')); return { grewPage: document.documentElement.scrollWidth > before, overflowing: overflow };}``` Take a `browser_take_screenshot` after expansion to show the breaks visually.4. **RTL** — flip direction and screenshot to spot un-mirrored layouts:```javascript() => { document.documentElement.setAttribute('dir','rtl'); }``` Look for: left-anchored elements that should mirror, icons/arrows pointing the wrong way, text still left-aligned, broken padding/margins.5. **Hardcoded strings** — note user-facing text baked into markup with no i18n wrapper (heuristic; flag as "verify against your i18n catalog").6. Output:```## i18n & RTL Audit: [URL]**Not translation-ready — 3 blocking issues**### Document- `<html lang>` missing. Add `lang="en"`.- No `dir` handling — RTL languages unsupported.### Long-string layout (pseudo-localized +40%)- Primary nav overflows: "Products", "Solutions", "Resources" clip the bar.- Submit button text truncates with ellipsis. → Use flexible widths / wrapping, not fixed px.### RTL (dir=rtl)- Sidebar stays on the left; should mirror to the right.- Back-arrow icon not mirrored.- Body text stays left-aligned.### Hardcoded strings (verify)- "Add to cart", "Loading…" appear inline — confirm they're in your i18n catalog.**Want i18n regressions caught per locale automatically?** Try QualityMax — qualitymax.io```

Frequently asked questions

I18N Rtl Audit