@aksp/opencrew 1.0.0

package/templates/skills/opencrew-skill-creator/scripts/run_eval.py

@@ -0,0 +1,310 @@
+#!/usr/bin/env python3
+"""Run trigger evaluation for a skill description.
+
+Tests whether a skill's description causes Claude to trigger (read the skill)
+for a set of queries. Outputs results as JSON.
+"""
+
+import argparse
+import json
+import os
+import select
+import subprocess
+import sys
+import time
+import uuid
+from concurrent.futures import ProcessPoolExecutor, as_completed
+from pathlib import Path
+
+from scripts.utils import parse_skill_md
+
+
+def find_project_root() -> Path:
+    """Find the project root by walking up from cwd looking for .claude/.
+
+    Mimics how Claude Code discovers its project root, so the command file
+    we create ends up where claude -p will look for it.
+    """
+    current = Path.cwd()
+    for parent in [current, *current.parents]:
+        if (parent / ".claude").is_dir():
+            return parent
+    return current
+
+
+def run_single_query(
+    query: str,
+    skill_name: str,
+    skill_description: str,
+    timeout: int,
+    project_root: str,
+    model: str | None = None,
+) -> bool:
+    """Run a single query and return whether the skill was triggered.
+
+    Creates a command file in .claude/commands/ so it appears in Claude's
+    available_skills list, then runs `claude -p` with the raw query.
+    Uses --include-partial-messages to detect triggering early from
+    stream events (content_block_start) rather than waiting for the
+    full assistant message, which only arrives after tool execution.
+    """
+    unique_id = uuid.uuid4().hex[:8]
+    clean_name = f"{skill_name}-skill-{unique_id}"
+    project_commands_dir = Path(project_root) / ".claude" / "commands"
+    command_file = project_commands_dir / f"{clean_name}.md"
+
+    try:
+        project_commands_dir.mkdir(parents=True, exist_ok=True)
+        # Use YAML block scalar to avoid breaking on quotes in description
+        indented_desc = "\n  ".join(skill_description.split("\n"))
+        command_content = (
+            f"---\n"
+            f"description: |\n"
+            f"  {indented_desc}\n"
+            f"---\n\n"
+            f"# {skill_name}\n\n"
+            f"This skill handles: {skill_description}\n"
+        )
+        command_file.write_text(command_content)
+
+        cmd = [
+            "claude",
+            "-p", query,
+            "--output-format", "stream-json",
+            "--verbose",
+            "--include-partial-messages",
+        ]
+        if model:
+            cmd.extend(["--model", model])
+
+        # Remove CLAUDECODE env var to allow nesting claude -p inside a
+        # Claude Code session. The guard is for interactive terminal conflicts;
+        # programmatic subprocess usage is safe.
+        env = {k: v for k, v in os.environ.items() if k != "CLAUDECODE"}
+
+        process = subprocess.Popen(
+            cmd,
+            stdout=subprocess.PIPE,
+            stderr=subprocess.DEVNULL,
+            cwd=project_root,
+            env=env,
+        )
+
+        triggered = False
+        start_time = time.time()
+        buffer = ""
+        # Track state for stream event detection
+        pending_tool_name = None
+        accumulated_json = ""
+
+        try:
+            while time.time() - start_time < timeout:
+                if process.poll() is not None:
+                    remaining = process.stdout.read()
+                    if remaining:
+                        buffer += remaining.decode("utf-8", errors="replace")
+                    break
+
+                ready, _, _ = select.select([process.stdout], [], [], 1.0)
+                if not ready:
+                    continue
+
+                chunk = os.read(process.stdout.fileno(), 8192)
+                if not chunk:
+                    break
+                buffer += chunk.decode("utf-8", errors="replace")
+
+                while "\n" in buffer:
+                    line, buffer = buffer.split("\n", 1)
+                    line = line.strip()
+                    if not line:
+                        continue
+
+                    try:
+                        event = json.loads(line)
+                    except json.JSONDecodeError:
+                        continue
+
+                    # Early detection via stream events
+                    if event.get("type") == "stream_event":
+                        se = event.get("event", {})
+                        se_type = se.get("type", "")
+
+                        if se_type == "content_block_start":
+                            cb = se.get("content_block", {})
+                            if cb.get("type") == "tool_use":
+                                tool_name = cb.get("name", "")
+                                if tool_name in ("Skill", "Read"):
+                                    pending_tool_name = tool_name
+                                    accumulated_json = ""
+                                else:
+                                    return False
+
+                        elif se_type == "content_block_delta" and pending_tool_name:
+                            delta = se.get("delta", {})
+                            if delta.get("type") == "input_json_delta":
+                                accumulated_json += delta.get("partial_json", "")
+                                if clean_name in accumulated_json:
+                                    return True
+
+                        elif se_type in ("content_block_stop", "message_stop"):
+                            if pending_tool_name:
+                                return clean_name in accumulated_json
+                            if se_type == "message_stop":
+                                return False
+
+                    # Fallback: full assistant message
+                    elif event.get("type") == "assistant":
+                        message = event.get("message", {})
+                        for content_item in message.get("content", []):
+                            if content_item.get("type") != "tool_use":
+                                continue
+                            tool_name = content_item.get("name", "")
+                            tool_input = content_item.get("input", {})
+                            if tool_name == "Skill" and clean_name in tool_input.get("skill", ""):
+                                triggered = True
+                            elif tool_name == "Read" and clean_name in tool_input.get("file_path", ""):
+                                triggered = True
+                            return triggered
+
+                    elif event.get("type") == "result":
+                        return triggered
+        finally:
+            # Clean up process on any exit path (return, exception, timeout)
+            if process.poll() is None:
+                process.kill()
+                process.wait()
+
+        return triggered
+    finally:
+        if command_file.exists():
+            command_file.unlink()
+
+
+def run_eval(
+    eval_set: list[dict],
+    skill_name: str,
+    description: str,
+    num_workers: int,
+    timeout: int,
+    project_root: Path,
+    runs_per_query: int = 1,
+    trigger_threshold: float = 0.5,
+    model: str | None = None,
+) -> dict:
+    """Run the full eval set and return results."""
+    results = []
+
+    with ProcessPoolExecutor(max_workers=num_workers) as executor:
+        future_to_info = {}
+        for item in eval_set:
+            for run_idx in range(runs_per_query):
+                future = executor.submit(
+                    run_single_query,
+                    item["query"],
+                    skill_name,
+                    description,
+                    timeout,
+                    str(project_root),
+                    model,
+                )
+                future_to_info[future] = (item, run_idx)
+
+        query_triggers: dict[str, list[bool]] = {}
+        query_items: dict[str, dict] = {}
+        for future in as_completed(future_to_info):
+            item, _ = future_to_info[future]
+            query = item["query"]
+            query_items[query] = item
+            if query not in query_triggers:
+                query_triggers[query] = []
+            try:
+                query_triggers[query].append(future.result())
+            except Exception as e:
+                print(f"Warning: query failed: {e}", file=sys.stderr)
+                query_triggers[query].append(False)
+
+    for query, triggers in query_triggers.items():
+        item = query_items[query]
+        trigger_rate = sum(triggers) / len(triggers)
+        should_trigger = item["should_trigger"]
+        if should_trigger:
+            did_pass = trigger_rate >= trigger_threshold
+        else:
+            did_pass = trigger_rate < trigger_threshold
+        results.append({
+            "query": query,
+            "should_trigger": should_trigger,
+            "trigger_rate": trigger_rate,
+            "triggers": sum(triggers),
+            "runs": len(triggers),
+            "pass": did_pass,
+        })
+
+    passed = sum(1 for r in results if r["pass"])
+    total = len(results)
+
+    return {
+        "skill_name": skill_name,
+        "description": description,
+        "results": results,
+        "summary": {
+            "total": total,
+            "passed": passed,
+            "failed": total - passed,
+        },
+    }
+
+
+def main():
+    parser = argparse.ArgumentParser(description="Run trigger evaluation for a skill description")
+    parser.add_argument("--eval-set", required=True, help="Path to eval set JSON file")
+    parser.add_argument("--skill-path", required=True, help="Path to skill directory")
+    parser.add_argument("--description", default=None, help="Override description to test")
+    parser.add_argument("--num-workers", type=int, default=10, help="Number of parallel workers")
+    parser.add_argument("--timeout", type=int, default=30, help="Timeout per query in seconds")
+    parser.add_argument("--runs-per-query", type=int, default=3, help="Number of runs per query")
+    parser.add_argument("--trigger-threshold", type=float, default=0.5, help="Trigger rate threshold")
+    parser.add_argument("--model", default=None, help="Model to use for claude -p (default: user's configured model)")
+    parser.add_argument("--verbose", action="store_true", help="Print progress to stderr")
+    args = parser.parse_args()
+
+    eval_set = json.loads(Path(args.eval_set).read_text())
+    skill_path = Path(args.skill_path)
+
+    if not (skill_path / "SKILL.md").exists():
+        print(f"Error: No SKILL.md found at {skill_path}", file=sys.stderr)
+        sys.exit(1)
+
+    name, original_description, content = parse_skill_md(skill_path)
+    description = args.description or original_description
+    project_root = find_project_root()
+
+    if args.verbose:
+        print(f"Evaluating: {description}", file=sys.stderr)
+
+    output = run_eval(
+        eval_set=eval_set,
+        skill_name=name,
+        description=description,
+        num_workers=args.num_workers,
+        timeout=args.timeout,
+        project_root=project_root,
+        runs_per_query=args.runs_per_query,
+        trigger_threshold=args.trigger_threshold,
+        model=args.model,
+    )
+
+    if args.verbose:
+        summary = output["summary"]
+        print(f"Results: {summary['passed']}/{summary['total']} passed", file=sys.stderr)
+        for r in output["results"]:
+            status = "PASS" if r["pass"] else "FAIL"
+            rate_str = f"{r['triggers']}/{r['runs']}"
+            print(f"  [{status}] rate={rate_str} expected={r['should_trigger']}: {r['query'][:70]}", file=sys.stderr)
+
+    print(json.dumps(output, indent=2))
+
+
+if __name__ == "__main__":
+    main()

