--- name: content-asset-creator description: > Creates beautiful, branded HTML content assets — industry reports, landing pages, comparison sheets, one-pagers — from structured data. Uses Gamma API (preferred), v0.dev Platform API, or a self-hosted HTML template system with Tailwind CSS. Outputs self-contained HTML files that can be hosted as web pages or converted to PDF. --- # Content Asset Creator Generates beautiful, branded content assets (reports, landing pages, one-pagers) from structured data. Designed for producing lead magnets, industry reports, and marketing collateral programmatically. ## Quick Start ``` Create a 2-page industry report for Juicebox about "The State of AI Recruiting in 2026". Use these data points: [list stats]. Brand: Juicebox blue, clean modern design. ``` ## Inputs - **Asset type** (required) — `report`, `landing-page`, `comparison`, `one-pager` - **Content data** (required) — structured data for the asset (title, sections, stats, narrative) - **Brand config** (optional) — colors, fonts, logo URL. Defaults to Juicebox brand. - **Output** — HTML file path (default: `output/[asset-type]-[date].html`) ## Asset Types ### 1. Industry Report (2-3 pages) A data-forward document with stats, narrative sections, and visualizations. **Input structure:** ```yaml type: report title: "The State of AI Recruiting — 2026" subtitle: "Data-driven insights on how AI is transforming talent acquisition" brand: name: "Juicebox" primary_color: "#4F46E5" # Indigo/blue secondary_color: "#10B981" # Green accent font: "Inter" logo_url: "https://juicebox.ai/logo.svg" sections: - type: hero-stat stat: "93%" label: "of recruiters plan to increase AI use in 2026" source: "LinkedIn Talent Solutions" - type: narrative title: "The AI Recruiting Revolution" body: "AI adoption in recruiting jumped from 26% to 43% in just two years..." - type: stat-grid stats: - { value: "800M+", label: "Profiles searchable by AI" } - { value: "47%", label: "Reduction in time-to-fill" } - { value: "10x", label: "Cheaper than LinkedIn Recruiter" } - type: comparison-table headers: ["Feature", "Traditional", "AI-Powered"] rows: - ["Search method", "Boolean keywords", "Natural language"] - ["Data sources", "1 (LinkedIn)", "60+ sources"] - type: cta headline: "See AI recruiting in action" body: "Try PeopleGPT free — search 800M+ profiles in natural language" button_text: "Get Started Free" button_url: "https://juicebox.ai" footer: text: "© 2026 Juicebox. Data sources cited throughout." ``` ### 2. Landing Page (single page with CTA) A single-page marketing asset with a headline, value props, and email capture. ### 3. Comparison Page (side-by-side) A visual comparison of two products (e.g., Juicebox vs LinkedIn Recruiter). ### 4. One-Pager (quick reference) A dense, single-page reference sheet (e.g., "PeopleGPT Prompt Library"). ## Step-by-Step Process ### Step 1: Choose Generation Method Check which tools are available (in priority order): 1. **Gamma API** (preferred) — If `GAMMA_API_KEY` is set, use Gamma Generate API v1.0 (GA since Nov 2025). Requires Pro account ($16/mo). Can create presentations, documents, and web pages programmatically. Supports 60+ languages, up to 100K token input. Rate limit: hundreds per hour. 2. **v0.dev Platform API** — If `V0_API_KEY` is set, use Vercel's v0 Platform API (beta). Requires Premium ($20/mo) or Team plan. Generates React + Tailwind code from prompts. Best for landing pages and interactive web content. 3. **Self-hosted HTML** — Fallback: generate HTML directly using Tailwind CSS templates. No external dependency. Full control over output. ### Step 2A: Gamma API Generation (Preferred) Gamma's Generate API v1.0 creates presentations, documents, and web pages from text prompts. **API docs:** https://developers.gamma.app/docs/getting-started ```bash curl -X POST https://api.gamma.app/v1/generate \ -H "Authorization: Bearer $GAMMA_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "prompt": "", "format": "document", "theme": "" }' ``` **Tips for Gamma:** - List your available themes first: `GET /v1/themes` - Can share via email programmatically - Supports creating from templates: use `POST /v1/generate-from-template` - Output can be viewed as a hosted Gamma page or exported ### Step 2B: v0.dev Platform API Generation v0's Platform API generates React + Tailwind code from natural language prompts. **API docs:** https://v0.app/docs/api/platform/overview The workflow: prompt → project → code files → deployment. Output is deployable to Vercel instantly. ```bash # Create a project with a prompt curl -X POST https://api.v0.dev/v1/projects \ -H "Authorization: Bearer $V0_API_KEY" \ -H "Content-Type: application/json" \ -d '{ "prompt": "Create a professional industry report page with..." }' ``` **Tips for v0:** - Best for interactive web pages and landing pages - Output is React/Next.js + Tailwind — can be deployed or converted to static HTML - Usage-based billing on top of subscription ### Step 2C: Self-Hosted HTML Generation (Fallback) Generate a self-contained HTML file: 1. **Load the template** for the asset type 2. **Inject content** from the structured data 3. **Apply brand styles** (colors, fonts, logo) 4. **Generate data visualizations** using inline SVG or CSS 5. **Output** as a single HTML file with all styles inlined **HTML Template Structure:** ```html {{ title }} ``` **Section Templates:** - `hero-stat`: Large stat number with label and source - `narrative`: Title + body text in clean typography - `stat-grid`: 3-4 stats in a responsive grid - `comparison-table`: Side-by-side table with highlighting - `chart`: Simple bar/donut chart using CSS or inline SVG - `cta`: Call-to-action block with button - `footer`: Branded footer with disclaimers ### Step 3: Output Save the HTML file: ``` clients//strategies//content/[asset-name].html ``` Optionally convert to PDF: ```bash # Using playwright/puppeteer (if installed) npx playwright screenshot output.html output.pdf --format=pdf ``` Or provide instructions for manual PDF conversion (print to PDF from browser). ## Brand Configurations ### Juicebox Brand ```json { "name": "Juicebox", "primary_color": "#4F46E5", "secondary_color": "#10B981", "accent_color": "#F59E0B", "background": "#FFFFFF", "text_color": "#111827", "font_heading": "Inter", "font_body": "Inter", "logo_url": "https://juicebox.ai/logo.svg" } ``` Save brand configs at: `skills/content-asset-creator/brands/[client].json` ## Tips - Keep reports to 2-3 pages max. Busy recruiters won't read more. - Lead with the biggest, most surprising stat. Make it impossible to scroll past. - Every section should have exactly ONE key takeaway. Don't dilute with multiple messages. - The CTA should feel natural, not bolted on. The data should lead to the conclusion that the reader needs your product. - For PDF distribution: test that the HTML prints well before sending. Use `@media print` styles. - For web distribution: add Open Graph meta tags so it looks good when shared on LinkedIn/Twitter. ## Dependencies - Tailwind CSS (via CDN — no build step) - Google Fonts (via CDN) - Optional: Gamma API key (`GAMMA_API_KEY`) — Requires Gamma Pro account ($16/mo). API v1.0 GA. Docs: https://developers.gamma.app - Optional: v0.dev API key (`V0_API_KEY`) — Requires v0 Premium ($20/mo). Platform API (beta). Docs: https://v0.app/docs/api/platform/overview - Optional: Playwright/Puppeteer for PDF conversion ## Templates Templates are stored at `skills/content-asset-creator/templates/`: - `report.html` — Industry report template - `landing-page.html` — Landing page with email capture - `comparison.html` — Product comparison page - `one-pager.html` — Quick reference sheet Each template accepts the content data structure defined above.