Awesome Marketing Skills Library

Skill by ara.so — Marketing Skills collection.

A universal, high-fidelity library of AI Agent skills for generating premium marketing materials. This library follows the "Vibe Designing" philosophy using Sacred Drift aesthetics, mathematical precision, and contextual intelligence to create pixel-perfect marketing collateral.

What It Does

Awesome Marketing Skills provides reusable skill modules that AI coding agents can execute to:

Generate premium multi-page marketing brochures (PDF) with 1:1 aspect ratio
Apply Sacred Drift design archetype (Cormorant Garamond + Jost typography)
Ensure WCAG AAA compliance programmatically
Automate research using Tavily and Firecrawl MCP servers
Export high-resolution PDFs via Puppeteer automation
Create contextually accurate marketing copy with local cultural awareness

Installation

Clone into your project's .agents/skills/ directory:

mkdir -p .agents/skills
cd .agents/skills
git clone https://github.com/plushyta/Awesome-Marketing-Skills.git awesome-marketing-skills

MCP Server Requirements

The skills require these Model Context Protocol servers:

{
  "mcpServers": {
    "tavily": {
      "command": "uvx",
      "args": ["mcp-server-tavily"],
      "env": { "TAVILY_API_KEY": "<YOUR_TAVILY_API_KEY>" }
    },
    "firecrawl": {
      "command": "uvx",
      "args": ["firecrawl-mcp"],
      "env": { "FIRECRAWL_API_KEY": "<YOUR_FIRECRAWL_API_KEY>" }
    },
    "stock-images": {
      "command": "uvx",
      "args": ["stock-images-mcp"],
      "env": { "PEXELS_API_KEY": "<YOUR_PEXELS_API_KEY>" }
    }
  }
}

Add this to your mcp_config.json or IDE-specific MCP configuration file.

Active Skills

Brochure Generator

Located at: .agents/skills/awesome-marketing-skills/.agents/skills/brochure-generator/

The flagship skill for creating premium marketing brochures.

Triggering the Skill:

Simply describe what you want in natural language:

"Create a premium 5-page brochure for a luxury yoga retreat in Rishikesh using the Sacred Drift theme"

"Design a high-end PDF brochure for my tech conference with WCAG AAA compliance"

Key Features:

Sacred Drift typography (Cormorant Garamond + Jost)
Automated research via MCP servers
WCAG AAA contrast checking
Mobile-optimized layouts (1:1 aspect)
Puppeteer PDF export

Code Examples

Basic HTML Structure (Sacred Drift Pattern)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Jost:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --font-serif: 'Cormorant Garamond', serif;
            --font-sans: 'Jost', sans-serif;
            --color-primary: #2C1810;
            --color-accent: #D4A574;
            --color-bg: #FAF8F3;
        }
        
        body {
            font-family: var(--font-sans);
            background: var(--color-bg);
            color: var(--color-primary);
            line-height: 1.75;
            margin: 0;
            padding: 0;
        }
        
        h1, h2, h3 {
            font-family: var(--font-serif);
            font-weight: 300;
            letter-spacing: 0.02em;
        }
        
        .page {
            width: 1080px;
            height: 1080px;
            position: relative;
            overflow: hidden;
            page-break-after: always;
        }
    </style>
</head>
<body>
    <div class="page">
        <h1>Sacred Drift Brochure</h1>
    </div>
</body>
</html>

WCAG Contrast Checker (JavaScript)

// Programmatic contrast ratio validation
function getContrastRatio(color1, color2) {
    const getLuminance = (color) => {
        const rgb = color.match(/\d+/g).map(Number);
        const [r, g, b] = rgb.map(val => {
            val = val / 255;
            return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
        });
        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
    };
    
    const lum1 = getLuminance(color1);
    const lum2 = getLuminance(color2);
    const brightest = Math.max(lum1, lum2);
    const darkest = Math.min(lum1, lum2);
    
    return (brightest + 0.05) / (darkest + 0.05);
}

// Check WCAG AAA compliance (7:1 for normal text)
const ratio = getContrastRatio('rgb(44, 24, 16)', 'rgb(250, 248, 243)');
if (ratio >= 7) {
    console.log('✓ WCAG AAA Compliant');
} else {
    console.log('✗ Contrast ratio insufficient:', ratio);
}

Puppeteer PDF Export

const puppeteer = require('puppeteer');

async function exportBrochureToPDF(htmlPath, outputPath) {
    const browser = await puppeteer.launch({
        headless: true,
        args: ['--no-sandbox', '--disable-setuid-sandbox']
    });
    
    const page = await browser.newPage();
    await page.setViewport({ width: 1080, height: 1080 });
    await page.goto(`file://${htmlPath}`, { waitUntil: 'networkidle0' });
    
    await page.pdf({
        path: outputPath,
        format: 'A4',
        printBackground: true,
        preferCSSPageSize: true,
        margin: { top: 0, right: 0, bottom: 0, left: 0 }
    });
    
    await browser.close();
    console.log(`✓ PDF exported to ${outputPath}`);
}

// Usage
exportBrochureToPDF(
    './brochure.html',
    './output/Premium_Brochure.pdf'
);

MCP Server Integration Pattern

// Using Tavily for research (via MCP)
async function researchLocation(location) {
    // MCP server handles API calls automatically
    const query = `cultural significance and attractions of ${location}`;
    
    // Agent will route through configured Tavily MCP
    const results = await tavily.search({
        query: query,
        search_depth: 'advanced',
        max_results: 5
    });
    
    return results;
}

