Content Asset Creator Agent Skill

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:

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):

• 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.
• 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.
• 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

curl -X POST https://api.gamma.app/v1/generate \
  -H "Authorization: Bearer $GAMMA_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "<structured content prompt>",
    "format": "document",
    "theme": "<optional theme ID>"
  }'

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.

# 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:

• Load the template for the asset type
• Inject content from the structured data
• Apply brand styles (colors, fonts, logo)
• Generate data visualizations using inline SVG or CSS
• Output as a single HTML file with all styles inlined

HTML Template Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ title }}</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            brand: '{{ primary_color }}',
            accent: '{{ secondary_color }}'
          },
          fontFamily: {
            sans: ['Inter', 'sans-serif']
          }
        }
      }
    }
  </script>
  <style>
    /* Print styles for PDF conversion */
    @media print {
      .page-break { page-break-before: always; }
      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }
  </style>
</head>
<body class="font-sans bg-white text-gray-900">
  <!-- Content sections generated here -->
</body>
</html>

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/<client>/strategies/<strategy>/content/[asset-name].html

Optionally convert to PDF:

# 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

{
  "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.