Eine Seite auf Accessibility-Probleme auf Claude-Code-Ebene prüfen

Du hast ein UI mit unbekanntem A11y-Status geerbt und brauchst ein echtes Audit, keine Checkbox-Übung. Echte A11y-Verbesserungen, nicht ‚wir haben axe ausgeführt und das wars'.

Addy Osmani Agent Skills — Anwendungsfälle, Installieren & Live-Demo

Name: Addy Osmani Agent Skills (Claude Skill)
Author: addyosmani

Warum nutzen

Hauptfunktionen

Performance-Skills: Core Web Vitals, Render-Budget, INP-Debugging
Accessibility: axe + Screen-Reader-Walkthrough-Skripte
Security: OWASP-fokussierter Review und Secret-Scanning
Debugging: strukturierter Root-Cause-Workflow, Profiler-gestützt
Funktioniert über Coding-Agenten hinweg (Claude Code, Cursor, Codex, Gemini CLI)
MIT, kein Telemetrie

Live-Demo

In der Praxis

bereit

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "addyosmani-agent-skills": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ],
      "_inferred": true
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "addyosmani-agent-skills",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/addyosmani/agent-skills",
        "~/.claude/skills/addyosmani-agent-skills"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "addyosmani-agent-skills": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/addyosmani/agent-skills",
          "~/.claude/skills/addyosmani-agent-skills"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add addyosmani-agent-skills -- git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Addy Osmani Agent Skills

So behebst du Core-Web-Vitals-Fehler mit Claude als Hauptarbeiter

👤 Frontend-Engineers, performance-bewusste Teams ⏱ ~90 min intermediate

Wann einsetzen: PageSpeed-Score gefallen, LCP über 2,5 s gestiegen, das Business fragt, warum.

Voraussetzungen

Skill installiert — git clone https://github.com/addyosmani/agent-skills ~/.claude/skills/addyosmani-agent-skills
URL oder Repo zum Prüfen — Öffentliche URL oder lokaler Dev-Server

Ablauf

Diagnose

Use the perf skill on https://mysite.com. Pull a CrUX report, run a Lighthouse trace, and identify the top 3 LCP and INP culprits.✓ Kopiert

→ Gerankte Liste der Ursachen mit Dateireferenzen, nicht generische ‚Bilder optimieren'-Tipps
Beheben

For the top LCP culprit, apply the fix. For images, prefer fetchpriority + AVIF/WebP fallback. Show diff and rationale.✓ Kopiert

→ Code-Änderung + vorher/nachher erwartete Metrik-Auswirkung
Verifizieren

Re-run Lighthouse locally. Compare to previous run.✓ Kopiert

→ Zahlen verbessert; falls nicht, war die Hypothese falsch — zurück zu Schritt 1

Ergebnis: Messbare LCP/INP-Verbesserungen mit Nachvollziehbarkeit.

Fallstricke

Claude greift vorschnell zu einem umfangreichen Framework-Umbau — Skill enthält eine ‚Minimal-viable-change'-Regel — wenn der Agent abdriftet, wieder einfügen

Kombinieren mit: filesystem

Einen Secure-by-Default-Review auf einer TypeScript-Codebasis durchführen

👤 Entwickler ohne dediziertes Security-Team ⏱ ~75 min advanced

Wann einsetzen: Pre-Launch möchtest du einen vernünftigen Sweep — kein Pen-Test, aber besser als nichts.

Ablauf

Scannen

Use the security skill. Scan src/ for: hardcoded secrets, unsafe SQL/NoSQL queries, missing rate limits on POST handlers, JWT misuse.✓ Kopiert

→ Findings-Tabelle mit Datei:Zeile und Schweregrad
Top 5 beheben

Fix the highest-severity items. Add tests where feasible.✓ Kopiert

→ 5 Fixes angewendet

Ergebnis: Codebasis, die einen einfachen Security-Review besteht.

Fallstricke

False Positives bei Test-Fixtures — Skill respektiert standardmäßig /tests/ und /__fixtures__/ — --include-tests übergeben, um zu überschreiben

Kombinieren mit: github

Den strukturierten Debug-Skill auf eine Regression anwenden

👤 Jeder Entwickler mit einem ‚hat gestern noch funktioniert'-Bug ⏱ ~60 min intermediate

Wann einsetzen: Du rätst seit 30 Minuten — wechsle zu einem strukturierten Root-Cause-Flow.

Ablauf

Reproduzieren

Use the debug skill. First step: get a minimal reproduction.✓ Kopiert

→ Reproduktionsschritte + ein einzelner fehlschlagender Test
Bisect

Bisect git history with the failing test as oracle.✓ Kopiert

→ Offending Commit identifiziert
Beheben

Surgical fix — preserve the intended behavior of the offending commit.✓ Kopiert

→ Fix mit Begründung committed

Ergebnis: Ein reproduzierbarer Fix mit Test-Backing, nicht eine Vermutung.

Fallstricke

Skill wendet Bisect übereifrig an, wenn der Bug nicht im Code liegt (Umgebung/Daten) — Skill prüft Umgebung/Daten zuerst gemäß Checkliste — Reihenfolge einhalten

Kombinieren mit: github

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

addyosmani-agent-skills + github

PRs aus Skill-Ausgaben öffnen

addyosmani-agent-skills + filesystem

Skill-Audit-Berichte persistieren

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen
perf.audit	url_or_path	Performance-Regression
a11y.audit	path	Pre-Ship-A11y-Prüfung
security.scan	path	Pre-Launch-Security-Sweep
debug.bisect	failing_test, search_window	Regression mit bekannter guter Baseline

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Nicht zutreffend — lokaler Skill
Tokens pro Aufruf: Umfangreiche Reviews können hoch werden; große Codebasen benötigen 50k+ Token
Kosten in €: Kostenlos (MIT)
Tipp: Perf/A11y pro Route ausführen, nicht für die gesamte Site auf einmal, um Kosten begrenzt zu halten

Sicherheit

Rechte, Secrets, Reichweite

Minimale Scopes: filesystem-read

Credential-Speicherung: Keine

Datenabfluss: Lighthouse läuft lokal; nur geprüfte URLs werden abgerufen

Skill-Ausgabe kann Quellcode zitieren — vor externer Weitergabe prüfen

Fehlerbehebung

Häufige Fehler und Lösungen

Lighthouse startet nicht

Node 18+ und Chrome installieren; Skill erwartet beides im PATH

Prüfen: `npx lighthouse https://example.com` funktioniert eigenständig

axe-Regeln veraltet

Skill wird mit einer festgelegten axe-Version geliefert; regelmäßig mit git pull aktualisieren

Bisect läuft endlos auf einem nicht-deterministischen Test

--repeat 3 übergeben, damit jeder Commit 3x getestet wird — flaky Tests werden gefiltert

Alternativen

Addy Osmani Agent Skills vs. andere

Alternative	Wann stattdessen	Kompromiss
wshobson/agents	Du möchtest breite Rollenabdeckung (Backend / Data / DevOps)	wshobson ist breiter; Addys Bundle ist tiefer bei Web-Perf/A11y
Offizielle Anthropic-Skills	Generische, offiziell gesegnete Bausteine	Weniger meinungsstark; weniger praxisorientiert

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen