Add generate-screenshot skill

[SingHar]

Summary

Adds a new generate-screenshot skill that captures web app screenshots across multiple viewports and colour modes using Playwright.

• Auto-detects running dev servers on common ports (3000, 5173, 8080, etc.)
• Multi-viewport — Desktop (1920x1080), Tablet (768x1024), Mobile (375x812)
• Dark & Light mode — Captures both prefers-color-scheme variants
• Route scanning — Auto-discovers routes from Next.js, Nuxt, SvelteKit, Remix, React Router, Vue Router, and Angular
• Authenticated pages — Logs in first, then captures protected routes
• Configurable — Override viewports, colour modes, output directory, and base URL

Files

skills/generate-screenshot/
├── SKILL.md                              # Skill definition and workflow
├── run.js                                # Universal Playwright script runner
├── lib/helpers.js                        # Dev server detection, viewport configs, utilities
├── package.json                          # Dependencies (playwright)
├── LICENSE.txt                           # MIT
└── examples/
    ├── basic_single_page.js              # All viewports + modes for home page
    ├── multi_route.js                    # Multiple routes with env var config
    ├── single_viewport.js                # One viewport + one mode
    ├── authenticated_pages.js            # Login-then-capture for protected routes
    └── OUTPUT.md                         # Example output trees and naming convention

Usage

/generate-screenshot                                          # Auto-detect server & routes
/generate-screenshot /login /dashboard /settings              # Specific routes
/generate-screenshot / --viewports desktop --modes dark       # Desktop dark mode only
/generate-screenshot / --url http://localhost:4000             # Explicit URL

Source repository

https://github.com/Akaal-Creatives/generate-screenshot

Licence

MIT