# Product Page > Build a {{BRAND_NAME}} product / generator / builder / creator landing page end-to-end, starting with a Phase 0 SERP + LLM ranking-factor recon before any copy is written. Ships as a CMS pages entry that mirrors the ai-form-generator design exactly (6 macro components + 6 raw-html components + 1 raw-html tail — 13 slots total). Trigger with `/product-page` or when the user asks to "build a product page", "build the generator page", "build a {{BRAND_NAME}} tool page" and wants SERP + LLM rankings baked into the design. - Skill: `harsh719/product-page` (Agent Skill) - Install (CLI): `npx skillmds@latest add harsh719/product-page` - Raw SKILL.md: https://api.skillmd.com/api/skills/harsh719/product-page/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: harsh719 (https://skillmd.com/u/harsh719) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/harsh719/product-page --- ## Before you run this skill This skill is brand-neutral. It reads its brand, palette and endpoints from `brand.config.json` at the repo root. **On first use, do this before anything else:** 1. Run `python3 brandkit.py`. It prints the config source and any placeholder that is still unset. 2. If it says `configured: False`, copy `brand.config.example.json` to `brand.config.json`. 3. Ask the operator for each value under `missing`, then write them in. Do not guess a brand name, a domain, or a colour. 4. Anything the skill writes out should be passed through `brandkit.fill(text)`, which swaps every `{{TOKEN}}` for its configured value and remaps the default palette to the operator's. Text below uses `{{TOKEN}}` where a value is operator-specific. Treat an unresolved `{{TOKEN}}` in your output as a bug, not as literal copy. ## Publishing: which CMS Never write CMS calls by hand in this skill. Use the shared adapter layer, which covers Strapi, WordPress, Contentful, Sanity, Ghost, Webflow, Payload, Directus, and plain files. ```python from cms import get_adapter, Page, CMSError cms = get_adapter() # reads cms.kind from brand.config.json page = Page(slug=slug, title=title, description=meta_desc, html=body_html, blocks=components, jsonld=graph) entry_id = cms.upsert(page) # ALWAYS a draft, whatever the CMS admin, public = cms.locate(page, entry_id) ``` Rules: - `upsert()` creates a draft. There is no way to publish through it, by design. - `cms.publish(page)` goes live. Call it **only** after the operator says so, for this page, in this session. Approval never carries forward. - If `cms.kind` is `none`, `get_adapter()` raises. Report that and offer `files`, which writes the page to disk instead, rather than guessing a CMS. - `python3 -c "import cms; print(cms.describe())"` tells the operator what is wired and whether that adapter has been verified live. - Only `strapi` and `files` are verified against real instances. For the rest, build the page, run the audit, then tell the operator to expect a possible field-name mismatch on the first push. # {{BRAND_NAME}} Product Page Builder (SERP + LLM aware) Builds a {{BRAND_NAME}} product landing page (typically `/-generator/`, `/-builder/`, `/-creator/`, or feature-page) end-to-end **with mandatory Phase 0 SERP + LLM ranking-factor recon before a single line of copy is written.** Every ranking factor from the top-10 competitor pages gets identified, then either matched or exceeded. Every top LLM-cited domain gets checked so we know what pattern we're competing against. The skill produces a `pages` entry that **mirrors the /ai-form-generator/ design exactly**: 6 macro components + 6 raw-html micro components + 1 raw-html tail (13 slots total). Same rendering pipeline, same visual system, zero drift. **Reference implementation:** `consent-form-generator` (page id 898, shipped 2026-08-03). When in doubt about a macro shape or a raw-html section, fetch that page's `components` array and copy the pattern. --- ## Rule 0 — Inputs (ask one at a time, echo back, confirm) 1. **Primary keyword** — the exact search phrase (US). Example: `consent form generator`, `photo release form maker`. 2. **Slug** — kebab-case URL path, no leading slash. Example: `consent-form-generator`. 3. **Page-type verb** — one of `generator`, `builder`, `creator`, `maker`. Sets the tone across the 13 components. 4. **Secondary keywords** — 4-6 phrases. Includes at least one AI variant (`ai `), one free variant (`free `), and one output-format variant (` pdf` or similar) when applicable. 5. **Regulated-industry framing** — one of: - `explicit-not-hipaa-with-routing` — name {{BRAND_NAME}} as not HIPAA-certified and route to Jotform Gold / Cognito Enterprise in the Clinicians / Healthcare persona (recommended for any consent / clinical / medical topic) - `compact-caveat` — one-sentence non-HIPAA note, no competitor routing - `not-applicable` — the topic is not health/consent-adjacent (event, contact, feedback, quiz, etc.) — skip HIPAA copy entirely 6. **Companion how-to blog (optional)** — the source tracker often has an adjacent blog row (`how to create a `). Offer to ship both landing + blog as a pair. Default: no. After all six, echo the block back and wait for explicit confirmation before Phase 0. --- ## Rule 1 — Phase 0 SERP + LLM recon (mandatory, BEFORE any content build) Do NOT write copy or build components until this phase is complete and the ranking-factor synthesis is presented to the user. ### 1a — Google SERP top-10 (DataForSEO Live SERP) Direct HTTP call — DataForSEO MCP tools may not be loaded. Load credentials from `.env`: ```python import base64, ssl, json, urllib.request ctx = ssl.create_default_context(); ctx.check_hostname=False; ctx.verify_mode=ssl.CERT_NONE auth = base64.b64encode(f"{DFS_LOGIN}:{DFS_PASS}".encode()).decode() payload = json.dumps([{ "keyword": PRIMARY_KEYWORD, "location_name": "United States", "language_code": "en", "device": "desktop", "depth": 10, }]).encode() req = urllib.request.Request( "https://api.dataforseo.com/v3/serp/google/organic/live/advanced", data=payload, method="POST", headers={"Authorization": f"Basic {auth}", "Content-Type": "application/json"} ) ``` Extract from response: - **Top 10 organic** — URL, domain, title, rank - **SERP features** — AI Overview present? PAA questions? Video pack? Related searches? Discussions & Forums block? - **Related searches** — often reveal the highest-intent long-tail variants (` free`, ` pdf`, ` for research`, etc.) ### 1b — Firecrawl the top 5-6 commercial competitors Skip academic/IRB `.edu` results unless they represent a real audience {{BRAND_NAME}} wants. Extract per competitor: - Word count, H1/H2/H3 tree - Tools mentioned (which entities they name) - Compare / benchmark: which pages ARE listicles vs product pages vs template galleries? - Any structural pattern the top 3 share that {{BRAND_NAME}}'s default set doesn't have ### 1c — LLM citation probe (OpenAI gpt-4o-search-preview × 4 queries) ```python payload = json.dumps({ "model": "gpt-4o-search-preview", "messages": [{"role": "user", "content": QUERY}], }).encode() ``` Run 4 query variants covering informational / free / format-specific / use-case intents. Parse `choices[0].message.annotations[].url_citation` for cited domains. Record: - Does {{BRAND_NAME}} get cited (URL or in-answer name)? - Which competitor domains get cited most? - What criteria does the LLM emphasize (unlimited free, AI generation, PDF export, e-signature legality, HIPAA scope, etc.)? ### 1d — Ranking-factor synthesis (present to user, wait for approval) Produce a compact report before touching components: - Top 10 organic domain list with type (listicle / product page / template gallery / academic / brand) - SERP features present + PAA questions verbatim - Related-search intent list ranked by inferred volume - Competitor structural pattern (word count, H2/H3 counts, distinctive sections) - LLM citation status for {{BRAND_NAME}} on this keyword cluster (typically 0/4 on new keywords) - Ranking factors the user's page will **take** from top-10 (design patterns + entity coverage + intent match) - Ranking factors the user's page will **add on top** ({{BRAND_NAME}} differentiators: unlimited free, AI form gen from PDF, native e-signature, PDF export, GDPR + DPA §4.4, MCP for AI agents, etc.) - Proposed component-by-component plan (13 slots — see Rule 2) - Meta title + description proposals - Regulated-industry framing decision (from Rule 0.5) applied to specific components Wait for explicit approval before Phase 1. --- ## Rule 2 — Component structure (15 slots, LOCKED — updated 2026-08-09 for legal-form-management-software) Every product page ships with **exactly 15 components in this order**. Slot type is fixed. Content varies by keyword. | # | Slot | Component type | Purpose | |---|---|---|---| | 0 | **Custom animated hero** | `micro-components.raw-html` | Two-column hero: text left (badge / H1 with violet accent / description / CTAs / trust bullets), right = SINGLE panel with two states — State 1 prompt input with 2-line typing animation + Generate button, State 2 generated form preview with 6 fields drawing in. Both states occupy the same absolute-positioned space, crossfade on a 14s loop. Whole State-2 form card is a clickable link to signup. See "Hero pattern" below. | | 1 | 3-ways | `micro-components.raw-html` | 3 cards: Template · Prompt AI · Upload PDF | | 2 | Trust seals | `macro-components.trust-seals` | `showTrustBadges: False` (org logo band only, no 4 rating cards) | | 3 | Quality control | `micro-components.raw-html` | 5-item bullet list of what makes the output reliable | | 4 | How it works | `macro-components.simple-steps-create` | 3 numbered steps with title + description each | | 5 | **See in action (video/GIF grid)** | `micro-components.raw-html` | 2×2 grid of 4 short GIFs captured from `{{APP_HOST}}` showing the product in motion. Frame-accurate trim to skip page-load blank frames. `` tags for GIFs (not `