om-scogo 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.mdwith 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
});