@jaimevalasek/aioson 1.7.0 → 1.7.2

package/template/.aioson/skills/marketing/vsl-craft.md

@@ -0,0 +1,385 @@
+---
+name: vsl-craft
+description: Video Sales Letter production skill — script structure, hook formulas, retention techniques, testing methodology, and production specs. Loaded by @copywriter when Mode 5 (VSL) is active.
+---
+
+# VSL Craft — Video Sales Letter Production
+
+## When to load this skill
+
+- User requests a VSL script
+- User requests a video sales page (page with embedded sales video)
+- User requests an advertorial video
+- @copywriter Mode 5 is activated
+- Squad executor with VSL deliverable
+
+---
+
+## 1. What is a VSL?
+
+A Video Sales Letter is a scripted video (typically 10-45 minutes) designed to convert cold traffic into buyers. It replaces the live salesperson with a pre-recorded, optimized sales presentation.
+
+**Key differences from a written sales page:**
+- The viewer can't scan — they must watch sequentially
+- Retention is everything — if they leave at minute 3, the offer at minute 20 never gets seen
+- Audio + visual = two channels to reinforce the message
+- Pacing, pauses, and emotional tone are scripted, not left to chance
+
+---
+
+## 2. VSL formats
+
+### 2.1 Traditional VSL (horizontal)
+- 16:9 format, presenter or slides
+- Duration: 15-45 minutes
+- Best for: sophisticated offers, higher ticket (R$297+), cold traffic from YouTube/Facebook
+- Production: can be "ugly" (slides only) or "cinematic" (B-roll, editing)
+
+### 2.2 Vertical VSL (mobile-native)
+- 9:16 format, looks like organic content
+- Duration: 3-15 minutes
+- Best for: TikTok/Reels traffic, lower ticket, younger audiences
+- Production: phone-filmed, fast cuts, captions mandatory
+
+### 2.3 Hybrid (advertorial + VSL)
+- Written advertorial page with embedded video at the mechanism section
+- The text does Act 1-2, the video does Act 3-5
+- Best for: sophisticated audiences who want to read before watching
+
+---
+
+## 3. The VSL script structure (5 Acts adapted for video)
+
+### Act 1 — The Hook (0:00 to 0:30)
+
+**Goal:** Stop the scroll and keep them watching for the next 30 seconds.
+
+**The 3-second rule:** If the first 3 seconds aren't arresting, the viewer leaves.
+
+**Hook formulas for VSL:**
+
+**Formula 1: The Discovery Hook**
+> "What you're about to see in the next [X] minutes could change the way you [desired outcome] forever. I'm going to show you [specific discovery] that [specific proof]."
+
+**Formula 2: The Proof-First Hook**
+> "[Name], [age], from [city], lost [specific result] in [specific time]. And she did it without [painful thing]. Today I'm going to show you exactly how — and why it works even if [objection]."
+
+**Formula 3: The Paradox Hook**
+> "Why do [specific group] [achieve result] while [audience group] [fail despite effort]? The answer has nothing to do with [obvious thing] — and everything to do with [curiosity element]."
+
+**Formula 4: The Warning Hook**
+> "If you're [doing common thing], stop immediately. A [authority/study] just revealed that [counterintuitive finding] — and it's costing you [consequence]. Stay with me for [time] and I'll show you [solution]."
+
+**Formula 5: The Story Hook**
+> "Last [day], [specific person] sent me this message: [screenshot/quote]. [X time] ago, they were [painful situation]. Today they [desired outcome]. This is their story — and it starts with [curiosity element]."
+
+**Anti-pattern hooks:**
+- "Hey everyone, welcome to my channel..." → Zero curiosity
+- "In this video I'm going to talk about..." → Passive, no hook
+- "So, I've been getting a lot of questions about..." → About you, not them
+
+### Act 2 — The Background (0:30 to 3:00)
+
+**Goal:** Build authority and emotional connection quickly.
+
+**For expert-led VSL:**
+> "[Credentials in one sentence]. But what matters more than my degrees is this: I've helped [specific number] of people [achieve result], and what I discovered along the way is the reason you're watching this video."
+
+**For avatar transformation:**
+> "I know what it's like to [specific pain]. [Time] ago, I was [painful situation — specific details]. I tried [what they've tried]. Nothing worked. Until [discovery moment]."
+
+**Key rule:** Act 2 must be SHORT in a VSL. On a written page, you can have a long background section. On video, 1-2 minutes max. Get to the mechanism fast.
+
+### Act 3 — The Mechanism (3:00 to 12:00)
+
+**Goal:** Create the "Aha!" moment. This is where the One Belief is built.
+
+**Structure:**
+
+**Part A — Why nothing else worked (2-4 minutes)**
+1. Name what they've tried (validate their experience)
+2. Reveal the hidden reason it failed (the enemy — not them)
+3. Use a visual metaphor or diagram to make the concept tangible
+
+**Part B — How [Mechanism Name] works (3-5 minutes)**
+1. Introduce the mechanism by name
+2. Explain it at surface level (simple enough for a 12-year-old)
+3. Show ONE proof point (study, case study, demonstration)
+4. Use B-roll or diagrams to illustrate — never just talk over static slides for more than 30 seconds
+
+**Retention techniques for Act 3:**
+- **Pattern interrupt every 60-90 seconds:** Change the visual, show a diagram, cut to B-roll, display a quote
+- **Open loops:** "In a moment I'll show you the third step — but first you need to understand why..."
+- **Micro-fascinations:** Drop curiosity bullets throughout: "The ingredient I'm about to mention is in 90% of Brazilian homes but nobody knows it does THIS..."
+- **Density escalation:** Each minute should be MORE interesting than the last, not less
+
+### Act 4 — The Offer (12:00 to 18:00)
+
+**Goal:** Transition from education to sale without breaking trust.
+
+**The transition bridge:**
+> "So now you understand WHY [mechanism] works and HOW it produces [result]. The question is: how do YOU implement it? That's exactly why I created [Product Name]."
+
+**VSL-specific offer rules:**
+- Never call it a "course" — use Protocol, System, Blueprint, Accelerator
+- Show each component visually (mockup, icon, or slide)
+- Read the fascinations with enthusiasm — pacing matters
+- Pause after stating the price — let it sink in
+- Show the guarantee prominently (text on screen + verbal)
+
+**Reference:** `.aioson/skills/marketing/references/offer-structure.md`
+
+### Act 5 — The Close (18:00 to 22:00)
+
+**Goal:** Push the fence-sitters over the edge.
+
+**The Two Paths technique (optimized for video):**
+> "Right now, you're at a fork in the road.
+> [Pause — 2 seconds]
+> Path one: you close this video. You go back to [specific pain]. Tomorrow feels the same as today. Next month, same. Next year...
+> [Pause — 3 seconds]
+> Path two: you click the button below. You start [Product Name] today. In [timeframe], you [specific visualizable result].
+> [Pause — 2 seconds]
+> Which path makes more sense?"
+
+**Recovery techniques (the "Kenyan Village" strategy):**
+- **Pause thumbnail:** When the viewer pauses, a thumbnail appears with a hook to resume
+- **Exit-intent popup:** On the page, when cursor moves to close — offer a discount or bonus
+- **Post-VSL autoplay:** After the main VSL, play a shorter 3-minute "for those still deciding" video
+- **SMS/email retargeting:** Capture email early (before VSL starts) and send follow-up sequence
+
+---
+
+## 4. VSL script format
+
+When writing a VSL script, use this format:
+
+```markdown
+# VSL Script: [Product Name]
+
+## Metadata
+- Duration target: [X] minutes
+- Format: Horizontal / Vertical
+- Traffic temperature: Cold / Warm / Hot
+- One Belief: "[New Opportunity] is the key to [Benefit] through [Mechanism]"
+- Awareness level: [1-5]
+
+---
+
+## ACT 1 — HOOK (0:00–0:30)
+
+### VISUAL:
+[What appears on screen]
+
+### AUDIO:
+[What is said — scripted word-for-word]
+
+### NOTES:
+[Production notes: B-roll, text overlay, music cue]
+
+---
+
+## ACT 2 — BACKGROUND (0:30–3:00)
+
+### VISUAL:
+[Screen description]
+
+### AUDIO:
+[Script]
+
+### NOTES:
+[Production notes]
+
+---
+
+## ACT 3 — MECHANISM (3:00–12:00)
+
+### 3A — Why nothing else worked
+
+#### VISUAL:
+[Screen]
+
+#### AUDIO:
+[Script]
+
+#### PATTERN INTERRUPT at [timestamp]:
+[Visual change / diagram / B-roll description]
+
+### 3B — How [Mechanism] works
+
+#### VISUAL:
+[Screen]
+
+#### AUDIO:
+[Script]
+
+#### PROOF POINT:
+[Study / case study / demonstration]
+
+---
+
+## ACT 4 — OFFER (12:00–18:00)
+
+### TRANSITION:
+
+#### AUDIO:
+[Bridge sentence]
+
+### COMPONENT STACK:
+
+#### VISUAL:
+[Mockup / slide of each component]
+
+#### AUDIO:
+[Component name, benefit, value, fascination]
+
+### PRICE REVEAL:
+
+#### VISUAL:
+[Anchoring → crossed out prices → final price]
+
+#### AUDIO:
+[Not paying X. Not even Y. Today: Z. Reason why.]
+
+### GUARANTEE:
+
+#### VISUAL:
+[Guarantee badge / text on screen]
+
+#### AUDIO:
+[Full guarantee statement]
+
+---
+
+## ACT 5 — CLOSE (18:00–22:00)
+
+### TWO PATHS:
+
+#### AUDIO:
+[Path 1 → Path 2 → Which makes more sense?]
+
+### FINAL CTA:
+
+#### VISUAL:
+[Button, URL, QR code on screen]
+
+#### AUDIO:
+[Click the button below / link in description]
+
+### RECOVERY ELEMENTS:
+- Pause thumbnail text: [text]
+- Exit-intent offer: [discount/bonus]
+- Post-VSL summary video: [Y/N]
+```
+
+---
+
+## 5. Testing methodology
+
+### Phase 1 — Validate the thesis (before production)
+Create an "ugly" VSL:
+- White background, black text on slides
+- Presenter reads from teleprompter (or text-to-speech for testing)
+- No B-roll, no editing, no music
+- Duration: 10-15 minutes (condensed version)
+
+Run R$500-R$1,000 in cold traffic. Measure:
+- **Hook retention:** % watching past 30 seconds (target: >50%)
+- **Mechanism retention:** % watching past Act 3 (target: >25%)
+- **Offer conversion:** % who reach offer AND click CTA (target: >2%)
+
+If the ugly version converts → invest in production.
+If it doesn't → rewrite the script before spending on video production.
+
+### Phase 2 — Optimize the hook
+Create 3-5 hook variations (first 30 seconds only).
+Run equal traffic to each. The winning hook gets 2-3x more budget.
+
+**Hook metrics:**
+- 3-second retention rate
+- 15-second retention rate
+- 30-second retention rate
+
+### Phase 3 — Scale with production
+Once the script is validated:
+- Add B-roll and visual elements
+- Professional audio recording
+- Add pattern interrupts and visual variety
+- Consider vertical format for mobile-first traffic
+
+---
+
+## 6. VSL page structure
+
+The page that hosts the VSL should be minimal:
+
+```html
+<!-- Above the fold — ONLY the video -->
+<section class="vsl-hero">
+  <div class="video-container">
+    <!-- Video player (VTurb, Wistia, or custom) -->
+    <!-- CTA button appears ONLY after offer section plays -->
+  </div>
+</section>
+
+<!-- Below the fold — revealed after video plays past offer -->
+<section class="vsl-offer">
+  <!-- Component stack (text version of what's in the video) -->
+  <!-- Guarantee -->
+  <!-- CTA button -->
+  <!-- FAQ -->
+  <!-- Testimonials -->
+</section>
+```
+
+**Key rules:**
+- **No navigation menu** — remove all escape routes
+- **CTA button hidden until the offer section plays** — don't let them see the price before the mechanism
+- **Video auto-plays on mute with captions** — most mobile traffic has sound off
+- **Exit-intent popup** — "Wait! Before you go..." with a discount or bonus
+- **Timer optional** — only if the offer has a real deadline
+
+---
+
+## 7. Production specifications
+
+### Audio
+- Clear, professional recording (condenser mic, treated room)
+- Pacing: 150-170 words per minute (conversational speed)
+- Consider 1.1x-1.3x playback speed for higher engagement
+- Music: subtle background only, never competing with voice
+
+### Video
+- Resolution: minimum 1080p
+- B-roll: 2-3 second clips every 60-90 seconds in Act 3
+- Text overlays: key claims and proof points on screen while spoken
+- Captions: always (auto-generated + manually corrected)
+
+### Hosting
+- VTurb (Brazilian market — best heatmap and button reveal features)
+- Wistia (international — CTA tools built in)
+- Custom player (maximum control — no platform branding)
+
+---
+
+## 8. Conditional reference loading
+
+When writing a VSL script, the @copywriter agent should load:
+
+| Phase | Load |
+|---|---|
+| Research | `pms-research.md` + `market-intelligence.md` |
+| Script — hook | `one-belief.md` + `patterns.md` (headline formulas adapt to hooks) |
+| Script — mechanism | `five-acts.md` (Acts 3 focus) |
+| Script — offer | `offer-structure.md` + `fascinations.md` |
+| Script — validation | `anti-patterns.md` |
+
+---
+
+## 9. Output contract
+
+VSL script saves to: `.aioson/context/vsl-script-{slug}.md`
+VSL page spec saves to: `.aioson/context/vsl-page-{slug}.md` (if page design is needed)
+
+If invoked from @ux-ui: return the page spec for visual implementation.
+If invoked from a squad: save to the squad's output directory.

