skills.rest
tokijh
tokijhCOMMUNITY
Explore all skills by this author →
GitHub

use-design-system/Top

Create React headers and navigation bars with slot-based content and ARIA attributes.

Updated Aug 23, 2026
Search Tags:#frontend#react#design system#navigation#ui components#header
One-click install
npx skills add https://github.com/tokijh/minapp --skill use-design-system-top
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: use-design-system/Top
Source: https://github.com/tokijh/minapp/tree/main/.claude/skills/use-design-system/subskills/Top
Command: npx skills add https://github.com/tokijh/minapp --skill use-design-system-top

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a standardized and flexible way to create top navigation bars and headers within an application, ensuring consistency in layout, typography, and interactive elements.

Core Features & Use Cases

  • Structured Header Layout: Offers predefined slots for titles, subtitles, right-aligned actions, and lower content like CTAs.
  • Component-Based Design: Includes specialized sub-components for buttons, arrows, text, and selectors, promoting reusability.
  • Use Case: Implementing a consistent header across a web application, from simple page titles to complex views with action buttons and dropdown selectors.

Quick Start

Use the Top skill to create a header with the title "Settings" and a "Save" button on the right.

Frequently Asked Questions about use-design-system/Top

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

FAQPage Schema
How do I build a consistent React header with navigation and action buttons?▼

To build a consistent React header, use a reusable component with predefined slots for titles, subtitles, and right-aligned actions. This approach standardizes layout, typography, and interactive elements across different application views.

Can I add dropdown selectors to a React navigation bar without breaking accessibility?▼

Yes, you can add dropdown selectors to a React navigation bar. The component includes specialized sub-components for selectors that automatically apply ARIA attributes, ensuring your header remains accessible.

What is the best way to structure a complex web application header with CTAs?▼

The best way to structure a complex web application header is using a slot-based layout. This provides predefined areas for titles, right-aligned actions, and lower content sections like CTAs, promoting UI consistency.

Does this React header component support custom sub-components for navigation?▼

Yes, the React header component supports custom sub-components. It includes specialized elements for buttons, arrows, text, and selectors, allowing you to construct flexible navigation bars tailored to your application.

When do I need a slot-based design system for application headers?▼

You need a slot-based design system for application headers when you require consistent UI presentation across multiple views. It standardizes typography and interactive elements, from simple page titles to complex views with action buttons.

Related Skills

Explore More Software Engineering Skills→
mauriciodelriomauriciodelrio
3

vite-routing-rules

Set up Vite React SPA routing with createBrowserRouter, auth guards, and Zod-validated search parameters.

Community
Intermediate
1k-off1k-off
1

umbraco-header-apps

Implement Umbraco Backoffice header apps with manifests and Lit elements.

Community
Intermediate
vecearvecear

page-layout-builder

Generate React/TypeScript page layouts and routing shells for web apps.

Community
Advanced
fusenginefusengine
22

tailwindcss-layout

Construct responsive layouts using Tailwind CSS v4.1 utility classes.

Community
Intermediate