New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Persian Rtl UI

by TronIsHere in TronIsHere/vibefarsiui

Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates…

MITAuto-check: warningsFrontend & Design

Install Persian Rtl UI

The automated check flagged lines worth reading first. See the safety section below.

skills CLI
$ npx skills add TronIsHere/vibefarsiui --skill persian-rtl-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install TronIsHere/vibefarsiui persian-rtl-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/TronIsHere/vibefarsiui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/registry/skills/persian-rtl-ui .claude/skills/persian-rtl-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
persian-rtl-ui
GitHub stars
212
Token cost
~1.7k tokens
SKILL.md length
850 words
Files
1
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates…

  • Works in 10 steps: Direction → Typography → Numbers, money, dates → …
  • Any UI work in a Persian
  • SKILL.md covers 1. Direction, 2. Typography, 3. Numbers, money, dates and 4. Forms, plus 6 more sections
  • Calls npx

What it does

Persian Rtl UI is an agent skill from TronIsHere/vibefarsiui. Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates, Iranian form fields, colors from theme tokens. Use for any UI work in a Persian or Iranian project (راستچین، فارسی، RTL، رابط فارسی، Next.js فارسی), before writing the first component. These are the VibeFarsi design rules in skill form, for projects without the MCP server.

Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Typography, CSS and styling and Design tokens. It works with Model Context Protocol, Next.js, React and Tailwind CSS. The licence is MIT.

When your agent uses it

  • Any UI work in a Persian
  • Iranian project (راستچین، فارسی، RTL، رابط فارسی، Next.js فارسی)
  • Before writing the first component

Example prompts

  • “/persian-rtl-ui”

Requirements

  • Node.js

Workflow steps

10 steps, taken from the step headings in SKILL.md.

  1. Direction
  2. Typography
  3. Numbers, money, dates
  4. Forms
  5. Colors and shape
  6. Motion
  7. Accessibility
  8. Iranian product patterns
  9. Copy inside components
  10. Checklist before returning code

What it can do on your machine

Read from SKILL.md and the folder at commit 7d56b50. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Persian Rtl UI loads about 1.7k tokens when it runs. Until then it costs about 122 tokens; SKILL.md has 850 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~122
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: warnings

The automated check found patterns that need a careful read before installing.

  • WarningContains zero-width charactersSKILL.md:8
    Iranian project (راست⟨U+200C⟩چین، فارسی، RTL، رابط فارسی، Next.js فارسی), before
  • WarningContains zero-width charactersSKILL.md:13
    # Persian RTL UI (رابط راست⟨U+200C⟩چین)

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from TronIsHere/vibefarsiui at commit 7d56b50, republished under its MIT licence (© TronIsHere). 850 words, ~1,706 tokens.

