Agent skill

Accessible Content

by Owl-Listener in Owl-Listener/designpowers

A skill your agent uses when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content…

MITAuto-check passedFrontend & Design

Install Accessible Content

skills CLI
$ npx skills add Owl-Listener/designpowers --skill accessible-content -a claude-code

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

GitHub CLI
$ gh skill install Owl-Listener/designpowers accessible-content --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/Owl-Listener/designpowers.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/accessible-content .claude/skills/accessible-content && 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
accessible-content
GitHub stars
251
Token cost
~1.1k tokens
SKILL.md length
581 words
Files
1
Skills in repo
33
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content…

  • Works in 8 steps: Plain Language First → Heading Structure → Form Labels and Instructions → …
  • Structuring any user-facing content — interface copy
  • SKILL.md covers When to Use, Process and Integration
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Accessible Content is an agent skill from Owl-Listener/designpowers. Use when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content is readable, navigable, and meaningful for everyone

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering Accessibility. The repository describes itself as: An agent design team you control: 10 agents that run an inclusive design process while you direct. The licence is MIT.

When your agent uses it

  • Structuring any user-facing content — interface copy
  • Form instructions — ensures content is readable
  • Meaningful for everyone

Example prompts

  • “/accessible-content”

Workflow steps

8 steps, taken from the step headings in SKILL.md.

  1. Plain Language First
  2. Heading Structure
  3. Form Labels and Instructions
  4. Alt Text
  5. Link Text
  6. Error Messages
  7. Tables
  8. Content Review

What it can do on your machine

Read from SKILL.md and the folder at commit cb00757. 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

Accessible Content loads about 1.1k tokens when it runs. Until then it costs about 62 tokens; SKILL.md has 581 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~62
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

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 Owl-Listener/designpowers at commit cb00757, republished under its MIT licence (© Owl-Listener). 581 words, ~1,115 tokens.

