Definition List Wrapping Check
Checks that HTML definition terms and descriptions sit inside a proper definition list.
- Repository
- thedaviddias/Front-End-Checklist
- Stars
- 74,632
- Licence
- MIT
- Files
- 2 files
What it does
This skill makes the agent review HTML for a specific accessibility rule: every term (dt) and description (dd) should be wrapped in a definition list (dl). When the agent reviews markup, it looks for orphaned dt or dd elements, explains why they lose meaning for screen readers, and suggests wrapping them in a dl container. It also asks the agent to check keyboard behaviour, focus flow and accessible names where relevant.
Great for
- Front-end developers reviewing HTML for accessibility before shipping
- Teams maintaining a design system with glossary or metadata components
- Anyone learning why definition list markup matters for assistive technology
Skip it if
- Projects that do not use definition lists at all, since the rule will rarely apply
- Full accessibility audits, because this skill covers only one narrow rule and cannot certify compliance
Try asking
- “Review this HTML component and check whether any dt or dd elements sit outside a dl.”
- “Why does my glossary markup fail the accessibility checklist? Show me how to fix it.”
- “Check this design-system product spec block for orphaned definition list items.”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 2 original files, the MIT licence and an attribution note.
dlitem.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip dlitem.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip dlitem.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 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 or the component source, not just a description, so the agent can locate the elements.
- Ask for the fix in your framework's syntax (React, Vue, etc.) if you need it; the referenced rule file contains framework-specific guidance.
- Pair the result with a browser accessibility tool to verify the fix, since the agent cannot run a screen reader itself.
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.