agentleFS
Sign inStart free
kapishdimakapishdima/soundcn/.agents/skills/fixing-accessibility/SKILL.md

fixing-accessibility

Skill864 starsChanged 9 months agoMITView on GitHub

Fix accessibility issues.

We split this skill into the rules it gives an agent

16 rules. 16 are common, 0 are distinctive, and 0 are very specific to this project.

  • 16

    Common

    Most of the 16 edited versions we read keep these.

  • 0

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Common:

    Do not rewrite large parts of the UI.

    line 21
  2. Common:

    every interactive control must have an accessible name

    line 51
  3. Common:

    every input, select, and textarea must be labeled

    line 53
  4. Common:

    do not use div or span as buttons without full keyboard support

    line 59
  5. Common:

    all interactive elements must be reachable by Tab

    line 60
  6. Common:

    do not use tabindex greater than 0

    line 62
  7. Common:

    prefer native elements (button, a, input) over role-based hacks

    line 74
  8. Common:

    if a role is used, required aria attributes must be present

    line 75
  9. Common:

    do not skip heading levels

    line 77
  10. Common:

    ensure sufficient contrast for text and icons

    line 97
  11. Common:

    do not remove focus outlines without a visible replacement

    line 100
  12. Common:

    avoid autoplaying media with sound

    line 107
  13. Common:

    prefer minimal changes, do not refactor unrelated code

    line 111
  14. Common:

    do not add aria when native semantics already solve the problem

    line 112
  15. Common:

    do not migrate UI libraries unless requested

    line 113
  16. Common:

    prefer native HTML before adding aria

    line 118

“Common” is measured: kept by at least 6 in 10 of the 16 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

fixing-accessibility

Fix accessibility issues.

how to use

  • /fixing-accessibility Apply these constraints to any UI work in this conversation.
  • /fixing-accessibility <file> Review the file against all rules below and report:
    • violations (quote the exact line or snippet)
    • why it matters (one short sentence)
    • a concrete fix (code-level suggestion)

Do not rewrite large parts of the UI. Prefer minimal, targeted fixes.

when to apply

Reference these guidelines when:

  • adding or changing buttons, links, inputs, menus, dialogs, tabs, dropdowns
  • building forms, validation, error states, helper text
  • implementing keyboard shortcuts or custom interactions
  • working on focus states, focus trapping, or modal behavior
  • rendering icon-only controls
  • adding hover-only interactions or hidden content

rule categories by priority

prioritycategoryimpact
1accessible namescritical
2keyboard accesscritical
3focus and dialogscritical
4semanticshigh
5forms and errorshigh
6announcementsmedium-high
7contrast and statesmedium
8media and motionlow-medium
9tool boundariescritical

quick reference

1. accessible names (critical)

  • every interactive control must have an accessible name
  • icon-only buttons must have aria-label or aria-labelledby
  • every input, select, and textarea must be labeled
  • links must have meaningful text (no “click here”)
  • decorative icons must be aria-hidden

2. keyboard access (critical)

  • do not use div or span as buttons without full keyboard support
  • all interactive elements must be reachable by Tab
  • focus must be visible for keyboard users
  • do not use tabindex greater than 0
  • Escape must close dialogs or overlays when applicable

3. focus and dialogs (critical)

  • modals must trap focus while open
  • restore focus to the trigger on close
  • set initial focus inside dialogs
  • opening a dialog should not scroll the page unexpectedly

4. semantics (high)

  • prefer native elements (button, a, input) over role-based hacks
  • if a role is used, required aria attributes must be present
  • lists must use ul or ol with li
  • do not skip heading levels
  • tables must use th for headers when applicable

5. forms and errors (high)

  • errors must be linked to fields using aria-describedby
  • required fields must be announced
  • invalid fields must set aria-invalid
  • helper text must be associated with inputs
  • disabled submit actions must explain why

6. announcements (medium-high)

  • critical form errors should use aria-live
  • loading states should use aria-busy or status text
  • toasts must not be the only way to convey critical information
  • expandable controls must use aria-expanded and aria-controls

7. contrast and states (medium)

  • ensure sufficient contrast for text and icons
  • hover-only interactions must have keyboard equivalents
  • disabled states must not rely on color alone
  • do not remove focus outlines without a visible replacement

8. media and motion (low-medium)

  • images must have correct alt text (meaningful or empty)
  • videos with speech should provide captions when relevant
  • respect prefers-reduced-motion for non-essential motion
  • avoid autoplaying media with sound

9. tool boundaries (critical)

  • prefer minimal changes, do not refactor unrelated code
  • do not add aria when native semantics already solve the problem
  • do not migrate UI libraries unless requested

review guidance

  • fix critical issues first (names, keyboard, focus, tool boundaries)
  • prefer native HTML before adding aria
  • quote the exact snippet, state the failure, propose a small fix
  • for complex widgets (menu, dialog, combobox), prefer established accessible primitives over custom behavior

Download now (ZIP)

  • Other versions17 projects use a version of this.

    Word for word · 1

    1. agentset-ai/agentset★ 2.1k100% same

    Edited · 11

    1. ibelick/ui-skills★ 10k83% same
    2. master5d/claude-design-skills★ 2683% same
    3. Discriminative-shoji607/ui-skills★ 383% same
    4. ClaireAll/skills★ 283% same
    5. sanmidable/skills★ 280% same
    6. strvcom/frontend-skills★ 283% same
    7. xeroc/skills★ 183% same
    8. davidanthonyn/claude-skills★ 083% same
    9. HatriGt/agent-sandbox★ 080% same
    10. okfriansyah-moh/agentic-workflow★ 072% same

    1 more not listed

    Wrote their own version · 5

    1. kumaran-is/claude-code-onboarding★ 35same name
    2. jscraik/Agent-Skills★ 9same name
    3. jasonfesta/design-agents★ 1same name
    4. EstebanT1112/codex-engineering-workflow★ 0same name
    5. hebertzhu/agent-foundry★ 0same name

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use ui-skills-root, improve-ui and 8 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • Discriminative-shoji607Skill

      ui-skills-root

      Use before UI-related work to select the smallest useful UI Skills context through the ui-skills CLI.

      Also in 3 projects that use this

    • Discriminative-shoji607Skill

      improve-ui

      Audit an existing product surface against its own design evidence, identify verified UI problems, and write self-contained implementation plans for another agent. Strictly read-only on product source. Use when asked to review, refine, improve, or clean up an interface without replacing its identity; investigate design-system drift; or prepare a design handoff.

      Also in 3 projects that use this

    • studio-lgtmSkill

      make-interfaces-feel-better

      Apply design engineering best practices to polish UI components - use when reviewing or improving interfaces, animations, typography, or interaction details.

      Also in 3 projects that use this

    • VercelSkill

      emil-design-eng

      This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

      Also in 4 projects that use this

    • xerocSkill

      improve-animations

      Survey a codebase's animation and motion code as a senior motion advisor, then produce a prioritized audit and self-contained implementation plans for other agents (or cheaper models) to execute. Read-only on source code — it plans improvements, it does not apply them. Use when the user asks to "improve the animations", "audit the motion", "make this app feel better", or wants a roadmap of animation fixes rather than a review of a single diff.

      Also in 3 projects that use this

    • DatabricksSkill

      shadcn

      Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

      Also in 4 projects that use this

  • In this repository11 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free