| name | soskills |
| description | Generate complete, high-converting sales landing pages for low-ticket digital products (ebooks, templates, mini-courses, tools). Outputs production-ready HTML standalone or Next.js TSX + Tailwind code. Use when the user says 'soskills', '/soskills', 'page de vente', 'sales page', 'landing page low-ticket', 'create a sales page', 'generate a landing page', 'low-ticket funnel page', or wants to build a conversion-optimized sales page for a digital product under 100€. |
Soskills — Low-Ticket Sales Page Generator
Generate complete, conversion-optimized sales pages for low-ticket digital products. Output: HTML standalone or Next.js TSX + Tailwind.
Workflow
Phase 1: Discovery
Read references/discovery-questions.md and ask the user the required questions (Q1-Q6) in a single message. Wait for all answers before proceeding.
If answers to Q1 (persona) or Q2 (problem) are vague, ask one follow-up. Infer optional questions (Q7-Q11) from context when possible.
Phase 2: Copywriting
Before writing code, draft all copy section by section following the blueprint in references/sales-sections.md. Apply these principles:
Copywriting rules:
- Write in second person ("tu/vous" in FR, "you" in EN) — match language chosen by user
- Use the PAS framework: Problem → Agitation → Solution
- Every headline must contain a specific benefit or result
- Every bullet point follows: [Concrete feature] → [Emotional benefit]
- Use power words: instantly, proven, without, finally, secret, simple, guaranteed
- Price anchoring: always show total value before revealing actual price
- CTA text = action + result ("Je Veux Mes Templates →", not "Acheter")
Psychology triggers to embed (from marketing-psychology principles):
- Loss aversion: "Ne rate pas..." / frame what they lose by not buying
- Social proof: numbers, testimonials, logos
- Anchoring: high value stack before low price reveal
- Scarcity: limited offer, countdown
- Reciprocity: free bonus stack
- Authority: creator credentials, results
Phase 3: Code Generation
Read references/design-system.md for the visual design system, then generate the page.
Output format based on user choice:
HTML Standalone
- Single
.html file with embedded CSS and minimal JS
- Google Fonts loaded via
<link> (Poppins + Montserrat)
- Fully responsive (breakpoint: 800px)
- Scroll animations via Intersection Observer
- FAQ accordion via vanilla JS
- All styles inline or in
<style> block — no external dependencies
Next.js TSX + Tailwind
- Single page component (
page.tsx or SalesPage.tsx)
- Tailwind CSS classes (no custom CSS unless necessary)
"use client" directive for interactive elements (FAQ accordion, animations)- Lucide React icons if in project deps, otherwise Unicode
- Responsive via Tailwind breakpoints (
md:, lg:)
Design requirements (both formats):
- Follow the color palette, typography, and spacing from the design system
- Alternate section backgrounds (white / off-white)
- CTA buttons repeated after: Hero, Offer/Pricing, Final CTA (minimum 3 CTAs)
- Before/After section uses two-column grid (stacked on mobile)
- Pricing box with border accent and shadow
- Guarantee section with green tint background
- Urgency banner sticky at top (red background)
- Image placeholders with descriptive alt text and sizing comments
- FAQ as clickable accordion
Required sections (in order):
- Urgency banner (sticky top)
- Hero (headline + sub-headline + CTA)
- Problem / Agitation
- Solution — Product reveal
- Before / After transformation
- What's Inside — Content breakdown
- Social Proof
- Bonus Stack
- Offer + Pricing (value stack)
- Guarantee
- FAQ
- Final CTA
Phase 4: Delivery
Write the file to disk at the user's preferred location. Summarize what was generated and suggest next steps:
- Replace image placeholders with real visuals
- Add real testimonials if placeholders were used
- Connect CTA buttons to payment processor (Stripe, Gumroad, LemonSqueezy, etc.)
- A/B test the headline
Quality Checklist
Before delivering, verify:
Resources
