Responsive Mobile Navigation

What it does

Preserves navigation hierarchy, focus and touch behaviour across mobile, tablet, desktop and assistive technology.

When to use it

Use for hamburger menus, nested mobile menus, or fixing focus and scroll-locking bugs at breakpoint changes.

Problems it prevents

Stops mobile menus that quietly drop nested items or trap keyboard focus once opened.

Typical workflow

1. Preserve the full navigation hierarchy
2. Handle focus and scroll locking
3. Verify touch target sizing
4. Test every breakpoint transition

Example output

A mobile menu with every desktop nav item still reachable, and focus that never escapes or gets trapped.

What's included

1. 01
   The complete prompt

   The full manual as a ready-to-save SKILL.md file, matched exactly to what ships in the T7 library.

2. 02
   Install walkthrough

   Personal (~/.claude/skills/) and project (.claude/skills/) folder instructions, whichever fits how you work.

3. 03
   Use notes

   How Claude invokes it, what a good result looks like, and what to check before you trust the output.

Works well with

• SystemFrontend Engineer

  Delivers production-ready interfaces: maintainable components, responsive CSS, accessible forms, efficient assets.

• FocusedBreadcrumbs & Wayfinding

  Implements accurate, accessible hierarchical breadcrumbs with correct BreadcrumbList structured data.

• FocusedSticky Header

  Implements stable, accessible sticky headers with correct anchor offsets and no layout shift.