Generate retina-quality marketing screenshots of web applications using Playwright.
npx skills add https://github.com/Shpigford/skills --skill screenshots-shpigford
Please help me install this Agent Skill. Skill: screenshots Source: https://github.com/Shpigford/skills/tree/main/screenshots Command: npx skills add https://github.com/Shpigford/skills --skill screenshots-shpigford
Marketing teams frequently need consistent, high-quality visuals for product pages, social media, and documentation. This Skill automates the creation of retina-ready screenshots of web apps, saving time and ensuring visual consistency.
Use Case: Launch a new product by generating a complete set of hero and feature screenshots for a landing page.
Install dependencies and run the Playwright script to generate screenshots:
High-intent search queries and answers about installing and using this skill.
Yes, you can capture authenticated views by using the optional login support workflow. This allows Playwright to pass credentials before capturing protected dashboard content or feature pages behind a login screen.
You need to install Playwright as a development dependency using npm install -D playwright. You also need a base URL for your web application to point the screenshot script at the correct target pages.
Playwright handles 2x scale screenshots by configuring a 1440x900 viewport and setting the deviceScaleFactor to 2. This HiDPI rendering mechanism outputs true retina-quality images for your documentation or landing page.
Yes, you can capture authenticated views by using the optional login support workflow. This allows Playwright to pass credentials before capturing protected dashboard content or feature pages behind a login screen.
The best way to generate consistent marketing screenshots is automating the workflow with Playwright. It processes URL inputs, handles optional logins, and outputs organized retina-quality images directly to a dedicated directory.
A limitation is that Playwright captures a fixed 1440x900 viewport at 2x scale, meaning you may need additional post-processing if your social media assets require different aspect ratios or custom dimensions.
skillcreatoraiExecute modular Playwright regression tests for web application workflows.
dalehurleyResize, compress, convert, crop, and inspect images using Pillow.
IgosukiCapture full-page, viewport, and element screenshots via Playwright CLI.
majunbaoRun Playwright CLI commands to capture screenshots and render web pages.