Download SKILL.mdSave it as .claude/skills/persian-rtl-ui/SKILL.md (or your agent's skills folder).
name
persian-rtl-ui
description
Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates, Iranian form fields, colors from theme tokens. Use for any UI work in a Persian or Iranian project (راست‌چین، فارسی، RTL، رابط فارسی، Next.js فارسی), before writing the first component. These are the VibeFarsi design rules in skill form, for projects without the MCP server.

Persian RTL UI (رابط راستچین)

Models default to English UI: Inter, Latin digits, ml-4, text-left, Monday calendars. Wrapping that in dir="rtl" does not make it Persian. Apply the rules below to every component, then run the checklist in section 10.

1. Direction

  • Document: <html lang="fa" dir="rtl">. Do not set dir per component.
  • Logical classes only: ms-/me-, ps-/pe-, start-/end-, text-start/text-end, border-s/border-e, rounded-s-/rounded-e-, inset-s-/inset-e-. Never ml-, pl-, left-, text-left, border-l.
  • Flex and grid read first-to-last in document order; RTL flips them. Do not add flex-row-reverse to "fix" it.
  • space-x-* breaks in RTL; use gap-*.
  • Directional icons flip: "next" and "submit" chevrons point left (ArrowLeft, ChevronLeft). Non-directional icons (search, trash) stay.
  • Keep these LTR inside the RTL page, with dir="ltr" on the control, not on the form: phone, email, OTP, IBAN, card number, URL, code, Latin SKU.
  • Drawers and sheets open from the start edge; toasts stack at the start-bottom or top-center.
WrongRight
ml-2 / pl-4ms-2 / ps-4
text-lefttext-start
left-0 / right-0start-0 / end-0
rounded-l-lgrounded-s-lg
border-lborder-s
space-x-2gap-2
<ArrowRight/> for "next"<ArrowLeft/>
flex-row-reverse(remove)

2. Typography

  • Font: the project's Persian sans (Vazirmatn, IRANSans, or --font-sans). Never Inter, Roboto, Geist or system-ui alone.
  • letter-spacing: 0 on Persian, always. Tracking breaks letter joining. No tracking-tight on Persian headlines.
  • Body ~16px, line-height 1.7–1.9. Headlines 1.2–1.3, never below 1.15.
  • No fake bold or italic; use weights the font ships.
  • Mixed strings («کد سفارش SKU-2048»): let the bidi algorithm isolate the Latin run; do not force the paragraph LTR. Wrap codes in <bdi> or dir="ltr".
  • Truncate with CSS line-clamp; a naive slice() cuts letters mid-join.
  • Do not uppercase Persian; uppercase only affects Latin and looks wrong next to it.

3. Numbers, money, dates

  • Visible digits are Persian ۰۱۲۳۴۵۶۷۸۹. Convert at the display layer (fa() / faNumber() from lib/utils.ts in VibeFarsi).
  • Thousands separator «٬» (U+066C), decimal «٫» (U+066B), percent «٪» after the number.
  • Money: «۱۲٬۴۵۰٬۰۰۰ تومان». Unit after the number. Never «$», never «Toman». Default unit is تومان; if you must show ریال, label it and never mix.
  • Form values, URLs, JSON and API payloads keep Latin digits.
  • Calendar is Jalali (شمسی); week starts Saturday; Friday is the weekend. Use a real converter (lib/jalali.ts), not toLocaleDateString alone.
  • Relative time in Persian: «۲ ساعت پیش», «دیروز».
  • Numeric table columns: tabular-nums so digits line up, aligned to the start (right) like the rest of the RTL table. Do not text-right them.

4. Forms

  • Label above the field with htmlFor; placeholder is an example, not a label.
  • Phone: dir="ltr", inputMode="tel", accept 09xxxxxxxxx (11 digits) and +98…. Start addon «+98» is optional. Operator name is a hint, not a gate.
  • OTP: separate cells, dir="ltr" on the group, Persian glyphs on screen, Latin string on submit, autoComplete="one-time-code", paste fills all.
  • Email, password, IBAN, card, URL: LTR input under an RTL label.
  • Persian and Arabic-Indic digits typed by the user are normalized before validation; never reject «۰۹۱۲…» because it is not ASCII.
  • Errors under the field with aria-invalid; red from --destructive.
  • Primary button at the start of a button row; full-width stacks put the primary on top.
  • Inputs must compute to at least 16px on iOS or Safari zooms on focus.
Show full SKILL.md (337 more words)Show less

5. Colors and shape

  • Every color comes from a token already mapped to Tailwind: background, foreground, card, primary, secondary, muted, accent, border, input, ring, brand, destructive, success, warning.
  • No hex or oklch inside components; no new blue because it looked nice.
  • Radius from --radius; do not mix 6px and 16px corners in one view.
  • Borders border-border, not border-white/10 (light themes exist).

6. Motion

  • 150–300ms for UI; decorative backgrounds may be slower.
  • Respect prefers-reduced-motion: stop loops, skip enter animations.
  • Directional motion follows RTL: enter from the start edge.
  • Animate transform and opacity, not top/left/width.

7. Accessibility

  • Visible focus ring from the ring token; never outline-none without a replacement.
  • Icon-only buttons get a Persian aria-label.
  • Dialogs trap and restore focus; Escape closes.
  • lang="fa" on the document so screen readers switch voices.
  • Muted text stays readable on both dark and light themes.

8. Iranian product patterns

English kits will not get these right; use a VibeFarsi component when one exists (npx vibefarsi add …) instead of re-implementing.

  • Phone «۰۹…», national ID (کد ملی, 10 digits with checksum), Sheba/IBAN (IR + 24 digits), bank card (16 digits, Luhn, BIN → bank), postal code (10 digits), plate («۱۲ ب ۳۴۵ ایران ۱۱»).
  • Address fields: استان، شهر، خیابان، پلاک، واحد، کد پستی.
  • Shipping: پست، تیپاکس، پیک. Payment result states: موفق، در انتظار، ناموفق.
  • Working week Saturday–Thursday (often half-day Thursday); Friday off.
  • Copy is Persian and specific: never «Oops», never «Something went wrong».

9. Copy inside components

All visible strings are Persian: labels, placeholders, empty states, errors, aria-label. Code identifiers, props and file names stay English. See the persian-ui-copy skill for wording.

10. Checklist before returning code

  1. No ml-/mr-/pl-/pr-/left-/right-/text-left/text-right/space-x.
  2. Font from the project, letter-spacing: 0, no tracking-* on Persian.
  3. Every visible number Persian; money «تومان» after the number.
  4. Dates Jalali, week starts Saturday.
  5. Phone/OTP/IBAN/card fields dir="ltr", labels RTL.
  6. Colors only from tokens; radius from --radius.
  7. "Next" arrows point left; drawers open from the start edge.
  8. Focus ring visible; icon buttons labelled in Persian.
  9. All copy Persian, register consistent.

© TronIsHere, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. 2 hidden characters (zero-width or bidirectional) removed. Raw file

Files

Just SKILL.md in registry/skills/persian-rtl-ui of TronIsHere/vibefarsiui.

Open the folder on GitHubat commit 7d56b50

Compare with similar skills

Persian Rtl UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Persian Rtl UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Persian Rtl UI this skillTronIsHere/vibefarsiui212—~1.7kAutomated safety check: WarnMIT
UI UX Pro Maxsaoudi-h/solar-icons19018 repos~11kAutomated safety check: NotesCustom licence
Tailwind V4 Shadcnever-works/ever-works1622 repos~3.8kAutomated safety check: PassMIT
UI UX Pro Maxshobcoder/shob576—~3.7kAutomated safety check: PassMIT
Frontend UI Foundryjiushiwon/wg-skills114—~1.4kAutomated safety check: PassApache-2.0
Shadcn Tailwind UILiarMTTT/TavernWeave154—~1.7kAutomated safety check: PassCustom licence

Similar skills

  • UI UX Pro Max

    saoudi-h/solar-icons

    UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.

    190 GitHub starsUsed in 18 repos~11k tokens
    Frontend & DesignAuto-check: notes

  • Tailwind V4 Shadcn

    ever-works/ever-works

    Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.

    162 GitHub starsUsed in 2 repos~3.8k tokens
    Frontend & DesignAuto-check passed

  • UI UX Pro Max

    shobcoder/shob

    UI/UX design intelligence expert for web and mobile applications.

    576 GitHub stars~3.7k tokensUpdated 22 days ago
    Frontend & DesignAuto-check passed

  • Frontend UI Foundry

    jiushiwon/wg-skills

    A skill your agent uses when generating UI for a specific scenario (mobile/PC/官网/管理端/营销页/文档/金融/原生/3D), when refactoring an existing HTML/Vue/React project to a unified design system, when extracting…

    114 GitHub stars~1.4k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Shadcn Tailwind UI

    LiarMTTT/TavernWeave

    Build, restyle, or review accessible React interfaces that use shadcn/ui, Radix UI primitives, and Tailwind CSS.

    154 GitHub stars~1.7k tokensUpdated 6 days ago
    Frontend & DesignAuto-check passed

  • Design Review

    pproenca/dot-skills

    Structured UI design review — existing code (React/JSX, CSS, Tailwind) and, when behaviour matters, the running app in a real browser — reported as a prioritised Before / After / Why table.

    215 GitHub stars~3.4k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

More from TronIsHere/vibefarsiui

  • Iran Validation

    TronIsHere/vibefarsiui

    Validate and format Iranian identifiers correctly: national ID (کد ملی) checksum, mobile numbers (۰۹…), landlines with area codes, IBAN / Sheba (شبا) mod-97, bank card numbers with Luhn and…

    212 GitHub stars~1.8k tokensUpdated today
    Auto-check: warnings

  • Jalali Calendar

    TronIsHere/vibefarsiui

    Handle dates and times for Iranian users: the Jalali / Solar Hijri calendar (تقویم شمسی، هجری خورشیدی), Saturday-first weeks, Tehran time (+03:30, no DST), Persian month and weekday names…

    212 GitHub stars~1.6k tokensUpdated today
    Auto-check: warnings

  • Persian Formal

    TronIsHere/vibefarsiui

    Write formal Persian that still sounds human: proposals, contracts, invoices, official letters (نامه اداری), formal email, company website copy, terms and policies.

    212 GitHub stars~1.7k tokensUpdated today
    Auto-check: warnings

  • Persian SEO

    TronIsHere/vibefarsiui

    Technical and on-page SEO for Persian (Farsi) websites: lang and hreflang for fa-IR, RTL-safe metadata, Persian titles and descriptions, slug and URL strategy for Persian content, ZWNJ and keyword…

    212 GitHub stars~1.7k tokensUpdated today
    Auto-check: warnings

  • Persian Conversational

    TronIsHere/vibefarsiui

    Write colloquial written Persian (محاورهنویسی): the Farsi people actually type in chat, Instagram captions, Telegram posts, consumer-app onboarding and friendly support replies.

    212 GitHub stars~1.5k tokensUpdated today
    Auto-check: warnings

  • Persian UI Copy

    TronIsHere/vibefarsiui

    Write Persian (Farsi) UI microcopy: button labels, field labels and placeholders, validation and error messages, empty states, loading and success toasts, confirmations, notifications.

    212 GitHub stars~1.6k tokensUpdated today
    Auto-check: warnings

Works with

Categories

Questions about Persian Rtl UI

What does Persian Rtl UI do?

Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates…. Persian Rtl UI is an agent skill from TronIsHere/vibefarsiui. Build right-to-left Persian (Farsi) UI in React and Tailwind the way an Iranian product team would: logical CSS only, Persian fonts without letter-spacing, Persian digits and «تومان», Jalali dates, Iranian form fields, colors from theme tokens.

When should I use Persian Rtl UI?

Persian Rtl UI fits situations like: any UI work in a Persian; iranian project (راستچین، فارسی، RTL، رابط فارسی، Next.js فارسی); before writing the first component.

How do I install Persian Rtl UI in Claude Code?

Run `npx skills add TronIsHere/vibefarsiui --skill persian-rtl-ui -a claude-code`. Or copy the skill folder (registry/skills/persian-rtl-ui in TronIsHere/vibefarsiui) into .claude/skills/persian-rtl-ui in your project. Claude Code loads it when a task matches its description.

How do I install Persian Rtl UI in Codex?

Run `npx skills add TronIsHere/vibefarsiui --skill persian-rtl-ui -a codex`. Or copy the skill folder (registry/skills/persian-rtl-ui in TronIsHere/vibefarsiui) into .agents/skills/persian-rtl-ui in your project. Codex loads it when a task matches its description.

Can I use Persian Rtl UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add TronIsHere/vibefarsiui --skill persian-rtl-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/persian-rtl-ui, .gemini/skills/persian-rtl-ui, .github/skills/persian-rtl-ui and .opencode/skills/persian-rtl-ui in your project.

What does Persian Rtl UI need to run?

Going by SKILL.md and its folder, Persian Rtl UI needs the command-line tools its instructions call (npx). Our summary lists: Node.js.

Does Persian Rtl UI access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Persian Rtl UI safe to install?

Our automated static check of SKILL.md flagged 2 warning(s): contains zero-width characters. Read the flagged lines before installing; the check is not a guarantee either way.

What licence does Persian Rtl UI use?

Persian Rtl UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Persian Rtl UI use?

About 1.7k tokens (SKILL.md is roughly 6.8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Persian Rtl UI?

Skills that share tags, products or a category with Persian Rtl UI: UI UX Pro Max (saoudi-h/solar-icons, 190 stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars), UI UX Pro Max (shobcoder/shob, 576 stars) and Frontend UI Foundry (jiushiwon/wg-skills, 114 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Persian Rtl UI?

TronIsHere (a GitHub user) maintains it in TronIsHere/vibefarsiui, which has 212 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 10, 2026.

Source: TronIsHere/vibefarsiui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.