Guide · Agent skill
How to use the Accessible Progress Bar Names agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The aria-progressbar-name skill is an agent skill that guides an AI assistant to review web pages and components for progress bars (elements with role="progressbar") and check that each one has a clear accessible name. This guide explains what the skill does, how to install it from a downloaded ZIP, how to ask for a review in plain language, and what to expect from the results. You do not need prior experience with agent skills to follow it.
Accessible Progress Bar Namesthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the aria-progressbar-name skill as a ZIP file from the item page on this directory.
- 2Unzip into a skills folder. Unzip the file into ~/.claude/skills/ for a personal install, or into a project's .claude/skills/ folder for a single project.
- 3Or upload it in the Claude apps. In the Claude apps, open Settings, go to Capabilities, then Skills, and upload the ZIP.
- 4Ask for a progress bar review. Paste rendered HTML or describe the component and ask the agent to check progress bars for accessible names.
- 5Apply the suggested labels. Use the aria-label or aria-labelledby suggestions the agent gives, and add aria-valuenow, aria-valuemin and aria-valuemax where the value is known.
- 6Verify the result. Check the fixed component with browser accessibility tooling or a screen reader, since the skill cannot test announcements itself.
What the skill makes the agent do
Without an accessible name, a screen reader user hears that a progress bar exists but not what task it represents. This skill tells the agent to check that every progress bar has a name supplied by aria-label or aria-labelledby.
When reviewing markup, the agent flags progress bars that lack a name, suggests a label that describes what is being measured, and checks that value attributes are present when the value is known. The skill is a focused accessibility review guide, not a general-purpose tool.
- Flags role="progressbar" elements with no accessible name
- Suggests a label describing what the progress indicates
- Avoids redundant wording such as "progress" in the label
- Checks for aria-valuenow, aria-valuemin and aria-valuemax when the value is known
How to install the aria-progressbar-name skill
Download the skill as a ZIP file from the item page on this directory. Then choose one of the two install locations below. Unzip the file so that the skill folder ends up inside the skills directory.
For a personal install that applies across your projects, unzip it into ~/.claude/skills/. To limit the skill to a single project, unzip it into that project's .claude/skills/ folder instead.
If you use the Claude apps rather than a local folder, you can upload the ZIP instead. Open Settings, go to Capabilities, then Skills, and upload the file there.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
How to trigger the skill with natural requests
You do not need a special command. The skill is meant to be used when you ask the agent to review rendered HTML, interactive components, or design-system patterns that involve progress bars. Say what you want reviewed and mention progress bars, loading indicators or upload meters so the agent knows the rule applies.
Include the markup or a file path when you can. The more specific the request, the more useful the review will be.
- Review this upload component for accessible progress bar names.
- Check my loading spinner markup for a progressbar role and a name.
- Audit our design system's progress meter components for aria-label or aria-labelledby.
- Does this page's progress bar have aria-valuenow, aria-valuemin and aria-valuemax?
Example: naming a progress bar
The skill's reference material shows two ways to name a progress bar. The first uses aria-label directly on the element. The second points aria-labelledby at a visible heading, which keeps the name in sync with the page text.
Both examples include the value attributes the skill checks for when the value is known.
<div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="Uploading files"></div>What the skill needs and safety notes
The item lists no requirements. It does not run scripts and does not use the network, so it only provides guidance to the agent. It cannot verify how a screen reader actually announces content.
Treat the output as a checklist to work through. Confirm fixes with browser accessibility tooling or with assistive technology such as a screen reader before you ship.
- Runs scripts: no
- Uses network: no
- Requirements listed: none
- Licence: MIT
Tips for better reviews
Ask for the review while the component is rendered or paste the rendered HTML, since the skill's guidance covers rendered markup and interactive states. Include states such as loading, complete and error where they change the progress value.
Choose labels that name the task, such as "Uploading files" or "Fetching your data", rather than generic words. Keep the label in sync with visible text by using aria-labelledby where a heading already describes the task.
- Paste rendered markup, not only source templates, when possible
- Review each state of the component separately
- Use aria-labelledby when visible text already names the task
- Re-check the result with a screen reader after changes
What people use it for
- Reviewing a file upload meter before a release to confirm it has a name like "Uploading files".
- Auditing a design-system progress component so every instance is named consistently.
- Checking a loading indicator on a data page so screen reader users know what is being fetched.
- Reviewing a progress meter built from generic divs to see whether it should use real progress semantics.
Frequently asked questions
How do I install the aria-progressbar-name skill?
Download the ZIP from the item page and unzip it into ~/.claude/skills/ for a personal install, or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload the ZIP under Settings, then Capabilities, then Skills.
Is the aria-progressbar-name skill free to use?
The item is listed under the MIT licence. The source does not mention prices, so check the item page for any current terms.
What does the skill require to run?
The item lists no requirements. It does not run scripts and does not use the network, so it only gives the agent guidance.
Will this skill replace an accessibility audit?
No. The skill only provides guidance and cannot verify how screen readers announce content. Use it as a checklist, then confirm with browser accessibility tooling or assistive technology.
What is the difference between aria-label and aria-labelledby for progress bars?
Both give the progress bar an accessible name. aria-label sets the name directly in the attribute, while aria-labelledby points to the id of a visible element, such as a heading, whose text becomes the name.
Why does the agent ask for aria-valuenow, aria-valuemin and aria-valuemax?
These attributes tell assistive technology what the current value is and its range. The skill checks for them when the value is known, so the progress can be communicated, not just the bar's existence.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits front-end developers and accessibility reviewers who want a consistent, checklist-style review of progress bars and loading indicators before shipping. It is not useful for projects without progress bars, and it is not a replacement for a full accessibility audit or testing with real assistive technology.
Download the skill