Guide · Agent skill
How to use the Breadcrumb Navigation Review agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The breadcrumb-navigation skill is a set of written review guidelines that tells an AI agent how to check breadcrumb markup in templates, rendered HTML and shared components. It is aimed at front-end developers and teams who want accessibility problems in breadcrumbs caught before release. After following this guide you will be able to install the skill, ask for a review in plain language, and understand what the agent looks for and what it cannot check.
Breadcrumb Navigation Reviewthedaviddias/Front-End-Checklist · MIT Download the skill Quick start
- 1Download the ZIP. Get the breadcrumb-navigation skill ZIP from the skill's page in this directory.
- 2Unzip the skill. Extract the archive so you have a breadcrumb-navigation folder containing SKILL.md and references/rule.md.
- 3Place the folder. Move it into ~/.claude/skills/ for personal use, or into your project's .claude/skills/ folder.
- 4Or upload it in the apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 5Ask for a review. Request a review of breadcrumb templates, rendered HTML or shared components in plain language.
- 6Act on the report. Apply the suggested fixes yourself and confirm the result in a real browser and with assistive technology.
What does the breadcrumb-navigation skill make the agent do?
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. 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. Expect a report of issues and suggested changes, not automatic edits.
- Checks for nav element with aria-label='Breadcrumb'
- Checks for an ordered list (ol) structure
- Checks for aria-current='page' on the current page item
- Keeps any structured data aligned with the visible breadcrumb trail
How do you install the breadcrumb-navigation skill?
Download the ZIP file from the skill's page in this directory and unzip it. For a personal install, place the unzipped skill folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder.
You can also upload the skill in the Claude apps under Settings → Capabilities → Skills.
- Personal: ~/.claude/skills/
- Project: .claude/skills/ inside your project
- Claude apps: Settings → Capabilities → Skills (upload)
What files does the skill include?
The skill contains two files. SKILL.md holds the skill name, description, quick reference and the check, fix, explain and code review steps. references/rule.md holds a fuller explanation and a code example that the agent can consult for details.
- SKILL.md: main instructions and quick reference
- references/rule.md: full rule text and HTML example
How do you trigger the skill with a natural request?
Describe the task in plain language and name the thing you want reviewed. The skill's description is about reviewing templates, rendered HTML or shared components for breadcrumb navigation, so requests that mention those things are the most likely to use it.
Point the agent at specific files or pages where possible, so it can flag exact elements and attributes.
- Review the breadcrumb markup in our product page template for accessibility.
- Check the rendered HTML of the category page breadcrumbs against the breadcrumb rules.
- Look at our shared navigation component and tell me whether its breadcrumbs use aria-current correctly.
What does a correct breadcrumb look like?
The reference example wraps the trail in a nav element with aria-label='Breadcrumb', uses an ordered list with one list item per level, and marks the final, current page with aria-current='page'. The first breadcrumb does not have to be Home; include a homepage item only when it is part of the visible trail and site hierarchy.
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li>
<a href="/products">Products</a>
</li>
<li>
<a href="/products/electronics">Electronics</a>
</li>
<li>
<a href="/products/electronics/laptops" aria-current="page">Laptops</a>
</li>
</ol>
</nav>What are the limits and safety notes?
The skill declares no required dependencies, runs no scripts and uses no network access. It only reads the markup it is given.
It cannot verify live accessibility in a real browser or with assistive technology. Use browser testing and screen reader testing separately before relying on a clean review.
- Requires: nothing listed
- Runs scripts: no
- Uses network: no
- Not for projects with no breadcrumb navigation
Tips for getting useful results
Give the agent the rendered HTML when your framework generates markup, because the browser-facing output is what the skill is meant to validate. Ask for exact elements, attributes and template routes in the report so fixes are easy to locate.
- Validate rendered output, not only source templates
- Check that structured data matches the visible trail
- Re-run the review after changing shared components
What people use it for
- Reviewing a product category template before a release
- Checking server-rendered HTML for a deep page hierarchy
- Auditing a shared navigation component used across many pages
- Confirming aria-current='page' is set on the final breadcrumb item
- Reviewing whether structured data matches the visible breadcrumb trail
Frequently asked questions
How do I install the breadcrumb-navigation agent skill?
Download the ZIP from the skill's page and unzip it. Put the folder in ~/.claude/skills/ for personal use or in your project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the breadcrumb-navigation skill require anything else?
The skill lists no requirements. It runs no scripts and uses no network access, so it only reads the markup you provide.
Is the breadcrumb-navigation skill free?
The skill is released under the MIT licence, as stated on its page in this directory. Check the licence file in the source repository for the full terms.
Does the skill change my files automatically?
No. It is a set of written guidelines, so it reports issues and suggests fixes rather than editing files on its own.
Can it test breadcrumbs in a real browser or with a screen reader?
No. The skill only reads the markup it is given and cannot verify live accessibility. Test in a browser and with assistive technology separately.
What should my breadcrumb markup look like?
Use a nav element with aria-label='Breadcrumb', an ordered list with one item per level, and aria-current='page' on the current page. The skill's reference example shows this pattern.
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
This skill suits front-end developers and teams who want a consistent, repeatable check of breadcrumb markup in templates, rendered HTML and shared components before release. It is a poor fit for projects without breadcrumbs, or for anyone who needs live browser or assistive technology testing, since it only reads the markup it is given.
Download the skill