Tweet It

Tweet-It Skill

Generate shareable tweet copy + infographic for trade posts on X.

When to Use

• After executing a trade — tweet-it generates the post
• When user says "tweet this", "share this trade", "X post", "create a tweet"
• After any trade fills — as part of the post-trade workflow

What It Produces

1. Tweet text — formatted copy matching the user's X voice (see Template below)
2. Infographic card HTML — dark-themed card rendered at 600px, used to generate the PNG
3. Card PNG — browser-screenshotted from the card HTML (pixel-perfect, no AI generation)
4. Self-contained preview page — the card PNG base64-embedded inline, with COPY TEXT and COPY IMAGE buttons

Output Files

reports/tweet-{TICKER}-{DATE}.html          # Self-contained preview (PNG inlined as base64)
reports/tweet-{TICKER}-{DATE}-card.html     # Source card HTML (kept for re-screenshotting)
reports/tweet-{TICKER}-{DATE}-card.png      # Screenshot artifact (inlined into preview)

Generation Workflow (6 Steps — MANDATORY)

Every tweet-it invocation MUST follow these steps in order:

Step 1: Generate tweet text from trade data
Step 2: Generate card HTML → reports/tweet-{TICKER}-{DATE}-card.html
Step 3: Screenshot card via browser automation → reports/tweet-{TICKER}-{DATE}-card.png
Step 4: Base64-encode PNG into a data URI (CRITICAL — see below)
Step 5: Generate preview HTML with data URI embedded → reports/tweet-{TICKER}-{DATE}.html
Step 6: Open preview in browser

Step 3 — Screenshot

agent-browser open file:///path/to/reports/tweet-{TICKER}-{DATE}-card.html
agent-browser screenshot .card /path/to/reports/tweet-{TICKER}-{DATE}-card.png

Step 4 — Base64 Embed (CRITICAL)

⚠️ Chrome blocks file:// → file:// cross-origin requests (CORS). Relative paths, absolute paths, and file:/// URIs all fail when loading images in local HTML files. The ONLY reliable method is to base64-encode the PNG directly into the HTML as a data URI.

import base64

with open('reports/tweet-{TICKER}-{DATE}-card.png', 'rb') as f:
    b64 = base64.b64encode(f.read()).decode('ascii')
data_uri = f"data:image/png;base64,{b64}"

Then inject data_uri into the preview HTML for:

• <img src="{{CARD_DATA_URI}}"> — displays the card image inline
• <a href="{{CARD_DATA_URI}}" download="..."> — enables Download PNG button

Typical card PNG is ~100KB base64 — well within HTML size limits.

Step 5 — Preview Generation

Write the preview HTML with the data URI already substituted. The template uses {{CARD_DATA_URI}} as a placeholder — replace it with the actual data:image/png;base64,... string before writing the file.

Do NOT write the template placeholder to disk. The final HTML file must contain the actual base64 data.

Step 6 — Open

open reports/tweet-{TICKER}-{DATE}.html

The user sees:

• Left: Tweet text with COPY TEXT button (clipboard API)
• Right: Card PNG (right-clickable) with COPY IMAGE button (Canvas → ClipboardItem API) and Download PNG button

Tweet Text Template

The tweet voice is direct, data-driven, educational. Structure:

📉 [Hook question or statement]

[Anti-thesis — what NOT to do and why]

Best vehicle: $TICKER [structure].

> [bullet point 1 — key metric]
> [bullet point 2 — key metric]
> [bullet point 3 — key metric]
> [bullet point 4 — R:R]

[Exact position: qty × structure @ price.]

[Risk $X to make $Y.]

Analyzed by Radon

radon.run

Rules

• Cashtags for tickers: $OXY, $USO, $SCO
• Use > prefix for bullet-style lines (renders as quote-style on X)
• Include "Analyzed by Radon" and "radon.run" at the bottom
• Keep under 280 chars if single tweet, or format as thread-ready blocks
• Numbers are precise — no rounding beyond what's meaningful
• No emojis except one relevant one at the start (📉 📈 🛢️ etc.)
• No hype words ("amazing", "incredible", "moon")
• Tone: calm, scientific, educational

Infographic Card Design

The card is a standalone HTML file optimized for screenshotting:

• Dimensions: 600px wide × auto height (typically 700-900px)
• Background: #0a0f14 (Radon bg-base)
• Font: Inter (headings) + IBM Plex Mono (numbers)
• Border: 1px #1e293b with 4px radius
• Padding: 32px internal
• No scrolling — everything visible in one screen

Card Sections (top to bottom)

1. Direction badge — BEARISH/BULLISH in accent color
2. Ticker + Company — large ticker, small company name
3. Structure line — e.g. "P$55 / P$50 BEAR PUT SPREAD"
4. Metrics strip — Entry | Risk | Reward | R:R (4 columns)
5. Payoff diagram — SVG showing max gain/loss/breakeven zones
6. Thesis — 1-2 sentence thesis in a bordered box
7. Vehicle comparison — mini table showing why this vehicle won (if applicable)
8. Footer — "radon.run" (left) · "Analyzed by Radon" (center, teal) · date (right)

Key Visual Rules

• Negative/bearish = #E85D6C
• Positive/bullish = #05AD98
• Warning/breakeven = #F5A623
• Muted text = #475569
• All numbers in IBM Plex Mono
• No gradients, no shadows, no rounded corners > 4px
• Footer always shows "Analyzed by Radon" centered in teal

Template Files

• template-card.html — Infographic card template (screenshot target)
• template-preview.html — Preview page with copy buttons + base64 image embed

Placeholders

Card Template (template-card.html)

Preview Template (template-preview.html)

⚠️ {{CARD_DATA_URI}} — NOT a File Path

This placeholder must be replaced with the actual base64-encoded PNG data URI before writing the file. It appears in two places:

1. <img id="card-img" src="{{CARD_DATA_URI}}">
2. <a href="{{CARD_DATA_URI}}" download="...">

Never write a file path here. Chrome CORS policy blocks all file:// image loads in local HTML.