Guide · Agent skill
How to use the dlitem agent skill: definition list check
Updated · written with AI from the project's own documentation and checked against our catalogue data
The dlitem skill is an agent skill for Claude that reviews HTML for one accessibility rule: every term (dt) and description (dd) should sit inside a definition list (dl). After reading this guide you will know what the skill makes the agent do, how to install it, how to ask for it in plain language, and what to check before relying on its output.
Definition List Wrapping Checkthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the dlitem skill ZIP from the Front-End Checklist page for this skill.
- 2Unzip into a skills folder. Place the unzipped folder in ~/.claude/skills/ for personal use, or in 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.
- 4Describe your review task. Ask in plain language to review HTML or a component for definition list problems, and include the markup.
- 5Check the findings. Verify each flagged dt or dd, then confirm the fix with browser accessibility tooling or assistive technology.
What is an agent skill and what does dlitem do?
An agent skill is a folder of instructions that an AI agent can load when a task matches the skill's description. The dlitem skill is described as being used when reviewing rendered HTML, interactive components, or design-system patterns related to wrapping definition items in a definition list.
The skill's core rule is that standalone dt or dd elements lose their meaning, because assistive technology cannot link a term with its definition without a dl container. When the agent reviews markup, it looks for dt or dd elements that are not children of a dl, explains why this matters for screen readers, and suggests wrapping them in a dl.
- Check: find any dt or dd that is not inside a dl.
- Fix: wrap the orphaned dt and dd in a parent dl.
- Explain: describe why the grouping gives correct semantic association.
- Also review, where relevant: keyboard behaviour, focus flow, accessible names and screen-reader output.
Install the dlitem skill
Download the ZIP for the skill from the Front-End Checklist page for dlitem. Unzip it into one of two locations: your personal skills folder at ~/.claude/skills/, or a project-level .claude/skills/ folder inside the project you are working on.
If you use the Claude apps instead, you can upload the skill under Settings → Capabilities → Skills.
- Personal install: unzip into ~/.claude/skills/ so it is available across your projects.
- Project install: unzip into .claude/skills/ inside one repository so it applies only there.
- Claude apps: upload the skill under Settings → Capabilities → Skills.
How to trigger the skill with natural requests
You do not need a special command. The skill is meant to load when your request matches its description, so describe the job in ordinary language and include the HTML or component you want reviewed. Asking for a review of a glossary or metadata component is a good match, since the skill targets those patterns.
Be specific about the scope. A request that names the file or markup gives the agent something concrete to check.
- Review this glossary component's HTML for definition list problems.
- Check whether these dt and dd elements are wrapped in a dl.
- Look at this rendered page and tell me if any terms or descriptions are orphaned.
- Review this design-system metadata block for definition list markup and screen-reader impact.
What the skill needs and how it behaves
The listing states that the skill requires nothing, does not run scripts and does not use the network. Its files are SKILL.md, which holds the main instructions, and references/rule.md, which holds the code examples and a longer explanation of the rule.
The skill covers only this one narrow rule. It does not certify that a page meets accessibility standards, so treat its output as one check among others.
- Requires: nothing listed.
- Runs scripts: no.
- Uses network: no.
- Files: SKILL.md and references/rule.md.
<dl>
<dt>Term</dt>
<dd>The definition of the term.</dd>
</dl>Tips for getting useful results
Give the agent the rendered markup, not only a component name, because the rule depends on what ends up in the page. Ask the agent to name the exact elements it flags so you can verify each one.
To confirm a fix, check the result with browser accessibility tooling or with assistive technology, as the skill itself suggests.
- Paste the rendered HTML, including any components that generate dt or dd elements.
- Ask for the exact element, role, label or focus issue behind each finding.
- Do not wrap a dt or dd in a ul or li; the reference notes that dt cannot be a child of li or ul.
- Re-run the review after changes and verify with a browser or screen reader.
What people use it for
- Reviewing a glossary component before release to confirm each term and description is inside a dl.
- Checking a design-system metadata block, such as product specifications, for orphaned dt or dd elements.
- Teaching a team why definition list markup matters for screen readers by walking through flagged examples.
Frequently asked questions
Do I need to install anything to use the dlitem skill?
The listing says the skill requires nothing and runs no scripts. You download the ZIP from the Front-End Checklist page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
Is the dlitem skill free to use?
The skill is listed under the MIT licence. Check the licence file in the source repository for the full terms before you reuse or redistribute it.
Does the dlitem skill check a whole website for accessibility?
No. The skill covers one narrow rule: dt and dd elements must be inside a dl. It cannot certify compliance, so use a full accessibility audit for broader coverage.
Why does a dt or dd outside a dl matter?
Browsers use the dl container to associate terms with their descriptions. Without it, assistive technology may not link a term to its definition, so the context is lost for screen reader users.
Can the skill fix my HTML automatically?
The skill suggests wrapping orphaned dt and dd elements in a dl and explains why. Review each suggested change yourself and confirm it in a browser or with assistive technology.
What should I use if my project has no definition lists?
The listing says the rule will rarely apply to projects that do not use definition lists at all. In that case, this skill adds little, and a broader accessibility review tool is the better choice.
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 the dlitem skill if you build or review HTML with glossaries, metadata blocks or design-system definition lists and want a focused check for orphaned dt and dd elements. Pick a broader accessibility audit tool, or skip this skill, if your project does not use definition lists or you need a full compliance review.
Download the skill