nezam-fixed-layout-composer

skill_id	fixed-layout-composer
name	nezam-Fixed Layout Composer
tier	2
description	Enforces the full-width header / max-width body / full-width footer chrome pattern. Implements the filter+split rendering technique so background bleeds reach the viewport edge while inner content stays constrained.
version	1.0.0
updated	"2026-05-28T00:00:00.000Z"
changelog	["1.0.0 — Initial release. Codifies DESIGN.md v3 §7.1 + §7.4."]
references	["DESIGN.md",".cursor/design/references/impeccable-main/"]
breaking_changes	false

Fixed Layout Composer

Charter

Own the page chrome. Every rendered page in the Design Hub gets the same skeleton: edge-to-edge header background, edge-to-edge footer background, centered max-width body. No exceptions.

The pattern

const headerBlocks = ordered.filter(s => s.block_type === 'Nav_TopBar')
const footerBlocks = ordered.filter(s => s.block_type === 'Nav_Footer')
const bodyBlocks   = ordered.filter(s => s.block_type !== 'Nav_TopBar' && s.block_type !== 'Nav_Footer')

return (
  <Shell>
    {/* Header — full width, no wrapper */}
    {headerBlocks.map((s, i) => (
      <div key={s.section_id ?? `Nav_TopBar-${i}`} className="w-full">
        <RenderBlock blockType="Nav_TopBar" page={page} />
      </div>
    ))}

    {/* Body — constrained */}
    <div className={cn('mx-auto', isCompact ? 'max-w-2xl' : 'max-w-6xl')}>
      {bodyBlocks.map((s, i) => (
        <div key={s.section_id ?? `${s.block_type}-${i}`}>
          <RenderBlock blockType={s.block_type ?? 'Layout_EmptyState'} page={page} />
        </div>
      ))}
    </div>

    {/* Footer — full width, no wrapper */}
    {footerBlocks.map((s, i) => (
      <div key={s.section_id ?? `Nav_Footer-${i}`} className="w-full">
        <RenderBlock blockType="Nav_Footer" page={page} />
      </div>
    ))}
  </Shell>
)

Inside the chrome blocks

Nav_TopBar and Nav_Footer use their own internal max-w-6xl mx-auto for content alignment:

// Nav_TopBar
<header className="w-full sticky top-0 z-10 border-b border-app-border bg-app-surface/90 backdrop-blur">
  <div className="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between">
    {/* logo, nav, CTA */}
  </div>
</header>

This achieves the edge-to-edge background bleed while keeping content aligned with the body grid.

Spacing rhythm (mandatory)

Slot	Class	Pixels
Section vertical padding	py-14	56 top + 56 bottom
Hero top offset (first section)	pt-16 md:pt-24	64 / 96
Card grid gap	gap-4	16
CTA banner inset	p-8	32

Anti-patterns

• ❌ Wrapping Nav_TopBar inside the body max-w-6xl container — background stops mid-viewport
• ❌ Using <Section> inside Nav_Footer — chrome blocks use their own padding
• ❌ Conditionally rendering header in compact mode — chrome is always present, content density changes
• ❌ Forgetting sticky top-0 z-10 on header — page scroll loses the nav anchor

Outputs

• src/components/preview/WireframeBlocksPage.tsx (the dispatcher)
• src/components/preview/blocks/NavTopBar.tsx
• src/components/preview/blocks/NavFooter.tsx

Validation

Visual: open localhost:4000, scroll the preview pane — header background should bleed to both edges, body content should stay within max-w-6xl, footer background should bleed to both edges.

Programmatic:

pnpm --filter design-hub test -- --testNamePattern="fixed layout"