Skip to content
Get packs

Guide · Agent skill

How to use the RTL Text Direction Checker agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

The direction-attribute skill is a review checklist that an AI agent follows when you ask it to check templates, rendered HTML or shared components for right-to-left (RTL) text. It targets languages such as Arabic, Hebrew, Persian and Urdu, and mixed-direction content like user names or comments. After this guide you will know what the skill does, how to add it to your agent, and how to phrase requests so it runs.

RTL Text Direction Checkerthedaviddias/Front-End-Checklist · MIT

Quick start

  1. 1Download the ZIP. Get the skill ZIP from the skill's page and unzip it.
  2. 2Place the folder. Move the unzipped folder into ~/.claude/skills/ or a project's .claude/skills/ directory.
  3. 3Or upload it. Alternatively, upload the skill in the Claude apps under Settings → Capabilities → Skills.
  4. 4Ask a matching request. Ask the agent to review a template, rendered HTML or shared component for RTL direction.
  5. 5Review the findings. Check the elements and attributes the agent flags, and confirm each against your rendered markup.

What is an agent skill and what does this one do?

An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. This one is based on the SKILL.md file and a reference guide, references/rule.md.

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 such as <bdi>, and that layouts use CSS logical properties so they mirror properly. It is a review guide, not a code generator on its own.

Install the skill

Download the ZIP from the skill's page and unzip it. Then place the folder in one of these locations: ~/.claude/skills/ for your personal use, or .claude/skills/ inside a project so it applies to that project only.

You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.

  • Personal: ~/.claude/skills/
  • Project: .claude/skills/ in your project folder
  • Claude apps: Settings → Capabilities → Skills (upload)

Trigger the skill with natural requests

The skill loads when your request matches its description, so you can ask in plain language. Name the thing you want reviewed: a template, rendered HTML, or a shared component. Mention RTL languages or user-generated text so the agent knows the context.

  • Review this Arabic template and tell me where the dir attribute is wrong.
  • Check our shared comment component for user names that need dir="auto" or <bdi>.
  • Audit the rendered HTML of the Hebrew homepage for direction problems.

What the agent checks

The skill's quick reference covers the main rules. The agent looks at the html element and specific elements for dir values of ltr, rtl or auto. It checks inline user content where names, handles or snippets mix writing directions. It also looks for layouts that use CSS logical properties such as inline-start and inline-end, and asks for navigation, icons and layouts to be tested for mirroring.

  • Set dir="rtl" on <html> for RTL languages
  • Use dir="auto" for user-generated content
  • Use bidi isolation such as <bdi> for inline mixed-direction content
  • Combine with CSS logical properties (inline-start, inline-end)
  • Test UI mirroring for navigation, icons and layouts
<html lang="ar" dir="rtl">

Safety notes: scripts and network

According to the skill's listing, it does not run scripts and does not use the network. It requires nothing beyond the files in the skill folder. Its files are references/rule.md and SKILL.md.

Tips and limits

Give the agent rendered HTML when you can, because the skill asks for the final browser-facing markup rather than only framework source. The skill covers text direction only. It does not test screen readers or other WCAG criteria, so use a full accessibility audit for those.

  • Paste or point to rendered output, not just component source
  • Check inline user content, not only page-level locale wrappers
  • Do not expect it to help with sites that only use left-to-right languages

What people use it for

  • Localising a site into Arabic, Hebrew, Persian or Urdu and checking the html dir attribute.
  • Reviewing a shared comment or profile component that shows user names in mixed languages.
  • Auditing rendered HTML to find elements missing dir="auto" or <bdi>.
  • Checking that layouts use CSS logical properties so navigation mirrors correctly.

Frequently asked questions

How do I install the direction-attribute skill?

Download the ZIP from the skill's page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.

Does this skill require anything else to run?

The listing says it requires nothing and does not run scripts or use the network. It works from its SKILL.md and references/rule.md files.

Is the direction-attribute skill free?

It is released under the MIT licence, as listed on the skill's page. Check the licence file in the repository for the full terms.

When should I use dir="auto" instead of dir="rtl"?

The skill suggests dir="rtl" on the html element for RTL languages and dir="auto" for user-generated content, where the direction is not known in advance. Use <bdi> for mixed-direction inline snippets.

Does this skill check full accessibility?

No. The skill covers text direction only and does not test screen readers or other WCAG criteria. Use a dedicated accessibility audit for those.

Who is this skill not for?

Sites that only use left-to-right languages, where the rule has little effect, and anyone needing a full accessibility audit.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill is useful for front-end developers localising into Arabic, Hebrew, Persian or Urdu, and for teams reviewing shared components that show user names or mixed-language text. Skip it if your site only uses left-to-right languages or if you need a full accessibility audit, since it covers text direction only.

Download the skill