Skill
architecture
Living Architecture Map — auto-generate Mermaid diagrams of your codebase. Use when user wants to visualize architecture, understand code structure, generate…
@houseofmvpsView SkillDevelopment
Skill
/a11y
Accessibility audit + auto-fix (WCAG 2.2 A/AA). Scans built/static HTML for screen-reader, keyboard, and structure failures, fixes the deterministic ones, and escalates to a rendered scan for contrast and focus. Use when the user wants to check or improve accessibility, fix WCAG
Install
$ npx -y skills add Houseofmvps/ultraship --skill a11y --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/a11y
Context preview
The summary Claude sees to decide when to auto-load this skill.
Accessibility audit + auto-fix (WCAG 2.2 A/AA). Scans built/static HTML for screen-reader, keyboard, and structure failures, fixes the deterministic ones, and escalates to a rendered scan for contrast and focus. Use when the user wants to check or improve accessibility, fix WCAG
SKILL.md
a11y.SKILL.mdname: a11y
description: Accessibility audit + auto-fix (WCAG 2.2 A/AA). Scans built/static HTML for screen-reader, keyboard, and structure failures, fixes the deterministic ones, and escalates to a rendered scan for contrast and focus. Use when the user wants to check or improve accessibility, fix WCAG issues, or pass an a11y review.
argument-hint: "<url-or-directory>"
allowed-tools: Bash, Read, Edit, Grep, Glob
paths: ["**/*.html", "**/*.htm", "**/index.html"]
Accessibility Audit + Auto-Fix (WCAG 2.2)
AI builders ship accessibility violations by default — missing alt text, unlabeled inputs, icon-only buttons, no `lang`, broken heading order. These are legally consequential (ADA, EU Accessibility Act) and most are deterministically detectable and fixable. This skill finds them AND fixes them.
Process
Phase 1: Scan
Run the static scanner on the project (point it at built/exported HTML, e.g. `dist/`, `build/`, `out/`, `.next/`, or `public/`):
node ${CLAUDE_PLUGIN_ROOT}/tools/a11y-scanner.mjs <project-directory>Parse the JSON: `findings[]` (`{ file, severity, category, rule, message }`), `summary` (counts by severity), and `scores.a11y` (0–100, or null when no HTML found).
> **Many pages, each needing fixes?** Escalate to a **dynamic Workflow** (describe the audit and include the word "workflow") so scan → fix → verify runs across pages in parallel instead of one at a time.
Phase 2: Report
Present findings grouped by rule, highest severity first. Map each to its WCAG criterion (already in the message). Make clear which are auto-fixable now vs which need a rendered scan (Phase 4).
Phase 3: Fix (use the Edit tool on the source files)
Apply the deterministic fix for each finding. **Do not invent content** — for alt text and labels, derive from nearby context (filename, heading, surrounding copy, `name`/`placeholder`); if genuinely ambiguous, ask the user rather than guessing.
| Rule | Fix | |---|---| | `html-missing-lang` / `html-empty-lang` | Add `lang="en"` (or the document's real language) to `<html>` | | `img-missing-alt` | Add `alt="<concise description>"` from context; use `alt=""` only if the image is purely decorative | | `input-image-missing-alt` | Add `alt="<what the button does>"` | | `control-missing-label` | Add a `<label for="id">`, or `aria-label`/`aria-labelledby`. A `placeholder` is NOT a label — keep it but add a real label | | `button-no-text` | Add visible text, or `aria-label="<action>"` for icon-only buttons | | `link-no-text` | Add link text, or `aria-label`; if it wraps an icon, give the icon `alt`/`aria-label` | | `link-generic-text` | Rewrite "click here"/"read more" to state the destination ("Read the pricing guide") | | `positive-tabindex` | Change to `tabindex="0"` (or remove) and fix order via DOM order | | `viewport-zoom-disabled` | Remove `user-scalable=no` / `maximum-scale=1` from the viewport meta | | `duplicate-id` | Make each `id` unique (and update its label/aria references) | | `broken-aria-reference` | Point `aria-labelledby`/`aria-describedby`/`for` at a real element id, or add the missing element | | `empty-heading` | Remove the empty heading or give it text | | `heading-skip` | Insert the missing level or demote the heading so levels don't jump | | `missing-title` | Add a descriptive `<title>` in `<head>` | | `missing-main-landmark` | Wrap the primary content in `<main>` |
Phase 4: Escalate to a rendered scan (contrast, focus, reading order)
The static scanner cannot see computed styles or focus behavior. When a URL or running dev server is available, run a rendered audit — these tools need no install (npx fetches them) and cover **color contrast (WCAG 1.4.3)**, focus visibility, and ARIA state:
# Pa11y (axe + htmlcs runners). Use --runner axe for axe-core rules.
npx --yes pa11y --standard WCAG2AA <url>
# or the axe CLI directly
npx --yes @axe-core/cli <url>
If the project uses Playwright (Ultraship bundles the Playwright MCP), prefer injecting `axe-core` into the live page for per-component results. Report contrast and focus findings the static pass could not catch.
Phase 5: Verify
Re-run the scanner and report before/after `scores.a11y`:
node ${CLAUDE_PLUGIN_ROOT}/tools/a11y-scanner.mjs <project-directory>
node ${CLAUDE_PLUGIN_ROOT}/tools/audit-history.mjs save <project-dir> a11y <score>Key Principles
- **Fix, don't just audit.** Every deterministic finding gets a concrete fix applied.
- **Zero false positives.** The scanner only flags source-visible failures; never "fix" something it didn't flag without confirming it's real.
- **Decorative vs meaningful.** `alt=""` is correct for decorative images — don't add fake descriptions to them.
- **Static + rendered together.** The scanner catches structure/labels/alt; the rendered pass (Phase 4) catches contrast and focus. A real a11y pass needs both.
Read more
name: a11y description: Accessibility audit + auto-fix (WCAG 2.2 A/AA). Scans built/static HTML for screen-reader, keyboard, and structure failures, fixes the deterministic ones, and escalates to a rendered scan for contrast and focus. Use when the user wants to check or improve accessibility, fix WCAG issues, or pass an a11y review. argument-hint: "<url-or-directory>" allowed-tools: Bash, Read, Edit, Grep, Glob paths: ["**/*.html", "**/*.htm", "**/index.html"]
Accessibility Audit + Auto-Fix (WCAG 2.2)
AI builders ship accessibility violations by default — missing alt text, unlabeled inputs, icon-only buttons, no `lang`, broken heading order. These are legally consequential (ADA, EU Accessibility Act) and most are deterministically detectable and fixable. This skill finds them AND fixes them.
Process
Phase 1: Scan
Run the static scanner on the project (point it at built/exported HTML, e.g. `dist/`, `build/`, `out/`, `.next/`, or `public/`):
node ${CLAUDE_PLUGIN_ROOT}/tools/a11y-scanner.mjs <project-directory>Parse the JSON: `findings[]` (`{ file, severity, category, rule, message }`), `summary` (counts by severity), and `scores.a11y` (0–100, or null when no HTML found).
> **Many pages, each needing fixes?** Escalate to a **dynamic Workflow** (describe the audit and include the word "workflow") so scan → fix → verify runs across pages in parallel instead of one at a time.
Phase 2: Report
Present findings grouped by rule, highest severity first. Map each to its WCAG criterion (already in the message). Make clear which are auto-fixable now vs which need a rendered scan (Phase 4).
Phase 3: Fix (use the Edit tool on the source files)
Apply the deterministic fix for each finding. **Do not invent content** — for alt text and labels, derive from nearby context (filename, heading, surrounding copy, `name`/`placeholder`); if genuinely ambiguous, ask the user rather than guessing.
| Rule | Fix | |---|---| | `html-missing-lang` / `html-empty-lang` | Add `lang="en"` (or the document's real language) to `<html>` | | `img-missing-alt` | Add `alt="<concise description>"` from context; use `alt=""` only if the image is purely decorative | | `input-image-missing-alt` | Add `alt="<what the button does>"` | | `control-missing-label` | Add a `<label for="id">`, or `aria-label`/`aria-labelledby`. A `placeholder` is NOT a label — keep it but add a real label | | `button-no-text` | Add visible text, or `aria-label="<action>"` for icon-only buttons | | `link-no-text` | Add link text, or `aria-label`; if it wraps an icon, give the icon `alt`/`aria-label` | | `link-generic-text` | Rewrite "click here"/"read more" to state the destination ("Read the pricing guide") | | `positive-tabindex` | Change to `tabindex="0"` (or remove) and fix order via DOM order | | `viewport-zoom-disabled` | Remove `user-scalable=no` / `maximum-scale=1` from the viewport meta | | `duplicate-id` | Make each `id` unique (and update its label/aria references) | | `broken-aria-reference` | Point `aria-labelledby`/`aria-describedby`/`for` at a real element id, or add the missing element | | `empty-heading` | Remove the empty heading or give it text | | `heading-skip` | Insert the missing level or demote the heading so levels don't jump | | `missing-title` | Add a descriptive `<title>` in `<head>` | | `missing-main-landmark` | Wrap the primary content in `<main>` |
Phase 4: Escalate to a rendered scan (contrast, focus, reading order)
The static scanner cannot see computed styles or focus behavior. When a URL or running dev server is available, run a rendered audit — these tools need no install (npx fetches them) and cover **color contrast (WCAG 1.4.3)**, focus visibility, and ARIA state:
# Pa11y (axe + htmlcs runners). Use --runner axe for axe-core rules. npx --yes pa11y --standard WCAG2AA <url> # or the axe CLI directly npx --yes @axe-core/cli <url>
If the project uses Playwright (Ultraship bundles the Playwright MCP), prefer injecting `axe-core` into the live page for per-component results. Report contrast and focus findings the static pass could not catch.
Phase 5: Verify
Re-run the scanner and report before/after `scores.a11y`:
node ${CLAUDE_PLUGIN_ROOT}/tools/a11y-scanner.mjs <project-directory>
node ${CLAUDE_PLUGIN_ROOT}/tools/audit-history.mjs save <project-dir> a11y <score>Key Principles
- **Fix, don't just audit.** Every deterministic finding gets a concrete fix applied.
- **Zero false positives.** The scanner only flags source-visible failures; never "fix" something it didn't flag without confirming it's real.
- **Decorative vs meaningful.** `alt=""` is correct for decorative images — don't add fake descriptions to them.
- **Static + rendered together.** The scanner catches structure/labels/alt; the rendered pass (Phase 4) catches contrast and focus. A real a11y pass needs both.
Ships withultraship
"ULTRASHIP" Claude Code plugin — 39 skills, 33 tools, 11 agents for ship-ready workflows: planning, review, pentesting, safety guardrails, canary monitoring, SEO/AI-readiness check, penetration testing, code review, competitive analysis, incident response. 1 dependency. 180 tests. MIT.
Get the whole plugin
Stats
122
Stars
14
Forks
Maintained
Maintenance
JavaScript
Language
MIT
License
2mo ago
Last commit
5mo ago
Created
Repo: Houseofmvps/ultraship
Other skills on ultraship.
@houseofmvpsView SkillSkill
brainstorming
You MUST use this before any creative work - creating features, building components, adding functionality, or modifying behavior. Explores user intent,…
@houseofmvpsView SkillSkill
canary
Post-deploy canary monitoring — checks site health, detects regressions, monitors for errors after deployment. Use after deploying to verify production is…
@houseofmvpsView SkillSkill
clone-patterns
Learn From the Best — analyze patterns from any codebase and apply them to yours. Use when user wants to adopt best practices from another repo, compare code…
@houseofmvpsView SkillSkill
code-review
Code review with principal-engineer-level depth. Reviews for correctness, performance, security, maintainability, and architecture. Use when completing tasks,…
@houseofmvpsView SkillSkill
compete
Competitive X-Ray — analyze any competitor URL vs your site. Use when user wants to compare their site against a competitor, benchmark performance, or…
@houseofmvpsView Skill