Arabic UI

Authentic Arabic writing, UI/UX microcopy, and RTL engineering. Use when writing, translating, or reviewing Arabic interfaces, dashboards, articles, documentation, or copy. Enforces classical syntactic flow, eliminates translationese (العرنجية), applies Al-Jahiz's density principle, and handles Arabic pluralization and bidirectional layout.

16 starsFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add JKc66/arabic-ui --skill arabic-ui

Manual install

git clone --depth 1 https://github.com/JKc66/arabic-ui.git /tmp/arabic-ui
mkdir -p ~/.claude/skills
cp -r /tmp/arabic-ui/. ~/.claude/skills/arabic-ui

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Authentic Arabic Writing & UI Localization (العربية الفصيحة للواجهات والمقالات)

High-fidelity, concise Arabic text engineered for modern digital interfaces, articles, technical documentation, and long-form writing. Enforces native Arabic grammar, 6-category pluralization, verbal sentence momentum, and strict anti-calque vocabulary.

---

## Operational Workflow

Determine the target domain and follow the appropriate path:

### Mode A: UI & Interface Microcopy (Buttons, Alerts, Inputs, Dashboards)
1. **Map Element Type to Grammatical Form**: Match UI elements to target grammatical forms via Section 1.1 (e.g., المصدر for buttons, فعل الأمر for placeholders).
2. **Draft Concise Microcopy**: Eliminate auxiliary verbs and calques via Section 3 (Checklist) and [references/aranjiya-glossary.md](references/aranjiya-glossary.md).
3. **Format Dynamic Counters**: Route numbers through `formatArabicPlural()` in [scripts/pluralize.ts](scripts/pluralize.ts) with dual case inflection (`nominative` vs `oblique`).
4. **Isolate BiDi & Logical Layout**: Use CSS logical properties (`inset-inline-end`) and isolate neutral characters (`2 GB / 10 GB`) via [references/rtl-engineering.md](references/rtl-engineering.md).
5. **Verify Against Checklist**: Validate with Section 3.1 & 3.2 gates.

### Mode B: Long-Form Writing, Articles & Essays (Blog Posts, Docs, Reports)

Read the full skill on GitHub

Details

Skill name: arabic-ui
Repository: JKc66/arabic-ui
License: MIT
Repo updated: 25 September 2026

FAQ

What does the Arabic UI skill do?

How do I install the Arabic UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add JKc66/arabic-ui --skill arabic-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Arabic UI popular?

It lives in JKc66/arabic-ui, which has 16 GitHub stars and 0 forks.

Related skills

Design Feel Like Your Own Product

Tiannanzhao/design-feel-like-your-own-product

Learn and replicate a designer's style from Figma files to create new components that feel authentic to their design system. Use this skill whenever a user shares a Figma file and wants to create new components, plugins, or UI elements that match an existing design style — even if they don't explicitly say "learn my style". Trigger when users mention Figma files, design systems, "make it look like my design", "match the style", or ask to extend an existing UI.

Frontend & Design

Audhd UI Guide

Greyland-Fireworks/audhd-ui-guide

Design, review or improve UI and UX using AuDHD-friendly interaction rules, accessible selectable appearance and verifiable workflow continuity. Use when the user says "audhd audit", or for dashboard organization, settings forms, status feedback, accessible controls and interruption recovery; not clinical advice or certification.

Frontend & Design

Design Tokens

ilikescience/design-tokens-skill

Expert in design tokens using the DTCG specification. Use this skill when users ask about design tokens, DTCG format, token validation, formatting, transformation, color spaces (sRGB, Display P3, OKLCH), references and aliasing, resolvers, theming with modifiers/contexts, multi-platform design systems, accessibility, or working with tools like jq, jsonata, and terrazzo. Helps with token file creation, resolver configuration, structure, naming conventions, and best practices.

Frontend & Design

Pixel Perfect Web Replica

Core-Mate/Pixel-Perfect-Web-Replica

Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare screenshots; and list replaceable resources for rebranding or customization.

Frontend & Design

Filemaker Layout Xml

andykear/FileMaker-XMLsnippet-Layout-Claude-Skill

Use this skill whenever the user wants to work with FileMaker layout XML. This includes generating paste-ready layout object XML (fmxmlsnippet type LayoutObjectList) from descriptions, reviewing layout XML for silent paste-handler failures, or analysing Save as XML layout exports. Trigger any time the user mentions FileMaker layouts, layout objects, fields, portals, tab controls, popovers, button bars, web viewers, anchoring or autosizing, or LayoutObjectList. Always perform the theme pre-flight before generating, and set object anchoring deliberately whenever an object must resize with the wi

Frontend & Design

Itqan

saleh-alhaddad/itqan-engineering

The full software-engineering lifecycle as one suite — DISCOVER, DEFINE, PLAN, BUILD, VERIFY, REVIEW, SHIP — with approval gates before code, test-first builds, evidence before "done", and resumable multi-session work. Routes to 12 sub-skills covering any stack, plus feature discovery, security audit, UI/UX craft, and learning roadmaps.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.