Skip to main content
screenshots Generate marketing-quality, true-retina (2x) app screenshots with Playwright — discover routes/features from the codebase, handle login, and capture each view. USE WHEN a user wants screenshots for Product Hunt, social media, a landing page, or documentation.
Aller à l'installation Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/Sheshiyer/skill-clusters --skill screenshotsLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Arcplume runs Grok through the Grok Build CLI's own OAuth-authenticated session (grok login) for image generation, with strict preflight validation, secret-safe handling, and headless CLI-driven execution -- no separate XAI_API_KEY billing. Video falls back to the billed xAI API. USE WHEN a user wants to generate an image via a locally logged-in Grok Build CLI session, e.g. 'generate an image with grok', 'use grok build', or 'use my logged-in grok session'.
Shared reference for the Selemene cluster: the two report surfaces (deterministic Rust reports vs. narrative witness-pipeline readings), the @selemene/bridge CLI contract, the output manifest format, and non-prescriptive witnessing tone. USE WHEN deciding which Selemene surface to invoke or when routing between birth/compatibility/transit reports and solo/dyadic readings.
Route Selemene Engine tasks to the right surface: deterministic reports (birth/compatibility/transit) via selemene-core and the @selemene/bridge CLI, or narrative witness readings via selemene-report. USE WHEN the user wants anything under the Selemene/Noesis umbrella but has not named the exact surface.
Métiers associés SOC
Basé sur la classification professionnelle SOC
name screenshots description Generate marketing-quality, true-retina (2x) app screenshots with Playwright — discover routes/features from the codebase, handle login, and capture each view. USE WHEN a user wants screenshots for Product Hunt, social media, a landing page, or documentation. cluster documents version 1.0.0 origin antigravity-awesome-skills (MIT)
Screenshots
Generate marketing-quality screenshots of your app using Playwright directly. Screenshots are captured at true HiDPI (2x retina) resolution using deviceScaleFactor: 2.
When to Use This Skill
Use this skill when:
User wants to create screenshots for Product Hunt
Creating screenshots for social media
Generating images for landing pages
Creating documentation screenshots
User requests marketing-quality app screenshots
Prerequisites
Playwright must be available. Check for it:
npx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright
If not found, inform the user:
Playwright is required. Install it with: npm install -D playwright or npm install -D @playwright/test
Step 1: Determine App URL If $1 is provided, use it as the app URL.
Check if a dev server is likely running by looking for package.json scripts
Use AskUserQuestion to ask the user for the URL or offer to help start the dev server
Common default URLs to suggest:
http://localhost:3000 (Next.js, Create React App, Rails)http://localhost:5173 (Vite)http://localhost:4000 (Phoenix)http://localhost:8080 (Vue CLI, generic)
Step 2: Gather Requirements Use AskUserQuestion with the following questions:
Question 1: Screenshot count
Header: "Count"
Question: "How many screenshots do you need?"
Options:
"3-5" - Quick set of key features
"5-10" - Comprehensive feature coverage
"10+" - Full marketing suite
Header: "Purpose"
Question: "What will these screenshots be used for?"
Options:
"Product Hunt" - Hero shots and feature highlights
"Social media" - Eye-catching feature demos
"Landing page" - Marketing sections and benefits
"Documentation" - UI reference and tutorials
Question 3: Authentication
Header: "Auth"
Question: "Does the app require login to access the features you want to screenshot?"
Options:
"No login needed" - Public pages only
"Yes, I'll provide credentials" - Need to log in first
If user selects "Yes, I'll provide credentials", ask follow-up questions:
"What is the login page URL?" (e.g., /login, /sign-in)
"What is the email/username?"
"What is the password?"
The script will automatically detect login form fields using Playwright's smart locators.
Step 3: Analyze Codebase for Features Thoroughly explore the codebase to understand the app and identify screenshot opportunities.
3.1: Read Documentation First Always start by reading these files to understand what the app does:
README.md (and any README files in subdirectories) - Read the full README to understand:
What the app is and what problem it solves
Key features and capabilities
Screenshots or feature descriptions already documented
CHANGELOG.md or HISTORY.md - Recent features worth highlighting
docs/ directory - Any additional documentation about features
3.2: Analyze Routes to Find Pages Read the routing configuration to discover all available pages:
Framework File to Read What to Look For Next.js App Router app/ directory structureEach folder with page.tsx is a route Next.js Pages Router pages/ directoryEach file is a route Rails config/routes.rbRead the entire file for all routes React Router Search for createBrowserRouter or <Route Route definitions with paths Vue Router src/router/index.js or router.jsRoutes array with path definitions SvelteKit src/routes/ directoryEach folder with +page.svelte is a route Remix app/routes/ directoryFile-based routing Laravel routes/web.phpRoute definitions Django urls.py filesURL patterns Express Search for app.get, router.get Route handlers
Important : Actually read these files, don't just check if they exist. The route definitions tell you what pages are available for screenshots.
3.3: Identify Key Components Look for components that represent screenshottable features:
Dashboard components
Feature sections with distinct UI
Forms and interactive inputs
Data visualizations (charts, graphs, tables)
Modals and dialogs
Navigation and sidebars
Settings panels
User profile sections
3.4: Check for Marketing Assets Look for existing marketing content that hints at key features:
Landing page components (often in components/landing/ or components/marketing/)
Feature list components
Pricing tables
Testimonial sections
3.5: Build Feature List Create a comprehensive list of discovered features with:
Feature name (from README or component name)
URL path (from routes)
CSS selector to focus on (from component structure)
Required UI state (logged in, data populated, modal open, specific tab selected)
Step 4: Plan Screenshots with User Present the discovered features to the user and ask them to confirm or modify the list.
Header: "Features"
Question: "I found these features in your codebase. Which would you like to screenshot?"
Options: List 3-4 key features discovered, plus "Let me pick specific ones"
If user wants specific ones, ask follow-up questions to clarify exactly what to capture.
Step 5: Create Screenshots Directory
Step 6: Generate and Run Playwright Script Create a Node.js script that uses Playwright with proper HiDPI settings. The script should:
Use deviceScaleFactor: 2 for true retina resolutionSet viewport to 1440x900 (produces 2880x1800 pixel images)Handle authentication if credentials were providedNavigate to each page and capture screenshots
Script Template Write this script to a temporary file (e.g., screenshot-script.mjs) and execute it:
import { chromium } from 'playwright' ;
const BASE_URL = '[APP_URL]' ;
const SCREENSHOTS_DIR = './screenshots' ;
const AUTH = {
needed : [true |false ],
loginUrl : '[LOGIN_URL]' ,
email : '[EMAIL]' ,
password : '[PASSWORD]' ,
};
const SCREENSHOTS = [
{ name : '01-feature-name' , url : '/path' , waitFor : '[optional-selector]' },
{ name : '02-another-feature' , url : '/another-path' },
];
async function main (const browser = await chromium.launch ();
const context = await browser.newContext ({
viewport : { width : 1440 , height : 900 },
deviceScaleFactor : 2 ,
});
const page = await context.newPage ();
if (AUTH .needed ) {
console .log ('Logging in...' );
await page.goto (AUTH .loginUrl );
const emailField = page.locator ([
'input[type="email"]' ,
'input[name="email"]' ,
'input[id="email"]' ,
'input[placeholder*="email" i]' ,
'input[name="username"]' ,
'input[id="username"]' ,
'input[type="text"]' ,
].join (', ' )).first ();
await emailField.fill (AUTH .email );
const passwordField = page.locator ([
'input[type="password"]' ,
'input[name="password"]' ,
'input[id="password"]' ,
].join (', ' )).first ();
await passwordField.fill (AUTH .password );
const submitButton = page.locator ([
'button[type="submit"]' ,
'input[type="submit"]' ,
'button:has-text("Sign in")' ,
'button:has-text("Log in")' ,
'button:has-text("Login")' ,
'button:has-text("Submit")' ,
].join (', ' )).first ();
await submitButton.click ();
await page.waitForLoadState ('networkidle' );
console .log ('Login complete' );
}
for (const shot of SCREENSHOTS ) {
console .log (`Capturing: ${shot.name} ` );
await page.goto (`${BASE_URL} ${shot.url} ` );
await page.waitForLoadState ('networkidle' );
if (shot.waitFor ) {
await page.waitForSelector (shot.waitFor );
}
if (shot.actions ) {
for (const action of shot.actions ) {
if (action.click ) await page.click (action.click );
if (action.fill ) await page.fill (action.fill .selector , action.fill .value );
if (action.wait ) await page.waitForTimeout (action.wait );
}
}
await page.screenshot ({
path : `${SCREENSHOTS_DIR} /${shot.name} .png` ,
fullPage : shot.fullPage || false ,
});
console .log (` Saved: ${shot.name} .png` );
}
await browser.close ();
console .log ('Done!' );
}
main ().catch (console .error );
Running the Script node screenshot-script.mjs
After running, clean up the temporary script:
Step 7: Advanced Screenshot Options
Element-Focused Screenshots To screenshot a specific element instead of the full viewport:
const element = await page.locator ('[CSS_SELECTOR]' );
await element.screenshot ({ path : `${SCREENSHOTS_DIR} /element.png` });
Full Page Screenshots For scrollable content, capture the entire page:
await page.screenshot ({
path : `${SCREENSHOTS_DIR} /full-page.png` ,
fullPage : true
});
Waiting for Animations If the page has animations, wait for them to complete:
await page.waitForTimeout (500 );
Clicking Elements Before Screenshot To capture a modal, dropdown, or hover state:
await page.click ('button.open-modal' );
await page.waitForSelector ('.modal-content' );
await page.screenshot ({ path : `${SCREENSHOTS_DIR} /modal.png` });
Dark Mode Screenshots If the app supports dark mode:
const context = await browser.newContext ({
viewport : { width : 1440 , height : 900 },
deviceScaleFactor : 2 ,
colorScheme : 'dark' ,
});
Step 8: File Naming Convention Use descriptive, kebab-case filenames with numeric prefixes for ordering:
Feature Filename Dashboard overview 01-dashboard-overview.pngLink management 02-link-inbox.pngEdition editor 03-edition-editor.pngAnalytics 04-analytics.pngSettings 05-settings.png
Step 9: Verify and Summarize After capturing all screenshots, verify the results:
ls -la screenshots/*.png
sips -g pixelWidth -g pixelHeight screenshots/*.png 2>/dev/null || file screenshots/*.png
Provide a summary to the user:
List all generated files with their paths
Confirm the resolution (should be 2880x1800 for 2x retina at 1440x900 viewport)
Mention total file sizes
Suggest any follow-up actions
Generated 5 marketing screenshots:
screenshots/
├── 01-dashboard-overview.png (1.2 MB, 2880x1800 @ 2x)
├── 02-link-inbox.png (456 KB, 2880x1800 @ 2x)
├── 03-edition-editor.png (890 KB, 2880x1800 @ 2x)
├── 04-analytics.png (567 KB, 2880x1800 @ 2x)
└── 05-settings.png (234 KB, 2880x1800 @ 2x)
All screenshots are true retina-quality (2x deviceScaleFactor) and ready for marketing use.
Error Handling
Playwright not found : Suggest npm install -D playwrightPage not loading : Check if the dev server is running, suggest starting itLogin failed : The smart locators try common patterns but may fail on unusual login forms. If login fails, analyze the login page HTML to find the correct selectors and customize the script.Element not found : Verify the CSS selector, offer to take a full page screenshot insteadScreenshot failed : Check disk space, verify write permissions to screenshots directory
Tips for Best Results
Clean UI state : Use demo/seed data for realistic contentConsistent sizing : Use the same viewport for all screenshotsWait for content : Use waitForLoadState('networkidle') to ensure all content loadsHide dev tools : Ensure no browser extensions or dev overlays are visibleDark mode variants : Consider capturing both light and dark mode if supported
Limitations
Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
