header

What This Skill Does

The header skill for OpenClaw is a comprehensive design and implementation toolkit designed to streamline the creation of web navigation systems. It provides an architecturally sound reference point for developers and designers alike, covering everything from core semantic HTML structure to complex responsive behaviors. By utilizing this skill, you gain access to a repository of best practices that ensure your website headers are not only aesthetically pleasing but also technically robust, performant, and fully accessible.

The skill encapsulates multiple sub-commands that address distinct challenges in front-end development, such as managing scroll-linked states, implementing diverse navigation patterns like mega menus or breadcrumbs, and ensuring WCAG-compliant keyboard navigation. It acts as a bridge between high-level design theory and low-level code implementation, allowing users to rapidly prototype or audit existing header structures.

Installation

To integrate this skill into your environment, run the following command within your terminal:

clawhub install openclaw/skills/skills/ckchzh/header

Ensure that your OpenClaw environment is updated to the latest version to maintain compatibility with the skill's file structure and configuration options. Once installed, you may configure the HEADER_DIR variable if you wish to override the default storage directory located at ~/.header/.

Use Cases

• Audit and refactor legacy websites to ensure headers meet modern accessibility standards, including proper ARIA roles and skip-link functionality.
• Rapidly scaffold responsive navigation components for new projects using tested patterns like the 'Priority+' layout or off-canvas hamburger menus.
• Implement complex scroll-triggered effects, such as shrinking logos or reveal-on-scroll headers, with minimal boilerplate code.
• Provide standardized navigation documentation and implementation snippets across large-scale design systems to ensure consistency.

Example Prompts

1. "@header please show me the semantic HTML structure for a navigation bar that includes a logo, a main menu, and an accessible search input."
2. "@header sticky --help: I need to create a header that shrinks when the user scrolls down; how can I implement that with this tool?"
3. "@header responsive: Can you generate a pattern for an off-canvas mobile navigation menu that works well on tablets?"

Tips & Limitations

To maximize the utility of the header skill, always start by running the intro and html commands. Understanding the underlying semantic requirements is essential before attempting complex CSS transitions or JavaScript-heavy sticky interactions. Be aware that while this skill provides excellent boilerplate code, accessibility remains a team effort; always conduct manual keyboard and screen reader tests after implementation. The skill is primarily focused on the header component; for complex multi-tier footer or sidebar architectures, you may need to supplement your work with additional layout-focused skills.