// Generate a beautiful Twitter/social media promo PNG graphic for OpenADE features
End-to-end release workflow — draft notes, run checks, push, watch CI, publish GitHub release, and update download links. Minimal user interaction required.
Add or update a model in the harness model registry. Use when the user wants to add a new AI model, update model pricing, or change default models for a harness.
| 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 |
Create a beautiful, on-brand PNG promo graphic for Twitter (1200x675, exported at 2x retina as 2400x1350).
promo/ that mocks the real app UI faithfully.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.
When mocking the app UI, replicate the actual component structure. Key files:
InputBar: projects/web/src/components/InputBar.tsx — the main input component
absolute bottom-6 left-1/2 -translate-x-1/2 w-full max-w-3xl px-4bg-base-100 border border-border shadow-lgflex items-center gap-1 p-1 with 28x28px icon buttonsmin-h-[58px] text-sm leading-[20px], padding px-2.5 py-[9px]flex items-center gap-2 px-2 py-2 bg-base-200btn flex items-center justify-center gap-2 px-4 h-9 text-sm font-mediumbg-success, primary=bg-primary, neutral=bg-base-200, danger=bg-errorTray 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
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 actionsCommand 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".
"/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"
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.${CLAUDE_SKILL_DIR}/promo/<name>.html${CLAUDE_SKILL_DIR}/promo/<name>.png (2400x1350 retina)After generating, read the PNG to verify it looks correct before presenting to the user.
See ${CLAUDE_SKILL_DIR}/promo/cron-repeat.html for a reference implementation showing the app window mock pattern with sidebar + main area + overlaid InputBar.