A11y I18n Rules

    by mochalatte

    1

    Standardize your front-end for WCAG accessibility and ICU-based internationalization.

    $5

    30-day refund guarantee

    Secure checkout via Stripe

    0 installsSecurity scanned

    Works with the AI tools you already use

    CClaude CodeCCursorCCodex CLIGGitHub CopilotGGemini CLI+17 more

    See it in action

    You say

    Review this button component for accessibility issues: Submit

    Your agent does

    - File: components/Submit.tsx, line 1 - Rule: Semantic HTML block - Fix: Replace div with a native element. - Prevents: Keyboard and screen-reader users cannot trigger the action as it lacks a tab stop and role.

    What you get

    Implement keyboard-accessible focus traps for modals and dialogs.Refactor directional CSS to logical properties for RTL support.Convert string concatenation to ICU MessageFormat for better translation.Enforce semantic HTML usage to reduce dependency on complex ARIA roles.

    About this skill

    The problem

    Interactive elements built with generic divs lack the keyboard and screen-reader support of native HTML. Hardcoded strings and directional CSS like "left" and "right" create technical debt that breaks layouts and grammar in non-English locales.

    What it does

    • Enforces semantic HTML over ARIA bolt-ons to ensure native screen-reader support.
    • Identifies keyboard traps and manages focus order for modals, menus, and route changes.
    • Migrates hardcoded strings to ICU MessageFormat to handle plurals, gender, and word order.
    • Converts directional CSS to logical properties for RTL (Right-to-Left) layout compatibility.
    • Automates WCAG AA contrast checks and reduced-motion preference compliance.

    Frameworks & tools

    React, Next.js, Vue, Tailwind CSS, ICU MessageFormat, and any modern front-end stack using CSS logical properties.

    Why this beats prompting it yourself

    General-purpose models often hallucinate ARIA attributes or use string concatenation that fails in translation. This skill applies a specific "trigger matrix" to catch silent failures like missing labels, incorrect tab order, and non-logical CSS properties before they reach production.

    Use cases

    • Converting a legacy "div-based" component library to accessible, semantic HTML.
    • Pre-flighting a feature for international launch in RTL languages like Arabic or Hebrew.
    • Refactoring hardcoded UI strings into a scalable, translation-ready message catalog.
    • Ensuring complex UI patterns like modals and dropdowns meet keyboard navigation standards.

    Known limitations

    This tool identifies authoring-time errors but does not run live screen-reader audits, verify color contrast values against actual rendered pixels, or provide literal translations.

    How to install

    Drop the file into your AI Agent. Works with Claude, Cursor, ChatGPT, and 20+ more.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    30-day refund

    Not a fit? Get your money back

    Trust & safety

    Security scanned

    Verified clean today

    Listedtoday

    Creator

    mochalatte

    mochalatte

    48 skills on Agensi

    Practical AI Skills for writers, learners & PMs — each ships a real deliverable, not a tutorial. ★ Top 3: Product Manager Studio · Content Forge Pack · Advanced Data Analysis

    Frequently Asked Questions

    Popular in Web & App UI Design

    Award Winning Design: Make Claude a World Class Designer

    Award Winning Design: Make Claude a World Class Designer

    V3 NEW & IMPROVED: Stop shipping AI sites that look like AI sites. Your agent researches your category first, then designs.

    $9.99
    314.7(3)
    cinematic-4k-landing-page

    cinematic-4k-landing-page

    Turn any business URL into a high-converting, agency-grade landing page with AI-generated 4K cinematic visuals, GSAP scroll animations, and one-command Cloudflare Pages deployment.

    $5
    715.0(1)

    Design System MD — Brand-Quality UI via DESIGN.md

    Apply world-class design systems to any UI project in one step using getdesign.md CLI

    Free
    105.0(1)

    Frontend Design — Production-Grade UI with Distinctive Aesthetics

    Create visually striking UI beyond generic AI design: brutalist, minimal, editorial, retro-futuristic

    Free
    5