site-post-screenshots

name

site-post-screenshots

description

Use this skill when the user gives a website URL and wants four polished, faithful screenshots for a social post, launch post, tweet/X post, portfolio preview, case-study visual, or before/after site showcase. It captures the real site in desktop and mobile browser viewports, preserves the site's visual identity, avoids AI redesigns or fake mockups, and produces desktop, mobile, X, and desktop-plus-phone image layouts.

Site Post Screenshots

Overview

Create clean social assets from real website screenshots. The output should look like a designed post while keeping the site itself truthful: no invented UI, no distorted proportions, and no hidden branding unless the user asks for anonymization.

Workflow

1. Confirm the URL if the user provided one. If they only provide a link, default to exactly four final images:
   • x-desktop-1600x900.png: desktop screenshot framed for X/Twitter
   • x-mobile-1600x900.png: mobile screenshot framed for X/Twitter
   • desktop-1600x1200.png: larger standalone desktop frame
   • desktop-mobile-1600x900.png: desktop and phone together in one 16:9 frame, like a launch post preview
2. Open the site in a browser-quality renderer, wait for fonts and major assets, and capture raw screenshots before composing anything.
3. Capture the first meaningful fold:
   • first fold desktop
   • first fold mobile
4. Compose the four final social images from those captures. Preserve aspect ratio; crop with intent instead of stretching.
5. Review the outputs visually when possible. Regenerate with different offsets, viewport sizes, or a specific selector if the important content is missed.

Script

Use the npm CLI.

Npm CLI usage:

npx site-post-screenshots "https://example.com" --out ./post-shots

Local repository usage:

npm install
npm start -- "https://example.com" --out ./post-shots

Selector capture for a specific area:

npx site-post-screenshots "https://example.com" \
  --selector "main" \
  --out ./post-shots

Hide overlays only when they block the site:

npx site-post-screenshots "https://example.com" \
  --hide-selectors ".cookie-banner,.chat-widget" \
  --out ./post-shots

Composition Rules

• Keep the website as the hero. Do not add large explanatory text over screenshots unless the user asks.
• Use real captures as the source of truth. Generated images are not a replacement for screenshots in this skill.
• Do not stretch screenshots. Use center/top cropping or containment with padding.
• Do not create a 2x2 grid or carousel unless the user explicitly asks.
• The default same-frame image should place desktop on the left and mobile on the right, matching a launch-post preview style.
• Keep browser chrome out of the screenshot unless the user specifically wants a browser-window mockup.
• Avoid heavy shadows, decorative gradients, or fake device mockups when they distract from the site.
• If the site is dark, keep a dark or sampled background. If it is light, keep a light or sampled background.

Quality Checks

Before delivering:

• Check that text in the screenshots is readable at social-post size.
• Check that the first frame includes a recognizable brand/product signal.
• Check that no cookie banner, chat bubble, loading skeleton, broken image, or sticky overlay dominates the composition.
• Check that mobile and desktop captures are not mixed in a confusing way unless the post is about responsiveness.
• Tell the user where the final PNGs were written and mention any capture limitations, such as login walls or animations.

Boundaries

Only capture content the user is allowed to access. Do not bypass logins, paywalls, bot checks, or private pages. If a site requires authentication, ask the user for an exported local HTML, authenticated browser context, or screenshots they can provide.