effeilo/claude-code-frontend-skills · Archived

front-a11y

Audit or fix accessibility issues (WCAG 2.1 AA) in HTML, Vue, Svelte, or Astro files. Checks images, ARIA, keyboard navigation, forms, and semantic HTML. Usage: /front-a11y [fix]

Installation

$ npx skills add effeilo/claude-code-frontend-skills --skill front-a11y

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

Also in this package

Other skills from effeilo/claude-code-frontend-skills.

npx skills add effeilo/claude-code-frontend-skills

Browse all from effeilo/claude-code-frontend-skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 3
License LICENSE.md
Default branch main
Open issues 0
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Allowed toolsRead, Edit, Write, Glob
Declared agents claude-code

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,159 B
  • docs README.md 12,484 B
  • docs SUMMARY.md 196 B

History

  1. First recorded snapshot · 29 installs

SKILL.md

Audit or fix accessibility issues in the file that is currently open or explicitly mentioned by the user.

  • Default (no arguments): Audit mode : analyse the file and produce a structured report of all accessibility issues found.
  • If $ARGUMENTS contains fix: Fix mode : apply all automatically-fixable issues directly to the file, then report what was fixed and what requires manual attention.

Step 1 : Detect the file language

Look at the extension of the target file:

  • If .html → the language file is front-a11y-html.md
  • If .jsx or .tsx → the language file is front-a11y-jsx.md
  • If .vue → the language file is front-a11y-vue.md
  • If .svelte → the language file is front-a11y-svelte.md
  • If .astro → the language file is front-a11y-astro.md
  • Otherwise → inform the user that this file type is not supported. Supported types: .html, .jsx, .tsx, .vue, .svelte, .astro.

The path of this skill file is always available from context. Resolve all sub-file paths relative to it.


Step 2 : Load the shared rules

Read front-a11y-rules.md (located in the same directory as this skill file). It contains all accessibility rules, their severity levels, detection criteria, and fix instructions.


Step 3 : Load the language-specific notes

Read the language file identified in Step 1 (located in the same directory as this skill file). It contains syntax notes for that language, detection nuances that override or extend the shared rules, and framework-specific additional rules.


Step 4 : Apply both

Apply all rules from front-a11y-rules.md, adjusted by the syntax notes and detection nuances from the language file. Then apply the framework-specific rules from the language file.


Output rules

Audit mode

  • Do not modify the file.
  • Output a structured accessibility report using this format:
## Accessibility Audit : filename.ext

### 🔴 Critical
**[line N] Short issue title**
Element: `<img src="hero.jpg">`
Problem: The `alt` attribute is missing.
Fix: Add `alt="[description]"` for meaningful images, or `alt=""` for decorative ones.

---

### 🟠 Major
...

### 🟡 Minor
...

---

### Summary
| Severity | Count |
|---|---|
| 🔴 Critical | N |
| 🟠 Major | N |
| 🟡 Minor | N |
| **Total** | **N** |
  • Group issues by severity: Critical → Major → Minor.
  • If a severity has no issues, omit that section.

Fix mode

  • Apply all automatically-fixable issues directly to the file.
  • Output the complete corrected file : do not truncate.
  • Preserve all original formatting and indentation.
  • After the file, output a Fix Report:
## Fix Report : filename.ext

### ✅ Fixed
- [line N] Short description of applied fix
- ...

### ⚠️ Requires manual attention
- [line N] Short description + suggested action
- ...