Agency Socials

HTML/Playwright obaly událostí a náhledy YouTube ve fixním tmavém designovém systému

od glebis · glebis/claude-skills

Funguje s nastavením ★ 7.6/10

Agency Socials — HTML/Playwright obaly událostí a náhledy YouTube ve fixním tmavém designovém systému

Co umí

Generuje obaly pro sociální média, náhledy YouTube a obrázky pro příspěvky na Telegramu pro události AGENCY Community vytvářením HTML souborů podle pevného designového systému (tmavá paleta #0f0f0f, písma Geist/EB Garamond/JetBrains Mono, oranžový akcent, rámované mřížkové rozložení) a následným vykreslením do 2x PNG pomocí Playwright. Spouští se, když uživatel požádá o vytvoření obalu události, náhledu meetupu nebo komunitního sociálního příspěvku pro AGENCY Community. Designové tokeny a struktura rozložení jsou specifikovány dostatečně přesně, aby bylo možné reprodukovat vzhled bez živého náhledu.

Testovací report

Načten SKILL.md přes raw GitHub; adresář dovednosti je jednosouborový (pouze SKILL.md), frontmatter má name+description. Žádné přibalené skripty nejsou referencovány — pouze inline Playwright JS, inline osascript clipboard-save one-liner a dvě veřejné CDN URL fontů, které jsem ověřil, že vracejí HTTP 200. Žádné bezpečnostní nedostatky (žádné curl|sh, base64 nebo exfiltrace); zapisuje do ~/Desktop s ~ cestami, žádné pevně zakódované cesty stroje. Pro výstup jsem dvakrát vytvořil obal lu.ma 800x800: základní (modrý gradient, Arial, vycentrovaný) a jeden striktně podle designového systému (tmavý #0f0f0f, nadpis Geist Bold s oranžovým zvýrazněním, jméno řečníka EB Garamond, rámované pruhy JetBrains Mono, mřížka 40px, černobílá fotografie mimo mřížku, 3px akcentní linka) — HTML dovednosti konkrétně ztělesňuje každý uvedený token a splňuje minimální velikosti fontů, což je jasné zlepšení oproti základní linii. Nemohl jsem rasterizovat do PNG, protože Playwright/Chromium zde není nainstalován, ale shoda s designovým systémem je plně ověřitelná v HTML. Testované spouštěcí fráze — MĚLO BY: „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“; NEMĚLO BY: „Design a logo for my coffee brand“, „Create a YouTube thumbnail for my cooking channel“ (správné rozhodnutí — je to omezeno na značku AGENCY Community). Všech 5 posouzeno správně. Dokumentace ztrácí bod: odkazuje na šablonu lab-meeting.html v samostatném „youtube-uploader“, která není přítomna v tomto repozitáři, a předpokládá Playwright bez uvedení závislosti.

Testováno: 2026-07-31 · Claude Code 2.x (agent harness)

Instalace

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.

Příkazy a ukázkové prompty

  • /agency-socialsHTML/Playwright obaly událostí a náhledy YouTube ve fixním tmavém designovém systému

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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