Frontend build

---
name: frontend-build
description: Implement a landing page from a Frezpo package or sample pack in the user host stack.
license: PolyForm-Noncommercial-1.0.0
---

> Frezpo free tool — open for learning and paid client work. May not be sold or productized as a competing skill pack. Built by Frezpo (https://frezpo.com).

# Frontend build (package-native)

**Standalone free skill** — same procedure as the package skill `build-landing-page`, for agents that load skills from a free-tools install rather than from inside a package ZIP.

**Do not re-run the ads-landing pipeline.** **Does not ship ALM commands.**

## When to use

You have an extracted Frezpo package directory (or the Sedentary Shift / sample pack fixture) and want a landing page in your host project.

## Inputs (prefer in order)

1. `machine/build_context.json` — structured build facts
2. `02_ux.md` — design narrative / tokens
3. `01_content.md` — copy and message-match pairings
4. Optional: `machine/skills/build-landing-page.md` if present in the package

## Procedure

## Inputs (read first)

1. `machine/build_context.json` — structure SSoT: `sections[]` order, presentation, fields,
   stack/style when present, design_system_markdown, asset_policy.
2. `02_ux.md` — human build cards and design notes.
3. `01_content.md` — copy + hooks + message-match.
4. Optional: user brand tokens / Figma kit / host stack override.
5. Optional: skill `revise-wireframe` first if order/presentation must change offline.

## Constraints

- Prefer stack/style from `build_context` when present; do not invent a conflicting stack
  without stating the assumption.
- **Copy is sacred** — never paraphrase, translate, or normalize `content_fields[].text`.
- **Authority hierarchy** (highest wins): design-system anti-patterns → section guidelines →
  `developer_notes` → layouts → content field text.
- Section order must match `sections` in `build_context.json` (wireframe SSoT).
- Wireframe revise is **offline only** via skill `revise-wireframe` — not the product UX agent.
- Asset policy v2 (generative components): every visual slot ships a bespoke code-only
  component that strengthens its section's copy; no image files, no stock photo URLs.
- Token / CSS variable names must be preserved exactly when present; if absent,
  implement **structure + copy only** — do not invent a full brand system.
- Soft-fill (`Not produced in this run.`): work around and state assumptions; not invent-license.

## Build rules

### Wireframe is the structure SSoT

`build_context.json` → `sections[]` defines **page order** and **presentation**
(`position`, `ui_component`, layouts). Implement that wireframe; do not invent competing IA.

### Revise offline before build (optional)

If order or presentation must change:

1. Run skill `revise-wireframe` in your own LLM.
2. Patch `machine/build_context.json`.
3. Continue this skill on the revised file.

Agencies: apply **your** design tokens / ui-ux-pro-max / Figma kit.

### Field → markup matrix

| component | Markup role |
|-----------|-------------|
| `heading` | Primary section heading (`h1` only once above the fold; else `h2`) |
| `subheading` | Supporting heading / lead |
| `body` | Paragraph body copy |
| `list_item` | List item (group consecutive items into one list) |
| `cta_label` | Button or link label — use declared CTA destination when present |
| `trust_signal` | Small trust line / badge (do not invent metrics) |
| `transition` | Short bridge line between sections |
| `eyebrow` | Small kicker above a heading (not a second H1) |
| `table_row` | One row in a comparison / feature table (group consecutive rows) |

### CTA

- Prefer declared `cta.type`, `label`, `destination`, `placement` on each section.
- Treat package destinations like `/quiz` or `/checkout` as **intent stubs**, not final
  product URLs, unless the user confirms them.

### Accessibility minima

- Section landmarks (`section` + accessible name).
- Stable heading ids for in-page anchors.
- Focus-visible styles for interactive controls.

### Do not invent

- No testimonials, stats, guarantees, or product claims that are not in package fields.
- No stock photo URLs, no binary image files; fill visual slots with bespoke code-only
  components (asset policy v2).

### Gap clarification (brainstorm with the user)

Before implementing, run a short **brainstorming / clarify** pass: **ask the user** how to
fill anything the package cannot truthfully supply. Do not invent.

Typical gaps:

- **CTA destinations / URLs** — real paths, form endpoints, Calendly, checkout, mailto.
- **Quiz / signup / checkout schema** — when a CTA implies a flow the package does not define.
- **Social proof integrity** — missing names/quotes/metrics → ask for proof or soften.
- **Offer & legal** — price, guarantee, refund, disclaimers when copy implies them.
- **Brand assets** — logo, lockup, colors beyond package tokens.

### Generative visual components (asset policy v2)

- **The copy decides the concept.** Derive each visual from that section's
  `content_fields` text and `goal`, shaded by narrative framework and dominant ad angle
  from handoffs. Never a new message.
- **Per-section recipe:** (1) one-sentence argument from copy; (2) simplest visual form
  (flow, contrast, accumulation, relief, comparison, scale, before/after, …); (3) bespoke
  component in the host stack.
- **Execution bar:** inline SVG with explicit `viewBox` and named geometry constants;
  colors from package tokens or host palette when none declared; honor
  `prefers-reduced-motion`; decorative `aria-hidden="true"`, narrated `role="img"` with
  one accessible label.
- **Hard limits:** no new runtime dependencies; no image/binary files; no external image
  or font URLs. Copy inside a visual still obeys the verbatim-copy rule.

### Host stack

Use `stack` and `style` from `build_context` when present. Otherwise ask the user or
state a default assumption.

## Success criteria

- [ ] Every section in context has a component / block in the plan or implementation.
- [ ] Every content field text appears **verbatim**.
- [ ] Every developer note is addressed or explicitly deferred with rationale.
- [ ] Design tokens applied where declared (or structure-only if absent).
- [ ] Mobile + desktop layouts reflected.
- [ ] Every section has a bespoke visual that strengthens its copy — no placeholder boxes.
- [ ] Each visual's concept traces to section copy/goal.

## Notes

- Do not re-run the pipeline; use only package contents + user answers.
- Soft-fill (`Not produced in this run.`) is not invent-license.

## Sample package

Download a sample pack from frezpo.com (`/sample-pack`) or use `samples/` in the frezpo-free-tools repo when published.

## Boundaries

- Does not run Frezpo strategy nodes.
- Does not include private ALM plugin files.
- Soft-fill / missing package fields are not invent-license.