Skills

arabic-ui: Help AI Coding Assistants Write Idiomatic Arabic UI Copy and RTL Code

To write idiomatic Arabic UI copy and solid RTL layouts in your web app, this Agent Skill is best handed to AI coding assistants like Claude Code or Cursor — but its scope is limited to UI microcopy and RTL engineering, and compatibility with general agents is not officially confirmed. Before installing, verify that your assistant can load skills.

Official source · JKc66/arabic-ui

Install

npx skills add jkc66/arabic-ui

Who it's for

  • Engineers or product teams building web applications for Arabic-speaking users with AI coding assistants (Claude Code, Antigravity, Cursor, Copilot).
  • Scenarios that require translating, proofreading, or writing Arabic UI microcopy (buttons, alerts, dashboards).
  • Frontend tasks involving RTL layouts, logical CSS, or bidirectional text isolation, as well as scenarios dealing with Arabic plural counters and number formats.
  • When it's not suitable: this is a UI copywriting and RTL engineering skill. If your task is general Arabic translation, document writing, or coding work unrelated to UI/RTL, the evidence does not state that it applies — confirm first.
  • Prerequisite: you need an AI coding assistant already installed that can load Agent Skills. The four assistants listed above are officially named, but it is not stated whether support is limited to them; whether other agents work is unknown.

First attempt in 3 minutes

The recommended main path is installation via the skills CLI:

npx skills add jkc66/arabic-ui

The official documentation also lists an equivalent command, bunx skills add jkc66/arabic-ui, as well as a manual approach, git clone https://github.com/JKc66/arabic-ui.git ~/.agents/skills/arabic-ui (global location; for project-level use, place it in .agents/skills/arabic-ui). These are alternatives only; use the CLI command above as the main path.

After installation:

  1. Open a session for your project in a supported agent (e.g., Claude Code).
  2. Start with a low-risk task, such as: "Help me proofread this Arabic button label: حفظ / احفظ — which is right for a button?"
  3. According to the official documentation, once installed, the agent automatically triggers this skill when the user requests Arabic UI microcopy translation, proofreading, or writing, web app localization, RTL layout implementation, or help with Arabic plural counting and number formats.
  4. Signals of success: the agent's reply reflects the skill's key conventions — for example, pointing out that buttons should use the masdar (verbal noun, e.g., حفظ) rather than the imperative verb (احفظ), while placeholders use the imperative form; or suggesting CSS logical properties (e.g., margin-inline-start, padding-inline-end) instead of physical left/right, and isolating mixed-direction content with <bdi> or dir="ltr".

For your first attempt, prefer a proofreading or advisory task — read-only, no changes. The skill outputs opinions in diagnostic scenarios; whether and when it reads/writes your files, executes commands, or accesses the network is not stated in the official evidence, so do not assume. If a task involves modifying files, first ask the agent to state what will be changed and confirm.

Use cases

Case 1: Proofreading button copy Scenario: Your interface has a save button and the team is unsure whether to write حفظ or احفظ. Ask the agent: "Proofread the following button label against the arab-ui conventions: احفظ". One of the skill's core grammar rules is that buttons never use the imperative verb; they should use the masdar (حفظ), while placeholders use the imperative. Expected result: the agent points out that احفظ is imperative and suggests changing it to حفظ. This is a purely advisory task with a predictable outcome.

Case 2: RTL layout code review Scenario: You are building the Arabic version of a dashboard and your styles make heavy use of left/right. Ask the agent: "Check this CSS for RTL compatibility". The skill mandates always using logical properties (margin-inline-start, padding-inline-end, inset-inline-start) instead of physical directions, and isolating mixed-direction content with <bdi> or dir="ltr". Expected result: the agent lists the declarations that should be replaced with logical properties. This case is documented only up to the rule level; whether the agent directly rewrites your stylesheet depends on its own behavior, which the evidence does not state — confirm before allowing any file changes.

Boundaries of use

  • Trigger scope: the official documentation states the agent automatically triggers on requests for Arabic UI microcopy, localization, RTL/logical CSS, and Arabic plural counting and number formats; whether it triggers on other topics is not stated.
  • Side effects and confirmation points: the install command itself writes files to the skills directory. Whether the skill reads/writes project files, executes commands, or accesses the network at runtime is not stated in the evidence; for tasks involving code changes, first ask the agent to list the changes and confirm.
  • Runtime environment and client prerequisites: requires an environment that can load Agent Skills. Four AI coding assistants are officially listed — Claude Code, Antigravity, Cursor, Copilot — but exclusivity is not declared; support for other clients is unconfirmed.
  • Explicit official restrictions: no specific restriction items are listed in the evidence.
  • Unconfirmed key information: which Arabic variants/dialects the skill's output supports, its applicability to non-UI Arabic text, and details beyond client installation differences are not officially documented. Before use, defer to the official repository.

Source: https://github.com/JKc66/arabic-ui