package/template/.aioson/skills/static/landing-page-deploy.md

@@ -0,0 +1,192 @@
+---
+name: landing-page-deploy
+description: Deploy workflows for landing pages and static sites — Vercel (Git-connected, CDN) and Hostinger VPS (LiteSpeed). Load when the user asks to deploy a site or when project_type=site is ready for production.
+---
+
+# Landing Page Deploy
+
+Two production-ready deploy paths. Choose based on where your domain is registered and your cost preference.
+
+---
+
+## Path A — Vercel (recommended for Cloudflare domains + automated CI/CD)
+
+**Requirements:**
+- Vercel account (Pro plan minimum — $20/mo — for custom domain on production)
+- Domain registered in Cloudflare (or any DNS provider with CNAME/A record access)
+- Git repository (GitHub, GitLab, or Bitbucket)
+
+### Step A1 — Create Vercel project
+```bash
+# If Vercel CLI is installed
+vercel login
+vercel --prod
+```
+
+Or via dashboard: vercel.com → New Project → Import Git Repository
+
+### Step A2 — Configure project settings
+- Framework Preset: `Other` (for plain HTML) or the correct framework
+- Build Command: leave blank for plain HTML
+- Output Directory: `.` or `dist` (wherever index.html lives)
+- Install Command: leave blank for plain HTML
+
+### Step A3 — Connect domain (Cloudflare DNS)
+1. In Vercel: Settings → Domains → Add `yourdomain.com` and `www.yourdomain.com`
+2. Vercel shows you DNS records to add
+3. In Cloudflare: DNS → Add records as shown by Vercel
+   - Type A: `@` → Vercel IP (proxied OFF — orange cloud OFF for Vercel)
+   - Type CNAME: `www` → `cname.vercel-dns.com`
+4. Wait for propagation (5–30 min)
+
+### Step A4 — Verify SSL
+Vercel auto-provisions SSL via Let's Encrypt. Verify:
+- `https://yourdomain.com` loads without warnings
+- `https://www.yourdomain.com` redirects correctly
+
+### Step A5 — Set environment variables (if needed)
+Vercel Dashboard → Settings → Environment Variables
+Add tracking IDs, API keys as env vars — never hardcode them.
+
+### Step A6 — Post-deploy validation checklist
+- [ ] Production URL loads correctly
+- [ ] SSL certificate active (green padlock)
+- [ ] www → non-www redirect working (or vice versa — consistent)
+- [ ] Preview URL from Vercel PR/branch works
+- [ ] Analytics receiving data (Vercel Analytics or GA)
+- [ ] Meta Pixel fires on production URL (verify with Pixel Helper)
+- [ ] GTM fires on production URL (verify with Tag Assistant)
+- [ ] Test UTM: `https://yourdomain.com?utm_source=test` → check sessionStorage
+
+### Vercel MCP integration (for automated deploy from Claude Code)
+If the Vercel MCP is configured in Claude Code:
+```
+# Deploy current project to Vercel production
+vercel deploy --prod
+```
+Claude Code can trigger deploys directly via MCP without leaving the session.
+
+---
+
+## Path B — Hostinger VPS (recommended for BRL billing + Brazilian users)
+
+**Requirements:**
+- Hostinger VPS plan (R$29.90+/mo, includes free domain on some plans)
+- Domain registered in Hostinger (or any DNS provider)
+- SSH access to the VPS
+
+### Step B1 — Prepare VPS
+```bash
+# SSH into VPS
+ssh root@YOUR_VPS_IP
+
+# Update system
+apt update && apt upgrade -y
+
+# Install LiteSpeed (or use OpenLiteSpeed — pre-installed on some plans)
+# Check if already installed
+litespeed -v
+
+# Create site directory
+mkdir -p /var/www/yourdomain.com/public_html
+```
+
+### Step B2 — Upload site files
+```bash
+# From local machine — upload entire site folder
+scp -r ./dist/* root@YOUR_VPS_IP:/var/www/yourdomain.com/public_html/
+
+# Or use rsync for incremental updates
+rsync -avz --delete ./dist/ root@YOUR_VPS_IP:/var/www/yourdomain.com/public_html/
+```
+
+### Step B3 — Configure virtual host (LiteSpeed)
+Via Hostinger hPanel → Websites → Add Website → point to your folder.
+
+Or via CLI if you have direct LiteSpeed access:
+```
+# /usr/local/lsws/conf/vhosts/yourdomain.com/vhconf.conf
+docRoot /var/www/yourdomain.com/public_html/
+```
+
+### Step B4 — SSL certificate
+```bash
+# Using Let's Encrypt via certbot
+apt install certbot python3-certbot-apache -y
+certbot --apache -d yourdomain.com -d www.yourdomain.com
+
+# Auto-renewal
+certbot renew --dry-run
+```
+
+Or use Hostinger's built-in SSL (hPanel → SSL → Free SSL).
+
+### Step B5 — Set up domain DNS
+In Hostinger hPanel → Domains → DNS Zone:
+- Type A: `@` → your VPS IP
+- Type A: `www` → your VPS IP
+
+Or in Cloudflare if domain is there:
+- Type A: `@` → VPS IP (proxied ON for DDoS protection)
+- Type A: `www` → VPS IP (proxied ON)
+
+### Step B6 — Start web service
+```bash
+# LiteSpeed
+service lsws start
+
+# Verify site is accessible
+curl -I https://yourdomain.com
+```
+
+### Step B7 — Post-deploy validation checklist
+- [ ] Production URL loads correctly
+- [ ] SSL active (no mixed content warnings)
+- [ ] PageSpeed score ≥ 90 (LiteSpeed cache helps significantly)
+- [ ] `curl -I https://yourdomain.com` returns `200 OK`
+- [ ] Meta Pixel fires on production URL
+- [ ] GTM fires on production URL
+- [ ] UTM capture working end-to-end
+- [ ] Form submissions go to the correct endpoint
+
+---
+
+## Deploy decision matrix
+
+| Factor | Vercel | Hostinger VPS |
+|---|---|---|
+| Domain in Cloudflare | ✓ Best | Works |
+| Domain in Hostinger | Works | ✓ Best |
+| Pay in BRL | ✗ USD only | ✓ BRL |
+| Automated CI/CD | ✓ Git-push deploys | Manual rsync |
+| MCP integration | ✓ Available | SSH only |
+| Serverless functions | ✓ Edge functions | ✗ Not native |
+| Cache/CDN | Vercel Edge Network | LiteSpeed cache |
+| Cheapest option | $20/mo USD | R$29.90/mo BRL |
+| Best for Brazilian users | Both | LiteSpeed + BR server |
+
+---
+
+## Deploy from within Claude Code (no manual steps)
+
+### Vercel via MCP
+If Vercel MCP is connected in Claude Code settings, the agent can deploy directly:
+```
+Deploy this project to Vercel production with domain yourdomain.com
+```
+
+### Hostinger via SSH
+Claude Code can SSH into the VPS and run the deploy:
+```bash
+# The agent executes this sequence
+ssh root@VPS_IP "cd /var/www/yourdomain.com/public_html && rm -rf *"
+scp -r ./dist/* root@VPS_IP:/var/www/yourdomain.com/public_html/
+ssh root@VPS_IP "service lsws restart"
+```
+
+### Post-deploy automated check
+After any deploy, run:
+```bash
+curl -o /dev/null -s -w "%{http_code}" https://yourdomain.com
+# Should return 200
+```