# Remix

> Rebuild a competitor page or ad creative adapted to your brand — extracts structure and conversion patterns, regenerates with your products and design tokens

- **Type:** Skill
- **Install:** `agentstack add skill-aetheria-labs1-storefront-skills-remix`
- **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/remix

## Install

```sh
agentstack add skill-aetheria-labs1-storefront-skills-remix
```

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

## About

# Remix Storefront Page

Rebuild a competitor page or ad creative adapted to your brand — extracts structure and conversion patterns, regenerates with your products and design tokens

## Context

- **storefront-craft**: Load this skill first on any storefront page generation task.
- **visual-craft**: Techniques for making vibe-code pages look premium. Load when polishing visual quality.

## Workflow

# Ad Creative to Landing Page

Generate a high-converting landing page from an ad creative with full scent continuity (headline, palette, CTA, tone match from click to page).

## Prerequisites

- At least one ad creative synced (Meta/Google/TikTok)
- Store connected and brand kit configured

## Workflow

### Step 1 — Context Gathering

```
get_workspace_details()          → workspace ID, plan tier
get_connected_stores()           → store domain, Shopify data
get_brand_kit()                  → logo, fonts, colors, voice, radius
```

These three calls ALWAYS run first. No exceptions.

### Step 2 — Identify and Analyze the Ad

```
get_ad_creatives({ store_id, status: "active" })
```

Present available creatives (thumbnail + headline + spend). User picks one, or use highest-spend active creative.

```
analyze_ad_creative({ creative_id })
```

Extracts: headline, subheadline, claims, color_palette, tone, cta_text, target_audience, urgency_signals, imagery_style.

### Step 3 — Match Persona and Source Assets

```
match_persona_to_ad({ creative_id })
```

Maps to persona: demographics, pain points, motivations, objections, buying stage. Determines page tone.

```
search_design_library({ query: "" })
```

Find product shots and lifestyle images matching the ad aesthetic. Use `generate_asset` if library insufficient.

### Step 4 — Two-Phase Page Generation

**Phase A — Raw HTML + Tailwind (no islands)**

Generate full page as HTML + Tailwind. Scent continuity rules:
- Hero headline = ad headline (semantic match, max 2-word variation)
- `--lx-accent-color` set to ad's dominant color
- CTA text matches or escalates the ad CTA
- First fold answers the same promise the ad made
- Zero navigation links (single CTA focus)

Structure: Hero > Problem/Agitation > Solution > Social Proof > Features > CTA repeat > FAQ

Mark interactive placeholders: ``

Use `--lx-*` CSS variables in `theme_css` for all brand colors and fonts.

**Phase B — Island Mapping**

Replace placeholders with hydrated islands:
```html

```

Use `get_island_schema` for exact prop shapes.

### Step 5 — Validate and Publish Draft

```
validate_vibe_page(page_data)
publish_vibe_page(page_data, { publish: false })
```

Always publish as draft first. Returns `preview_url`.

### Step 6 — Visual Verification

Use Codex Browser to open `preview_url`, capture desktop and mobile screenshots, and inspect the rendered result. If Browser is unavailable, provide the preview URL and state that visual verification remains manual.

Checklist:
- [ ] Hero headline matches ad headline (scent continuity)
- [ ] Brand colors applied via `--lx-*` variables (not defaults)
- [ ] Single CTA focus (no nav leakage)
- [ ] Mobile layout not broken (stack, readable text)
- [ ] Islands hydrated (BuyBox shows product data)
- [ ] Social proof section present

If issues found: `update_page_section` to fix, then re-verify.

## Decision Points

| Question | Decision |
|----------|----------|
| Which ad? | Ask user, or highest-spend active creative |
| Which product? | Extract from ad analysis (primary product) |
| Draft or live? | Always draft first -- user confirms |
| Long or short? | Video ad = longer storytelling; static = concise |
| Include pricing? | Only if ad mentions price/discount explicitly |

## Quality Gates

- Hero headline >=80% semantic similarity to ad headline
- Color palette matches ad dominant colors (set via `--lx-accent-color`)
- Single primary CTA throughout (no competing actions)
- Mobile-first layout (most ad traffic is mobile)
- No navigation links that leak traffic from conversion
- Ad urgency signals carried through (countdown, limited stock, etc.)
- Page passes `validate_vibe_page` with zero errors

# Competitor Remix (Rebuild from Reference URL)

