frontend-audit

Files (1)

• SKILL.md

SKILL.md (first lines)

# frontend-audit — Playwright → Lighthouse → ZAP → rapor

## Bu mu, yoksa diğer güvenlik/kalite skilleri mi?

| Soru | `frontend-audit` (bu skill) | `trivy-scan` | `security-scan` | `authz-test` |
|---|---|---|---|---|
| Çalışan bir URL'yi tarayıcıda gezmek gerekiyor mu | ✅ evet, ön koşul | ❌ hayır | ❌ hayır | ✅ (canlı endpoint) |
| Performans/Core Web Vitals/SEO | ✅ | ❌ | ❌ | ❌ |
| Dışarıdan (kara kutu) web güvenlik taraması (DAST) | ✅ (ZAP) | ❌ | ❌ | ❌ (IDOR/yetki odaklı, DAST değil) |
| Statik kod/bağımlılık CVE'si | ❌ | ✅ | ✅ (Python) | ❌ |
| Kaynak kod erişimi gerekir mi | ❌ hayır (kara kutu) | ✅ evet | ✅ evet | kısmen |

**Kısa kural:** Elinde çalışan bir frontend URL'si varsa ve "genel olarak nasıl"
diye soruluyorsa → bu skill. Kaynak kod/repo/bağımlılık taranacaksa →
`trivy-scan`/`security-scan`. Belirli bir yetki/tenant açığı araştırılıyorsa
→ `authz-test`.

## ATDD/verify zincirindeki yeri

Bu skill zincirin (`atdd→...→commit`) parçası **değil** — `postmortem` gibi
bağımsız, isteğe bağlı bir araç. Ama araçları zincire şöyle bağlanır:

- **`atdd`**: Araç çağırmaz, sadece ölçülebilir hedef yazar — görev bir web
  UI içeriyorsa `Benchmark` bölümüne performans/erişilebilirlik hedefi
  ("LCP < 2.5s", "erişilebilirlik skoru ≥ 90" gibi) girilmeli. Güvenlik
  tarafı `threat-model`'in ürettiği `AC-S<n>` kriterleridir, bu skill değil.
- **`verify`**: Gerçek tetikleyici burası. Gate 7 (e2e — Playwright),
  gate 8/9 (Lighthouse — performans/erişilebilirlik), gate 13 (DAST — ZAP,
  sadece `threat-model` bir `AC-S<n>` ürettiyse) bu skill'in araç
  referansını kullanır. Bkz. `verify/SKILL.md`.
- Bağımsız/ad-hoc kullanım (zincire bağlı olmadan): kullanıcı doğrudan
  "şu canlı siteyi değerlendir" derse, bu skill tek başına çağrılır.

## Pipeline

```
Çalışan frontend URL'si
        ↓
Playwright MCP     — kullanıcı akışı, butonlar, formlar, responsive, console hataları, bozuk linkler, ekran görüntüsü
        ↓
Lighthouse MCP     — performans, erişilebilirlik, SEO, Core Web Vitals, kaynak analizi
        ↓
OWASP ZAP MCP      — dışarıdan web güvenliği / DAST taraması
        ↓
AI ajanı           — önceliklendirilmiş frontend değerlendirme raporu
```

Aşamalar bağımsızdır — biri kurulu değilse/çalışmıyorsa diğerleri atlanmaz,
raporda o aşama açıkça "N/A — sebep" olarak işaretlenir.

## Durum özeti (bu makinede doğrulandı — 2026-08-31)

| Aşama | Kurulum | Test durumu |
|---|---|---|
| Playwright | Zaten bağlı (`mcp__playwright__*`), kurulum gerekmedi | ✅ 5 araç gerçekten çağrıldı (`browser_navigate`, `browser_snapshot`, `browser_console_messages`, `browser_network_requests`, `browser_close`) — hepsi çalıştı |
| Lighthouse | `npm install -g @danielsogl/lighthouse-mcp@latest` | ✅ **11/11 araç** gerçekten çağrıldı (`https://example.com` üzerinde), hepsi geçerli sonuç döndürdü |
| OWASP ZAP | `winget install ZAP.ZAP` + `mcp` add-on (v0.4.0) kuruldu | ✅ **17/17 araç** kullanıcının kendi (sandbox dışı) terminalinde GUI ile başlattığı ZAP'a bu oturumdan HTTPS ile bağlanılarak test edildi (bkz. tuzak #3 — sandbox JVM subprocess açmayı engelliyor ama HTTP/HTTPS ile dışarıdan çalışan bir sunucuya erişim engellenmiyor) |

