screenshots

This skill leverages Playwright to programmatically capture high-resolution marketing screenshots of your web application. It is designed for developers, product managers, and marketers who need to produce consistent visual assets for Product Hunt launches, social media campaigns, landing page hero sections, or technical documentation without manual intervention. By automating the browser state, including authentication, viewport sizing, and element focus, this skill ensures that screenshots maintain a uniform, professional "retina" quality across your entire visual suite.

• Automatically detects and configures Playwright with deviceScaleFactor: 2 for true HiDPI/Retina output.
• Intelligently crawls routing configurations (Next.js, Rails, React Router, Vite, etc.) to map out and discover screen-shottable feature pages.
• Supports multi-step authentication workflows to capture "logged-in" state views, including sensitive dashboards and user-specific settings.
• Offers configurable screenshot counts and specific use-case presets for social media, product launches, and documentation.
• Integrates with the codebase to identify key UI components like data visualizations, forms, modals, and landing page sections for targeted snapshots.
• Provides a structured planning phase where the AI presents discovered features for user confirmation before generation begins.

Usage Notes and Constraints:

• Requires Playwright to be installed in the environment; the skill performs a pre-check using npm or npx commands.
• Best suited for apps with defined routing structures; if routing is highly dynamic or heavily reliant on third-party integrations, some manual selector tuning may be required.
• When capturing authenticated states, ensure test credentials or mock data are available to prevent unauthorized access errors.
• The output is saved into a local /screenshots directory; ensure your environment has the necessary write permissions.
• Default viewport is set to 1440x900, but can be adapted for mobile or tablet responsiveness as needed.