Skip to content
Get packs

Breadcrumb Navigation Review

Checks breadcrumb markup for accessible nav, ordered lists, and aria-current on pages

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

What it does

When installed, the agent reviews templates, rendered HTML, and shared components for breadcrumb navigation and flags markup that does not follow accessibility best practice. It looks for a nav element labelled 'Breadcrumb', an ordered list structure, and aria-current='page' on the current page, and it can suggest fixes and explain why they help screen reader users and search engines. The skill is a set of written guidelines rather than a tool that changes files on its own.

Great for

  • Front-end developers reviewing site templates for accessibility
  • Teams auditing server-rendered HTML or shared navigation components before release

Skip it if

  • Projects with no breadcrumb navigation, since the checks have nothing to apply to
  • Verifying live accessibility in a real browser or with assistive technology, because the skill only reads the markup it is given

Try asking

  • “Review our product page template and tell me if the breadcrumbs follow accessible markup rules”
  • “Check the rendered HTML of this breadcrumb component for a missing aria-current attribute”
  • “Explain why our breadcrumb trail should use an ordered list and how to fix it”
Step-by-step guide: how to use Breadcrumb Navigation ReviewInstall, 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.

    breadcrumb-navigation.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip breadcrumb-navigation.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip breadcrumb-navigation.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 or point the agent at the rendered HTML output, not only the framework source, since the final markup is what browsers and screen readers see.
  • Ask for exact elements and attributes that violate the rule so fixes are concrete.
  • Pair the review with a real screen reader or accessibility testing tool for confirmation.

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.