skills.rest
coastdigitalgroup
coastdigitalgroupOFFICIAL
Explore all skills by this author →
GitHub

page-header-system

Design page-level header frameworks with YAML frontmatter for dashboards, articles, and settings.

2|Updated Mar 21, 2026
Search Tags:#documentation#accessibility#design-system#responsive-design#ui-patterns#wayfinding#page-header
One-click install
npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill page-header-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-header-system
Source: https://github.com/coastdigitalgroup/coastai-skills/tree/main/website-design/page-header-system
Command: npx skills add https://github.com/coastdigitalgroup/coastai-skills --skill page-header-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Page header system provides a repeatable method to design the top-level headers that orient users, surface status, and present primary actions for a specific page or view.

Core Features & Use Cases

  • Patterned header anatomy: wayfinding, title, metadata, and actions.
  • Use cases across dashboards, article headers, and settings screens for a consistent UX.
  • Real-world example: apply a split layout with breadcrumbs on the left and actions on the right.

Quick Start

Create a new page header specification for a dashboard page using the Page Header System.

Frequently Asked Questions about page-header-system

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

FAQPage Schema
How do I design consistent page headers for a design system?▼

Design consistent page headers by applying a systematic framework that standardizes wayfinding, titles, metadata, and actions. This enforces semantic HTML structure, accessibility requirements, and responsive behavior across dashboards, articles, and settings pages.

What is the best way to structure page header anatomy for wayfinding and actions?▼

Structure page header anatomy using a split layout with breadcrumbs on the left for wayfinding and primary actions on the right. This modular template approach standardizes user orientation and task execution across various views.

How do I ensure accessibility requirements are met in responsive page headers?▼

Ensure accessibility in responsive page headers by enforcing semantic HTML structure within a modular template. This approach standardizes wayfinding and actions while maintaining required accessibility compliance across different screen sizes.

Can I use a modular template approach for dashboard and settings page headers?▼

Yes, you can use a modular template approach for dashboard and settings page headers. The system provides patterned header anatomy to standardize wayfinding, titles, metadata, and actions across these specific use cases for a consistent UX.

Do I need YAML frontmatter to standardize page header UI patterns?▼

You need YAML frontmatter to implement the modular template approach for page headers. It allows you to define and standardize the semantic HTML structure, wayfinding elements, metadata, and actions systematically across different pages.

Related Skills

Explore More Design & Creative Skills→
viably-labsviably-labs

design-to-tailwind

Convert Figma, Sketch, and Penpot designs into semantic Tailwind HTML structures.

Official
Intermediate
float-ritual-stackfloat-ritual-stack

spec-components

Catalog UI spec components for structured design documentation blocks.

Official
Intermediate
maltemdmaltemd

designing-documentation-navigation

Design navigation systems, menus, and wayfinding elements for documentation sites.

Community
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-page

Guide Angular developers to implement full-page layouts with the Canopy lg-page component.

Official
Intermediate