// Using Stock Images MCP for contextual imagery
async function fetchContextualImage(theme, orientation = 'landscape') {
    const results = await stockImages.search({
        query: theme,
        orientation: orientation,
        size: 'large',
        per_page: 3
    });
    
    return results[0].src.large2x;
}

Configuration

IDE-Specific Setup

Claude Code / Cursor / Windsurf:

The agent automatically discovers skills in .agents/skills/. No additional configuration needed.

GitHub Copilot:

Add to .github/copilot-instructions.md:

## Custom Skills

Check `.agents/skills/awesome-marketing-skills/` for marketing design skills.
Use Sacred Drift aesthetic principles for all brochure generation tasks.

Codex CLI:

codex run .agents/skills/awesome-marketing-skills/.agents/skills/brochure-generator

Common Patterns

Sacred Drift Color Palette

:root {
    /* Primary Palette */
    --sacred-drift-charcoal: #2C1810;
    --sacred-drift-cream: #FAF8F3;
    --sacred-drift-gold: #D4A574;
    --sacred-drift-sage: #9CAA9C;
    
    /* Overlay Gradients */
    --overlay-dark: linear-gradient(135deg, rgba(44,24,16,0.85), rgba(44,24,16,0.65));
    --overlay-light: linear-gradient(135deg, rgba(250,248,243,0.95), rgba(250,248,243,0.85));
}

Vertical Rhythm System

/* Mathematical line-height system */
.rhythm-small { line-height: 1.5; }    /* 24px base */
.rhythm-medium { line-height: 1.75; }  /* 28px base */
.rhythm-large { line-height: 2.0; }    /* 32px base */

/* Spacing scale (based on 8px grid) */
.spacing-xs { margin-bottom: 8px; }
.spacing-sm { margin-bottom: 16px; }
.spacing-md { margin-bottom: 24px; }
.spacing-lg { margin-bottom: 40px; }
.spacing-xl { margin-bottom: 64px; }

Troubleshooting

MCP Servers Not Found

Error: MCP server 'tavily' not configured

Solution:

# Install MCP servers
uvx mcp-server-tavily
uvx firecrawl-mcp
uvx stock-images-mcp

# Verify API keys are set
echo $TAVILY_API_KEY
echo $FIRECRAWL_API_KEY
echo $PEXELS_API_KEY

PDF Export Issues

Error: Failed to launch browser

Solution:

# Install Chromium dependencies
sudo apt-get install -y chromium-browser

# Or use system Chrome
const browser = await puppeteer.launch({
    executablePath: '/usr/bin/google-chrome',
    headless: true
});

Font Loading Failures

Error: Google Fonts not loading in PDF

Solution:

// Add delay for font loading
await page.goto(htmlPath, { waitUntil: 'networkidle0' });
await page.evaluateHandle('document.fonts.ready');
await page.waitForTimeout(1000); // Extra safety buffer

WCAG Compliance Failures

Error: Contrast ratio below 7:1

Solution:

// Darken text or lighten background
const improveContrast = (textColor, bgColor) => {
    let ratio = getContrastRatio(textColor, bgColor);
    
    // Darken text incrementally
    while (ratio < 7) {
        textColor = darkenColor(textColor, 0.05);
        ratio = getContrastRatio(textColor, bgColor);
    }
    
    return textColor;
};

Directory Structure

.agents/skills/awesome-marketing-skills/
├── .agents/skills/
│   └── brochure-generator/
│       ├── SKILL.md              # Skill instructions
│       ├── templates/            # HTML/CSS templates
│       └── examples/             # Example outputs
├── image.png                     # Banner
├── README.md                     # Main documentation
└── LICENSE

Contributing New Skills

To add a new skill to this library:

Create a new directory in .agents/skills/
Add a SKILL.md with frontmatter (name, description, triggers)
Include example code and templates
Update main README.md with skill entry
Follow Sacred Drift design principles

Example Workflow

// Complete brochure generation workflow
async function generatePremiumBrochure(config) {
    const { title, theme, location, pages } = config;
    
    // Step 1: Research
    const research = await researchLocation(location);
    
    // Step 2: Fetch imagery
    const heroImage = await fetchContextualImage(theme);
    
    // Step 3: Generate HTML
    const html = generateBrochureHTML({
        title,
        research,
        heroImage,
        pages,
        typography: 'sacred-drift',
        palette: 'warm-earth'
    });
    
    // Step 4: Validate WCAG
    const isCompliant = validateWCAG(html);
    if (!isCompliant) throw new Error('Contrast compliance failed');
    
    // Step 5: Export PDF
    await exportBrochureToPDF(html, `./output/${title}.pdf`);
    
    return { success: true, path: `./output/${title}.pdf` };
}

// Usage
await generatePremiumBrochure({
    title: 'Yog Yatra Retreat',
    theme: 'spiritual wellness yoga',
    location: 'Rishikesh, India',
    pages: 5
});

awesome-marketing-skills-library

Awesome Marketing Skills Library

What It Does

Installation

MCP Server Requirements

Active Skills

Brochure Generator

Code Examples

Basic HTML Structure (Sacred Drift Pattern)

WCAG Contrast Checker (JavaScript)

Puppeteer PDF Export

MCP Server Integration Pattern

Configuration

IDE-Specific Setup

Common Patterns

Sacred Drift Color Palette

Vertical Rhythm System

Troubleshooting

MCP Servers Not Found

PDF Export Issues

Font Loading Failures

WCAG Compliance Failures

Directory Structure

Contributing New Skills

Example Workflow

Recommended skills

Skills by category