twitter-graphic - SKILL.md Agent Skill

name: twitter-graphic description: Generate a beautiful Twitter/social media promo PNG graphic for OpenADE features argument-hint: [feature or topic to promote] disable-model-invocation: true allowed-tools: Read, Write, Edit, Bash, Glob, Grep, Agent

Twitter Promo Graphic Generator

Create a beautiful, on-brand PNG promo graphic for Twitter (1200x675, exported at 2x retina as 2400x1350).

Workflow

Research: Read the relevant source code for the feature being promoted. Understand what it does, how users interact with it, and what the UI looks like.
Design: Create an HTML file in promo/ that mocks the real app UI faithfully.
Screenshot: Use Chrome headless to export as a retina PNG.

Brand & Theme

Use the code-theme-black palette from projects/web/src/tw.css:

--base-100: oklch(0% 0 0)           /* #000000 — background */
--base-200: oklch(19% 0 0)          /* #2d2d2d — elevated surfaces, action bar bg */
--base-300: oklch(22% 0 0)          /* #363636 — buttons on base-200 */
--base-content: oklch(87.609% 0 0)  /* #d6d6d6 — primary text */
--primary: var(--color-orange-700)   /* #c2410c — brand orange, Plan buttons */
--primary-content: oklch(1 0 0)     /* #ffffff */
--border: oklch(0.25 0 0 / 0.5)     /* rgba(60,60,60,0.5) */
--muted: oklch(0.55 0 0)            /* #808080 — secondary text */
--success: oklch(51.975% 0.176 142.495) /* #15803d — Do buttons, pass states */
--error: oklch(62.795% 0.257 29.233)    /* #dc2626 — Stop/danger buttons */

Fonts: Inter for UI text, JetBrains Mono for code/mono. Import from Google Fonts.

Component Reference

When mocking the app UI, replicate the actual component structure. Key files:

InputBar: projects/web/src/components/InputBar.tsx — the main input component
- Outer wrapper: absolute bottom-6 left-1/2 -translate-x-1/2 w-full max-w-3xl px-4
- Container: bg-base-100 border border-border shadow-lg
- Tray row: flex items-center gap-1 p-1 with 28x28px icon buttons
- Editor area: min-h-[58px] text-sm leading-[20px], padding px-2.5 py-[9px]
- Actions row: flex items-center gap-2 px-2 py-2 bg-base-200
- Button base: btn flex items-center justify-center gap-2 px-4 h-9 text-sm font-medium
- Variants: success=bg-success, primary=bg-primary, neutral=bg-base-200, danger=bg-error
Tray buttons (from trayConfigs.tsx): Changes (GitCompare), Files (FolderOpen), Git Log (GitCommitHorizontal), Search (Search), Terminal (TerminalSquare), Processes (Play) — all size 14, w-7 h-7
Sidebar crons: projects/web/src/components/sidebar/CronList.tsx
- Header: Clock icon + "Crons" + Plus button
- Each item: flex items-center gap-2 py-1.5 pl-3 pr-2, 8x8 status dot (running=green pulse, active=orange, inactive=gray), text-xs name, hover actions
Command buttons (from InputManager.ts): Do (Play, success), Plan (FileText, primary), Ask (MessageCircleQuestion, neutral), Repeat (Repeat, neutral), Close (CheckCircle, neutral with spacer)

Icons are from lucide-react. Use inline SVGs with matching viewBox="0 0 24 24" and stroke-width="2".

Screenshot Command

"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --hide-scrollbars \
  --screenshot="${CLAUDE_SKILL_DIR}/promo/<name>.png" \
  --window-size=1200,675 \
  --force-device-scale-factor=2 \
  "file://${CLAUDE_SKILL_DIR}/promo/<name>.html"

Layout Tips

The canvas is exactly 1200x675. Everything must fit — no scroll.
When using overflow: hidden on containers (like an app window mock), absolutely positioned children near the edges WILL be clipped. Position overlaying elements (like the InputBar) outside the clipped container.
Include a brief marketing header (logo, headline, subline) and a minimal footer.
Keep copy punchy and concrete. Show real examples, not abstract descriptions.
Use annotation labels in the document flow (not absolutely positioned over content) to call out features.

Output

HTML source: ${CLAUDE_SKILL_DIR}/promo/<name>.html
PNG output: ${CLAUDE_SKILL_DIR}/promo/<name>.png (2400x1350 retina)

After generating, read the PNG to verify it looks correct before presenting to the user.

Existing Examples

See ${CLAUDE_SKILL_DIR}/promo/cron-repeat.html for a reference implementation showing the app window mock pattern with sidebar + main area + overlaid InputBar.