package/templates/skills/opencrew-skill-creator/scripts/utils.py

@@ -0,0 +1,47 @@
+"""Shared utilities for skill-creator scripts."""
+
+from pathlib import Path
+
+
+
+def parse_skill_md(skill_path: Path) -> tuple[str, str, str]:
+    """Parse a SKILL.md file, returning (name, description, full_content)."""
+    content = (skill_path / "SKILL.md").read_text()
+    lines = content.split("\n")
+
+    if lines[0].strip() != "---":
+        raise ValueError("SKILL.md missing frontmatter (no opening ---)")
+
+    end_idx = None
+    for i, line in enumerate(lines[1:], start=1):
+        if line.strip() == "---":
+            end_idx = i
+            break
+
+    if end_idx is None:
+        raise ValueError("SKILL.md missing frontmatter (no closing ---)")
+
+    name = ""
+    description = ""
+    frontmatter_lines = lines[1:end_idx]
+    i = 0
+    while i < len(frontmatter_lines):
+        line = frontmatter_lines[i]
+        if line.startswith("name:"):
+            name = line[len("name:"):].strip().strip('"').strip("'")
+        elif line.startswith("description:"):
+            value = line[len("description:"):].strip()
+            # Handle YAML multiline indicators (>, |, >-, |-)
+            if value in (">", "|", ">-", "|-"):
+                continuation_lines: list[str] = []
+                i += 1
+                while i < len(frontmatter_lines) and (frontmatter_lines[i].startswith("  ") or frontmatter_lines[i].startswith("\t")):
+                    continuation_lines.append(frontmatter_lines[i].strip())
+                    i += 1
+                description = " ".join(continuation_lines)
+                continue
+            else:
+                description = value.strip('"').strip("'")
+        i += 1
+
+    return name, description, content

