Menu
Playwright CLI로 브라우저 스크린샷을 캡처한다. 로컬 HTML 파일이나 URL을 headless 브라우저에서 열고 PNG로 저장한다. UI 렌더링 검증, 시각적 회귀 테스트에 사용.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
| name | playwright |
| description | Playwright CLI로 브라우저 스크린샷을 캡처한다. 로컬 HTML 파일이나 URL을 headless 브라우저에서 열고 PNG로 저장한다. UI 렌더링 검증, 시각적 회귀 테스트에 사용. |
npx playwright screenshot 으로 브라우저 스크린샷을 캡처한다.
# URL 스크린샷
npx playwright screenshot https://example.com output.png
# 로컬 HTML 파일 (file:// 프로토콜 사용)
npx playwright screenshot "file:///D:/Projects/flow/.flow/test.html" output.png
# 풀 페이지 스크린샷
npx playwright screenshot --full-page "file:///D:/Projects/flow/test.html" output.png
# 브라우저 선택 (기본: chromium)
npx playwright screenshot -b firefox <url> output.png
npx playwright screenshot -b webkit <url> output.png
# 뷰포트 크기 지정
npx playwright screenshot --viewport-size "1280,720" <url> output.png
# 특정 요소가 나타날 때까지 대기 후 캡처
npx playwright screenshot --wait-for-selector ".activity-section" <url> output.png
# 밀리초 대기 후 캡처
npx playwright screenshot --wait-for-timeout 2000 <url> output.png
# 다크 모드
npx playwright screenshot --color-scheme dark <url> output.png
# 디바이스 에뮬레이션
npx playwright screenshot --device "iPhone 15" <url> output.png
HTML 렌더링 결과를 스크린샷으로 찍고 시각적으로 검증하는 흐름:
# 1. 테스트용 HTML 생성 (구현 코드의 렌더 함수 호출 결과)
# 2. 스크린샷 캡처
npx playwright screenshot --full-page "file:///absolute/path/to/test.html" evidence/screenshot.png
# 3. 캡처된 이미지를 확인하여 검증
file:///D:/path/to/file.htmlfile:///home/user/path/to/file.html별도 설치 불필요. npx playwright 로 자동 다운로드된다.
브라우저가 없으면 npx playwright install chromium 으로 설치.
스펙 그래프 관리 시스템. flow spec-* 커맨드로 기능 스펙을 JSON으로 관리하고 의존성 그래프를 생성·분석한다. 스펙 생성, 검증, 영향 분석, 상태 전파, 코드 참조 검증이 필요할 때 사용. 스펙 관련 작업 전반에 사용.
자연어 입력을 분석하여 스펙 JSON을 생성하는 스킬. 사용자가 자연어로 설명한 기능 요구사항을 파싱하여 spec-create 커맨드와 JSON 편집으로 완성된 스펙을 추가한다. 스펙 생성, 요구사항 구조화가 필요할 때 사용.
멀티 플랫폼 빌드 시스템. flow build 커맨드를 사용하여 프로젝트를 빌드, 린트, 테스트, 실행한다. unity, python, node, dotnet, flutter 플랫폼을 자동 감지하여 지원한다. 빌드, 린트, 테스트가 필요할 때 사용.
E2E 테스트 실행. flow test e2e 커맨드로 시나리오 기반 E2E 테스트를 실행한다. Flutter, Unity 등 플랫폼의 자동화된 E2E 테스트가 필요할 때 사용.
RAG(Retrieval-Augmented Generation) 데이터베이스 관리. flow db-add, db-query 커맨드로 문서를 저장하고 벡터 검색한다. 과거 작업 이력 조회, 문서 저장, 임베딩 기반 유사도 검색이 필요할 때 사용.
Download skills from GitHub URLs, direct .skill/.zip links, or local paths. Use when a user provides a GitHub URL to a skill folder (including /blob or /tree), a repo root URL, a raw.githubusercontent.com URL, or a local/remote .skill or .zip that should be fetched and saved locally.