القائمة
Generate screenshots for web audio apps (desktop, mobile landscape, mobile portrait) using Playwright. Also captures component-level screenshots for documentation.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Code quality inspection and linting commands for web audio apps. Includes detection of dead code, magic numbers, type safety issues, and naming inconsistencies.
Deployment preparation workflow including version management, documentation sync, and pre-deploy checklist for web audio apps.
Generate and update project documentation following acidApps standards. Includes templates for README, USER_MANUAL, TERMINOLOGY, and CHANGELOG.
| name | screenshot-generator |
| description | Generate screenshots for web audio apps (desktop, mobile landscape, mobile portrait) using Playwright. Also captures component-level screenshots for documentation. |
웹 앱의 스크린샷을 자동으로 생성합니다.
screenshot-generator/
├── SKILL.md # 이 파일
└── scripts/
└── generate_screenshots.js # 메인 스크립트
# Playwright 설치
npm install playwright
npx playwright install chromium
# 프로젝트 루트에서
node scripts/generate_screenshots.js
http-server로 앱 서빙 (포트 8080)screenshot-desktop.png (1280x800)screenshot-mobile-landscape.png (844x390)screenshot-mobile-portrait.png (iPhone 13 Pro)스크린샷은 assets/ 폴더에 저장됩니다.
각 프로젝트에서 스크립트를 복사하고 필요에 맞게 수정하세요:
// 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') });
// 스크립트 하단에 추가
console.log('Taking New Feature Screenshot...');
const newFeature = page.locator('.your-selector');
await newFeature.screenshot({ path: path.join(assetsDir, 'new-feature.png') });
// 대기할 요소
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');
// 대기할 요소
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');
// 대기할 요소
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');