Capture a competitor page, decompose its structure, and rebuild it using the user's own brand identity, copy, and products. NEVER copy content -- only structural inspiration.

## Prerequisites

- User provides a reference URL
- Store connected and brand kit configured
- User's own product/content available to replace competitor's

## Workflow

### Step 1 — Context Gathering

```
get_workspace_details()          → workspace ID, plan tier
get_connected_stores()           → store domain, Shopify data
get_brand_kit()                  → logo, fonts, colors, voice, radius
```

These three calls ALWAYS run first. No exceptions.

### Step 2 — Capture Reference Design

```
capture_design_source({ url })
```

Screenshots the page and extracts structural layout data.

The agent should analyze the screenshot to extract the competitor's design DNA: color palette, typography, spacing rhythm, border radius, shadow depth, image treatment style, overall aesthetic (minimal, bold, editorial, etc.).

### Step 3 — Decompose into Section Map

Analyze captured page into numbered section breakdown:
```
1. Full-bleed hero — product centered, headline overlay, gradient wash
2. Trust badge row — 4 icons with micro-labels, centered
3. Split feature section — image left, text right, 50/50
4. Testimonial carousel — 3 cards, star ratings, photos
5. Product grid — 3 columns, hover zoom
6. FAQ accordion — 6 items, expandable
7. Final CTA — full-width, contrasting background
```

For each: note layout pattern, content type, approximate proportions, interactive elements.

### Step 4 — Map to Lexsis Capabilities

For each competitor section:
- Island available? Use `get_island_schema(island_name)` for prop shapes
- Static HTML+Tailwind section? (most common)
- Requires custom interactivity? Flag for JS sandbox

### Step 5 — Source User's Own Assets

```
search_design_library({ query: "" })
list_products({ limit: 10 })
```

Replace ALL competitor imagery with user's own assets. Generate new if needed:
```
generate_asset({ prompt: "...", style_reference: "brand_kit" })
```

CRITICAL: NEVER reference, hotlink, or reuse competitor images/copy/logos.

### Step 6 — Two-Phase Generation

**Phase A — Raw HTML + Tailwind (no islands)**

For each section from the decomposition:
- **Structure**: Keep competitor's layout pattern (grid, split, stacked)
- **Brand**: Replace ALL colors/fonts/spacing with user's `--lx-*` variables
- **Content**: Write original copy serving user's value proposition
- **Images**: User's own assets exclusively
- **CTAs**: Aligned with user's conversion goals

Set all brand tokens in `theme_css`:
```css
:root { --lx-accent-color: #...; --lx-font-heading: '...', serif; }
```

Mark interactive placeholders: ``

**Phase B — Island Mapping**

Replace placeholders with hydrated islands:
```html

```

### Step 7 — Validate and Publish Draft

```
validate_vibe_page(page_data)
publish_vibe_page(page_data, { publish: false })
```

Returns `preview_url`.

### Step 8 — Visual Verification

Use Codex Browser to open `preview_url`, capture desktop and mobile screenshots, and compare the rendered result with the reference structure. If Browser is unavailable, provide the preview URL and state that visual verification remains manual.

Checklist:
- [ ] ZERO competitor content carried over (no copy, images, logos)
- [ ] All colors from user's `--lx-*` variables (not competitor palette)
- [ ] Structural similarity recognizable but not pixel-perfect
- [ ] User's brand fonts loading (not system fallback)
- [ ] Mobile layout works independently
- [ ] Islands hydrated with user's own product data
- [ ] Original copy serves user's value proposition

If issues found: `update_page_section` to fix, then re-verify.

## Decision Points

| Question | Decision |
|----------|----------|
| Keep exact structure or adapt? | Adapt: remove irrelevant sections, add where user has more to say |
| Which sections to skip? | Competitor-specific (their awards, team), navigation that does not fit |
| How close to follow? | Structural only -- proportions, flow, section types |
| Interactive elements? | Map to available islands; static equivalent if no island exists |

## Quality Gates

- ZERO competitor content (copy, images, logos, brand marks)
- Page uses exclusively user's `--lx-*` CSS variables
- All images are user's own or freshly generated
- All product references from user's own catalog
- Copy is original, serving user's value proposition
- Mobile layout independent (do not assume competitor's responsive approach)
- Page passes `validate_vibe_page` with zero errors

## 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-remix
- 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%.