Skip to content
Get packs

Unique IDs for Active Elements

Reviews HTML for duplicate IDs on focusable elements that can break keyboard focus and screen readers.

Source Download skill
Repository
thedaviddias/Front-End-Checklist
Stars
74,632
Licence
MIT
Files
2 files

What it does

This skill gives an AI agent a checklist for one accessibility rule: every focusable or interactive element (links, buttons, inputs) should have a unique id attribute. When you ask the agent to review a page or component, it searches for duplicate IDs on those elements, explains how they can make assistive technology skip items or send focus to the wrong place, and suggests a fix. It also asks the agent to check native HTML semantics, keyboard behaviour, and accessible names where relevant.

Great for

  • Front-end developers reviewing rendered HTML or components for accessibility problems
  • Designers or QA testers who want a quick accessibility pass on an interactive page
  • Teams auditing a design system for duplicate IDs in reusable components

Skip it if

  • Projects that do not use HTML or web interfaces, since the rule does not apply
  • Complete accessibility audits: this covers only one narrow rule, so it will miss other WCAG issues and should be paired with real testing with assistive technology
  • Reviewing source code alone without rendered output, since IDs generated at runtime may only appear in the rendered DOM

Try asking

  • “Review this page's HTML for duplicate id attributes on buttons, links and inputs.”
  • “Check my React form components for IDs that could break keyboard focus.”
  • “Explain to my team why duplicate IDs on interactive controls are an accessibility problem.”
  • “Suggest unique IDs for the repeated navigation controls in this template.”
Step-by-step guide: how to use Unique IDs for Active ElementsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the MIT licence and an attribution note.

    duplicate-id-active.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip duplicate-id-active.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip duplicate-id-active.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Paste the rendered HTML (from browser DevTools) rather than only source templates, so duplicates created at runtime are visible.
  • Ask the agent to name the exact elements and their roles, then verify the fix with a browser accessibility tool or a screen reader.
  • Combine this with broader accessibility checks, since this skill only covers duplicate IDs on active elements.

What's inside

  • references/rule.md
  • SKILL.md

Redistributed unmodified from thedaviddias/Front-End-Checklist under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.