Agency Socials

HTML/Playwright event-covere og YouTube-miniatyrbilder i et fast mørkt designsystem

av glebis · glebis/claude-skills

Krever oppsett ★ 7.6/10

Agency Socials — HTML/Playwright event-covere og YouTube-miniatyrbilder i et fast mørkt designsystem

Hva den gjør

Genererer sosiale medier-covere, YouTube-miniatyrbilder og Telegram-innleggsbilder for AGENCY Community-arrangementer ved å produsere HTML-filer mot et fast designsystem (mørk #0f0f0f-palett, Geist/EB Garamond/JetBrains Mono-skrifttype, oransje aksent, innrammet rutenettoppsett) og deretter gjengi dem til 2x PNG med Playwright. Utløses når en bruker ber om å lage et event-cover, et møteminiatyrbilde eller et sosialt innlegg for AGENCY Community. Designtokenene og layoutstrukturen er spesifisert presist nok til å gjengi utseendet uten en live forhåndsvisning.

Testrapport

Hentet SKILL.md via rå GitHub; ferdighetskatalogen er enkeltfil (kun SKILL.md), frontmatter har name+description. Ingen medfølgende skript referert — kun innebygd Playwright JS, en innebygd osascript clipboard-save one-liner, og to offentlige CDN-font-URL-er som jeg verifiserte returnerte HTTP 200. Ingen sikkerhetsbrudd (ingen curl|sh, base64, eller eksfiltrering); skriver til ~/Desktop med ~-stier, ingen hardkodede maskinstier. For utdata bygget jeg et 800x800 lu.ma-cover to ganger: en grunnlinje (blå gradient, Arial, sentrert) og en som strengt fulgte designsystemet (mørk #0f0f0f, Geist Bold-tittel med oransje fremhevingsspan, EB Garamond høyttalernavn, JetBrains Mono innrammede barer, 40px rutenett, gråtone off-grid bilde, 3px aksentlinje) — ferdighetens HTML legemliggjør konkret hvert angitte token og oppfyller minste skriftstørrelser, en klar forbedring over grunnlinjen. Kunne ikke rasterisere til PNG siden Playwright/Chromium ikke er installert her, men designsystemets overholdelse er fullt verifiserbar i HTML. Utløserfraser testet — SKAL: "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"; SKAL IKKE: "Design a logo for my coffee brand", "Create a YouTube thumbnail for my cooking channel" (riktig kall — det er merkevare-avgrenset til AGENCY Community). Alle 5 vurdert korrekt. Dokumentasjon mister et poeng: refererer til en lab-meeting.html-mal i en separat "youtube-uploader" som ikke er til stede i dette repoet, og antar Playwright uten å oppgi avhengigheten.

Testet på: 2026-07-31 · Claude Code 2.x (agent harness)

Installer

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.

Kommandoer og eksempelprompter

  • /agency-socialsHTML/Playwright event-covere og YouTube-miniatyrbilder i et fast mørkt designsystem

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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