Skip to content
Get packs

Definition List Structure Checker

Reviews HTML so definition lists (dl/dt/dd) are valid and understandable to screen readers

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

What it does

This skill teaches an AI agent to check whether HTML definition lists are built correctly, meaning a dl element should contain only dt (term), dd (description), or allowed wrapper elements. When you ask for a review, the agent flags invalid child elements such as stray divs, explains why this matters for screen readers, and suggests fixes. It also reviews keyboard behaviour, focus order and accessible names where relevant.

Great for

  • Front-end developers reviewing glossary, FAQ or metadata markup before release
  • Accessibility reviewers auditing rendered pages or components
  • Design-system teams checking that shared description-list patterns are semantically correct

Skip it if

  • Projects that do not use HTML definition lists, since the checks would have nothing to apply to
  • Full accessibility audits covering colour contrast or other rules; this skill only covers one narrow rule and its guidance is brief (the full details live in a referenced file)

Try asking

  • “Review this HTML and tell me if the dl elements are structured correctly for screen readers”
  • “My product specs page uses div wrappers around dt and dd inside a dl, is that valid and how do I fix it?”
  • “Check our FAQ component markup for definition list accessibility problems”
  • “Explain to my team why our glossary markup breaks assistive technology”
Step-by-step guide: how to use Definition List Structure CheckerInstall, 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.

    definition-list.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip definition-list.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip definition-list.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 or the component code so the agent can check actual child elements rather than guessing.
  • Ask for the fix as a diff so you can review exactly which elements change.
  • Verify the agent's findings with browser accessibility tools or a screen reader, since the skill itself only gives guidance.

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.