Agent skill

screenshot-generator

Generate screenshots for web audio apps (desktop, mobile landscape, mobile portrait) using Playwright. Also captures component-level screenshots for documentation.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/screenshot-generator

SKILL.md

πŸ“Έ Screenshot Generator Skill

μ›Ή μ•±μ˜ μŠ€ν¬λ¦°μƒ·μ„ μžλ™μœΌλ‘œ μƒμ„±ν•©λ‹ˆλ‹€.

🎯 μš©λ„

  • README.md 및 λ¬Έμ„œμš© μŠ€ν¬λ¦°μƒ· 생성
  • Desktop, Mobile Landscape, Mobile Portrait λ·° 캑처
  • κ°œλ³„ μ»΄ν¬λ„ŒνŠΈ(헀더, νŒ¨λ“œ, λ…ΈλΈŒ λ“±) μŠ€ν¬λ¦°μƒ·

πŸ“ 파일 ꡬ쑰

screenshot-generator/
β”œβ”€β”€ SKILL.md              # 이 파일
└── scripts/
    └── generate_screenshots.js  # 메인 슀크립트

βš™οΈ μš”κ΅¬μ‚¬ν•­

bash
# Playwright μ„€μΉ˜
npm install playwright
npx playwright install chromium

πŸš€ μ‚¬μš©λ²•

κΈ°λ³Έ μ‹€ν–‰

bash
# ν”„λ‘œμ νŠΈ λ£¨νŠΈμ—μ„œ
node scripts/generate_screenshots.js

슀크립트 λ™μž‘

  1. 둜컬 μ„œλ²„ μ‹œμž‘: http-server둜 μ•± μ„œλΉ™ (포트 8080)
  2. λΈŒλΌμš°μ € μ‹€ν–‰: Playwright Chromium
  3. μŠ€ν¬λ¦°μƒ· 캑처:
    • screenshot-desktop.png (1280x800)
    • screenshot-mobile-landscape.png (844x390)
    • screenshot-mobile-portrait.png (iPhone 13 Pro)
  4. μ»΄ν¬λ„ŒνŠΈ 캑처: κ°œλ³„ UI μš”μ†Œ
  5. μ„œλ²„ μ’…λ£Œ

좜λ ₯ μœ„μΉ˜

μŠ€ν¬λ¦°μƒ·μ€ assets/ 폴더에 μ €μž₯λ©λ‹ˆλ‹€.

πŸ”§ ν”„λ‘œμ νŠΈλ³„ μ»€μŠ€ν„°λ§ˆμ΄μ§•

각 ν”„λ‘œμ νŠΈμ—μ„œ 슀크립트λ₯Ό λ³΅μ‚¬ν•˜κ³  ν•„μš”μ— 맞게 μˆ˜μ •ν•˜μ„Έμš”:

ν•„μˆ˜ μˆ˜μ • 사항

javascript
// 1. μ„œλ²„ 포트 (ν•„μš”μ‹œ)
const server = spawn('npx', ['-y', 'http-server', '-p', '8080', '-a', '127.0.0.1']);

// 2. λŒ€κΈ°ν•  UI μš”μ†Œ (ν”„λ‘œμ νŠΈλ³„λ‘œ 닀름)
await page.waitForSelector('.your-main-element', { timeout: 10000 });

// 3. μ»΄ν¬λ„ŒνŠΈ μ…€λ ‰ν„° (ν”„λ‘œμ νŠΈλ³„λ‘œ 닀름)
const header = page.locator('.your-header-class');
await header.screenshot({ path: path.join(assetsDir, 'header.png') });

μƒˆ μŠ€ν¬λ¦°μƒ· μΆ”κ°€

javascript
// 슀크립트 ν•˜λ‹¨μ— μΆ”κ°€
console.log('Taking New Feature Screenshot...');
const newFeature = page.locator('.your-selector');
await newFeature.screenshot({ path: path.join(assetsDir, 'new-feature.png') });

πŸ“‹ ν”„λ‘œμ νŠΈλ³„ μ„€μ • μ˜ˆμ‹œ

acidBros

javascript
// λŒ€κΈ°ν•  μš”μ†Œ
await page.waitForSelector('.step-303', { timeout: 10000 });
await page.waitForSelector('.step-909', { timeout: 10000 });
await page.waitForSelector('.rotary-knob', { timeout: 10000 });

// μ»΄ν¬λ„ŒνŠΈ
const transport = page.locator('.top-bar');
const tb303 = page.locator('.machine.tb-303').first();
const tr909 = page.locator('.machine.tr-909');

ddxx7

javascript
// λŒ€κΈ°ν•  μš”μ†Œ
await page.waitForSelector('.operator-panel', { timeout: 10000 });
await page.waitForSelector('.algorithm-matrix', { timeout: 10000 });

// μ»΄ν¬λ„ŒνŠΈ
const header = page.locator('header');
const operatorPanel = page.locator('.operator-panel');
const libraryView = page.locator('.library-view');

uss44

javascript
// λŒ€κΈ°ν•  μš”μ†Œ
await page.waitForSelector('.pad-grid', { timeout: 10000 });
await page.waitForSelector('.waveform-editor', { timeout: 10000 });

// μ»΄ν¬λ„ŒνŠΈ
const header = page.locator('header');
const padGrid = page.locator('.pad-grid');
const paramsPanel = page.locator('.params-panel');

⚠️ μ£Όμ˜μ‚¬ν•­

  1. μ„œλ²„ 좩돌: 이미 8080 ν¬νŠΈκ°€ μ‚¬μš© 쀑이면 μ‹€νŒ¨
  2. νƒ€μž„μ•„μ›ƒ: λ„€νŠΈμ›Œν¬ 느리면 waitForSelector νƒ€μž„μ•„μ›ƒ 증가 ν•„μš”
  3. ν—€λ“œλ¦¬μŠ€: 기본적으둜 headless λͺ¨λ“œ (ν™”λ©΄ ν‘œμ‹œ μ—†μŒ)

πŸ”— κ΄€λ ¨ λ¬Έμ„œ

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results