Shade page header
Installation
SKILL.md
Construct a Shade page header
- Read the canonical PageHeader design contract and its live stories. Identify the screen's labelled secondaries, icon utilities and optional primary; decide the frequency order within each group before composing them.
- Use the existing PageHeader compound controls and slots. Keep permissions, routing, queries and shortcut bindings in the feature. For page-template choice, use Shade page templates.
- Read the current PageHeader API and nearby header before implementing. Use
shared defaults for appearance and spacing; preserve the previous
structure through
useShade().isAdmin7while compatibility exists. - Exercise every state affected by the change using the contract's review checklist. Report which routes, widths, themes and compatibility modes were verified, and address failures before marking the header complete.
When the shared convention changes, update the component and its attached Storybook contract together. Keep the design rules in that canonical document.