| skill_id | website-wireframes-engine |
| name | nezam-Website Wireframes Engine |
| tier | 3 |
| description | End-to-end rendered-wireframe pipeline for marketing & SaaS pages: reads wireframes_locked.json, dispatches block components, applies fixed-layout chrome (full-width header/footer), and enforces DESIGN.md §7 contract. |
| version | 1.0.0 |
| updated | "2026-05-28T00:00:00.000Z" |
| changelog | ["1.0.0 — Initial release. Implements DESIGN.md v3 §7 Wireframe Rendering Contract."] |
| references | [".cursor/design/references/impeccable-main/",".cursor/design/references/awesome-design-md-main/",".cursor/design/references/open-design-main/","DESIGN.md","wireframes_locked.json"] |
| breaking_changes | false |
Website Wireframes Engine
Charter
Render full-page wireframes inside the NEZAM Design Hub that satisfy the v3 contract: fixed-layout chrome, token-first styling, RTL-aware, Masri-ready dummy content.
When to use
- Any
/wireframe render request
- Generating preview pages for the Design Hub preview pane (
localhost:4000/preview)
- Exporting a page composition to be locked into
wireframes_locked.json
Inputs
| Input | Source |
|---|
| Page composition (block list) | wireframes_locked.json#pages[].block_layout |
| Active theme tokens | DESIGN.md frontmatter + .nezam/design-hub/src/tokens.css |
| Locale + direction | Runtime (ltr / rtl) |
| Dummy content | dummy-content.tsx + .cursor/design/references/masri-design-assets/ |
Workflow
- Parse composition. Load
wireframes_locked.json for the target page; produce an ordered list of block_type strings.
- Split into chrome layers.
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')
- Render chrome outside
max-w wrapper. Header and footer get w-full, inner content uses max-w-6xl mx-auto.
- Render body inside
max-w-6xl mx-auto (or max-w-2xl for compact mode).
- Apply spacing rhythm.
Section component MUST default to py-14 (see DESIGN.md §7.3).
- Token-bind every color. Reject any block component that resolves to a raw hex code (lint via
check:tokens).
- RTL pass. If
dir="rtl", expand body containers by 1.3× and swap logical edges (see DESIGN.md §9).
- Verify with
pnpm run check:tokens before declaring the render lockable.
Outputs
src/components/preview/WireframeBlocksPage.tsx — main renderersrc/components/preview/blocks/<BlockType>.tsx — one file per block_typesrc/components/preview/dummy-content.tsx — locale-aware dummy set
Anti-patterns
- ❌ Putting
Nav_TopBar inside the max-w-6xl container (breaks edge bleed)
- ❌ Hardcoding section padding instead of using
<Section>
- ❌ Importing block components via dynamic string concat (defeats the token linter)
- ❌ Rendering Arabic with Latin
letter-spacing > 0
Validation
pnpm run check:tokens
pnpm --filter design-hub typecheck
pnpm --filter design-hub test -- --testPathPattern=preview
Cross-skill bindings
- Consumes:
fixed-layout-composer, token-matched-dummy-renderer, typeui-masri-wireframe-typography
- Consumed by:
nezam-design-hub, nezam-wireframe-pipeline
