perf-auditlisted
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