skillZs
★ LIVE SKILL TAGS ★
>>> LIVE SKILLS INDEX <<<
* OPEN SOURCE *
NO LOGIN, NO TRACKING
※ REAL INSTALL DATA ※
← back to all skills
aradotso/marketing-skills801 installs

awesome-marketing-skills-library

AI agent skill library for generating premium marketing materials with aesthetic-first design using Sacred Drift principles

How do I install this agent skill?

npx skills add https://github.com/aradotso/marketing-skills --skill awesome-marketing-skills-library
view source ↗

Is this agent skill safe to install?

  • Gen Agent Trust Hubfail

    This skill facilitates marketing material generation but introduces significant security risks, including the use of elevated privileges (sudo) and the disabling of browser security sandboxes. It also executes remote code via 'uvx' and clones repositories from unverified third-party GitHub accounts.

  • Socketwarn

    1 alert: gptSecurity

  • Snykwarn

    Risk: MEDIUM · 1 issue

What does this agent skill do?

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:

  1. Create a new directory in .agents/skills/
  2. Add a SKILL.md with frontmatter (name, description, triggers)
  3. Include example code and templates
  4. Update main README.md with skill entry
  5. 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
});

How can the creator link this skill?

Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.

<a href="https://skillzs.dev/skills/aradotso/marketing-skills/awesome-marketing-skills-library">View awesome-marketing-skills-library on skillZs</a>