Agency Socials

Couvertures d'événements HTML/Playwright et vignettes YouTube dans un système de design sombre fixe

par glebis · glebis/claude-skills

Fonctionne avec configuration ★ 7.6/10

Agency Socials — Couvertures d'événements HTML/Playwright et vignettes YouTube dans un système de design sombre fixe

Ce que fait

Génère des couvertures de médias sociaux, des vignettes YouTube et des images de publication Telegram pour les événements de la communauté AGENCY en produisant des fichiers HTML selon un système de design fixe (palette sombre #0f0f0f, polices Geist/EB Garamond/JetBrains Mono, accent orange, mise en page en grille encadrée) puis en les rendant en PNG 2x avec Playwright. Se déclenche lorsqu'un utilisateur demande de créer une couverture d'événement, une vignette de réunion ou une publication sociale communautaire pour la communauté AGENCY. Les tokens de design et la structure de la mise en page sont spécifiés avec suffisamment de précision pour reproduire l'apparence sans aperçu en direct.

Rapport de test

SKILL.md récupéré via raw GitHub ; le répertoire de la compétence est un fichier unique (SKILL.md seulement), le frontmatter a name+description. Aucun script intégré référencé — seulement du JS Playwright en ligne, une ligne osascript clipboard-save en ligne, et deux URL de polices CDN publiques que j'ai vérifiées renvoient HTTP 200. Aucune faille de sécurité (aucun curl|sh, base64, ou exfiltration) ; écrit dans ~/Desktop avec des chemins ~, aucun chemin machine codé en dur. Pour la sortie, j'ai construit deux fois une couverture lu.ma 800x800 : une de base (dégradé bleu, Arial, centré) et une suivant strictement le système de design (palette sombre #0f0f0f, titre Geist Bold avec surbrillance orange, nom de l'orateur EB Garamond, barres encadrées JetBrains Mono, grille de 40px, photo hors grille en niveaux de gris, ligne d'accent de 3px) — le HTML de la compétence incarne concrètement chaque token déclaré et respecte les tailles de police minimales, une nette amélioration par rapport à la base. Impossible de rastériser en PNG car Playwright/Chromium n'est pas installé ici, mais la conformité au système de design est entièrement vérifiable dans le HTML. Phrases de déclenchement testées — DEVRAIT : "Create a lu.ma cover for the next AGENCY Community meetup", "Make a YouTube thumbnail for tonight's AGENCY meetup recording", "Generate a Telegram announcement image for the AGENCY community event" ; NE DEVRAIT PAS : "Design a logo for my coffee brand", "Create a YouTube thumbnail for my cooking channel" (bon appel — c'est limité à la marque AGENCY Community). Les 5 jugés correctement. La documentation perd un point : référence un modèle lab-meeting.html dans un "youtube-uploader" séparé non présent dans ce dépôt, et suppose Playwright sans déclarer la dépendance.

Testé le: 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.

Commandes et exemples de prompts

  • /agency-socialsCouvertures d'événements HTML/Playwright et vignettes YouTube dans un système de design sombre fixe

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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