Agency Social Assets Generator

Name: Agency Social Assets Generator
Author: glebis

By glebis· glebis/claude-skills· 0

Generate social media covers and thumbnails for community events and videos.

Installation

1
Make sure Claude is on your device and in your terminal.
Skills load from ~/.claude/skills/ when Claude Code starts up — so you need it on your machine first. If you don't have it yet, install it once with the command below, then run claude in any terminal to verify.
One-time setup
```
npm i -g @anthropic-ai/claude-code
```
Already have it? Skip ahead.

Paste into Claude Code or into your terminal.

Install

git clone ht••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••• •• ••••• •• •••••••••••••••••••••••••••••••••••••• •• •• •• ••••••••••••••••••••••••••••••••••••••••••• •••••••••••••••••••••••••••••••••••••••

This copies the whole skill folder into ~/.claude/skills/agency-socials-glebis/ — the SKILL.md plus any scripts, reference docs, or templates the skill ships with. Safe default: works for every skill.

Faster alternative (instruction-only skills)

Skips the clone and grabs only the SKILL.md file. Don't use this if the skill ships Python scripts, reference markdowns, or asset templates — they won't be downloaded and the skill will fail when it tries to load them.

Quick install (SKILL.md only)

mkdir -p ~/.••••••••••••••••••••••••••••••••••• •• •••• ••••• ••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• •• •••••••••••••••••••••••••••••••••••••••••••••••

Restart Claude Code.
Quit and reopen Claude Code (or any other agent that loads from ~/.claude/skills/). New skills are picked up on startup.
Just ask Claude.
Skills auto-activate when your request matches the skill's description — no slash command needed. Trigger phrases live in the skill's own frontmatter; you can read them in the “What this skill does” section above.

Prefer to read the source first? Open on GitHub.

When Claude uses it

Generate social media covers and assets for AGENCY Community events, meetups, and YouTube recordings. Use when creating event covers, YouTube thumbnails, or social posts for the AGENCY Community.

What this skill does

AGENCY Community Social Assets Generator

Generate covers and visual assets for AGENCY Community events using the established design system.

Design System

Colors

Background: #0f0f0f
Frame/borders: #2a2a2a
Accent (orange): #e85d04
Primary text: #f0f0f0
Secondary text: #999
Muted text: #555 / #444
Grid lines: rgba(42,42,42,0.12)

Typography

Title/Header: Geist Bold (700) — large, high-impact headlines
Metadata (top bar, bottom bar): JetBrains Mono — monospace, uppercase, letter-spaced
Speaker/people names: EB Garamond — elegant serif
Handles/technical labels: JetBrains Mono — monospace, orange accent

Font loading

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@300;400;500&display=swap&subset=cyrillic" rel="stylesheet">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
}

Layout Principles

Frame: 1px solid #2a2a2a border, inset 12px from edges
Top bar: JetBrains Mono, label left, date/time right (orange)
Bottom bar: JetBrains Mono, metadata left and right, uppercase
Background grid: subtle 40px grid lines
Accent line: 3px orange bar below titles
Photos: off-grid placement, fade to background on edges (left, bottom, top), slight scanline effect, fully desaturated grayscale(1) contrast(1.1) brightness(0.95)
Text: left-aligned, can overlap photo slightly, large and readable at thumbnail size

Minimum font sizes (must be readable at thumbnail)

Top/bottom bar: 13-15px
Speaker names: 28px+
Handles: 20px+
Titles: 62px+ (square), 76px+ (YouTube 16:9)

Asset Sizes

lu.ma Event Cover (square)

Dimensions: 800×800px
Viewport: --viewport-size="800,800"

YouTube Thumbnail (16:9)

Dimensions: 1280×720px
Viewport: --viewport-size="1280,720"
Style reference: matches lab-meeting.html template in youtube-uploader
Uses same design tokens but wider layout

Telegram Post Image

Dimensions: 1080×1080px or 1280×720px

Generation Process

Create HTML file at ~/Desktop/agency-{type}-cover.html
Place speaker photo next to the HTML (same directory)
If speaker photo is in clipboard, save with: osascript -e 'set theFile to POSIX file "/path/to/photo.png"' -e 'set theImage to the clipboard as «class PNGf»' -e 'set fileRef to open for access theFile with write permission' -e 'write theImage to fileRef' -e 'close access fileRef'
Render at 2x scale for crisp text using Node.js script:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: W, height: H },
    deviceScaleFactor: 2
  });
  const page = await context.newPage();
  await page.goto('file:///path/to/html');
  await page.waitForTimeout(3000);
  await page.screenshot({ path: '/output/path.png', fullPage: true });
  await browser.close();
})();

Review output, iterate on layout

Template Structure

<!-- Standard structure for all asset types -->
<body>
  <div class="bg-grid"></div>
  <div class="frame"></div>
  <div class="top-bar">
    <span class="top-left">{event type}</span>
    <span class="top-right">{date · time}</span>
  </div>
  <div class="photo-area"><!-- speaker photo with effects --></div>
  <div class="content">
    <div class="title">{headline with .highlight spans}</div>
    <div class="accent-line"></div>
    <div class="speaker"><strong>{name}</strong> <span class="handle">@{handle}</span></div>
  </div>
  <div class="bottom-bar">
    <span>{format · price}</span>
    <span>agency · community</span>
  </div>
</body>

Photo Effects

Fade from left edge: linear-gradient(to right, #0f0f0f, transparent) width 200px
Fade from bottom: linear-gradient(to top, #0f0f0f, transparent) height 250px
Fade from top: linear-gradient(to bottom, #0f0f0f, transparent) height 80px
Scanlines: repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px)
Orange accent border on left edge: linear-gradient(transparent, #e85d04, transparent) opacity 0.4
Photo filters: grayscale(1) contrast(1.1) brightness(0.95) (fully B&W)
Photo positioned off-grid (partially bleeding off right edge)

Example Invocations

"Create a cover for the AGENCY meetup with Vlad about browser automation"
"Generate a YouTube thumbnail for tonight's meetup recording"
"Make a Telegram announcement image for the next community event"

Related skills

Raffle Winner Picker

Prat011

Randomly select fair winners from lists or Google Sheets for giveaways and contests.

ckm:banner-design

nextlevelbuilder

Generate social media banners, ads, and website headers in multiple styles.

MIT

Ads Creative Development

rampstackco

Produce high-converting ad creative with hooks, testing strategies, and platform-specific tactics.

Last 30 Days

mvanhorn

Research recent public discussions and trends across Reddit, X, YouTube, TikTok, and other platforms.

MIT