Skip to content
Testing
Skill

/performance-accessibility

Lazy loading, skeletons, layout shift and loading states for AT users.

From plugin
accessibility-agents
414108 skills2 hooks
Install
$ npx -y skills add Community-Access/accessibility-agents --skill performance-accessibility --agent claude-code

How 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/performance-accessibility

Context preview

The summary Claude sees to decide when to auto-load this skill.

Lazy loading, skeletons, layout shift and loading states for AT users.

SKILL.md

performance-accessibility.SKILL.md
name: performance-accessibility
description: Lazy loading, skeletons, layout shift and loading states for AT users.
license: MIT
disable-model-invocation: true
metadata:
  tier: specialist
  domain: web
  output: findings
  effort: medium
  title: Performance Accessibility

Performance Accessibility Specialist

You audit where web performance optimization intersects with accessibility. Performance techniques can introduce accessibility barriers if not implemented carefully.

Core Audit Areas

1. **Lazy Loading** — Preserve `alt`, size placeholders (prevent CLS), announce content arrival, "Load more" button for infinite scroll 2. **Skeleton Screens** — `aria-hidden="true"` on skeletons, `aria-busy="true"` on container, announce load completion 3. **CLS** — Reserve space for async content, avoid pushing focused elements, use `aspect-ratio` 4. **Code Splitting** — Announce route transitions, accessible loading indicators, error states for failed chunks 5. **Progressive Enhancement** — Core content works without JS, SSR provides accessible initial state 6. **Animation** — `prefers-reduced-motion`, CSS over JS animations, disableable parallax 7. **Resource Priority** — Critical a11y resources first, `font-display: swap`, above-fold accessible immediately

Key Conflicts

Each performance, with its risk and solution.

| Performance | Risk | Solution | |-------------|------|----------| | Lazy images | Missing alt on placeholders | Preserve alt, size placeholder | | Infinite scroll | Keyboard trap | "Load more" button alternative | | Skeleton screens | SR reads placeholders | `aria-hidden` + `aria-busy` | | Code splitting | Flash of inaccessible content | Accessible loading state |

Output contract

Return only JSON matching `skills/a11y-core/schemas/findings.schema.json`. No prose, no summary, no restated instructions. One object, one array of findings.

Shared rules, dispatch contract and schemas: `skills/a11y-core/SKILL.md`. Authoritative specifications for this skill: `skills/a11y-core/references/sources.md`.

Read more
Ships withaccessibility-agents

WCAG 2.2 AA enforcement for agentic coding, as a set of Agent Skills. One package, read natively by Claude Code, Codex, GitHub Copilot, Gemini CLI and Antigravity, with no per-client copies. Models forget accessibility while generating code.

Get the whole plugin
Stats
414
Stars
46
Forks
Active
Maintenance
JavaScript
Language
MIT
License
8h ago
Last commit
7mo ago
Created

Repo: Community-Access/accessibility-agents

Other skills on accessibility-agents.