[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-explore-landing-sections":3},{"slug":4,"name":4,"description":5,"files":6,"size":30,"readme":31},"explore-landing-sections","Explores 3–6 distinct directions for one landing-page section (hero, pricing, testimonials, features, CTA, FAQ, logos, footer…) on a single side-by-side HTML comparison page, grounded in real live examples pulled from Landingfolio's gallery through the Landingfolio MCP, then implements the direction the user picks in their real codebase. Use when the user says \"explore directions for the hero\", \"show me a few pricing section options\", \"give me some ideas for this section\", \"what could our testimonials look like\", \"concept the CTA\", \"redesign this section\", or wants to compare section layouts before committing. Also handles the follow-up — \"go with B\", \"implement option C\", \"build this direction\" — via references\u002Fimplement.md. Works without the MCP too, using the section-pattern catalog in references\u002Fsection-patterns.md.",[7,11,14,17,20,23,27],{"path":8,"size":9,"executable":10},"SKILL.md",11825,false,{"path":12,"size":13,"executable":10},"assets\u002Ftemplate.html",12141,{"path":15,"size":16,"executable":10},"references\u002Fbrand-init.md",4608,{"path":18,"size":19,"executable":10},"references\u002Fimplement.md",7097,{"path":21,"size":22,"executable":10},"references\u002Fsection-patterns.md",6893,{"path":24,"size":25,"executable":26},"scripts\u002Fscan-brand.sh",2968,true,{"path":28,"size":29,"executable":10},"LICENSE.md",1069,46601,"---\nname: explore-landing-sections\ndescription: Explores 3–6 distinct directions for one landing-page section (hero, pricing, testimonials, features, CTA, FAQ, logos, footer…) on a single side-by-side HTML comparison page, grounded in real live examples pulled from Landingfolio's gallery through the Landingfolio MCP, then implements the direction the user picks in their real codebase. Use when the user says \"explore directions for the hero\", \"show me a few pricing section options\", \"give me some ideas for this section\", \"what could our testimonials look like\", \"concept the CTA\", \"redesign this section\", or wants to compare section layouts before committing. Also handles the follow-up — \"go with B\", \"implement option C\", \"build this direction\" — via references\u002Fimplement.md. Works without the MCP too, using the section-pattern catalog in references\u002Fsection-patterns.md.\n---\n\n# Explore Landing Sections\n\nProduces ONE standalone `.html` file that shows several directions for one landing-page section side by side, each one grounded in real sections from live landing pages, so the user picks on a visible tradeoff instead of a vibe. Then builds the pick for real.\n\nTwo phases:\n1. **Explore** (this file): pull real examples, write the comparison page.\n2. **Implement**: when the user picks a direction, read [references\u002Fimplement.md](references\u002Fimplement.md) and follow it.\n\n`\u003Cskill-dir>` below means the folder this SKILL.md is in (for example `.claude\u002Fskills\u002Fexplore-landing-sections` or `~\u002F.codex\u002Fskills\u002Fexplore-landing-sections`).\n\n## When to use this skill\n\n- \"Explore directions for the hero \u002F pricing \u002F testimonials section\"\n- \"Show me 4 options for this section\" \u002F \"brainstorm the CTA\" \u002F \"what could the FAQ look like\"\n- \"Redesign the features section, but show me options first\"\n- \"Go with B\" \u002F \"implement option C\" \u002F \"build this direction\" (→ implement phase)\n- \"Init\" \u002F \"rebrand the explorations\" (→ re-run brand init, [references\u002Fbrand-init.md](references\u002Fbrand-init.md))\n\n## When NOT to use this skill\n\n- The user wants a whole page built straight away with no comparison step → build it directly\n- A small tweak to a shipped section (padding, one color, a copy change) → just edit it\n- A critique of an existing page → use a design audit (e.g. the `landing-page-audit` skill)\n\n## Connect the Landingfolio MCP\n\nThe MCP is what grounds each direction in real, current, category-matched sections from landingfolio.com instead of the model's memory of \"what a hero looks like\". It's free (100 requests a day).\n\n**Check first:** look for tools from a server named `landingfolio` — `list_categories`, `get_components`, `pick_components`, `get_components_by_id`, `get_inspiration_page` (Claude Code shows them as `mcp__landingfolio__*`).\n\n**If they're missing**, tell the user in one line and keep going on the no-MCP path below. Never block on it:\n\n> Landingfolio MCP isn't connected, so these directions come from the built-in pattern catalog instead of live examples. To ground them in real sections, get a free token at https:\u002F\u002Fwww.landingfolio.com\u002Fmcp and run:\n> `claude mcp add --transport http landingfolio https:\u002F\u002Fmcp.landingfolio.com\u002Fmcp --header \"Authorization: Bearer \u003Cyour-token>\"`\n> (Cursor, Codex, Windsurf, VS Code and others: the same page has the snippet for each.) Restart the agent after adding it.\n\n## Workflow\n\nNarrate as you go: one status line after the scan, after the examples are in, before writing (the theses), and after writing (the path). The writing stretch runs minutes; silence must never be the first sign of progress.\n\n```\n- [ ] Step 1: Brand scan (init gate)\n- [ ] Step 2: Scope to one section and read its real content\n- [ ] Step 3: Pull real examples (MCP) — or the pattern catalog (no MCP)\n- [ ] Step 4: Announce 3–6 distinct theses\n- [ ] Step 5: Write the comparison page from the template\n- [ ] Step 6: Open it, check it, report\n- [ ] Step 7: On a pick → references\u002Fimplement.md\n```\n\n### Step 1: Brand scan — always first\n\n```bash\nbash \u003Cskill-dir>\u002Fscripts\u002Fscan-brand.sh \u003Crepo-root>\n```\n\n- `STATUS: TEMPLATE_FOUND` → reuse the repo's branded template; say so, continue.\n- `STATUS: NO_TEMPLATE` → read [references\u002Fbrand-init.md](references\u002Fbrand-init.md) and finish brand init **before** writing any exploration HTML. It ends with `design-explorations\u002F_template.html` and `_brand.md` on disk. If the scan lists a `DESIGN.md` (for example one written by the `extract-design-system` skill), that is the brand source of truth.\n\n### Step 2: Scope and read the real content\n\nName the **one** section being explored and its category. Landingfolio's slugs include `hero`, `feature`, `pricing`, `testimonial`, `call-to-action`, `faq`, `logo-cloud`, `how-it-works`, `stats`, `integrations`, `team`, `contact`, `newsletter`, `header`, `footer` (`list_categories` has the live list). If the user asked about a whole page, pick the highest-leverage section (almost always the hero) and say what you scoped to.\n\nRead the current section in the codebase (or the page's live HTML) and collect its **real content**: headline, subhead, CTAs, plan names and prices, testimonial quotes and names, logos, feature list. Every direction uses this same content. Lorem ipsum kills the exercise. If there's no existing section, read the README \u002F other pages for the product and its audience; ask only if you still can't tell what the product is.\n\n### Step 3a: Pull real examples (MCP path)\n\n1. `list_categories` → find the slug that matches the section; use it exactly.\n2. Get examples, one of two ways:\n   - **Newest (default):** `get_components` with that category. 12 results per page; take page 2 as well if fewer than 8 fit the product.\n   - **User picks by eye:** if the user wants to choose, or says \"use the ones I like\": `pick_components` (pass `industry`, e.g. `saas`, when you know it), share the link, wait for the code they paste back, then `get_components_by_id`. When the user is reachable and hasn't said, ask once which they prefer; in a non-interactive run use newest.\n3. **Actually look at them.** Download each screenshot and open it — never pick from URLs alone:\n   ```bash\n   mkdir -p design-explorations\u002Frefs && curl -sL \"\u003Cimage-url>\" -o design-explorations\u002Frefs\u002F\u003Csite>-\u003Cn>.jpg\n   ```\n4. Keep the 6–10 that fit the product (audience, tone, content shape: a 3-tier pricing product needs 3-tier references). For each keeper, note in one line what it does structurally (e.g. \"split hero, product UI bleeding off the right edge, logo row under the CTA\"). Keep each one's `image` and `source` URL for the page.\n\n### Step 3b: Pattern catalog (no-MCP path)\n\nRead [references\u002Fsection-patterns.md](references\u002Fsection-patterns.md) for the section's category: the common structural patterns with what each optimizes for. If the user named sites or shared screenshots they like, those are the references; look at them the same way. Set the header's References meta to \"Pattern catalog (Landingfolio MCP not connected)\" and delete the `.variant-refs` strips unless user references exist.\n\n### Step 4: Announce the theses\n\nBrainstorm 4 directions (range 3–6), each with a one-sentence thesis, each traceable to 1–3 of the references from Step 3 (\"C) proof-first: testimonial wall above the plans, after \u003Csite> and \u003Csite>\"). **Post them before writing** — this is the last message before the longest silent stretch.\n\nDistinct means different **structure, hierarchy, density, or what's prioritized** — never the same layout in different colors. If you can't write distinct one-sentence theses, you don't have distinct directions.\n\n### Step 5: Write the comparison page\n\nCopy `design-explorations\u002F_template.html` to `design-explorations\u002F\u003Csection>-\u003Cshort-name>.html` and fill it in:\n\n- **Header:** title (\"Pricing section — four directions\"), subtitle, the source file in Spec, date, the reference source in References (\"12 live pricing sections from Landingfolio\").\n- **Per direction:** letter + name, the tradeoff line (what it optimizes for AND what it gives up), the **Grounded in** strip (1–3 references: screenshot thumbnail + site name, linking to the `source` URL), the live preview, and the three analysis blocks (≤ 3 sentences each).\n- **Decision row:** \"If you want X → pick A. If Y → pick B…\"\n\nRules for the previews:\n\n- Every direction wears the user's brand from init (fonts, colors, feel). Exploration happens in **layout, hierarchy, density and emphasis**. Go off-brand only when the user explicitly asks for visual-identity directions.\n- **Borrow structure, never identity.** Take a reference's layout idea and level of polish; never its copy, logo, product shots, illustrations or brand colors. Hotlinked screenshots appear only in the Grounded-in strip, never inside a preview.\n- Match the references' **level of design**: their accent use, badges, contrast between sections, type weight, button treatment. A grey-box wireframe is a failure.\n- All directions use the same real content from Step 2.\n- Previews render at desktop width; if the section's mobile layout differs meaningfully between directions, mention it in the analysis.\n- One HTML file, vanilla CSS, no Tailwind CDN or JS frameworks. Scope each direction's CSS with a prefix (`.va-`, `.vb-`, …). System-font fallbacks on every font stack. No comments except the top-of-file header.\n\n### Step 6: Open, check, report\n\nOpen the file (`open` on macOS, `xdg-open` on Linux, `start` on Windows; skip when headless). If you can take screenshots (a screenshot skill such as `screenshot-capture`, a browser MCP, or Playwright), capture the page and look at it: fix overlapping text, broken images, or directions that look alike before reporting.\n\nReport: each direction with its one-line tradeoff and the references behind it, the file path, and which path ran (MCP with N examples, or pattern catalog). End with \"Pick a letter and I'll build it.\"\n\n### Step 7: Implement the pick\n\nWhen the user picks (\"go with C\", \"B but with A's logo row\"), read [references\u002Fimplement.md](references\u002Fimplement.md) and follow it.\n\n## Examples\n\n**\"Explore some directions for our pricing section\"** → scan (template found) → `list_categories` → `get_components category=pricing` (12 results) → download and view them, keep 8 that suit a 3-tier SaaS → theses: A) toggle-led 3-tier with highlighted middle plan (after Linear, Vercel), B) single plan + comparison table, C) proof-first with testimonials above the plans, D) calculator-led → `design-explorations\u002Fpricing-four-directions.html` → open → report.\n\n**Same request, no MCP** → one-line connect note → `references\u002Fsection-patterns.md` → pricing patterns → same four theses from the catalog → page with References \"Pattern catalog\" and no Grounded-in strips.\n\n**\"Let me pick the examples\"** → `pick_components category=hero industry=saas` → share the link → user pastes `acme:65f…  globex:65f…` → `get_components_by_id` → those become the references.\n\n## Troubleshooting\n\n- **Directions look alike:** the theses aren't distinct. Rewrite them before touching CSS; push on structure and priority, not color.\n- **Previews look like wireframes:** you described the references instead of matching their level of design. Re-open the screenshots and copy their caliber of decisions (accent placement, contrast, weight).\n- **`Unknown category`:** call `list_categories` and use a slug from it exactly.\n- **A reference's brand leaked into a preview** (its colors, logo, headline): replace with the user's brand and content; references inform structure only.\n- **Rate limit (429):** the free tier is 100 requests a day. Work with the examples you already have; don't page further.\n- **Generated without brand init:** run the scan, finish init, re-skin the page from the branded template.\n"]