agent-bank: Skill for OpenCode

Demoify Skill

Create clean, professional demo screenshots by modifying live web pages via Chrome DevTools MCP.

Use Cases

• Tweet screenshots (side-by-side format)
• Product demos
• Marketing materials
• Investor decks

Twitter Image Ratios

Format	Ratio	Use Case
Single image	16:9 (1200x675)	Wide screenshots, dashboards
Two images side-by-side	~250x290 each (~1:1.16)	Before/after, flow demos
Four images	Square-ish	Multiple steps

For two-image tweets: Use tall/narrow format, NOT wide. Resize browser to ~500-600px width.

Quick Workflow

1. Setup

// Open target URL in Chrome DevTools MCP
chrome_new_page({ url: 'https://example.com' });

// For side-by-side tweets, resize to narrow format
chrome_resize_page({ width: 600, height: 700 });

2. DOM Edits - Text Replacement

chrome_evaluate_script({
  function: `() => {
    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
    let node, changes = [];
    while (node = walker.nextNode()) {
      if (node.textContent.includes('OLD_TEXT')) {
        node.textContent = node.textContent.replace(/OLD_TEXT/g, 'NEW_TEXT');
        changes.push('replaced');
      }
    }
    return changes.length + ' changes';
  }`,
});

3. DOM Edits - Link Text

chrome_evaluate_script({
  function: `() => {
    document.querySelectorAll('a[href*="old-pattern"]').forEach(link => {
      link.textContent = 'new text';
    });
    return 'done';
  }`,
});

4. Hide UI Elements (Safe Method)

Use visibility: hidden instead of display: none to avoid layout shifts:

chrome_evaluate_script({
  function: `() => {
    // Hide by selector
    const el = document.querySelector('.sidebar');
    if (el) el.style.visibility = 'hidden';
    
    // Hide by role
    const nav = document.querySelector('[role="navigation"]');
    if (nav) nav.style.visibility = 'hidden';
    
    return 'hidden';
  }`,
});