# Unique Id

> Use when reviewing templates, rendered HTML, or shared components related to Ensure all IDs are unique. Validate the final browser-facing markup, not just the source framework abstraction.

- Skill: `thedaviddias/unique-id` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add thedaviddias/unique-id`
- Raw SKILL.md: https://api.skillmd.com/api/skills/thedaviddias/unique-id/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: thedaviddias (https://skillmd.com/u/thedaviddias)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/thedaviddias/unique-id

---


# Ensure all IDs are unique

Duplicate IDs break form accessibility (labels don't connect), ARIA relationships fail, and JavaScript getElementById returns wrong elements—causing silent bugs.

## Quick Reference

- Each ID must appear only once per HTML document
- Use classes for styling, IDs for unique anchors/references
- Check for duplicates introduced by component libraries
- Duplicate IDs break form labels, ARIA, and getElementById

## Check

Scan this HTML document to ensure all ID attributes are unique across the entire page and properly reference related elements.

## Fix

Remove duplicate ID values, ensure each ID is used only once per page, and update any references like labels, ARIA attributes, or JavaScript selectors.

## Explain

Explain why unique IDs are essential for HTML validity, accessibility (form labels, ARIA), JavaScript functionality, and CSS styling.

## Code Review

Review templates, server-rendered HTML, and shared components that output markup related to Ensure all IDs are unique. Flag exact elements, attributes, and routes where the rendered HTML violates the rule.

---

For full implementation details, code examples, and framework-specific guidance,
see `references/rule.md`.

Rule page: https://frontendchecklist.io/en/rules/html/unique-id