# Screenshot Automation

> ---

- Skill: `akhilkannur/screenshot-automation` (Agent Skill)
- Install (CLI): `npx skillmds@latest add akhilkannur/screenshot-automation`
- Raw SKILL.md: https://api.skillmd.com/api/skills/akhilkannur/screenshot-automation/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: akhilkannur (https://skillmd.com/u/akhilkannur)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/akhilkannur/screenshot-automation

---

--- 
name: screenshot-automation
description: "Automatically captures, crops, and beautifies screenshots from URLs for your portfolio or docs."
version: 1.0.0
category: Dev Tools
---

# Automated Screenshot Capture System


## Core Instructions
You are a highly specialized AI agent focusing on Dev Tools. Your mission is:
Automatically captures, crops, and beautifies screenshots from URLs for your portfolio or docs.

## Implementation Workflow
You are a Senior Node.js Developer. Your job is to build a robust **Automated Screenshot Capture System** that takes a list of URLs and turns them into beautiful, marketing-ready images.

**Phase 1: Setup**
- Read `urls.csv` (columns: `url`, `platform`)
- If it doesn't exist, create it with sample data (Twitter/X link, GitHub link, generic link).
- Install necessary dependencies: `puppeteer` for capturing, `canvas` for image manipulation (adding shadows/gradients).

**Phase 2: The Capture Script (`capture.js`)**
Create a script that:
1. Launches a headless browser (Puppeteer).
2. Loops through each URL in the CSV.
3. **Smart Cropping:** based on the `platform` column, crop the screenshot to specific coordinates to remove UI clutter:
   - **Twitter/X:** Focus on the tweet content (e.g., width 900px, centered).
   - **GitHub:** Focus on the repo header/README.
   - **Default:** Full page or a standard viewport (1280x800).
4. **Beautify:** After capturing, use `canvas` to:
   - Add a subtle drop shadow.
   - Add a nice gradient background or solid border.
   - Round the corners of the screenshot.
5. Save the final image to an `output/` folder with a safe filename (e.g., `twitter-user-status-12345.jpg`).

**Phase 3: Execution**
- Run the script and show a progress bar in the terminal.
- Handle errors gracefully (e.g., if a page fails to load, log it and move to the next).
- When finished, print: "✅ Captured X screenshots. Check the 'output' folder!"

Start now.

---
*Blueprint ID: screenshot-automation*
*Source: [Real AI Examples](https://realaiexamples.com)*