nextlevelbuilder / nextlevelbuilder/ui-ux-pro-max-skill

Proposal: Add RTL (Right-to-Left) Support for Multi-Platform UI-UX

Open
#409 19 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

agent:github-maintain enhancement good first issue maintain:triaged
Dominant language
Python
Stars
129k
Forks
13.7k
Avg merge
23h 27m
Merged PRs (30d)
23

Description

Context

The current version of UI UX Pro Max (v2.10.1) provides an excellent design intelligence system with 161 product types, 67 UI styles, and 57 font pairings. However, it lacks native support for RTL (Right-to-Left) languages (e.g., Persian, Arabic, Hebrew).

With over 101k stars and a growing international user base, adding RTL support would significantly expand the project's reach and accessibility.


Proposed Feature

I'd like to contribute a RTL compatibility layer that integrates with the existing design system generator. The implementation would follow a phased approach:

Phase 1: Data Layer (Minimal Viable Addition)

· Add rtl_compatible column to products.csv, styles.csv, and color_palettes.csv
· Tag each entry as TRUE/FALSE based on RTL suitability (e.g., Minimalism ✅, Brutalism ✅, Hero-Centric Design ⚠️ with caveats)

Phase 2: Search Engine Enhancement

· Add --rtl flag to search.py to filter results by RTL compatibility
· Return only RTL-compatible styles/palettes when flag is enabled

Phase 3: Design System Output

· Add a new "RTL Guidelines" section to the --design-system output, including:
· direction: rtl
· text-align: right
· Swapped padding/margin values (padding-left ↔ padding-right)
· Icon mirroring recommendations (for directional icons like arrows)
· Anti-patterns to avoid (e.g., left-aligned timelines, left-to-right animations)

Phase 4: Stack-Specific Templates (Future PRs)

· Create RTL-aware templates for popular stacks:
· HTML+Tailwind: Add dir="rtl" and rtl: utility classes
· React/Next.js: Add dir prop to layout components
· React Native: Add I18nManager integration


Implementation Plan

  1. Data Preparation: I've already analyzed the existing CSV files and identified which styles are RTL-compatible (85% of styles work with minimal changes).
  2. Code Changes: Minimal modifications to search.py (less than 100 lines added).
  3. Testing: Will test with sample Persian/Arabic prompts to validate output quality.
  4. Documentation: Update README.md with RTL usage examples.

Questions for Maintainers

  1. Would you prefer RTL support as a flag (--rtl) or an auto-detect feature (based on language of the prompt)?
  2. Should RTL compatibility be strict (only RTL-optimized styles) or flexible (all styles with RTL warnings)?
  3. Do you have any existing RTL plans or preferences I should align with?

Why This Matters

· Accessibility: Makes the tool usable for developers in Middle Eastern, North African, and South Asian markets.
· Completeness: A truly "multi-platform" design system should support all writing directions.
· Community Growth: Opens the project to contributions from Persian/Arabic-speaking developers.


Related Issues/PRs

I've searched the existing issues and didn't find any open RTL requests. If this has been discussed elsewhere, please point me to it.


Next Steps

If this proposal is approved, I'll:

  1. Fork the repository
  2. Create a feature/add-rtl-support branch
  3. Implement Phase 1–3 as a single PR
  4. Open a draft PR for early feedback

Looking forward to your thoughts! 🙌


Tags to add after creation:
enhancement, feature-request, accessibility, good-first-issue

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading search.py and the existing products.csv, styles.csv, and color_palettes.csv files, then review README.md for current search and design-system output. Clarify with maintainers which RTL phases and filtering policy are in scope before coding. Done should include the agreed RTL behavior, representative Persian or Arabic validation, tests, and updated usage documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
python
Domain
accessibility, internationalization, tooling
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.