Skip to content
Development
Skill

/frontend-ui-accessibility

Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems.

BOOST
@charlieviettqcharlieviettq@charlieviettq
From plugin
awesome-agent-skill
27200 skills4 commands

Claude Code

$ npx -y skills add charlieviettq/awesome-agent-skill --skill frontend-ui-accessibility --agent claude-code

SKILL.md

frontend-ui-accessibility.SKILL.md
name: frontend-ui-accessibility
description: "Build accessible UI—semantic HTML, keyboard support, ARIA when needed, WCAG-oriented checks. Use when implementing or reviewing web UI, forms, modals, and design systems."
allowed-tools: Read, Glob, Grep

Frontend UI and accessibility

Defaults

  • Semantic HTML first; ARIA only when native semantics insufficient
  • Keyboard-operable for every interactive control
  • Visible focus states; do not remove outlines without replacement
  • Color contrast and non-color-only status cues

Build checklist

  • [ ] Heading hierarchy (`h1` once per view where applicable)
  • [ ] Labels tied to inputs (`label`/`for` or `aria-labelledby`)
  • [ ] Buttons vs links used correctly
  • [ ] Modals: focus trap, `Escape`, return focus on close
  • [ ] Images: meaningful `alt` or decorative `alt=""`
  • [ ] Dynamic updates: `aria-live` when needed

Review checklist

  • [ ] Tab order logical; no keyboard traps
  • [ ] Touch targets adequate on mobile
  • [ ] Motion respects `prefers-reduced-motion`
  • [ ] Forms: errors associated with fields

Performance interaction

Avoid layout thrash; lazy-load below fold; measure LCP/CLS when shipping UI.

Related

  • [reference.md](reference.md) — WCAG-oriented checklist
  • `performance/performance-optimization` — web vitals
  • `gstack/design-review` — visual polish (complementary)
Read it on GitHub ↗
Stats
PythonReactHTMLBashSQLGraphQLGitGitHubAnthropicOpenAIGeminiMCP
27
Stars
11
Forks
Maintained
Maintenance
Python
Language
MIT
License
Last commit
Created

Repo: charlieviettq/awesome-agent-skill

In this plugin
200 skills4 commands
See everything inside
@charlieviettq
Ships withawesome-agent-skill

Curated skill pack for LLM agents in engineer and science workflow (Cursor & Claude ready).

27200 skills
Get the whole plugin

Stars on GitHub

Momentum

stars in total
27
Star history of charlieviettq/awesome-agent-skill on GitHub, a chart by star-history.com
See what's trending this week

Other skills on awesome-agent-skill.

See all 200 skills in awesome-agent-skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

superpowers12d311k
@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills10d309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc12d293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react1d252k
@facebook@facebookInstall Skill

Questions about frontend-ui-accessibility.

Which coding agents can use frontend-ui-accessibility?
frontend-ui-accessibility installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.