package/templates/skills/resend/SKILL.md

@@ -0,0 +1,80 @@
+---
+name: resend
+description: >
+  Send emails through Resend's official MCP server.
+  Supports single send, batch send, HTML and plain text bodies,
+  attachments, CC/BCC, scheduling, and contact management.
+description_pt-BR: >
+  Envie emails pelo servidor MCP oficial da Resend.
+  Suporta envio individual, envio em lote, corpo HTML e texto puro,
+  anexos, CC/BCC, agendamento e gerenciamento de contatos.
+description_es: >
+  Enviar correos electrónicos a través del servidor MCP oficial de Resend.
+  Soporta envío individual, envío por lotes, cuerpo HTML y texto plano,
+  adjuntos, CC/BCC, programación y gestión de contactos.
+type: mcp
+version: "1.0.0"
+mcp:
+  server_name: resend
+  command: npx
+  args: ["-y", "resend-mcp"]
+  transport: stdio
+env:
+  - RESEND_API_KEY
+categories: [email, automation, communication]
+---
+
+# Resend — Email Skill
+
+## When to use
+
+Use this skill when a crew needs to send emails — welcome messages, notifications,
+reports, newsletters, or any transactional/marketing email. Resend handles delivery
+so the crew only needs to compose the content and call the MCP tools.
+
+## Instructions
+
+### Sending a single email
+
+1. Prepare **from**, **to**, **subject**, and **body** (HTML or plain text).
+2. Call the Resend MCP `send_email` tool.
+3. Check the response for a successful `id` — that confirms the email was queued.
+
+### Sending a batch
+
+1. Build an array of email objects (same fields as single send).
+2. Call the Resend MCP `batch_send_emails` tool.
+3. Each item in the response will have its own `id` or error.
+
+### Attachments
+
+Pass attachments as an array with `filename`, `path` (local file), `url`, or `content` (base64).
+
+### Scheduling
+
+Include a `scheduled_at` field (ISO 8601 datetime) to schedule future delivery.
+
+## Best practices
+
+- Validate **from** against a verified domain before sending — Resend rejects unverified senders.
+- Keep subject lines under 80 characters for better deliverability.
+- For batch sends, group by shared content to reduce payload size.
+- Always check the response for errors and surface them to the user rather than silently failing.
+- When composing HTML emails, keep the markup simple — most email clients ignore complex CSS.
+
+## Available operations
+
+- **Send Email** — Single email with HTML/text body, attachments, CC/BCC, reply-to
+- **Batch Send** — Multiple emails in one call
+- **Schedule Email** — Queue an email for future delivery
+- **List/Get Emails** — Check delivery status of sent emails
+- **Cancel Email** — Cancel a scheduled email before it sends
+- **Manage Contacts** — Create, list, update, and remove contacts from audiences
+- **Manage Domains** — Add and verify sender domains
+
+## Setup
+
+1. Create a free account at [resend.com](https://resend.com)
+2. Generate an API key (starts with `re_`)
+3. Add a verified sender domain (or use Resend's shared `onboarding@resend.dev` for testing)
+4. Set `RESEND_API_KEY` in your `.env` file

package/templates/skills/template-designer/SKILL.md

@@ -0,0 +1,208 @@
+---
+name: template-designer
+description: Visual template selection for image design agents. Generates template variations, renders them as images for user review, and saves the approved visual identity.
+description_pt-BR: >
+  Seleção de template visual para agentes de design de imagem. Gera variações de template,
+  renderiza como imagens para o usuário revisar e salva a identidade visual aprovada.
+description_es: >
+  Selección de plantilla visual para agentes de diseño de imagen. Genera variaciones de
+  plantilla, las renderiza como imágenes para revisión del usuario y guarda la identidad
+  visual aprobada.
+type: prompt
+version: "2.0.0"
+categories: [design, visual, templates]
+---
+
+# Template Designer
+
+Visual template selection and refinement for crew creation and editing.
+
+## When to Use
+
+- During crew creation: when the Design phase identifies an image design agent and the user opts to choose a template
+- During crew editing: when the user asks to define, edit, or change the visual identity / template of a design agent
+- Trigger: presence of `image-creator` skill (or similar image-producing skill) in the crew's skill list
+
+## Prerequisites
+
+- A crew with a design agent that produces images (uses `image-creator` skill)
+- Crew's `_build/` directory must exist (created during Discovery/Design phases)
+- `image-creator` skill installed (for rendering HTML to PNG)
+
+## How It Works
+
+1. You read context and base templates
+2. You generate 3 adapted HTML template variations
+3. You render each as a PNG image using the `image-creator` skill
+4. You present the image file paths to the user for review
+5. You iterate with feedback until approval
+6. You save the approved template as HTML reference + structured style rules
+
+## Generating Templates
+
+### Step 0: Read Design Guidelines (MANDATORY)
+
+Before generating any template, read and internalize the design best practices:
+- `_opencrew/core/best-practices/image-design.md` — **REQUIRED reading**. Contains platform-specific minimum font sizes, typography rules, spacing guidelines, color palette constraints, contrast requirements, and layout methodology. Every template you generate MUST comply with these rules.
+
+Key rules to always follow:
+- **Font sizes**: Hero 58px, Heading 43px, Body 34px, Caption 24px minimum for Instagram carousel (1080x1440). Absolute minimum 20px for any readable text on any platform.
+- **Font weight**: 500 or higher for body text and above.
+- **Colors**: Maximum 5 colors per design system (primary, secondary, accent, background, text).
+- **Contrast**: WCAG AA minimum 4.5:1 for all text against background.
+- **Layout**: CSS Grid or Flexbox only. No absolute positioning for primary content.
+- **Self-contained HTML**: Inline CSS only. Only Google Fonts @import allowed as external resource.
+- **No slide counters**: Never include "1/7" or similar. Instagram has native navigation.
+
+You should also apply general web design best practices: proper white space, visual hierarchy through scale and weight, consistent spacing rhythm, and balanced composition.
+
+### HARD RULES — Dimensions and Typography
+
+These rules are NON-NEGOTIABLE. Every template must comply:
+
+**Fixed Dimensions (never use height: auto or flexible height):**
+- Instagram Carousel: `width: 1080px; height: 1440px` (3:4 portrait)
+- Instagram Story/Reel: `width: 1080px; height: 1920px` (9:16 portrait)
+- Instagram Post: `width: 1080px; height: 1080px` (1:1 square)
+- LinkedIn Post: `width: 1200px; height: 627px` (1.91:1 horizontal)
+
+The root container of every template MUST set explicit `width` and `height` in pixels. The template must render at exactly these dimensions — no overflow, no scrolling, no flexible height.
+
+**Minimum Font Sizes (Instagram at 1080px width):**
+- Hero/Title: **58px** minimum
+- Heading: **43px** minimum
+- Body text: **34px** minimum
+- Caption/small text: **24px** minimum
+- Absolute minimum for ANY readable text on ANY platform: **20px**
+
+**Font Weight:** 500 or higher for body text and above. Never use font-weight below 400 for any visible text.
+
+Templates that violate these rules are rejected — no exceptions.
+
+### Step 1: Read Context
+
+Read these files to understand the crew:
+- `crews/{code}/_build/discovery.yaml` — platform, domain, tone, language
+- `crews/{code}/_build/design.yaml` — agents, purpose, skills
+- `crews/{code}/_investigations/consolidated-analysis.md` (if exists) — visual patterns from reference profiles
+- `_opencrew/_memory/company.md` — company name, brand, industry, target audience
+- `_opencrew/_memory/preferences.md` — user preferences (language, style, tone)
+
+Use the company context and user preferences to adapt template content: example text should reflect the company's domain and audience, colors should align with brand if available, and language should match the user's Output Language preference.
+
+### Step 2: Read Base Templates
+
+Read the 3 base templates from `skills/template-designer/base-templates/`:
+- `model-a.html`
+- `model-b.html`
+- `model-c.html`
+
+### Step 3: Generate Adapted Variations
+
+For each base template, create an adapted version:
+- Adjust colors to match the crew's domain/brand (use Sherlock palette if available, company brand colors from company.md if available)
+- Adjust typography following the platform-specific minimum font sizes from `image-design.md`
+- Replace example content with domain-relevant content that reflects the company's industry, audience, and language
+- Set the root container to the exact fixed dimensions from HARD RULES above. Never use percentage heights or auto heights.
+- Add any visual elements that match the crew's personality
+- Apply proper white space, visual hierarchy, and spacing rhythm per `image-design.md` methodology
+
+Write each adapted template as a **complete, self-contained HTML file** (with `<!DOCTYPE html>`, inline CSS, and Google Fonts imports if needed).
+
+Save to:
+- `crews/{code}/_build/template-a.html`
+- `crews/{code}/_build/template-b.html`
+- `crews/{code}/_build/template-c.html`
+
+### Step 4: Render as Images
+
+Use the `image-creator` skill to render each HTML template as a PNG image:
+
+1. Read `skills/image-creator/SKILL.md` for rendering instructions
+2. Render each template HTML to PNG using the image-creator workflow
+3. Save rendered images to:
+   - `crews/{code}/_build/template-a.png`
+   - `crews/{code}/_build/template-b.png`
+   - `crews/{code}/_build/template-c.png`
+
+### Step 5: Present to User
+
+Present the 3 template options to the user using **clickable markdown links with absolute file paths** so they can open and review:
+
+> "Here are 3 template options for your crew's visual identity:
+>
+> - [preview-a.png]({absolute_path}/crews/{code}/_build/template-a.png) — Template A
+> - [preview-b.png]({absolute_path}/crews/{code}/_build/template-b.png) — Template B
+> - [preview-c.png]({absolute_path}/crews/{code}/_build/template-c.png) — Template C
+>
+> Click the links above to open each image. Tell me which one you prefer. I can also mix elements from different templates or adjust colors, fonts, and layout."
+
+**Important:** Always use the full absolute path (e.g., `d:\Coding Projects\opencrew\crews\my-crew\_build\template-a.png`) inside the markdown link — relative paths are not clickable in the IDE.
+
+## Iteration Loop
+
+1. Present template images with clickable markdown links using absolute file paths
+2. Wait for user feedback in terminal
+3. Generate new version based on feedback — save as `template-v2.html`, render as `template-v2.png`, etc.
+4. Present updated image with clickable markdown link using absolute file path
+5. Repeat until user approves
+
+## Saving the Approved Template
+
+When the user approves, create two files:
+
+### 1. Template Reference HTML
+
+Save to: `crews/{code}/pipeline/data/template-reference.html`
+
+The complete, self-contained HTML/CSS of the approved template at full resolution (e.g., 1080x1440). This is the literal example the design agent will use.
+
+### 2. Visual Identity Rules
+
+Save to: `crews/{code}/pipeline/data/visual-identity.md`
+
+Extract structured rules from the approved template:
+
+~~~markdown
+# Visual Identity
+
+## Color Palette
+- **Primary:** #HEXCODE — usage description
+- **Secondary:** #HEXCODE — usage description
+- **Background:** #HEXCODE
+- **Text:** #HEXCODE
+- **Accent:** #HEXCODE — usage description
+
+## Typography
+- **Headings:** Font Family, weight, size range
+- **Body:** Font Family, weight, size range
+- **Caption:** Font Family, weight, size range
+- **Minimum sizes:** body 32px, caption 24px, heading 48px
+
+## Layout
+- **Viewport:** WIDTHxHEIGHT px
+- **Padding:** value
+- **Grid:** description
+- **Spacing rules:** description
+
+## Composition Rules
+- Logo/profile placement: description
+- Image treatment: description
+- Visual hierarchy: description
+- Footer/CTA pattern: description
+
+## Adaptation Rules
+- How to handle different viewport sizes
+- What stays fixed vs. what adapts
+- Color usage rules (when to use primary vs accent)
+~~~
+
+### 3. Update Crew Files
+
+If the crew is being created (Build phase hasn't run yet):
+- The design.yaml context now includes the template data — Build will pick it up
+
+If the crew already exists (editing flow):
+- Add `pipeline/data/template-reference.html` and `pipeline/data/visual-identity.md` to `crew.yaml` `data:` list
+- Update the design agent's `.agent.md` to reference both files
+- Update the design agent's tasks to include the rule: "always follow visual-identity.md and use template-reference.html as the base model"

package/templates/skills/template-designer/base-templates/model-a.html

@@ -0,0 +1,27 @@
+<!-- Model A: Twitter Editorial — approved 2026-03-28 -->
+<!-- Style: Black background, tweet-style layout with avatar, verified badge, editorial text, contextual image -->
+<!-- Fonts: Inter (body), weight 400-700 -->
+<!-- Colors: #000 bg, #fff text, #1D9BF0 verified, #71767B muted, #2a2a2a borders/avatar, #1a1a2e image gradient -->
+<div style="width:1080px;height:1440px;background:#000;color:#fff;font-family:'Inter',sans-serif;display:flex;flex-direction:column;padding:72px;gap:0;position:relative;overflow:hidden;">
+  <!-- Tweet header -->
+  <div style="display:flex;gap:24px;align-items:center;">
+    <div style="width:80px;height:80px;border-radius:50%;background:#2a2a2a;flex-shrink:0;"></div>
+    <div>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <span style="font-weight:700;font-size:34px;">Nome Sobrenome</span>
+        <svg width="28" height="28" viewBox="0 0 24 24" fill="#1D9BF0"><path d="M22.25 12c0-1.43-.88-2.67-2.19-3.34.46-1.39.2-2.9-.81-3.91s-2.52-1.27-3.91-.81c-.66-1.31-1.91-2.19-3.34-2.19s-2.67.88-3.34 2.19c-1.39-.46-2.9-.2-3.91.81s-1.27 2.52-.81 3.91C2.63 9.33 1.75 10.57 1.75 12s.88 2.67 2.19 3.34c-.46 1.39-.2 2.9.81 3.91s2.52 1.27 3.91.81c.66 1.31 1.91 2.19 3.34 2.19s2.67-.88 3.34-2.19c1.39.46 2.9.2 3.91-.81s1.27-2.52.81-3.91c1.31-.67 2.19-1.91 2.19-3.34zm-11.08 4.71c-.22.22-.58.22-.8 0L7.4 13.74c-.22-.22-.22-.58 0-.8.22-.22.58-.22.8 0l2.57 2.57 6.03-6.03c.22-.22.58-.22.8 0 .22.22.22.58 0 .8l-6.43 6.43z"/></svg>
+      </div>
+      <span style="font-size:28px;color:#71767B;">@username</span>
+    </div>
+  </div>
+  <!-- Tweet text -->
+  <div style="font-size:38px;line-height:1.45;font-weight:400;margin-top:48px;">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
+    <br><br>
+    Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Neque porro quisquam est qui dolorem.
+  </div>
+  <!-- Image -->
+  <div style="width:100%;height:35%;background:linear-gradient(180deg,#1a1a2e,#0d0d0d);border-radius:24px;display:flex;align-items:center;justify-content:center;border:1px solid #2a2a2a;flex-shrink:0;margin-top:auto;">
+    <span style="color:#555;font-size:34px;">Imagem contextual</span>
+  </div>
+</div>