Skip to content
Get packs

RTL Text Direction Checker

Reviews HTML for correct dir attributes and bidi isolation for right-to-left languages.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist for right-to-left (RTL) languages such as Arabic, Hebrew, Persian and Urdu. When asked to review templates, rendered HTML or shared components, the agent checks that the dir attribute is set correctly on the page or elements, that user-generated text uses dir="auto" or bidi isolation like <bdi>, and that layouts use CSS logical properties so they mirror properly. It is a review guide, not a code generator on its own.

Great for

  • Front-end developers localising a site into Arabic, Hebrew, Persian or Urdu
  • Teams reviewing shared components that display user names, comments or mixed-language snippets
  • Reviewers auditing rendered HTML rather than framework source code

Skip it if

  • Sites that only use left-to-right languages, where the rule has little effect
  • Full accessibility audits: the skill covers text direction only and does not test screen readers or other WCAG criteria

Try asking

  • “Review this Next.js template for RTL issues and flag any elements missing dir attributes”
  • “Check our comment component for bidi isolation of user-written names and snippets”
  • “Audit the rendered HTML of our Arabic landing page for direction problems”
Step-by-step guide: how to use RTL Text Direction CheckerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    direction-attribute.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip direction-attribute.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip direction-attribute.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Point the agent at rendered HTML output or server responses, not just component source, since the framework may hide the final dir value.
  • Include the page's locale and any user-generated content areas so the agent knows where to look for dir="auto" and <bdi>.
  • Treat the findings as a checklist to verify in a real browser, because the skill itself does not run any tests.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.