Guide · Agent skill
How to use the File Upload Accessibility agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The File Upload Accessibility skill is a set of written review guidance that an AI agent follows when you ask it to check file upload controls in templates, rendered HTML or shared components. This guide explains what the skill makes the agent do, how to install it, how to ask for a review in plain language, and what to keep in mind. It is aimed at front-end developers and accessibility reviewers who may not have used agent skills before.
File Upload Accessibility Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the file-upload-accessibility ZIP from the agent-skills directory page.
- 2Unzip into the skills folder. Extract it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. If you use the Claude apps, go to Settings → Capabilities → Skills and upload the skill there.
- 4Gather the markup. Collect the templates, shared components or rendered HTML for the upload form you want reviewed.
- 5Ask for a review. Describe the artefact and the goal in plain language, such as checking labels, accept attributes or keyboard access.
- 6Apply the fixes and verify in a browser. Work through the suggested changes, then check the live page with a separate browser or screen reader test, since the skill does not do that.
What the skill makes the agent do
When installed, the agent reviews templates, rendered HTML and shared components for file upload controls. It looks for accessibility problems such as unlabeled file inputs, drag-and-drop zones that keyboard users cannot reach, and missing feedback for upload progress and errors.
The skill also suggests fixes using visible labels, accept attributes and ARIA live regions. It is a written checklist of guidance, not a tool that tests a live site. The source says the skill asks for the final browser-facing HTML to be checked, not only the source framework code.
- Checks that file inputs have proper labels
- Checks accept attributes that restrict file types
- Checks that upload progress and errors are announced accessibly
- Checks that drag-and-drop zones have keyboard-accessible alternatives
Install the skill from the ZIP download
Download the ZIP for the file-upload-accessibility skill from the agent-skills directory page. Then unzip it into one of two locations, depending on how you want to use it.
For a personal setup available across your projects, unzip it into ~/.claude/skills/. For a single project, unzip it into that project's .claude/skills/ folder.
If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Single project: .claude/skills/ inside the project folder
- Claude apps: Settings → Capabilities → Skills
Know what the package contains
The skill is made of two files. SKILL.md holds the skill name, a description that tells the agent when to use it, and the main checklist: quick reference points, what to check, how to fix, and how to review code.
references/rule.md holds the fuller guidance, including a code example of a labelled file input with accepted formats, a help text span and a role="alert" error message. The main file points to it for framework-specific detail.
- SKILL.md: name, trigger description and the main checklist
- references/rule.md: full guidance and an HTML code example
Trigger the skill with natural requests
The skill is selected from its description, which is about reviewing templates, rendered HTML or shared components for accessible file uploads. Mention those things directly in your request. Say which files or markup you want reviewed and what you want from the review.
Good requests name the artefact and the goal. For example, you can ask the agent to review a form template for unlabeled file inputs, or to check a shared upload component for keyboard access to its drop zone. Include the rendered HTML if your framework generates the markup, because the skill checks the browser-facing output.
- Review this upload form template for accessibility problems with file inputs.
- Check the rendered HTML of our document upload page for missing upload error feedback.
- Look at this shared upload component and tell me if the drag-and-drop area works with a keyboard.
- Suggest fixes using visible labels, accept attributes and ARIA live regions for this form.
Example of the markup the skill checks
The rule guidance includes a labelled file input that shows accepted formats, links help and error text through aria-describedby, and announces errors with role="alert". Use it as a reference point when you compare your own markup with the expected pattern.
<input type="file" id="document-upload" name="document" accept=".pdf,.doc,.docx,application/pdf,application/msword" aria-describedby="document-help document-error" />Limits and safety notes
The skill only reads the files and markup it is given. It does not run an accessibility tool, and it does not test a live website with a screen reader or automated scanner. Plan a separate browser-based check before release.
The source lists no requirements, says the skill does not run scripts, and says it does not use the network.
- Does not test a live website
- Does not run an accessibility scanner or screen reader
- Requires nothing listed
- Runs scripts: no
- Uses network: no
What people use it for
- Reviewing a document upload form template before it ships
- Checking rendered HTML for missing labels or error announcements
- Auditing a shared upload component used across several pages
- Making a drag-and-drop zone reachable by keyboard
- Adding accepted file type and size hints to an upload form
Frequently asked questions
How do I install the file upload accessibility skill?
Download the ZIP from the agent-skills directory page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings → Capabilities → Skills.
Does the file upload accessibility skill require anything else?
The source lists no requirements for this skill. It does not run scripts and does not use the network.
Is the file upload accessibility skill free?
The skill is published under the MIT licence, as stated on its page. Check the licence file in the source repository for the full terms.
Can the skill test my live website with a screen reader?
No. The skill only reads the files and markup it is given and does not run an accessibility tool. Test the live page separately with a browser and screen reader before release.
Why does the skill ask for rendered HTML instead of my template code?
The skill asks for the final browser-facing markup to be checked, because framework code can hide what users actually receive. If your framework generates the upload controls, provide the rendered output.
What should I do if the skill does not seem to trigger?
Make your request mention reviewing templates, rendered HTML or shared components for accessible file uploads, since that is what the skill description matches. Confirm the folder is in the correct location, such as ~/.claude/skills/ or the project's .claude/skills/.
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 focused checklist for file upload forms before release, especially for shared components and templates. It is not a replacement for testing a live site with a screen reader or automated scanner, so pick a dedicated testing tool for that job.
Download the skill