Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Bilingual Architecture Guard

    1

    Enforce a strict, hardcoding-free, bilingual-first architecture for React and TypeScript projects.

    $5

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Bilingual Architecture Guard

    Bilingual Architecture Guard

    Example session with this skill installed

    Add a 'Submit' button to the contact form with a primary blue background and 16px padding. Make sure it works for our English and Arabic users.

    • Read your context and instructions
    • Compiled the bilingual architecture guard
    1. Added contact.form.submit to en.json and ar.json.
    2. Verified tokens.color.primary.main and tokens.spacing.md exist.
    3. Implemented: <Button sx={{ p: tokens.spacing.md, bg: tokens.color.primary.main }}>{t('contact.form.submit')}</Button>
    4. Confirmed no hardcoded px or hex values.
    1. Added to en.json and ar.json

    Connects securely to your tools. The creator never sees your data.

    About this skill

    The problem

    Most AI agents write UI code with hardcoded strings and magic numbers, making localization and theme updates a manual nightmare. Developers often end up with scattered hex codes, duplicated status strings, and "English-first" codebases that require extensive refactoring to support new languages.

    What it does

    • Enforces a strict single-source-of-truth (SSOT) architecture for all UI values.
    • Prevents hardcoded hex colors, pixel values, and status strings from entering the codebase.
    • Requires all user-facing strings to be added to all supported locale files simultaneously.
    • Mandates sentence-case text in source files to keep styling logic in CSS.
    • Verifies that RTL/LTR logic is driven by locale rather than manual CSS overrides.

    Frameworks & tools

    React, Next.js, TypeScript, i18next, Tailwind CSS, and standard Design System token architectures.

    Why this beats prompting it yourself

    Simple prompts often fail to catch "temporary" hardcoding or missing keys in secondary locale files. This skill embeds a rigid workflow that stops feature work until the underlying tokens and translations are defined, ensuring 100% architectural compliance without manual audits.

    Use cases

    • Initializing a new multi-tenant or multi-lingual SaaS project.
    • Refactoring a legacy component library to use a central design system.
    • Onboarding AI agents to high-compliance codebases where hardcoding is a linting failure.
    • Scaling a React application from a single language to global support.

    Known limitations

    Assumes the existence of a translation function like t() and central token files. If these are missing, the skill will require their creation before proceeding with UI tasks.

    Requires an existing translation framework (e.g., i18next) and token-based styling. The agent will halt if it cannot find central source files for constants or tokens.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 3 months ago

    Permissions

    No special permissions declared or detected

    Listed3 months ago

    What's inside

    Frequently Asked Questions

    This skill enforces a single-source-of-truth (SSOT) architecture, preventing AI agents from hardcoding strings or colors and ensuring all new UI elements are immediately mapped to locale and design token files.

    It is optimized for React and Next.js projects using TypeScript, and it integrates seamlessly with i18next and Tailwind CSS token architectures.

    The skill requires an existing translation function (like t()) and a central token file; if these aren't present, the agent will prioritize helping you initialize these foundations first.

    By embedding strict architectural rules, the skill stops the agent from proceeding with UI tasks until translations are defined in all supported languages, preventing missing keys in secondary locales.

    Yes, the skill enforces sentence-case text in source files and ensures that RTL/LTR logic is driven by locale settings rather than manual, hardcoded CSS overrides.

    You will receive the specialized skill configuration for your AI agent, including a set of architectural constraints and workflow instructions designed for high-compliance codebases.

    New in Frontend & Web Apps