Download SKILL.mdSave it as .claude/skills/accessible-content/SKILL.md (or your agent's skills folder).
name
accessible-content
description
Use when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content is readable, navigable, and meaningful for everyone

Accessible Content

Words are interface. Every label, every heading, every error message is a design decision. This skill ensures content works for screen readers, for people reading in a second language, for people under stress, and for people who just need things to be clear.

When to Use

  • Writing interface labels, button text, or form instructions
  • Structuring headings and page hierarchy
  • Writing error messages or help text
  • Creating alt text for images
  • Writing link text
  • Structuring data tables
  • Any time words appear on screen

Process

Step 1: Plain Language First

Every piece of content should meet these criteria:

  • Reading level: aim for a reading age of 12-14 (roughly 6th-8th grade). Use short sentences and common words
  • One idea per sentence. If a sentence has "and" in the middle, consider splitting it
  • Active voice. "We sent your confirmation" not "Your confirmation has been sent"
  • Specific over vague. "Save your changes" not "Submit" or "OK"
  • No jargon unless the audience demonstrably uses it. When jargon is necessary, provide a plain explanation
Step 2: Heading Structure

Headings are navigation for screen readers. Get the structure right:

  • One H1 per page — describes the page purpose
  • Headings follow a logical hierarchy — H1 → H2 → H3, never skip levels
  • Headings are descriptive — a screen reader user scanning headings alone should understand the page structure
  • Do not use headings for visual styling — if you need big bold text that is not a heading, use CSS
Step 3: Form Labels and Instructions

Every form input must have:

  • A visible label — placeholders are not labels (they disappear on focus)
  • Programmatic association — <label for="id"> or aria-labelledby
  • Required field indication — visible and announced, not just an asterisk
  • Format hints — "DD/MM/YYYY" before the input, not after
  • Error association — aria-describedby linking the input to its error message
Step 4: Alt Text

Alt text is content, not metadata:

Image TypeAlt Text Approach
Informative imageDescribe the information the image conveys, not the image itself
Decorative imageEmpty alt (alt="") — do not describe decorative images
Functional image (button/link)Describe the action, not the image ("Search", not "magnifying glass")
Complex image (chart/graph)Brief alt + detailed description in surrounding text or <details>
Image of textReproduce the full text content
Show full SKILL.md (218 more words)Show less

Links must make sense out of context (screen reader users often navigate by links alone):

  • Yes: "Read the accessibility guidelines"
  • No: "Click here" or "Read more" or "Learn more"
  • If multiple "Read more" links exist on a page, each must be distinguishable (via aria-label or visible text)
Step 6: Error Messages

Follow the pattern: [What happened] + [What to do]

  • Keep the language neutral — never blame the user
  • Be specific about what needs to change
  • Place the error message adjacent to the relevant field
  • Announce errors to screen readers via aria-live="assertive" or by moving focus
Step 7: Tables

Data tables need:

  • <caption> describing the table's purpose
  • <th> elements with scope="col" or scope="row"
  • No layout tables — use CSS Grid or Flexbox for layout
  • If a table is complex, provide a text summary
Step 8: Content Review

Before finalising any content, verify:

  • Every interactive element has a visible, descriptive label
  • Heading hierarchy is logical and complete
  • Link text makes sense out of context
  • Error messages explain both the problem and the solution
  • Alt text is present and appropriate for every image
  • Reading level is appropriate for the audience
  • Content works when translated (avoid idioms, cultural references that do not travel)

Integration

  • Called by: writing-design-plans, ui-composition, interaction-design
  • Pairs with: cognitive-accessibility (reading load), inclusive-personas (audience awareness)
  • Reviewed by: designpowers-critique

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

Files

Just SKILL.md in skills/accessible-content of Owl-Listener/designpowers.

Open the folder on GitHubat commit cb00757

Compare with similar skills

Accessible Content 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.

Accessible Content compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Accessible Content this skillOwl-Listener/designpowers251—~1.1kAutomated safety check: PassMIT
Antislop Humanmiqdadbadjuber/anti-slop5.2k—~2.8kAutomated safety check: PassMIT
Md Reviewborghei/Claude-Skills886—~3.8kAutomated safety check: PassMIT
Slop Evalfabricioctelles/skills106—~5.4kAutomated safety check: PassApache-2.0
Anti Slop FrontendBlackBeltTechnology/pi-agent-dashboard315—~3.5kAutomated safety check: PassMIT
Drug Retrosynthesislearningmatter-mit/AtomisticSkills176—~647Automated safety check: PassMIT

Similar skills

  • Antislop Human

    miqdadbadjuber/anti-slop

    Human and accessibility skill for antislop. An agent skill from miqdadbadjuber/anti-slop.

    5.2k GitHub stars~2.8k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Md Review

    borghei/Claude-Skills

    Pre-publication quality gate for authored Markdown — heading structure, on-disk link resolution, readability, accessibility, terminology.

    886 GitHub stars~3.8k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Slop Eval

    fabricioctelles/skills

    Objectively evaluate a UI/web design against the pols.dev anti-slop design law: detect catalogued slop tells with cited evidence, score 8 weighted axes (color, type, components, layout, motion…

    106 GitHub stars~5.4k tokensUpdated 5 days ago
    Frontend & DesignAuto-check passed
  • Anti Slop Frontend

    BlackBeltTechnology/pi-agent-dashboard

    A mechanical, countable anti-slop checklist for AI-generated frontend.

    315 GitHub stars~3.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Drug Retrosynthesis

    learningmatter-mit/AtomisticSkills

    Predict synthetic accessibility and retrosynthetic pathways for novel molecules using the IBM RXN API.

    176 GitHub stars~647 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Figure Table Quality

    Mathews-Tom/armory

    Readability and rendering audit for figures and tables in academic manuscripts.

    328 GitHub stars~1.7k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

More from Owl-Listener/designpowers

All 33 skills in this repo
  • Adaptive Interfaces

    Owl-Listener/designpowers

    A skill your agent uses when designing for user preferences — motion sensitivity, contrast needs, colour schemes, text sizing, information density, or any interface behaviour that should adapt to…

    251 GitHub stars~1.1k tokensUpdated 3 mo ago
    Auto-check passed
  • Design Debate

    Owl-Listener/designpowers

    A skill your agent uses when a design direction is uncertain, when the team could go multiple ways, or when the user wants to see competing approaches argued before committing — orchestrates…

    251 GitHub stars~2.1k tokensUpdated 3 mo ago
    Auto-check passed
  • Design Debt Tracker

    Owl-Listener/designpowers

    A skill your agent uses when critique or review produces deferred findings, when checking accumulated design compromises, or when deciding what to address in the next iteration.

    251 GitHub stars~2.2k tokensUpdated 3 mo ago
    Auto-check passed
  • Design Discovery

    Owl-Listener/designpowers

    You MUST use this before any creative or design work — building features, creating components, designing interfaces, modifying user-facing behaviour.

    251 GitHub stars~2.1k tokensUpdated 3 mo ago
    Auto-check passed
  • Design Handoff

    Owl-Listener/designpowers

    A skill your agent uses when design work is complete and needs to be communicated to engineering — creates specifications, documents rationale, accessibility requirements, and interaction details in…

    251 GitHub stars~1.1k tokensUpdated 3 mo ago
    Auto-check passed
  • Design Review

    Owl-Listener/designpowers

    A skill your agent uses when the user wants to evaluate something that ALREADY EXISTS rather than build something new — "review this", "audit this screen", "what's wrong with this page", "is this…

    251 GitHub stars~1.7k tokensUpdated 3 mo ago
    Auto-check passed

Questions about Accessible Content

What does Accessible Content do?

A skill your agent uses when writing or structuring any user-facing content — interface copy, labels, error messages, help text, headings, alt text, link text, or form instructions — ensures content…. Accessible Content is an agent skill from Owl-Listener/designpowers.

When should I use Accessible Content?

Accessible Content fits situations like: structuring any user-facing content — interface copy; form instructions — ensures content is readable; meaningful for everyone.

How do I install Accessible Content in Claude Code?

Run `npx skills add Owl-Listener/designpowers --skill accessible-content -a claude-code`. Or copy the skill folder (skills/accessible-content in Owl-Listener/designpowers) into .claude/skills/accessible-content in your project. Claude Code loads it when a task matches its description.

How do I install Accessible Content in Codex?

Run `npx skills add Owl-Listener/designpowers --skill accessible-content -a codex`. Or copy the skill folder (skills/accessible-content in Owl-Listener/designpowers) into .agents/skills/accessible-content in your project. Codex loads it when a task matches its description.

Can I use Accessible Content 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 Owl-Listener/designpowers --skill accessible-content -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/accessible-content, .gemini/skills/accessible-content, .github/skills/accessible-content and .opencode/skills/accessible-content in your project.

What does Accessible Content need to run?

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

Does Accessible Content 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 Accessible Content 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 Accessible Content use?

Accessible Content 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 Accessible Content use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Accessible Content?

Skills that share tags, products or a category with Accessible Content: Antislop Human (miqdadbadjuber/anti-slop, 5.2k stars), Md Review (borghei/Claude-Skills, 886 stars), Slop Eval (fabricioctelles/skills, 106 stars) and Anti Slop Frontend (BlackBeltTechnology/pi-agent-dashboard, 315 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Accessible Content?

Owl-Listener (a GitHub user) maintains it in Owl-Listener/designpowers, which has 251 GitHub stars. The repository holds 33 skills in this directory. The repository was last updated on June 23, 2026.

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