Guide · Agent skill
How to use the Unique IDs for Active Elements agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The duplicate-id-active skill is a checklist that teaches an AI agent one accessibility rule: every focusable or interactive element, such as links, buttons and inputs, should have a unique id attribute. It is written for front-end developers, designers and QA testers who want a quick check of rendered HTML or components. After this guide you will know what the skill does, how to install it, how to ask for a review and what its limits are.
Unique IDs for Active Elementsthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Download the skill ZIP from the skill's page on our directory.
- 2Unzip into a skills folder. Unzip the folder into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Describe the page or component. Paste the rendered HTML or describe the component and its interactive states.
- 5Ask for a duplicate ID review. Request a check for duplicate IDs on links, buttons and inputs, with focus and keyboard impact.
- 6Verify the findings. Confirm each flagged element in a browser and with assistive technology where relevant.
What the skill makes the agent do
When you ask the agent to review a page or component, this skill tells it to search for duplicate id attributes on focusable or active HTML elements. It then explains how duplicate IDs can make browsers and assistive technologies skip items, misdirect focus or fail to trigger the correct action, and suggests a fix by giving each active element its own unique id.
The skill also asks the agent to check native HTML semantics first, then keyboard behaviour, focus flow, accessible names and screen-reader output where relevant.
- Searches for duplicate id attributes on links, buttons and inputs
- Explains the effect on keyboard navigation, focus and screen readers
- Suggests a fix and how to verify it with browser accessibility tooling or assistive technology
Install the duplicate-id-active skill
Download the ZIP from the skill's page on our directory and unzip it. The skill folder contains SKILL.md and references/rule.md. Put the unzipped folder in ~/.claude/skills/ to make it available to you across projects, or in a project's .claude/skills/ folder to share it with one codebase.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Trigger the skill with natural requests
You do not need a special command. Describe the task in plain language and mention rendered HTML, a component or a design-system pattern. The skill's description covers reviewing rendered HTML, interactive components and design-system patterns, so requests of that kind are the ones it is meant for.
Give the agent the markup or a way to see the rendered output. The skill notes that IDs generated at runtime may only appear in the rendered DOM, so pasting source code alone can miss problems.
- "Check this login form for duplicate IDs on buttons and inputs."
- "Review this modal component for focus and keyboard problems caused by repeated IDs."
- "Audit the rendered HTML of this checkout page for unique IDs on interactive elements."
What to expect from a review
A good review names the exact elements that share an id, notes their roles, labels and focus behaviour, and explains which keyboard or screen-reader interactions are affected. The skill asks the agent to flag exact elements that violate the rule and to note how to verify the fix.
Treat the output as a starting point. Confirm each finding in a browser and, where it matters, with a screen reader.
- Lists each duplicate id and the elements involved
- Explains the likely effect on focus and navigation
- Suggests a unique id per element and a way to retest
<label for="first-name">First Name</label>
<input id="first-name" type="text">
<button id="submit-btn">Save</button>
<button id="submit-btn">Cancel</button> <!-- Error: ID must be unique -->Limits and safety notes
This skill covers one narrow rule. It will miss other WCAG issues, so it is not a complete accessibility audit. Pair it with real testing with assistive technology.
The skill runs no scripts and makes no network calls. It requires nothing else to be installed.
- Not for projects without HTML or web interfaces
- Not a complete accessibility audit
- Reviewing source alone can miss IDs generated at runtime
Tips for better results
Give the agent the rendered DOM from browser developer tools when you can, and include the component's states, such as open dialogs or expanded menus, since those change which elements are active.
When the agent flags a duplicate, ask it to show the corrected markup and a label or for attribute pairing where a form control needs one.
- Paste rendered output, not only source
- Describe interactive states such as open menus or dialogs
- Ask for a retest step after each fix
What people use it for
- Checking a login or signup form for duplicate IDs on inputs and submit buttons
- Reviewing a modal or dropdown component for focus problems caused by repeated IDs
- Auditing a design system's reusable components for IDs that get duplicated when reused
- Running a quick accessibility pass on an interactive page before a design or QA handoff
Frequently asked questions
How do I install the duplicate-id-active skill?
Download the ZIP from the skill's page on our directory and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
What does the duplicate-id-active skill check?
It checks whether focusable or interactive elements such as links, buttons and inputs share the same id attribute. It explains how duplicates can cause focus or keyboard errors and suggests a unique id for each element.
Does this skill require anything else to run?
The source lists no requirements. The skill runs no scripts and uses no network access.
Is this skill a full accessibility audit?
No. It covers one narrow rule and will miss other WCAG issues. Pair it with real testing using assistive technology.
Can it find duplicate IDs from source code alone?
Not reliably. IDs generated at runtime may only appear in the rendered DOM, so give the agent rendered HTML from browser developer tools.
Is the skill free to use and what is its licence?
The skill is listed under the MIT licence. The source does not mention pricing.
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
Use this skill if you are a front-end developer, designer or QA tester who wants a fast, focused check for duplicate IDs on interactive elements in rendered HTML. Pick something else if you need a complete accessibility audit, or if your project has no HTML or web interface, since the rule will not apply.
Download the skill