## Araçlar

### 1. Playwright MCP (`mcp__playwright__*`)

Zaten bu ortamda bağlı, ayrı kurulum gerekmiyor. ~24 araç var, en sık kullanılanlar:

| Araç | Ne zaman kullan |
|---|---|
| `browser_navigate` | URL'ye git |
| `browser_snapshot` | Sayfanın erişilebilirlik ağacını al (DOM okuma, buton/link/form tespiti) — ekran görüntüsünden daha güvenilir |
| `browser_click` / `browser_type` / `browser_fill_form` / `browser_select_option` | Kullanıcı akışını simüle et (form doldurma, buton tıklama) |
| `browser_console_messages` | JS hatalarını/uyarılarını yakala |
| `browser_network_requests` | Bozuk link/404/başarısız istek tespiti |
| `browser_take_screenshot` | Görsel kanıt (rapora eklenecek ekran görüntüsü) |
| `browser_resize` | Responsive test (mobile/tablet/desktop viewport) |
| `browser_wait_for` | Async içerik yüklenmesini bekle |

### 2. Lighthouse MCP (`lighthouse-mcp-server`, gömülü v2.0.1)

Kurulum: `npm install -g @danielsogl/lighthouse-mcp@latest`
Çalıştırma (Claude Code'a MCP olarak eklemek için):
```bash
claude mcp add lighthouse -- node "$(npm root -g)/@danielsogl/lighthouse-mcp/dist/index.js"
```

11 araç (hepsi test edildi):

| Araç | Ne döner |
|---|---|
| `run_audit` | Tam Lighthouse denetimi (performance+accessibility+best-practices+seo+agentic-browsing kategorileri) — en yavaş, en kapsamlı |
| `get_performance_score` | Sadece performans skoru + metrikler (FCP, LCP, TBT, CLS) |
| `get_accessibility_score` | Erişilebilirlik skoru + öneri listesi |
| `get_seo_analysis` | SEO skoru + öneri listesi |
| `get_core_web_vitals` | LCP/FCP/CLS/INP/TBT tek tek |
| `get_security_audit` | HTTPS/CSP gibi temel güvenlik header kontrolleri (ZAP'ın yerini TUTMAZ — sadece Lighthouse'un statik header kontrolü) |
| `analyze_resources` | Görsel/JS/CSS/font boyutu ve optimizasyon fırsatları |
| `find_unused_javascript` | Kullanılmayan JS tespiti (bundle boyutu azaltma) |
| `get_lcp_opportunities` | LCP'yi iyileştirecek somut öneriler |
| `check_performance_budget` | Verilen eşiklere göre PASS/FAIL (bkz. tuzak #2) |
| `compare_mobile_desktop` | Mobil/masaüstü skor farkı |

Ortak parametre: `url` (zorunlu). Çoğu araç `device: "mobile"\|"desktop"` de kabul eder.

### 3. OWASP ZAP MCP (`mcp` add-on, v0.4.0-alpha) — 17/17 araç test edildi

**Kurulum (bu makinede tamamlandı):**
```bash
winget install --id ZAP.ZAP -e          # ZAP 2.17.0 + Java 17 (Temurin) bağımlılığı
# ZAP kurulum dizininden, Java 17 ile:
java -jar zap-2.17.0.jar -cmd -addoninstall mcp -addonupdate
```

**Bu ortamda (Claude Code sandbox'ı) ZAP daemon'ı doğrudan başlatılamıyor**
(bkz. tuzak #3) — ama kullanıcı ZAP'ı **kendi masaüstünde GUI ile** açıp
MCP sunucusunu aktif ettiğinde, bu oturumdan `https://localhost:8282`'ye
düz HTTP isteğiyle (JVM subprocess açmadan) sorunsuz bağlanılabiliyor.
Bu şekilde **17 aracın tamamı gerçekten çağrılıp doğrulandı**
(hedef: `https://demo.owasp-juice.shop` — OWASP'ın kendi güvenlik testi
pratiği için sunduğu resmi demo hedefi).

**Bağlantı formatı (tuzak #6'ya bakmadan asla tahmin etme):**

From yutronax/atdd-pipeline-skills, MIT.

More from yutronax/atdd-pipeline-skills