skills.rest
shawn-sandy
shawn-sandyCOMMUNITY
Explore all skills by this author →
Website𝕏@shawnsandyGitHub

component-nav

Generate accessible React navigation components with ARIA attributes and SCSS styling.

Updated Apr 21, 2026
Search Tags:#accessibility#react#navigation#wcag#scss#component-scaffold
One-click install
npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-nav
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: component-nav
Source: https://github.com/shawn-sandy/agentic-acss-plugins/tree/main/plugins/acss-kit/skills/component-nav
Command: npx skills add https://github.com/shawn-sandy/agentic-acss-plugins --skill component-nav

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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.

Frequently Asked Questions about component-nav

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an accessible React navigation component with proper ARIA attributes?▼

To create an accessible React navigation component, you need a semantic `<nav>` landmark with `aria-label` for multiple nav regions and `aria-current="page"` for active links. This ensures keyboard focus visibility and meets WCAG 2.4.8 location guidance.

What is the best way to structure a React navigation menu for WCAG compliance?▼

The best way to structure a React navigation menu for WCAG compliance is using a compound component pattern with `Nav`, `Nav.List`, and `Nav.Item`. This semantic structure pairs with required ARIA labeling and focus-visible outlines to ensure keyboard accessibility.

How do I add aria-current to a React sidebar navigation?▼

You add `aria-current="page"` to a React sidebar navigation by applying a vertical or block layout variant to the component and passing the current link state. This active-item pattern styles the active link while maintaining screen reader support.

Does this navigation component generate SCSS styles or only the React markup?▼

This navigation component generates both React markup and SCSS styles, producing a `nav.tsx` file and a `nav.module.scss` file. The SCSS handles the horizontal and vertical layout variants alongside the focus-visible styling required for accessibility.

Can I scaffold multiple navigation regions like header and footer navs in one project?▼

Yes, you can scaffold multiple navigation regions like header and footer navs in a single React project. Each generated `<nav>` landmark requires a unique `aria-label` to differentiate the regions and comply with WCAG 2.4.8 multiple-location guidelines.

Related Skills

Explore More Design & Creative Skills→
DifanaDAPDifanaDAP

nextjs-agentic-bootstrapping

Automate Next.js project setup with package.json, tsconfig.json, and tailwind.config.js.

Community
Intermediate
leadmind-aileadmind-ai

stitch-loop

Automate multi-page site construction with Stitch MCP APIs.

Official
Advanced
coastdigitalgroupcoastdigitalgroup
2

accessible-main-navigation

Implement accessible keyboard-friendly main navigation with ARIA attributes and skip links.

Official
Intermediate
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate