How to use the Definition List Structure Checker agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions and optional files that an AI agent loads when your request matches the skill's purpose. This one is called definition-list and sits in the accessibility category.

A definition list groups terms (dt) and their descriptions (dd) inside a dl element. The skill makes the agent check that the dl contains only valid children: dt, dd, or allowed wrapper elements. When it finds a problem, such as a stray div or a heading placed directly inside the dl, it flags the exact element, explains why screen readers are affected, and suggests a fix.

• Checks that every dl contains only dt, dd, or allowed wrappers
• Flags invalid child elements such as stray divs
• Explains how the structure helps screen readers group related information
• Suggests fixes, such as removing elements or wrapping them correctly
• Where relevant, reviews keyboard behaviour, focus order and accessible names

How do you install the definition-list skill?

Download the ZIP file for the skill from the Front-End Checklist page. Unzip it so the skill folder sits in one of these locations:

You can install it for yourself across projects by unzipping it into ~/.claude/skills/. You can also install it for a single project by unzipping it into that project's .claude/skills/ folder.

If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.

• Personal: ~/.claude/skills/
• Single project: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills, then upload

How do you trigger the skill with a natural request?

You do not need a special command. Describe what you want reviewed and mention the markup or component. The skill's description covers reviewing rendered HTML, interactive components and design-system patterns that involve definition lists, so requests that match those situations are the ones that will load it.

Give the agent the markup or point it to the page or component file. Ask for a check of the definition list structure, and say whether you also want keyboard, focus or screen-reader notes.

• "Check the definition list structure in this glossary component."
• "Review this FAQ page's dl markup for invalid child elements."
• "Is the metadata block in this release page using valid dt and dd structure?"
• "Review this design-system description-list pattern for semantics, focus order and accessible names."

What should you expect from a review?

A good review names each dl that has a problem, quotes the offending child element, and gives the corrected structure. The agent should also say why the change matters, for example that a screen reader may not announce the term and description relationship correctly.

For interactive components, the review may also cover keyboard behaviour, focus flow, accessible names and screen-reader output. Confirm the fixes with browser accessibility tooling or with assistive technology, as the skill itself recommends.

What does the skill need, and is it safe to run?

The skill requires nothing beyond an agent that can read your files. It does not run scripts and does not use the network, so it only reads the markup you give it and responds with its review.

The skill is licensed under MIT.

• Requirements: nothing listed
• Runs scripts: no
• Uses network: no

What are the limits of this skill?

The skill covers one narrow rule: correct definition list structure. Its guidance is brief, and the full details, code examples and framework notes live in a referenced file, references/rule.md, which is included with the skill.

• Not useful if your project does not use HTML definition lists
• Not a full accessibility audit: it does not cover colour contrast or other rules
• Use it alongside other checks for broader coverage