# Page Build

> Build a deployable landing page from strategy, copy, visuals, and brand profile using category-aware routing, preservation hierarchy, and explicit QA. Single-file HTML output.

- Skill: `themattberman/page-build` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add themattberman/page-build`
- Raw SKILL.md: https://api.skillmd.com/api/skills/themattberman/page-build/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: TheMattBerman (https://skillmd.com/u/themattberman)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/themattberman/page-build

---


# Page Build

Build quality comes after strategic fidelity, not before it.

This stage assembles the page while preserving what matters for trust and conversion.

## Required inputs

1. `workspace/pages/[page-name]/strategy.json`
2. `workspace/brand/profile.md`
3. `workspace/brand/palette.json`
4. `workspace/pages/[page-name]/copy.md`
5. `workspace/pages/[page-name]/visuals/`
6. `references/anti-slop.md` (bundled with this skill)

If strategy is missing, stop.

If `workspace/pages/[page-name]/visuals/manifest.json` exists, use it as the canonical machine-readable visual source.
Do not ignore provider metadata when it affects trust, fidelity, or fallback history.

## Preservation hierarchy

Apply in this order:
1. preserve trust-critical category conventions
2. preserve mechanism communication needs
3. preserve brand visual identity
4. improve layout rhythm and interaction quality
5. apply anti-slop taste improvements only where they do not distort 1-4

Anti-slop is a quality filter, not a redesign license.

## Pre-build checklist

Before generating HTML, confirm:
- page type confirmed
- conversion mechanism confirmed
- proof inventory loaded
- trust cues selected
- visual manifest resolved into build-ready image paths
- required category conventions preserved
- CTA destination known
- layout choice justified in one line

If any are false, stop or downgrade.

## Routing logic

### Physical product route
Use when strategy page type is product-led.

Above fold must include:
- clear product or mechanism visual
- offer headline
- CTA
- trust cue

### SaaS / app route
Above fold must include:
- preserved screenshot or UI treatment if required
- outcome headline
- trust cue
- CTA

### Lead capture route
Above fold must include either:
- form + friction reducer
or
- clear CTA into a known destination

### Authority / service route
Must include:
- authority cue above fold
- proof section early
- objection handling around trust and fit

### Regulated route
Must include:
- downgraded certainty when proof is partial
- compliance review flag in metadata

## Design rules

- single HTML file
- responsive at minimum 768px and 1024px breakpoints
- semantic HTML
- visible focus states
- alt text on all images
- no builder attribution unless explicitly requested
- no imported taste pattern that overrides source trust cues

## Anti-slop usage

Load `references/anti-slop.md` and apply it after the preservation hierarchy, not before.

## Post-build QA table

Write this into `workspace/pages/[page-name]/qa.md` and summarize in `meta.json`:

| Check | Pass? | Notes |
|---|---|---|
| mechanism visible above fold | | |
| primary proof visible above fold | | |
| CTA above fold | | |
| trust cue above fold | | |
| no invented proof | | |
| no banned slop patterns | | |
| mobile collapse checked | | |
| contrast checked | | |
| alt text present | | |
| category convention preserved | | |

## Metadata contract

`meta.json` must include:
- brand
- page
- page_type
- mechanism_type
- template_route
- CTA_destination
- proof_items with provenance summary
- risk_reversal_present
- compliance_flags
- review_flags
- preserved_elements
- deviations_from_source
- images_used
- sections_present
- build_confidence

When a visual manifest exists, also include:
- `hero_image`
- `image_provider_policy`
- `images_used` as structured objects, not only bare filenames
- provider and fallback context when relevant to review or QA

## Build helper

Use `scripts/resolve-visual-assets.py --page-name [page-name]` to convert `visuals/manifest.json`
into build-ready image metadata for HTML and `meta.json`.

Then use `scripts/prepare-build-meta.py --page-name [page-name] --resolved-assets [file]`
to merge those resolved assets into `meta.json` with deterministic selection fields:
- `hero_image`
- `mechanism_image`
- `lifestyle_image`
- `og_image`
- `image_slots.hero`
- `image_slots.mechanism`
- `image_slots.lifestyle`
- `image_slots.og`

Then use `skills/page-build/scripts/html-image-context.py --meta workspace/pages/[page-name]/meta.json`
to emit literal HTML-ready values such as:
- `hero_img_src`
- `hero_img_alt`
- `mechanism_img_src`
- `mechanism_img_alt`
- `lifestyle_img_src`
- `lifestyle_img_alt`
- `og_image_path`

Minimal executable builder:
- `skills/page-build/scripts/build-page.py --page-name [page-name]`
  This consumes `strategy.json`, `meta.json`, and `html-image-context.json` and writes a real `index.html` scaffold.

Use the skill-local scripts as the primary interface for Cowork or any agent runtime that only uploads the skill folder.
The repo-root `/scripts` copies are local development conveniences, not a packaging requirement.

## Eval Reference

For scoring criteria and pass thresholds, see `skills/page-qa/references/eval-rubric.md`.
For anti-slop patterns, see `references/anti-slop.md` (bundled with this skill).

## Stop / continue logic

Stop if:
- CTA destination is unknown for a lead action page
- page depends on proof that is missing
- required trust cues cannot be supported

Continue with downgrade if:
- visual assets are partial but neutral support layout still works
- proof is light but the page is reframed to softer claims

## Output

Write:
- `workspace/pages/[page-name]/index.html`
- `workspace/pages/[page-name]/meta.json`
- `workspace/pages/[page-name]/qa.md`

A build without QA output is incomplete.