pageheader-canon

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.