Agency Socials

HTML/Playwright Event-Cover und YouTube-Thumbnails in einem festen dunklen Designsystem

Funktioniert mit Setup ★ 7.6/10

Was es kann

Generiert Social-Media-Cover, YouTube-Thumbnails und Telegram-Post-Bilder für AGENCY Community-Events, indem HTML-Dateien nach einem festen Designsystem (dunkle #0f0f0f-Palette, Geist/EB Garamond/JetBrains Mono-Schrift, orangefarbener Akzent, gerahmtes Rasterlayout) erstellt und diese dann mit Playwright in 2x PNG gerendert werden. Wird ausgelöst, wenn ein Benutzer darum bittet, ein Event-Cover, ein Meetup-Thumbnail oder einen Community-Social-Post für die AGENCY Community zu erstellen. Die Design-Tokens und die Layout-Struktur sind präzise genug spezifiziert, um das Aussehen ohne Live-Vorschau zu reproduzieren.

Testbericht

SKILL.md über Raw GitHub abgerufen; das Skill-Verzeichnis ist eine einzelne Datei (nur SKILL.md), Frontmatter hat name+description. Keine gebündelten Skripte referenziert – nur Inline-Playwright-JS, ein Inline-osascript-Clipboard-Save-Einzeiler und zwei öffentliche CDN-Schriftarten-URLs, die ich als HTTP 200 verifiziert habe. Keine Sicherheitslücken (kein curl|sh, base64 oder Exfiltration); schreibt nach ~/Desktop mit ~-Pfaden, keine fest codierten Maschinenpfade. Für die Ausgabe erstellte ich zweimal ein 800x800 lu.ma-Cover: eine Baseline (blauer Verlauf, Arial, zentriert) und eine, die streng dem Designsystem folgt (dunkles #0f0f0f, Geist Bold-Titel mit orangefarbenem Highlight-Span, EB Garamond-Sprechername, JetBrains Mono gerahmte Balken, 40px Raster, Graustufen-Off-Grid-Foto, 3px Akzentlinie) – das Skill-HTML verkörpert konkret jedes angegebene Token und erfüllt die Mindestschriftgrößen, eine klare Verbesserung gegenüber der Baseline. Konnte nicht in PNG rastern, da Playwright/Chromium hier nicht installiert ist, aber die Designsystem-Konformität ist im HTML vollständig überprüfbar. Getestete Trigger-Phrasierungen – SOLLTE: "Erstelle ein lu.ma-Cover für das nächste AGENCY Community Meetup", "Erstelle ein YouTube-Thumbnail für die heutige AGENCY Meetup-Aufnahme", "Generiere ein Telegram-Ankündigungsbild für das AGENCY Community Event"; SOLLTE NICHT: "Entwirf ein Logo für meine Kaffeemarke", "Erstelle ein YouTube-Thumbnail für meinen Kochkanal" (richtiger Aufruf – es ist auf AGENCY Community beschränkt). Alle 5 korrekt bewertet. Docs verlieren einen Punkt: referenziert eine lab-meeting.html-Vorlage in einem separaten "youtube-uploader", das nicht in diesem Repo vorhanden ist, und setzt Playwright voraus, ohne die Abhängigkeit anzugeben.

Getestet am: 2026-07-31 · Claude Code 2.x (agent harness)

Installation

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.

Befehle & Beispiel-Prompts

/agency-socialsHTML/Playwright Event-Cover und YouTube-Thumbnails in einem festen dunklen Designsystem

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

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

Vollständiger Testbericht (Englisch) →