메뉴
Use when a project needs Open Graph social card images generated from HTML templates via Playwright screenshot. Triggers include "OG image", "social card", "social preview image", "og:image", "twitter:image".
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Post content from a stage:ready content queue issue to all target channels via Buffer API. Use when a content queue item is ready to distribute, or when user says "distribute", "post this", "send to socials".
Review and curate mined content queue items. Use when user says "curate", "what's in my content queue?", "review content ideas", or "/curate".
Create social media posts promoting blog posts, project milestones, or announcements. Use when user says "social post", "promote this", "share on social", "tweet this", or after publishing a blog post. Matches the blog's voice (second person, direct, Anishinaabemowin greetings where appropriate) and includes real data/results when available.
Draft a Hugo blog post and accompanying social copy from a curated content queue issue. Use when a content queue item is ready for writing, or when user says "produce", "write the post", "draft this".
Launch the Brain Monitor TUI, a real-time terminal dashboard for watching Claudia's memory system. Triggers on "brain monitor", "show dashboard", "memory dashboard", "terminal brain".
Launch the Brain Visualizer, a real-time 3D view of memory and relationships. Triggers on "show your brain", "visualize memory", "open the brain", "memory graph".
| name | generating-og-images |
| description | Use when a project needs Open Graph social card images generated from HTML templates via Playwright screenshot. Triggers include "OG image", "social card", "social preview image", "og:image", "twitter:image". |
Generate branded 1200x630 OG images by rendering an HTML template with Playwright and screenshotting it. No image editor needed — design in HTML/CSS, capture as PNG.
{{title}}, {{gradient}}, etc.)| Component | Convention |
|---|---|
| Viewport | 1200x630px (OG standard) |
| Template | scripts/og-template.html |
| Script | scripts/generate-og-images.js |
| Output | public/img/og/ or static/images/og/ |
| Hash file | .og-template-hash in output dir |
| Font | System stack (no external fonts = no load delay) |
overflow: hiddenlinear-gradient(135deg, ...) backgrounds for visual interestrgba(255,255,255,0.08-0.12))<40 chars → 64px, 40-80 → 48px, >80 → 36pxrgba(255,255,255,0.2) backgroundconst { chromium } = require('playwright');
const fs = require('fs');
const crypto = require('crypto');
// 1. Read template, compute hash
// 2. Compare hash to detect template changes
// 3. Find content items needing images
// 4. For each: inject variables → setContent → screenshot
// 5. Save hash file
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1200, height: 630 });
// Variable injection via string replacement
const html = template
.replace(/\{\{title\}\}/g, escapedTitle)
.replace(/\{\{gradient\}\}/g, gradient);
await page.setContent(html, { waitUntil: 'load' });
await page.screenshot({ path: outputPath, type: 'png' });
Skip the incremental/scanning logic. Just render one template:
const { chromium } = require('playwright');
const fs = require('fs');
const template = fs.readFileSync('scripts/og-template.html', 'utf-8');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.setViewportSize({ width: 1200, height: 630 });
await page.setContent(template, { waitUntil: 'load' });
await page.screenshot({ path: 'public/img/og-card.png', type: 'png' });
await browser.close();
| Mistake | Fix |
|---|---|
| External fonts cause blank text | Use system font stack |
| Title overflows card | Adaptive font sizing by character count |
| Unescaped HTML in title | Escape & → &, < → < |
| Regenerating unchanged images | Hash template, skip if unchanged |
Missing waitUntil: 'load' | Playwright may screenshot before CSS applies |