← ClaudeAtlas

perf-auditlisted

Lighthouse CLI 래핑 — URL 성능 측정. Performance score + 5 Web Vitals (FCP/LCP/CLS/TBT/Speed Index) 추출, pass/warn/fail 판정, events.jsonl 이력 저장. on-demand only (~30s).
SONGYEONGSIN/vibe-flow · ★ 1 · AI & Automation · score 77
Install: claude install-skill SONGYEONGSIN/vibe-flow
# /perf-audit URL을 Lighthouse CLI로 측정하여 핵심 Web Vitals를 출력하고 events.jsonl에 이력을 누적한다. stack-agnostic — Next.js 한정 X, 어떤 URL이든 동작. ## 트리거 - `/perf-audit <url>` — 인간 친화 출력 (점수 + 지표 + 판정) - `/perf-audit <url> --json` — JSON 출력 (CI 통합용) ## 절차 ### 1. 인자 파싱 ```bash URL="${1:-}" MODE="text" shift || true while [ $# -gt 0 ]; do case "$1" in --json) MODE="json" ;; esac shift done if [ -z "$URL" ]; then echo "Usage: /perf-audit <url> [--json]" >&2 echo "예: /perf-audit http://localhost:3000" >&2 echo "예: /perf-audit https://example.com --json" >&2 exit 1 fi # 기본 검증 — http(s) prefix case "$URL" in http://*|https://*) ;; *) echo "warn: URL은 http:// 또는 https:// 로 시작해야 합니다" >&2; exit 1 ;; esac ``` ### 2. Lighthouse 실행 ```bash # npx -y lighthouse — 미설치면 자동 다운로드 (첫 실행 ~150MB) # stdout으로 JSON 받음, stderr 억제 TMP_OUT=$(mktemp) trap 'rm -f "$TMP_OUT"' EXIT if ! npx -y lighthouse "$URL" \ --quiet \ --chrome-flags="--headless --no-sandbox --disable-gpu" \ --output=json \ --output-path="$TMP_OUT" \ 2>/dev/null; then echo "✗ lighthouse 실행 실패 — URL 접근 불가 또는 Chrome 다운로드 실패" >&2 echo " 네트워크/방화벽/URL 접근성 확인" >&2 exit 1 fi if [ ! -s "$TMP_OUT" ]; then echo "✗ lighthouse 결과 비어있음" >&2 exit 1 fi ``` ### 3. 핵심 지표 추출 ```bash # performance score (0~1) → 0~100 SCORE=$(jq -r '.categories.performance.score * 100 | floor' "$TMP_OUT" 2>/dev/null) SCORE="${SCORE:-0}" # Web Vitals (numericValue) FCP=$(jq -r '.audits["first-contentful-paint"].numericValue // 0 | flo