# Plan Page

> Plan a storefront page before generation. Use to gather requirements and create an approved section, animation, and visual-rhythm blueprint.

- **Type:** Skill
- **Install:** `agentstack add skill-aetheria-labs1-storefront-skills-plan-page`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Aetheria-Labs1](https://agentstack.voostack.com/s/aetheria-labs1)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Aetheria-Labs1](https://github.com/Aetheria-Labs1)
- **Source:** https://github.com/Aetheria-Labs1/storefront-skills/tree/main/codex/skills/plan-page

## Install

```sh
agentstack add skill-aetheria-labs1-storefront-skills-plan-page
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Plan Storefront Page

Plan a storefront page before generation — gathers requirements, designs section layout, animations, and visual rhythm.

## Context

- **storefront-craft**: Load this skill first on any storefront page generation task.
- **conversion-psychology**: Read before planning any ecommerce page.

## Workflow

# Page Planning Workflow

> This produces a structured page blueprint. Run it standalone, or use it as Phase -1 before `$generate`.

## Step 1 — Assess What's Known

Score the user's input:

| Signal | Check |
|--------|-------|
| Page type (landing, PDP, homepage, collection, editorial, listicle, bundle) | stated? |
| Target audience / persona | described? |
| Products or collection to feature | named? |
| Traffic source (Meta, Google, TikTok, email, organic) | mentioned? |
| Conversion goal (purchase, signup, browse) | clear? |
| Reference URL or ad creative | provided? |
| Tone/style preference | specified? |

- **4+ signals present** → proceed to Step 3 (auto-plan)
- **< 4 signals** → proceed to Step 2 (ask questions)

## Step 2 — Adaptive Discovery

Ask ONLY questions whose answers are missing. Never ask more than 4 at once.

**Tier 1 (always ask if missing):**
1. "What type of page?" (landing / PDP / homepage / collection / editorial)
2. "Who is this for?" (audience: demographics + pain point)
3. "What should visitors do?" (single conversion goal)

**Tier 2 (ask if Tier 1 reveals complexity):**
4. "Where does traffic come from?" (impacts visual density + social proof weight)
5. "Any sections you specifically want?" (hero style, FAQ, comparison table, etc.)
6. "Should this feel bold/energetic or minimal/premium?" (visual approach)
7. "Any animations or scroll effects?" (parallax, reveal-on-scroll, sticky elements)

**Follow-up triggers:**
- Multiple products mentioned → "Which is the hero product? Are others cross-sells or equals?"
- Health/beauty vertical → "Do you have clinical data or certifications to feature?"
- Ad creative provided → "Should the page match the ad's exact style, or just the message?"

## Step 3 — Generate Page Plan

Use MCP tools to gather brand context:
```
get_brand_kit        → colors, fonts, voice, spacing
get_design_md        → brand philosophy + don'ts
list_products        → available product data
get_navigation       → navbar/footer links
```

Then produce a structured plan covering:

**A. Section Sequence** (ordered list)
For each section:
- Section ID + type (e.g. `hero-split`, `social-proof-bar`, `features-grid`)
- Purpose (what it communicates / why it's here in this position)
- Key content (headline direction, imagery type, specific products)
- Island requirement (if interactive: BuyBox, FAQ, ReviewCarousel, etc.)
- Animation (fade-up, parallax, sticky, reveal, none)

**B. Visual Rhythm**
- Spacing pattern (tight-loose-tight, progressive relaxation, etc.)
- Color temperature flow (hero warm → middle neutral → CTA warm)
- Typography hierarchy (display → heading → body sizes)

**C. Inter-Section Communication**
- Narrative thread (how sections connect logically)
- CTA placement strategy (where and how many)
- Social proof distribution (where trust signals appear and why)
- Scroll incentives (what makes user keep scrolling)

**D. Technical Requirements**
- Islands needed (exact list)
- Custom animations (scroll-triggered reveals, parallax, sticky)
- Asset requirements (hero image, lifestyle shots, textures, icons)

## Step 4 — Present Plan for Approval

Show the plan to the user in this format:

```
📋 Page Plan: [Page Type] for [Audience]

Goal: [Conversion goal]
Sections: [N] | Islands: [list] | Style: [visual approach]

Section Layout:
1. [hero-split] — Hook headline + product image + primary CTA
   Animation: fade-up on load
2. [trust-bar] — Star rating + press logos + "X customers served"
   Animation: none (instant credibility)
3. [problem-solution] — Pain → product as answer (emotional)
   Animation: reveal on scroll
...

Visual Flow: [spacing + color temperature description]
CTA Strategy: [where + how many]

Proceed with this plan? (Or tell me what to change)
```

Wait for user confirmation. If user suggests changes, update plan and re-present.

## Step 5 — Next Steps

Once approved, the user can:
- Run `$generate` — carry the plan forward as the binding blueprint
- Or hand off the plan to any generation flow

The plan becomes BINDING for generation:
- Phase 0 context gathering targets the plan's requirements
- Phase 1 asset generation follows the plan's imagery needs
- Phase 2 HTML generation follows the plan's section sequence EXACTLY
- Section purposes from the plan guide the copywriting
- Animation choices from the plan guide the JS/CSS

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Aetheria-Labs1](https://github.com/Aetheria-Labs1)
- **Source:** [Aetheria-Labs1/storefront-skills](https://github.com/Aetheria-Labs1/storefront-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-aetheria-labs1-storefront-skills-plan-page
- Seller: https://agentstack.voostack.com/s/aetheria-labs1
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.