AI Skill MartBrowse skillsPromptsProgramsLearnWhat is a Skill?
 
← Back to list

AGENCY Community Social Asset Generator

Builds event covers, YouTube thumbnails, and Telegram images from a fixed dark/orange design system in HTML, then renders them as crisp 2x PNGs with Playwright.

Design & UIIntermediate★ 407⑂ 61AI score 5/10Last updated: Nov 2, 2026

What it does

  • Generates HTML using a locked design system: #0f0f0f background, #e85d04 orange accent, Geist Bold / JetBrains Mono / EB Garamond typography, 1px inset frame, 40px background grid, orange accent bar under titles.
  • Targets the right canvas automatically: 800×800 lu.ma event cover, 1280×720 YouTube thumbnail, 1080×1080 Telegram post.
  • Applies a consistent speaker-photo treatment: full grayscale, subtle scanlines, edge fades, off-grid bleed placement.
  • Enforces minimum readable font sizes at thumbnail scale (titles 62px+, names 28px+, handles 20px+).
  • Screenshots the page via Playwright/Chromium at deviceScaleFactor 2 for sharp text.

Who it's for

  • Community/meetup organizers who need visually consistent event art every week
  • Developers who prefer a code-driven thumbnail pipeline over opening a design tool
  • Teams willing to swap the color/font tokens for their own brand identity

Examples

  1. "Create a cover for the meetup with Vlad about browser automation" → 800×800 HTML, rendered to PNG
  2. "Generate a YouTube thumbnail for tonight's recording" → 1280×720 16:9 layout with title, speaker, handle
  3. "Make a Telegram announcement image for the next event" → 1080×1080 square post

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/glebis/claude-skills/HEAD/agency-socials/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on AI Skill Mart.
Copy the agency-socials folder from the GitHub repo glebis/claude-skills into my ~/.claude/skills/agency-socials/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/glebis/claude-skills.git && mkdir -p ~/.claude/skills && cp -r claude-skills/agency-socials ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/glebis/claude-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r claude-skills/agency-socials ~/.claude/skills/
  5. Install the renderer: npm i playwright && npx playwright install chromium (Node.js 18+ required).
  6. Restart Claude Code and ask something like "make a cover image for this week's meetup".
  7. (Optional) Replace the color codes, fonts, and the agency · community footer in SKILL.md with your own brand. The clipboard-saving osascript command is macOS-only — on other systems, drop the photo file in manually.
View source on GitHub ↗License: MIT