skills.rest
wagnerra23
wagnerra23COMMUNITY
Explore all skills by this author →
GitHub

pageheader-canon

Enforce PageHeader v3 canonical layouts across module pages with NAV and FOCO modes.

Updated May 14, 2024
Search Tags:#design system#ui pattern#validation gate#laravel modules#page header#react inertia#aria tabs
One-click install
npx skills add https://github.com/wagnerra23/oimpresso.com --skill pageheader-canon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pageheader-canon
Source: https://github.com/wagnerra23/oimpresso.com/tree/main/.claude/skills/pageheader-canon
Command: npx skills add https://github.com/wagnerra23/oimpresso.com --skill pageheader-canon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves inconsistent PageHeader patterns across modules by enforcing the PageHeader v3 “canonical” structure, button destinations, label naming, and the universal primary button styling.

Core Features & Use Cases

  • Guided module discovery: reads the module’s backend DataController and maps sub-views/pages to determine which ghosts and header zones must be applied.
  • Decision-driven header button layout: applies the required rules to remove duplicate-with-ghost actions, route feature buttons into overflow items, and enforce a single dominant primary action.
  • Two canonical modes (NAV vs FOCO): selects NAV for Index/Show screens (SubNav + primary CTA) and FOCO for Edit/Create/Form screens (no SubNav, no primary create button), including Drawer 760 scaling guidance for entity-like screens.
  • Mandatory visual validation gate: requires running the browser MCP JS checks to verify ARIA tabs, short labels, absence/presence rules per mode, and that the primary uses the correct roxo 295 styling (no magenta 330).

Quick Start

Use the command: /pageheader-canon <Modulo> and let the agent discover the module, implement the PageHeader v3 pattern in the relevant Pages/* screens, then run the browser MCP validation to ensure every involved screen passes the ✓/⚠️ gate.

Frequently Asked Questions about pageheader-canon

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

FAQPage Schema
How do I standardize a page header layout for React Inertia modules?▼

Standardize a page header layout by enforcing a canonical structure with ghost tabs, sub-navigation, and a single context-appropriate primary action. This ensures consistent UI patterns across React Inertia modules by mapping backend routes into ARIA-compliant tabs.

What is the difference between NAV and FOCO modes for UI page headers?▼

NAV and FOCO modes differentiate page header layouts by screen context. NAV mode applies to Index and Show screens with SubNav and a primary CTA, while FOCO mode applies to Edit and Create screens, removing the SubNav and primary create button to maintain layout focus.

How do I validate ARIA tab behavior and primary button styling in a design system?▼

Validate ARIA tab behavior and primary button styling by running browser MCP JavaScript checks. This visual validation gate verifies correct primary roxo 295 styling, overflow rules, and zero server error states across the affected screens to guarantee accessibility compliance.

How do I map Laravel module routes into ghost tabs for a page header?▼

Map Laravel module routes into ghost tabs by discovering the module's DataController menu configuration and mapping Pages routes. This process identifies which sub-views must be applied and routes feature buttons into overflow items to remove duplicate actions.

Does this page header validation tool work with Laravel modules without dependencies?▼

Yes, this page header validation tool works with Laravel modules without requiring external dependencies. It reads the backend DataController directly to discover module configuration and applies the canonical layout rules to the relevant Pages screens automatically.

Why does my primary button show magenta 330 instead of the correct roxo 295 styling?▼

A primary button showing magenta 295 styling instead of the correct roxo 295 indicates a failed visual validation gate. Running browser MCP JavaScript checks enforces the correct universal primary button styling and catches incorrect color variations across affected module screens.

Related Skills

Explore More Design & Creative Skills→
stephanesoaresstephanesoares

laravel-inertia-react-structure

Organize resource/js directory structure for Laravel Inertia React projects.

Community
Intermediate
anouar1991anouar1991
1

accessibility-journey

Audit keyboard accessibility by tabbing through focusable elements with axe-core.

Community
Intermediate
dralgorhythmdralgorhythm
111

design-systems

Standardize UI components and design tokens across projects.

Community
Advanced
forcedotcomforcedotcom
803

salesforce-custom-tab

Create and configure Salesforce Custom Tabs for object, web, and Visualforce targets.

Official
Advanced