New: 97,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Payload Accessibility

by payloadcms in payloadcms/payload

A skill your agent uses when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence.

MITAuto-check passedFrontend & Design

Install Payload Accessibility

skills CLI
$ npx skills add payloadcms/payload --skill payload-accessibility -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install payloadcms/payload payload-accessibility --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/payloadcms/payload.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/payload-accessibility .claude/skills/payload-accessibility && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
payload-accessibility
GitHub stars
45k
Token cost
~808 tokens
SKILL.md length
409 words
Files
3 (incl. references)
Skills in repo
9
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence.

  • Works in 5 steps: Identify the rendered states, input… → Read wcag-2.2-aa.md. Assess every… → Prefer native HTML semantics. When a… → …
  • Reviewing rendered Payload UI
  • SKILL.md covers Change assessment, Test placement, Evidence boundaries and Required handoff
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Payload Accessibility is an agent skill from payloadcms/payload. Use when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence.

Its SKILL.md is about 810 tokens, which your agent loads only when the skill is triggered. The skill folder holds 3 other files, including reference files (for example `references/testing.md` and `references/wcag-2.2-aa.md`).

It sits in Frontend & Design, covering Accessibility. It works with Payload CMS. The repository describes itself as: Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a… The licence is MIT.

When your agent uses it

  • Reviewing rendered Payload UI
  • Semantic markup
  • Accessibility tests
  • WCAG/VPAT evidence

Example prompts

  • “/payload-accessibility”

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Identify the rendered states, input methods, viewport conditions, and assistive-technology behavior the change can affect.
  2. Read wcag-2.2-aa.md. Assess every plausibly affected WCAG 2.2 Level A and AA criterion; do not limit review to criteria named in an issue.
  3. Prefer native HTML semantics. When a composite ARIA pattern is necessary, implement its complete semantics and keyboard behavior rather…
  4. Read testing.md and select evidence based on the observable outcome.
  5. Exercise the changed behavior in every relevant state. Accessibility checks must cover the production component and integration context…

What it can do on your machine

Read from SKILL.md and the folder at commit ed6a954. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Payload Accessibility loads about 808 tokens when it runs, and up to ~6.7k if it reads all its reference files. Until then it costs about 41 tokens; SKILL.md has 409 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~41
When it runs · the whole SKILL.md, loaded when a task matches
~808
With references · SKILL.md plus every file in references/, read only if the agent opens them
~6.7k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from payloadcms/payload at commit ed6a954, republished under its MIT licence (© payloadcms). 409 words, ~808 tokens.

