Skills
.Work. You
Rest

component-nav

Community

Scaffold an accessible navigation landmark

Design & Creative#accessibility#react#navigation#wcag#scss#component-scaffold
Authorshawn-sandy
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill helps you quickly add an accessible navigation component to a React project without hand-crafting semantic structure, ARIA labeling, link focus styling, and the active-item pattern.

Core Features & Use Cases

  • Accessible navigation landmark: generates a <nav>-based component with a required aria-label when multiple nav regions exist (WCAG 2.4.8).
  • Compound component structure: ships Nav, Nav.List, and Nav.Item assembled in a single generated nav.tsx.
  • Active link + focus behavior: supports aria-current="page" styling and includes focus-visible outlines for keyboard accessibility.
  • Horizontal and vertical layouts: defaults to horizontal and supports a vertical/block variant for sidebars.

Quick Start

Use the component-nav skill by providing the landmark aria-label, the list of link labels and hrefs, which link is current (via aria-current="page"), and whether you want a horizontal or vertical layout.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: component-nav
Download link: https://github.com/shawn-sandy/agentic-acss-plugins/archive/main.zip#component-nav

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.