skills.rest
TechsioCZ
TechsioCZOFFICIAL
Explore all skills by this author →
GitHub

header-usage

Organize responsive site headers with the UI-kit Header component.

2|Updated Dec 2, 2024
Search Tags:#typescript#react#navigation#responsive#header#ui-kit#component-usage
One-click install
npx skills add https://github.com/TechsioCZ/new-engine --skill header-usage
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: header-usage
Source: https://github.com/TechsioCZ/new-engine/tree/main/libs/ui/skills/header-usage
Command: npx skills add https://github.com/TechsioCZ/new-engine --skill header-usage

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a clear pattern for building a responsive site header using the @techsio/ui-kit Header component, enabling consistent structure across desktop and mobile layouts.

Core Features & Use Cases

  • Responsive header assembly with Header.Desktop, Header.Mobile, and Header.Hamburger.
  • Containerization and navigation structure using Header.Container, Header.Nav, Header.NavItem, and Header.Actions.
  • Guidance for active state, direction, sizing, and token styling across devices.
  • Use Case: Build a global site header for dashboards or marketing pages that adapts to screen size with accessible navigation.

Quick Start

Add a Header to your page by composing Header.Desktop and Header.Mobile sections with a Hamburger inside the header.

Frequently Asked Questions about header-usage

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

FAQPage Schema
How do I build a responsive header in React for both desktop and mobile?▼

Structure a responsive React header by composing Header.Desktop and Header.Mobile sections, using Header.Hamburger to toggle navigation and ensure layout adapts across screen sizes.

What is the best way to structure navigation items in a UI kit header?▼

Organize navigation items by nesting Header.NavItem elements inside Header.Nav, while grouping interactive controls within Header.Actions for clear separation.

Can I apply active state styling to navigation links in a TypeScript header component?▼

Apply active state styling to navigation links using the built-in active state properties provided by Header.NavItem, ensuring users visually identify their current page context within the TypeScript application.

Does the Techsio UI kit header support custom token overrides for sizing and direction?▼

The responsive header supports token overrides for sizing and direction, allowing you to customize component appearance to match your application's design system requirements.

When do I need to use a hamburger menu in a responsive header layout?▼

Use a hamburger menu in a responsive header layout when targeting mobile screen sizes, utilizing Header.Hamburger to collapse standard navigation into an accessible toggle menu.

Related Skills

Explore More Software Engineering Skills→
TechsioCZTechsioCZ
2

label-usage

Label UI form fields with a reusable Label component using htmlFor.

Official
Intermediate
fyunusafyunusa

barba-js

Implement Barba.js page transitions with GSAP and lifecycle hooks.

Community
Intermediate
TechsioCZTechsioCZ
2

footer-usage

Organize and render reusable site footers with @techsio/ui-kit Footer primitives.

Official
Intermediate
pekralpekral

frontend-slides

Generate self-contained HTML presentation decks with vanilla CSS and JavaScript.

Community
Intermediate