Download SKILL.mdSave it as .claude/skills/payload-accessibility/SKILL.md (or your agent's skills folder). This skill also uses 2 other files; get the full folder from GitHub.
name
payload-accessibility
description
Use when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence.

Payload Accessibility

Assess accessibility as part of the change, not as a scan added afterward. Scope conclusions to the behavior and states actually evaluated.

Change assessment

For every affected component or flow:

  1. Identify the rendered states, input methods, viewport conditions, and assistive-technology behavior the change can affect.
  2. Read wcag-2.2-aa.md. Assess every plausibly affected WCAG 2.2 Level A and AA criterion; do not limit review to criteria named in an issue.
  3. Prefer native HTML semantics. When a composite ARIA pattern is necessary, implement its complete semantics and keyboard behavior rather than adding roles or states in isolation.
  4. Read testing.md and select evidence based on the observable outcome.
  5. Exercise the changed behavior in every relevant state. Accessibility checks must cover the production component and integration context, not a simplified substitute.

Test placement

  • Put browser-observable, criterion-level accessibility evidence in test/a11y/WCAG.e2e.spec.ts, inside the numerically ordered test.describe group for its primary criterion.
  • Put evidence that depends on synthesized speech or a screen-reader virtual/browse cursor in test/a11y/screen-reader.spec.ts, under the same criterion organization.
  • Put setup shared by both accessibility specs in test/a11y/helpers.ts. Keep scenario-specific setup in its spec.
  • Keep low-level unit tests beside their component when they verify an implementation contract. They supplement, but do not replace, an end-to-end WCAG regression when the reported barrier occurs only in the rendered application.
  • Reuse the existing test/a11y Payload configuration and real UI components. Do not create a new accessibility fixture or criterion file by default.
Show full SKILL.md (168 more words)Show less

Evidence boundaries

  • Axe finds a subset of machine-detectable failures. A clean scan is not proof of criterion or product conformance.
  • DOM and accessibility-tree assertions do not prove exact spoken output.
  • Guidepup is for outcomes that specifically depend on screen-reader output or cursor behavior, not every issue originally discovered with a screen reader.
  • Require human visual or assistive-technology confirmation only when the outcome depends on judgement, timing, platform behavior, or an interaction that reliable automation does not reproduce.
  • WCAG 2.2 Level AA conformance requires all applicable Level A and Level AA criteria. A qualified human reviewer approves VPAT/ACR conformance statements.

Required handoff

Report:

  1. The affected UI, states, and interaction methods assessed.
  2. The WCAG 2.2 A/AA criteria assessed and why they were applicable or potentially affected.
  3. Automated tests and commands run, with their results.
  4. Required visual, screen-reader, or other manual verification.
  5. Known failures, limitations, and any criterion that cannot yet be supported.

Never report a component, criterion, or product as conforming beyond the evidence collected.

© payloadcms, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 2 other files (references) in .agents/skills/payload-accessibility of payloadcms/payload.

  • SKILL.md
  • references/testing.md
  • references/wcag-2.2-aa.md

Open the folder on GitHubat commit ed6a954

Compare with similar skills

Payload Accessibility next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Payload Accessibility compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Payload Accessibility this skillpayloadcms/payload45k—~808Automated safety check: PassMIT
Web Interface Guidelines Reviewervercel-labs/openreview1.7k98 repos~308Automated safety check: PassNone
Accessibility Reviewmarkmead/hyperui12k1 repos~1.1kAutomated safety check: PassMIT
Web Animation DesignbaptisteArno/typebot.io11k2 repos~2.7kAutomated safety check: PassCustom licence
Accessibility Fixeribelick/ui-skills9.4k4 repos~1.2kAutomated safety check: PassMIT
Wcag Audit PatternsvmDeshpande/ai-agent-automation17810 repos~610Automated safety check: PassApache-2.0

Similar skills

  • Web Interface Guidelines Reviewer

    vercel-labs/openreview

    Official

    Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my…

    1.7k GitHub starsUsed in 98 repos~308 tokens
    Frontend & DesignAuto-check passed

  • Accessibility Review

    markmead/hyperui

    Run a WCAG 2.1 AA accessibility audit on a design or page. An agent skill from markmead/hyperui.

    12k GitHub starsUsed in 1 repo~1.1k tokens
    Frontend & DesignAuto-check passed

  • Web Animation Design

    baptisteArno/typebot.io

    Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.

    11k GitHub starsUsed in 2 repos~2.7k tokens
    Frontend & DesignAuto-check passed

  • Accessibility Fixer

    ibelick/ui-skills

    Audits and fixes HTML accessibility problems such as ARIA labels, keyboard navigation, focus management, contrast and form errors with minimal changes.

    9.4k GitHub starsUsed in 4 repos~1.2k tokens
    Frontend & DesignAuto-check passed

  • Wcag Audit Patterns

    vmDeshpande/ai-agent-automation

    Conduct WCAG 2.2 accessibility audits with automated testing, manual verification, and remediation guidance.

    178 GitHub starsUsed in 10 repos~610 tokens
    Frontend & DesignAuto-check passed

  • Baseline UI

    ibelick/ui-skills

    Applies a fixed set of UI rules for stack, components, interaction, animation, typography and layout, or reviews a file against them with concrete fixes.

    9.4k GitHub starsUsed in 8 repos~855 tokens
    Frontend & DesignAuto-check passed

More from payloadcms/payload

All 9 skills in this repo

  • Record PR Demo

    payloadcms/payload

    A skill your agent uses when a Payload pull request needs a concise visual walkthrough for reviewers.

    45k GitHub stars~1k tokensUpdated today
    Auto-check passed

  • Payload

    payloadcms/payload

    A skill your agent uses when working with Payload projects (payload.config.ts, collections, fields, hooks, access control, Payload API).

    45k GitHub starsUsed in 5 repos~6.2k tokens
    Auto-check passed

  • Audit Dependencies

    payloadcms/payload

    A skill your agent uses when fixing dependency vulnerabilities, running pnpm audit, or when the audit-dependencies CI check fails

    45k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Generate Translations

    payloadcms/payload

    A skill your agent uses when new translation keys are added to packages to generate new translations strings

    45k GitHub stars~1.1k tokensUpdated today
    Auto-check passed

  • Triage CI Flake

    payloadcms/payload

    A skill your agent uses when CI tests fail on main branch after PR merge, when investigating flaky test failures, or when user provides a PR URL/number to aggregate all failing tests

    45k GitHub stars~4.4k tokensUpdated today
    Auto-check passed

  • Ui4 Convert Tests

    payloadcms/payload

    A skill your agent uses when UI changes are complete and e2e tests need updating.

    45k GitHub stars~3.5k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Payload Accessibility

What does Payload Accessibility do?

A skill your agent uses when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence. Payload Accessibility is an agent skill from payloadcms/payload. Use when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG/VPAT evidence.

When should I use Payload Accessibility?

Payload Accessibility fits situations like: reviewing rendered Payload UI; semantic markup; accessibility tests; WCAG/VPAT evidence.

How do I install Payload Accessibility in Claude Code?

Run `npx skills add payloadcms/payload --skill payload-accessibility -a claude-code`. Or copy the skill folder (.agents/skills/payload-accessibility in payloadcms/payload) into .claude/skills/payload-accessibility in your project. Claude Code loads it when a task matches its description.

How do I install Payload Accessibility in Codex?

Run `npx skills add payloadcms/payload --skill payload-accessibility -a codex`. Or copy the skill folder (.agents/skills/payload-accessibility in payloadcms/payload) into .agents/skills/payload-accessibility in your project. Codex loads it when a task matches its description.

Can I use Payload Accessibility in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add payloadcms/payload --skill payload-accessibility -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/payload-accessibility, .gemini/skills/payload-accessibility, .github/skills/payload-accessibility and .opencode/skills/payload-accessibility in your project.

What does Payload Accessibility need to run?

SKILL.md names no scripts, command-line tools or credentials: Payload Accessibility is instructions for the agent only.

Does Payload Accessibility access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Payload Accessibility safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Payload Accessibility use?

Payload Accessibility is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Payload Accessibility use?

About 808 tokens (SKILL.md is roughly 3.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.9k tokens, read only when the agent opens those files.

What are the alternatives to Payload Accessibility?

Skills that share tags, products or a category with Payload Accessibility: Web Interface Guidelines Reviewer (vercel-labs/openreview, 1.7k stars), Accessibility Review (markmead/hyperui, 12k stars), Web Animation Design (baptisteArno/typebot.io, 11k stars) and Accessibility Fixer (ibelick/ui-skills, 9.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Payload Accessibility?

payloadcms (a GitHub organization) maintains it in payloadcms/payload, which has 45,120 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 7, 2026.

Source: payloadcms/payload on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.