← ClaudeAtlas

page-header-auditlisted

Find pages using manual heading markup instead of the app’s shared page-header component and migrate them to the standard pattern. Use for consistent page headers, PageHeader adoption, or standardizing display typography across pages.
NomadicDaddy/aidd · ★ 1 · AI & Automation · score 60
Install: claude install-skill NomadicDaddy/aidd
# Page Header Consistency Audit Scan an application for pages that use manual heading markup instead of its shared page-header component, then migrate them to the standard pattern so all pages share consistent display typography, layout, and responsive behavior. ## Usage ``` page-header-audit [app] ``` ## Applicability **Applies to any project with a component-based frontend**, whatever the stack. The one genuine precondition is that the app already has a **shared page-header component** — that component defines the target pattern, and without it there is nothing to migrate toward. Discover it by role (Phase 0); do not require a particular framework, file path, or CSS system. If the app has no such component, say so plainly and stop: that is the real reason to decline, not the app's provenance. The React + Tailwind markup throughout this skill is illustrative, drawn from the most common case. Read the target's own component and page code and adapt the transforms to its markup language. ## Context Spernakit-derived apps are the canonical example: the template provides `PageHeader` at `frontend/src/components/shared/PageHeader.tsx`, rendering a consistent page heading with: - `text-display` class on the title (uses `--font-display`, 2.25rem, line-height 1.1) - `text-lead` class on the description (1rem, muted-foreground color) - Responsive flex layout with bottom border separator - Optional icon, eyebrow label, and trailing action slot (children) Other stacks name and