Agency Socials

HTML/Playwright event covers en YouTube thumbnails in een vast donker designsysteem

Werkt met setup ★ 7.6/10

Wat het doet

Genereert social media covers, YouTube thumbnails en Telegram post afbeeldingen voor AGENCY Community evenementen door HTML-bestanden te produceren tegen een vast designsysteem (donker #0f0f0f palet, Geist/EB Garamond/JetBrains Mono lettertype, oranje accent, ingekaderde grid layout) en deze vervolgens te renderen naar 2x PNG met Playwright. Triggert wanneer een gebruiker vraagt om een event cover, meetup thumbnail of community social post te maken voor de AGENCY Community. De design tokens en layout structuur zijn precies genoeg gespecificeerd om de look te reproduceren zonder een live preview.

Testrapport

SKILL.md opgehaald via raw GitHub; de skill-directory is een enkel bestand (alleen SKILL.md), frontmatter heeft name+description. Geen gebundelde scripts waarnaar wordt verwezen — alleen inline Playwright JS, een inline osascript clipboard-save one-liner, en twee openbare CDN font URL's die ik geverifieerd heb als HTTP 200. Geen beveiligingsrisico's (geen curl|sh, base64, of exfiltratie); schrijft naar ~/Desktop met ~ paden, geen hardcoded machinepaden. Voor output heb ik tweemaal een 800x800 lu.ma cover gebouwd: een baseline (blauwe gradiënt, Arial, gecentreerd) en een die strikt het designsysteem volgt (donker #0f0f0f, Geist Bold titel met oranje highlight span, EB Garamond spreker naam, JetBrains Mono framed bars, 40px grid, grijswaarden off-grid foto, 3px accentlijn) — de skill HTML belichaamt concreet elke vermelde token en voldoet aan de minimale lettergroottes, een duidelijke verbetering ten opzichte van de baseline. Kon niet rasteriseren naar PNG omdat Playwright/Chromium hier niet is geïnstalleerd, maar de design-system compliance is volledig verifieerbaar in de HTML. Triggerzinnen getest — MOET: "Maak een lu.ma cover voor de volgende AGENCY Community meetup", "Maak een YouTube thumbnail voor de AGENCY meetup opname van vanavond", "Genereer een Telegram aankondigingsafbeelding voor het AGENCY community evenement"; MOET NIET: "Ontwerp een logo voor mijn koffiemerk", "Maak een YouTube thumbnail voor mijn kookkanaal" (juiste oproep — het is merk-scoped naar AGENCY Community). Alle 5 correct beoordeeld. Docs verliezen een punt: verwijst naar een lab-meeting.html template in een aparte "youtube-uploader" die niet in deze repo aanwezig is, en gaat uit van Playwright zonder de afhankelijkheid te vermelden.

Getest op: 2026-07-31 · Claude Code 2.x (agent harness)

Installatie

git clone --depth 1 https://github.com/glebis/claude-skills.git /tmp/agency-socials-src
mkdir -p ~/.claude/skills
cp -R /tmp/agency-socials-src/agency-socials ~/.claude/skills/agency-socials
# Rendering HTML->PNG needs Playwright + Chromium (not bundled):
#   npm i -g playwright && npx playwright install chromium
# Fonts load from public CDNs (fonts.googleapis.com, cdn.jsdelivr.net) at render time — both verified HTTP 200.
# Skill is single-file (only SKILL.md); no scripts/ or template files to copy.
# Design is hardcoded to the "AGENCY Community" brand; retheme the tokens to reuse elsewhere.

Commando's en voorbeeldprompts

/agency-socialsHTML/Playwright event covers en YouTube thumbnails in een vast donker designsysteem

Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):

Create a cover image for this meetup event
Design a YouTube thumbnail for this recording
Make a social post graphic for this event

Volledig rapport (Engels) →