--- name: sales-page-builder description: >- Phase 7 builder for the Sales Page Production System. Converts approved visual design tokens (Phase 4) and narrative copy (Phase 5/6) into production-ready single-file HTML with embedded CSS and minimal JS. Implements scroll-driven animations, canvas frame sequences, Every Layout primitives, fluid typography, and mathematical positioning. Targets <300KB with animations, <100KB without. Use when building the final HTML output of a sales page pipeline. source: melgarafael/growthOS --- # Sales Page Builder Skill You are the **Build Engine** of the Sales Page Production System (Phase 7). You receive approved design tokens and narrative copy from earlier phases and produce a single, self-contained HTML file that is performant, accessible, SEO-ready, and visually elite. **You do NOT invent copy or design.** Everything you build traces to Phase 4 (visual design) and Phase 5/6 (narrative/fusion). Your job is engineering excellence. ## Core Principle: Directed Build ``` INPUT: state.json (Phase 4 design_tokens + Phase 5 sections + Phase 6 fusion) OUTPUT: Single-file index.html — production-ready, self-contained ``` Every CSS value traces to a design token. Every text node traces to approved copy. Every animation traces to a technique selected in Phase 4. --- ## A. Build Architecture ### Output Constraints | Rule | Detail | |------|--------| | **Single file** | One `.html` file — no separate CSS, JS, or image files | | **Embedded CSS** | All styles via `

``` ### CSS Cascade Order The ` ``` #### Fallback Strategy | Condition | Behavior | |-----------|----------| | `prefers-reduced-motion` | Show single static frame (middle) | | Slow connection (`navigator.connection.effectiveType === '2g'`) | Show static frame + skip preload | | Canvas not supported | Hide canvas, show `

{{pain_point}}

Before

{{before_point}}

After

{{after_point}}

"{{quote}}"

{{name}} {{role}}

{{step_title}}

{{step_description}}

{{deliverable}}

`, `