{"id":"851cffe5-1522-4941-91e2-62cbb843eb4e","shortId":"4NqABr","kind":"skill","title":"screenshots","tagline":"Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation.","description":"# Screenshots\n\nGenerate marketing-quality screenshots of your app using Playwright directly. Screenshots are captured at true HiDPI (2x retina) resolution using `deviceScaleFactor: 2`.\n\n## When to Use This Skill\n\nUse this skill when:\n- User wants to create screenshots for Product Hunt\n- Creating screenshots for social media\n- Generating images for landing pages\n- Creating documentation screenshots\n- User requests marketing-quality app screenshots\n\n## Prerequisites\n\nPlaywright must be available. Check for it:\n```bash\nnpx playwright --version 2>/dev/null || npm ls playwright 2>/dev/null | grep playwright\n```\n\nIf not found, inform the user:\n> Playwright is required. Install it with: `npm install -D playwright` or `npm install -D @playwright/test`\n\n## Step 1: Determine App URL\n\nIf `$1` is provided, use it as the app URL.\n\nIf no URL is provided:\n1. Check if a dev server is likely running by looking for `package.json` scripts\n2. Use `AskUserQuestion` to ask the user for the URL or offer to help start the dev server\n\nCommon default URLs to suggest:\n- `http://localhost:3000` (Next.js, Create React App, Rails)\n- `http://localhost:5173` (Vite)\n- `http://localhost:4000` (Phoenix)\n- `http://localhost:8080` (Vue CLI, generic)\n\n## Step 2: Gather Requirements\n\nUse `AskUserQuestion` with the following questions:\n\n**Question 1: Screenshot count**\n- Header: \"Count\"\n- Question: \"How many screenshots do you need?\"\n- Options:\n  - \"3-5\" - Quick set of key features\n  - \"5-10\" - Comprehensive feature coverage\n  - \"10+\" - Full marketing suite\n\n**Question 2: Purpose**\n- Header: \"Purpose\"\n- Question: \"What will these screenshots be used for?\"\n- Options:\n  - \"Product Hunt\" - Hero shots and feature highlights\n  - \"Social media\" - Eye-catching feature demos\n  - \"Landing page\" - Marketing sections and benefits\n  - \"Documentation\" - UI reference and tutorials\n\n**Question 3: Authentication**\n- Header: \"Auth\"\n- Question: \"Does the app require login to access the features you want to screenshot?\"\n- Options:\n  - \"No login needed\" - Public pages only\n  - \"Yes, I'll provide credentials\" - Need to log in first\n\nIf user selects \"Yes, I'll provide credentials\", ask follow-up questions:\n- \"What is the login page URL?\" (e.g., `/login`, `/sign-in`)\n- \"What is the email/username?\"\n- \"What is the password?\"\n\nThe script will automatically detect login form fields using Playwright's smart locators.\n\n## Step 3: Analyze Codebase for Features\n\nThoroughly explore the codebase to understand the app and identify screenshot opportunities.\n\n### 3.1: Read Documentation First\n\n**Always start by reading these files** to understand what the app does:\n\n1. **README.md** (and any README files in subdirectories) - Read the full README to understand:\n   - What the app is and what problem it solves\n   - Key features and capabilities\n   - Screenshots or feature descriptions already documented\n\n2. **CHANGELOG.md** or **HISTORY.md** - Recent features worth highlighting\n\n3. **docs/** directory - Any additional documentation about features\n\n### 3.2: Analyze Routes to Find Pages\n\nRead the routing configuration to discover all available pages:\n\n| Framework | File to Read | What to Look For |\n|-----------|--------------|------------------|\n| **Next.js App Router** | `app/` directory structure | Each folder with `page.tsx` is a route |\n| **Next.js Pages Router** | `pages/` directory | Each file is a route |\n| **Rails** | `config/routes.rb` | Read the entire file for all routes |\n| **React Router** | Search for `createBrowserRouter` or `<Route` | Route definitions with paths |\n| **Vue Router** | `src/router/index.js` or `router.js` | Routes array with path definitions |\n| **SvelteKit** | `src/routes/` directory | Each folder with `+page.svelte` is a route |\n| **Remix** | `app/routes/` directory | File-based routing |\n| **Laravel** | `routes/web.php` | Route definitions |\n| **Django** | `urls.py` files | URL patterns |\n| **Express** | Search for `app.get`, `router.get` | Route handlers |\n\n**Important**: Actually read these files, don't just check if they exist. The route definitions tell you what pages are available for screenshots.\n\n### 3.3: Identify Key Components\n\nLook for components that represent screenshottable features:\n\n- Dashboard components\n- Feature sections with distinct UI\n- Forms and interactive inputs\n- Data visualizations (charts, graphs, tables)\n- Modals and dialogs\n- Navigation and sidebars\n- Settings panels\n- User profile sections\n\n### 3.4: Check for Marketing Assets\n\nLook for existing marketing content that hints at key features:\n- Landing page components (often in `components/landing/` or `components/marketing/`)\n- Feature list components\n- Pricing tables\n- Testimonial sections\n\n### 3.5: Build Feature List\n\nCreate a comprehensive list of discovered features with:\n- Feature name (from README or component name)\n- URL path (from routes)\n- CSS selector to focus on (from component structure)\n- Required UI state (logged in, data populated, modal open, specific tab selected)\n\n## Step 4: Plan Screenshots with User\n\nPresent the discovered features to the user and ask them to confirm or modify the list.\n\nUse `AskUserQuestion`:\n- Header: \"Features\"\n- Question: \"I found these features in your codebase. Which would you like to screenshot?\"\n- Options: List 3-4 key features discovered, plus \"Let me pick specific ones\"\n\nIf user wants specific ones, ask follow-up questions to clarify exactly what to capture.\n\n## Step 5: Create Screenshots Directory\n\n```bash\nmkdir -p screenshots\n```\n\n## Step 6: Generate and Run Playwright Script\n\nCreate a Node.js script that uses Playwright with proper HiDPI settings. The script should:\n\n1. **Use `deviceScaleFactor: 2`** for true retina resolution\n2. **Set viewport to 1440x900** (produces 2880x1800 pixel images)\n3. **Handle authentication** if credentials were provided\n4. **Navigate to each page** and capture screenshots\n\n### Script Template\n\nWrite this script to a temporary file (e.g., `screenshot-script.mjs`) and execute it:\n\n```javascript\nimport { chromium } from 'playwright';\n\nconst BASE_URL = '[APP_URL]';\nconst SCREENSHOTS_DIR = './screenshots';\n\n// Authentication config (if needed)\nconst AUTH = {\n  needed: [true|false],\n  loginUrl: '[LOGIN_URL]',\n  email: '[EMAIL]',\n  password: '[PASSWORD]',\n};\n\n// Screenshots to capture\nconst SCREENSHOTS = [\n  { name: '01-feature-name', url: '/path', waitFor: '[optional-selector]' },\n  { name: '02-another-feature', url: '/another-path' },\n  // ... add all planned screenshots\n];\n\nasync function main() {\n  const browser = await chromium.launch();\n\n  // Create context with HiDPI settings\n  const context = await browser.newContext({\n    viewport: { width: 1440, height: 900 },\n    deviceScaleFactor: 2,  // This is the key for true retina screenshots\n  });\n\n  const page = await context.newPage();\n\n  // Handle authentication if needed\n  if (AUTH.needed) {\n    console.log('Logging in...');\n    await page.goto(AUTH.loginUrl);\n\n    // Smart login: try multiple common patterns for email/username field\n    const emailField = page.locator([\n      'input[type=\"email\"]',\n      'input[name=\"email\"]',\n      'input[id=\"email\"]',\n      'input[placeholder*=\"email\" i]',\n      'input[name=\"username\"]',\n      'input[id=\"username\"]',\n      'input[type=\"text\"]',\n    ].join(', ')).first();\n    await emailField.fill(AUTH.email);\n\n    // Smart login: try multiple common patterns for password field\n    const passwordField = page.locator([\n      'input[type=\"password\"]',\n      'input[name=\"password\"]',\n      'input[id=\"password\"]',\n    ].join(', ')).first();\n    await passwordField.fill(AUTH.password);\n\n    // Smart login: try multiple common patterns for submit button\n    const submitButton = page.locator([\n      'button[type=\"submit\"]',\n      'input[type=\"submit\"]',\n      'button:has-text(\"Sign in\")',\n      'button:has-text(\"Log in\")',\n      'button:has-text(\"Login\")',\n      'button:has-text(\"Submit\")',\n    ].join(', ')).first();\n    await submitButton.click();\n\n    await page.waitForLoadState('networkidle');\n    console.log('Login complete');\n  }\n\n  // Capture each screenshot\n  for (const shot of SCREENSHOTS) {\n    console.log(`Capturing: ${shot.name}`);\n    await page.goto(`${BASE_URL}${shot.url}`);\n    await page.waitForLoadState('networkidle');\n\n    // Optional: wait for specific element\n    if (shot.waitFor) {\n      await page.waitForSelector(shot.waitFor);\n    }\n\n    // Optional: perform actions before screenshot\n    if (shot.actions) {\n      for (const action of shot.actions) {\n        if (action.click) await page.click(action.click);\n        if (action.fill) await page.fill(action.fill.selector, action.fill.value);\n        if (action.wait) await page.waitForTimeout(action.wait);\n      }\n    }\n\n    await page.screenshot({\n      path: `${SCREENSHOTS_DIR}/${shot.name}.png`,\n      fullPage: shot.fullPage || false,\n    });\n    console.log(`  Saved: ${shot.name}.png`);\n  }\n\n  await browser.close();\n  console.log('Done!');\n}\n\nmain().catch(console.error);\n```\n\n### Running the Script\n\n```bash\nnode screenshot-script.mjs\n```\n\nAfter running, clean up the temporary script:\n```bash\nrm screenshot-script.mjs\n```\n\n## Step 7: Advanced Screenshot Options\n\n### Element-Focused Screenshots\n\nTo screenshot a specific element instead of the full viewport:\n\n```javascript\nconst element = await page.locator('[CSS_SELECTOR]');\nawait element.screenshot({ path: `${SCREENSHOTS_DIR}/element.png` });\n```\n\n### Full Page Screenshots\n\nFor scrollable content, capture the entire page:\n\n```javascript\nawait page.screenshot({\n  path: `${SCREENSHOTS_DIR}/full-page.png`,\n  fullPage: true\n});\n```\n\n### Waiting for Animations\n\nIf the page has animations, wait for them to complete:\n\n```javascript\nawait page.waitForTimeout(500); // Wait 500ms for animations\n```\n\n### Clicking Elements Before Screenshot\n\nTo capture a modal, dropdown, or hover state:\n\n```javascript\nawait page.click('button.open-modal');\nawait page.waitForSelector('.modal-content');\nawait page.screenshot({ path: `${SCREENSHOTS_DIR}/modal.png` });\n```\n\n### Dark Mode Screenshots\n\nIf the app supports dark mode:\n\n```javascript\n// Set dark mode preference\nconst context = await browser.newContext({\n  viewport: { width: 1440, height: 900 },\n  deviceScaleFactor: 2,\n  colorScheme: 'dark',\n});\n```\n\n## Step 8: File Naming Convention\n\nUse descriptive, kebab-case filenames with numeric prefixes for ordering:\n\n| Feature | Filename |\n|---------|----------|\n| Dashboard overview | `01-dashboard-overview.png` |\n| Link management | `02-link-inbox.png` |\n| Edition editor | `03-edition-editor.png` |\n| Analytics | `04-analytics.png` |\n| Settings | `05-settings.png` |\n\n## Step 9: Verify and Summarize\n\nAfter capturing all screenshots, verify the results:\n\n```bash\nls -la screenshots/*.png\nsips -g pixelWidth -g pixelHeight screenshots/*.png 2>/dev/null || file screenshots/*.png\n```\n\nProvide a summary to the user:\n\n1. List all generated files with their paths\n2. Confirm the resolution (should be 2880x1800 for 2x retina at 1440x900 viewport)\n3. Mention total file sizes\n4. Suggest any follow-up actions\n\nExample output:\n```\nGenerated 5 marketing screenshots:\n\nscreenshots/\n├── 01-dashboard-overview.png (1.2 MB, 2880x1800 @ 2x)\n├── 02-link-inbox.png (456 KB, 2880x1800 @ 2x)\n├── 03-edition-editor.png (890 KB, 2880x1800 @ 2x)\n├── 04-analytics.png (567 KB, 2880x1800 @ 2x)\n└── 05-settings.png (234 KB, 2880x1800 @ 2x)\n\nAll screenshots are true retina-quality (2x deviceScaleFactor) and ready for marketing use.\n```\n\n## Error Handling\n\n- **Playwright not found**: Suggest `npm install -D playwright`\n- **Page not loading**: Check if the dev server is running, suggest starting it\n- **Login 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.\n- **Element not found**: Verify the CSS selector, offer to take a full page screenshot instead\n- **Screenshot failed**: Check disk space, verify write permissions to screenshots directory\n\n## Tips for Best Results\n\n1. **Clean UI state**: Use demo/seed data for realistic content\n2. **Consistent sizing**: Use the same viewport for all screenshots\n3. **Wait for content**: Use `waitForLoadState('networkidle')` to ensure all content loads\n4. **Hide dev tools**: Ensure no browser extensions or dev overlays are visible\n5. **Dark mode variants**: Consider capturing both light and dark mode if supported\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["screenshots","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity-skills"],"capabilities":["skill","source-sickn33","skill-screenshots","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/screenshots","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34583 github stars · SKILL.md body (12,774 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T18:52:11.500Z","embedding":null,"createdAt":"2026-04-18T21:43:59.345Z","updatedAt":"2026-04-22T18:52:11.500Z","lastSeenAt":"2026-04-22T18:52:11.500Z","tsv":"'-10':237 '-4':732 '-5':230 '/another-path':886 '/dev/null':101,106,1330 '/element.png':1178 '/full-page.png':1195 '/login':340 '/modal.png':1246 '/path':875 '/screenshots':847 '/sign-in':341 '01':870 '01-dashboard-overview.png':1294,1380 '02':881 '02-link-inbox.png':1297,1385 '03-edition-editor.png':1300,1390 '04-analytics.png':1302,1395 '05-settings.png':1304,1400 '1':131,136,150,216,397,788,1340,1504 '1.2':1381 '10':241 '1440':909,1267 '1440x900':800,1359 '2':50,100,105,164,206,246,430,791,796,913,1271,1329,1348,1514 '234':1401 '2880x1800':802,1354,1383,1388,1393,1398,1403 '2x':45,1356,1384,1389,1394,1399,1404,1412 '3':229,285,364,438,731,805,1361,1524 '3.1':381 '3.2':446 '3.3':578 '3.4':616 '3.5':646 '3000':188 '4':690,812,1366,1536 '4000':198 '456':1386 '5':236,759,1376,1549 '500':1214 '500ms':1216 '5173':195 '567':1396 '6':768 '7':1148 '8':1275 '8080':201 '890':1391 '9':1306 '900':911,1269 'access':296 'action':1084,1091,1372 'action.click':1095,1098 'action.fill':1100 'action.fill.selector':1103 'action.fill.value':1104 'action.wait':1106,1109 'actual':556 'add':887 'addit':442 'advanc':1149 'alreadi':428 'alway':385 'analyt':1301 'analyz':365,447,1460 'anim':1200,1205,1218 'anoth':883 'another-featur':882 'app':7,35,86,133,143,192,292,376,395,413,470,472,842,1252 'app.get':551 'app/routes':533 'array':518 'ask':168,328,703,747,1595 'askuserquest':166,210,712 'asset':620 'async':891 'auth':288,853 'auth.email':976 'auth.loginurl':937 'auth.needed':931 'auth.password':1002 'authent':286,807,848,927 'automat':353 'avail':92,459,575 'await':896,905,924,935,974,1000,1045,1047,1064,1069,1079,1096,1101,1107,1110,1124,1169,1173,1190,1212,1232,1236,1241,1263 'base':537,840,1066 'bash':96,763,1134,1144,1317 'benefit':278 'best':1502 'boundari':1603 'browser':895,1542 'browser.close':1125 'browser.newcontext':906,1264 'build':647 'button':1011,1015,1021,1027,1033,1038 'button.open':1234 'capabl':423 'captur':41,757,818,866,1053,1062,1185,1224,1311,1554 'case':1283 'catch':270,1129 'changelog.md':431 'chart':602 'check':93,151,563,617,1432,1491 'chromium':836 'chromium.launch':897 'clarif':1597 'clarifi':753 'clean':1139,1505 'clear':1570 'cli':203 'click':1219 'codebas':366,372,722 'colorschem':1272 'common':182,942,981,1007,1448 'complet':1052,1210 'compon':581,584,590,633,641,663,675 'components/landing':636 'components/marketing':638 'comprehens':238,652 'config':849 'config/routes.rb':493 'configur':455 'confirm':706,1349 'consid':1553 'consist':1515 'console.error':1130 'console.log':932,1050,1061,1120,1126 'const':839,844,852,867,894,903,922,947,986,1012,1057,1090,1167,1261 'content':625,1184,1240,1513,1527,1534 'context':899,904,1262 'context.newpage':925 'convent':1278 'correct':1468 'count':218,220 'coverag':240 'creat':16,63,68,78,190,650,760,774,898 'createbrowserrout':505 'credenti':314,327,809 'criteria':1606 'css':669,1171,1479 'custom':1471 'd':123,128,1427 'dark':1247,1254,1258,1273,1550,1558 'dashboard':589,1292 'data':600,682,1510 'default':183 'definit':509,521,542,569 'demo':272 'demo/seed':1509 'describ':1574 'descript':427,1280 'detect':354 'determin':132 'dev':154,180,1435,1538,1545 'devicescalefactor':49,790,912,1270,1413 'dialog':607 'dir':846,1114,1177,1194,1245 'direct':38 'directori':440,473,486,524,534,762,1499 'discov':457,655,697,735 'disk':1492 'distinct':594 'django':543 'doc':439 'document':26,79,279,383,429,443 'done':1127 'dropdown':1227 'e.g':339,829 'edit':1298 'editor':1299 'element':1076,1153,1160,1168,1220,1474 'element-focus':1152 'element.screenshot':1174 'email':860,861,952,955,958,961 'email/username':345,945 'emailfield':948 'emailfield.fill':975 'ensur':1532,1540 'entir':496,1187 'environ':1586 'environment-specif':1585 'error':1419 'exact':754 'exampl':1373 'execut':832 'exist':566,623 'expert':1591 'explor':370 'express':548 'extens':1543 'eye':269 'eye-catch':268 'fail':1443,1452,1459,1490 'fals':856,1119 'featur':235,239,264,271,298,368,421,426,435,445,588,591,630,639,648,656,658,698,714,719,734,872,884,1290 'feature-nam':871 'field':357,946,985 'file':390,402,462,488,497,536,545,559,828,1276,1331,1344,1364 'file-bas':535 'filenam':1284,1291 'find':450,1466 'first':319,384,973,999,1044 'focus':672,1154 'folder':476,526 'follow':213,330,749,1370 'follow-up':329,748,1369 'form':356,596,1456 'found':111,717,1423,1476 'framework':461 'full':242,407,1164,1179,1485 'fullpag':1117,1196 'function':892 'g':1323,1325 'gather':207 'generat':2,28,73,769,1343,1375 'generic':204 'graph':603 'grep':107 'handl':806,926,1420 'handler':554 'has-text':1022,1028,1034,1039 'header':219,248,287,713 'height':910,1268 'help':177 'hero':261 'hide':1537 'hidpi':44,783,901 'highlight':265,437 'hint':627 'history.md':433 'hover':1229 'html':1464 'hunt':20,67,260 'id':957,967,996 'identifi':378,579 'imag':74,804 'import':555,835 'inform':112 'input':599,950,953,956,959,963,966,969,989,992,995,1018,1600 'instal':118,122,127,1426 'instead':1161,1488 'interact':598 'javascript':834,1166,1189,1211,1231,1256 'join':972,998,1043 'kb':1387,1392,1397,1402 'kebab':1282 'kebab-cas':1281 'key':234,420,580,629,733,917 'la':1319 'land':23,76,273,631 'laravel':539 'let':737 'light':1556 'like':157,726 'limit':1562 'link':1295 'list':640,649,653,710,730,1341 'll':312,325 'load':1431,1535 'localhost':187,194,197,200 'locat':362,1446 'log':317,680,933,1031 'login':294,305,336,355,858,939,978,1004,1037,1051,1442,1455,1458,1462 'loginurl':857 'look':160,467,582,621 'ls':103,1318 'main':893,1128 'manag':1296 'mani':223 'market':3,30,84,243,275,619,624,1377,1417 'marketing-qu':29,83 'match':1571 'may':1451 'mb':1382 'media':22,72,267 'mention':1362 'miss':1608 'mkdir':764 'modal':605,684,1226,1235,1239 'modal-cont':1238 'mode':1248,1255,1259,1551,1559 'modifi':708 'multipl':941,980,1006 'must':90 'name':659,664,869,873,880,954,964,993,1277 'navig':608,813 'need':227,306,315,851,854,929 'networkidl':1049,1071,1530 'next.js':189,469,482 'node':1135 'node.js':776 'npm':102,121,126,1425 'npx':97 'numer':1286 'offer':175,1481 'often':634 'one':741,746 'open':685 'opportun':380 'option':228,258,303,729,878,1072,1082,1151 'optional-selector':877 'order':1289 'output':1374,1580 'overlay':1546 'overview':1293 'p':765 'package.json':162 'page':24,77,274,308,337,451,460,483,485,573,632,816,923,1180,1188,1203,1429,1463,1486 'page.click':1097,1233 'page.fill':1102 'page.goto':936,1065 'page.locator':949,988,1014,1170 'page.screenshot':1111,1191,1242 'page.svelte':528 'page.tsx':478 'page.waitforloadstate':1048,1070 'page.waitforselector':1080,1237 'page.waitfortimeout':1108,1213 'panel':612 'password':349,862,863,984,991,994,997 'passwordfield':987 'passwordfield.fill':1001 'path':511,520,666,1112,1175,1192,1243,1347 'pattern':547,943,982,1008,1449 'perform':1083 'permiss':1496,1601 'phoenix':199 'pick':739 'pixel':803 'pixelheight':1326 'pixelwidth':1324 'placehold':960 'plan':691,889 'playwright':9,37,89,98,104,108,115,124,359,772,780,838,1421,1428 'playwright/test':129 'plus':736 'png':1116,1123,1321,1328,1333 'popul':683 'prefer':1260 'prefix':1287 'prerequisit':88 'present':695 'price':642 'problem':417 'produc':801 'product':19,66,259 'profil':614 'proper':782 'provid':138,149,313,326,811,1334 'public':307 'purpos':247,249 'qualiti':31,85,1411 'question':214,215,221,245,250,284,289,332,715,751 'quick':231 'rail':193,492 'react':191,501 'read':382,388,405,452,464,494,557 'readi':1415 'readm':401,408,661 'readme.md':398 'realist':1512 'recent':434 'refer':281 'remix':532 'repres':586 'request':82 'requir':117,208,293,677,1599 'resolut':47,795,1351 'result':1316,1503 'retina':46,794,920,1357,1410 'retina-qu':1409 'review':1592 'rm':1145 'rout':448,454,481,491,500,507,508,517,531,538,541,553,568,668 'router':471,484,502,513 'router.get':552 'router.js':516 'routes/web.php':540 'run':158,771,1131,1138,1438 'safeti':1602 'save':1121 'scope':1573 'screenshot':1,4,17,27,32,39,64,69,80,87,217,224,254,302,379,424,577,692,728,761,766,819,845,864,868,890,921,1055,1060,1086,1113,1150,1155,1157,1176,1181,1193,1222,1244,1249,1313,1320,1327,1332,1378,1379,1406,1487,1489,1498,1523 'screenshot-script.mjs':830,1136,1146 'screenshott':587 'script':163,351,773,777,786,820,824,1133,1143,1473 'scrollabl':1183 'search':503,549 'section':276,592,615,645 'select':322,688 'selector':670,879,1172,1469,1480 'server':155,181,1436 'set':232,611,784,797,902,1257,1303 'shot':262,1058 'shot.actions':1088,1093 'shot.fullpage':1118 'shot.name':1063,1115,1122 'shot.url':1068 'shot.waitfor':1078,1081 'sidebar':610 'sign':1025 'sip':1322 'size':1365,1516 'skill':55,58,1565 'skill-screenshots' 'smart':361,938,977,1003,1445 'social':21,71,266 'solv':419 'source-sickn33' 'space':1493 'specif':686,740,745,1075,1159,1587 'src/router/index.js':514 'src/routes':523 'start':178,386,1440 'state':679,1230,1507 'step':130,205,363,689,758,767,1147,1274,1305 'stop':1593 'structur':474,676 'subdirectori':404 'submit':1010,1017,1020,1042 'submitbutton':1013 'submitbutton.click':1046 'substitut':1583 'success':1605 'suggest':186,1367,1424,1439 'suit':244 'summar':1309 'summari':1336 'support':1253,1561 'sveltekit':522 'tab':687 'tabl':604,643 'take':1483 'task':1569 'tell':570 'templat':821 'temporari':827,1142 'test':1589 'testimoni':644 'text':971,1024,1030,1036,1041 'thorough':369 'tip':1500 'tool':1539 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'total':1363 'treat':1578 'tri':940,979,1005,1447 'true':43,793,855,919,1197,1408 'tutori':283 'type':951,970,990,1016,1019 'ui':280,595,678,1506 'understand':374,392,410 'unusu':1454 'url':134,144,147,173,184,338,546,665,841,843,859,874,885,1067 'urls.py':544 'use':8,10,36,48,53,56,139,165,209,256,358,711,779,789,1279,1418,1508,1517,1528,1563 'user':13,60,81,114,170,321,613,694,701,743,1339 'usernam':965,968 'valid':1588 'variant':1552 'verifi':1307,1314,1477,1494 'version':99 'viewport':798,907,1165,1265,1360,1520 'visibl':1548 'visual':601 'vite':196 'vue':202,512 'wait':1073,1198,1206,1215,1525 'waitfor':876 'waitforloadst':1529 'want':14,61,300,744 'width':908,1266 'worth':436 'would':724 'write':822,1495 'yes':310,323","prices":[{"id":"f8df6f58-2ad5-46d0-9042-37d8c4a5e752","listingId":"851cffe5-1522-4941-91e2-62cbb843eb4e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:43:59.345Z"}],"sources":[{"listingId":"851cffe5-1522-4941-91e2-62cbb843eb4e","source":"github","sourceId":"sickn33/antigravity-awesome-skills/screenshots","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/screenshots","isPrimary":false,"firstSeenAt":"2026-04-18T21:43:59.345Z","lastSeenAt":"2026-04-22T18:52:11.500Z"}],"details":{"listingId":"851cffe5-1522-4941-91e2-62cbb843eb4e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"screenshots","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34583,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"3baa372ad351f9aa81b79e2b2f82a2b0ec69b90d","skill_md_path":"skills/screenshots/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/screenshots"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"screenshots","description":"Generate marketing screenshots of your app using Playwright. Use when the user wants to create screenshots for Product Hunt, social media, landing pages, or documentation."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/screenshots"},"updatedAt":"2026-04-22T18:52:11.500Z"}}