Addyosmani Skills

Überprüfen und verbessern Sie die Barrierefreiheit im Web gemäß den WCAG 2.2-Richtlinien. Verwenden Sie dies, wenn Sie aufgefordert werden, "Barrierefreiheit verbessern", "a11y-Audit", "WCAG-Konformität", "Screenreader-Unterstützung", "Tastaturnavigation" oder "zugänglich machen".

Leitet zu stabilem API- und Interface-Design an. Verwenden beim Entwerfen von APIs, Modulgrenzen oder öffentlichen Schnittstellen. Verwenden beim Erstellen von REST- oder GraphQL-Endpunkten, beim Definieren von Typverträgen zwischen Modulen oder beim Festlegen von Grenzen zwischen Frontend und Backend.

Wenden Sie moderne Best Practices der Webentwicklung für Sicherheit, Kompatibilität und Codequalität an. Verwenden Sie, wenn Sie aufgefordert werden, "Best Practices anzuwenden", "Sicherheitsaudit durchzuführen", "Code zu modernisieren", "Codequalität zu überprüfen" oder "nach Schwachstellen zu suchen".

Testet in echten Browsern über Chrome DevTools MCP. Verwende dies beim Erstellen oder Debuggen von allem, was in einem Browser läuft. Verwende dies, wenn du das DOM inspizieren, Konsolenfehler erfassen, Netzwerkanfragen analysieren, die Leistung profilieren oder die visuelle Ausgabe mit echten Laufzeitdaten überprüfen musst. Erfordert, dass der chrome-devtools MCP-Server konfiguriert ist.

Automatisiert die Einrichtung von CI/CD-Pipelines. Verwenden Sie dies beim Einrichten oder Ändern von Build- und Deployment-Pipelines. Verwenden Sie dies, wenn Sie Qualitätsgates automatisieren, Testrunner in CI konfigurieren oder Bereitstellungsstrategien festlegen müssen.

Führt eine mehrdimensionale Code-Überprüfung durch. Vor dem Zusammenführen von Änderungen verwenden. Verwenden, wenn Code überprüft wird, der von Ihnen selbst, einem anderen Agenten oder einem Menschen geschrieben wurde. Verwenden, wenn die Codequalität vor der Integration in den Hauptzweig in mehreren Dimensionen bewertet werden muss.

Vereinfacht Code für mehr Klarheit. Verwenden Sie dies beim Refactoring von Code zur Verbesserung der Lesbarkeit, ohne das Verhalten zu ändern. Verwenden Sie dies, wenn Code funktioniert, aber schwerer zu lesen, zu warten oder zu erweitern ist als nötig. Verwenden Sie dies bei der Überprüfung von Code, der unnötige Komplexität angesammelt hat.

Optimiert die Einrichtung des Agentenkontexts. Verwenden Sie dies beim Starten einer neuen Sitzung, wenn die Qualität der Agentenausgabe nachlässt, beim Wechsel zwischen Aufgaben oder wenn Sie Regeldateien und Kontext für ein Projekt konfigurieren müssen.

Optimieren Sie Core Web Vitals (LCP, INP, CLS) für eine bessere Seitenerfahrung und Suchranking. Verwenden Sie dies, wenn Sie aufgefordert werden, "Core Web Vitals verbessern", "LCP beheben", "CLS reduzieren", "INP optimieren", "Seitenerfahrung optimieren" oder "Layoutverschiebungen beheben".

Führt systematisches Root-Cause-Debugging durch. Verwenden Sie dies, wenn Tests fehlschlagen, Builds brechen, das Verhalten nicht den Erwartungen entspricht oder Sie auf einen unerwarteten Fehler stoßen. Verwenden Sie dies, wenn Sie einen systematischen Ansatz zum Finden und Beheben der Grundursache benötigen, anstatt zu raten.

Verwaltet Deprecation und Migration. Verwenden beim Entfernen alter Systeme, APIs oder Funktionen. Verwenden beim Migrieren von Benutzern von einer Implementierung zu einer anderen. Verwenden bei der Entscheidung, ob bestehender Code gewartet oder eingestellt werden soll.

Zeichnet Entscheidungen und Dokumentation auf. Verwenden Sie dies bei architektonischen Entscheidungen, Änderungen öffentlicher APIs, der Auslieferung von Funktionen oder wenn Sie Kontext festhalten müssen, den zukünftige Entwickler und Agenten benötigen, um die Codebasis zu verstehen.

Unterwirft jede nicht-triviale Entscheidung einer frischen, kontextbezogenen adversarischen Überprüfung, bevor sie Bestand hat. Verwenden, wenn Korrektheit wichtiger ist als Geschwindigkeit, wenn in unbekanntem Code gearbeitet wird, wenn die Einsätze hoch sind (Produktion, sicherheitskritische Logik, irreversible Operationen) oder immer dann, wenn eine sichere Ausgabe jetzt günstiger zu verifizieren wäre als später zu debuggen.

Erstellt produktionsreife, barrierefreie, responsive Benutzeroberflächen. Verwenden Sie dies beim Erstellen oder Ändern von Schnittstellen und Seiten, beim Entwickeln von Komponenten, Implementieren von Layouts, Erfüllen von WCAG-Barrierefreiheitsanforderungen, Verwalten von Zuständen oder wenn die Ausgabe produktionsreif und nicht KI-generiert wirken soll.

Strukturiert Git-Workflow-Praktiken. Verwenden bei jeder Codeänderung. Verwenden beim Committen, Branchen, Konfliktlösen oder wenn Arbeit über mehrere parallele Stränge organisiert werden muss. Verwenden beim Erstellen eines Releases, Wählen eines semantischen Versionssprungs, Taggens oder Schreibens eines Changelogs.

Verfeinert rohe Ideen zu scharfen, umsetzbaren Konzepten durch strukturiertes divergentes und konvergentes Denken. Verwenden, wenn eine Idee noch vage ist, wenn Sie Annahmen vor der Festlegung auf einen Plan belastbar testen müssen, oder wenn Sie Optionen erweitern möchten, bevor Sie sich auf eine konzentrieren. Wird durch "ideate", "refine this idea" oder "stress-test my plan" ausgelöst.

Liefert Änderungen inkrementell. Verwenden Sie dies bei der Implementierung von Funktionen oder Änderungen, die mehr als eine Datei betreffen. Verwenden Sie dies, wenn Sie gleich eine große Menge Code auf einmal schreiben oder wenn eine Aufgabe zu groß erscheint, um sie in einem Schritt abzuschließen.

Extrahiert, was der Benutzer tatsächlich will, anstatt was er denkt, dass er wollen sollte. Erreicht dies durch eine Frage-nach-Frage-Befragung, bis etwa 95% Sicherheit über die zugrundeliegende Absicht besteht. Verwenden, wenn eine Anfrage unterspezifiziert ist („baue mir X“ ohne „für wen“ oder „warum jetzt“), wenn der Benutzer explizit darauf verweist („interview mich“, „grill mich“, „sind wir sicher?“, „teste mein Denken“) oder wenn du dich dabei ertappst, stillschweigend mehrdeutige Anforderungen auszufüllen, bevor ein Plan, eine Spezifikation oder Code existiert.

Instrumentiert Code, sodass das Produktionsverhalten sichtbar und diagnostizierbar ist. Verwenden Sie dies beim Hinzufügen von Logging, Metriken, Tracing oder Alerting. Verwenden Sie dies beim Ausliefern einer Funktion, die in Produktion läuft, und Sie benötigen Nachweise, dass sie funktioniert. Verwenden Sie dies, wenn Produktionsprobleme gemeldet werden, Sie aber aus den verfügbaren Daten nicht erkennen können, was passiert ist.

Optimieren Sie die Web-Performance für schnellere Ladezeiten und eine bessere Benutzererfahrung. Verwenden Sie dies, wenn Sie aufgefordert werden, "meine Seite zu beschleunigen", "die Performance zu optimieren", "die Ladezeit zu reduzieren", "langsames Laden zu beheben", "die Seitengeschwindigkeit zu verbessern" oder ein "Performance-Audit" durchzuführen.

Optimiert die Anwendungsleistung über Frontend, Backend, Abfragen und Datenbanken hinweg. Verwenden Sie dies, wenn Leistungsanforderungen bestehen, wenn Sie Leistungsregressionen vermuten, wenn Core Web Vitals oder Ladezeiten verbessert werden müssen, wenn N+1-Abfragemuster behoben werden müssen oder wenn Profiling Engpässe aufdeckt.

Zerlegt Arbeit in geordnete Aufgaben. Verwenden Sie dies, wenn Sie eine Spezifikation oder klare Anforderungen haben und die Arbeit in umsetzbare Aufgaben unterteilen müssen. Verwenden Sie dies, wenn eine Aufgabe zu groß erscheint, um zu beginnen, wenn Sie den Umfang abschätzen müssen oder wenn parallele Arbeit möglich ist.

Härtet Code gegen Schwachstellen. Verwenden bei der Verarbeitung von Benutzereingaben, Authentifizierung, Datenspeicherung oder externen Integrationen. Verwenden beim Erstellen jeder Funktion, die nicht vertrauenswürdige Daten akzeptiert, Benutzersitzungen verwaltet oder mit Drittanbieterdiensten interagiert.

Optimieren Sie die Sichtbarkeit und das Ranking in Suchmaschinen. Verwenden Sie, wenn Sie aufgefordert werden, "SEO zu verbessern", "für die Suche zu optimieren", "Meta-Tags zu korrigieren", "strukturierte Daten hinzuzufügen", "Sitemap-Optimierung" oder "Suchmaschinenoptimierung" durchzuführen.

Bereitet Produktionslaunches vor. Verwenden Sie dies, wenn Sie sich auf die Bereitstellung in der Produktion vorbereiten. Verwenden Sie es, wenn Sie eine Pre-Launch-Checkliste benötigen, beim Einrichten von Monitoring, bei der Planung einer gestaffelten Einführung oder wenn Sie eine Rollback-Strategie benötigen.

Fundiert jede Implementierungsentscheidung mit offizieller Dokumentation. Verwenden Sie dies, wenn Sie autoritativen, quellzitierten Code ohne veraltete Muster wünschen. Verwenden Sie dies beim Erstellen mit einem Framework oder einer Bibliothek, bei dem Korrektheit wichtig ist.

Erstellt Spezifikationen vor dem Programmieren. Verwenden Sie dies, wenn Sie ein neues Projekt, eine Funktion oder eine wesentliche Änderung beginnen und noch keine Spezifikation existiert. Verwenden Sie dies, wenn Anforderungen unklar, mehrdeutig sind oder nur als vage Idee existieren.

Treibt die Entwicklung mit Tests voran. Verwenden Sie dies bei der Implementierung von Logik, der Behebung von Fehlern oder der Änderung von Verhalten. Verwenden Sie dies, wenn Sie nachweisen müssen, dass Code funktioniert, wenn ein Fehlerbericht eingeht oder wenn Sie vorhandene Funktionalität ändern möchten.

Entdeckt und ruft Agenten-Fähigkeiten auf. Verwenden Sie dies beim Start einer Sitzung oder wenn Sie herausfinden müssen, welche Fähigkeit für die aktuelle Aufgabe zutrifft. Dies ist die Meta-Fähigkeit, die bestimmt, wie alle anderen Fähigkeiten entdeckt und aufgerufen werden.

Umfassende Webqualitätsprüfung, die Leistung, Barrierefreiheit, SEO und Best Practices abdeckt. Verwenden Sie diese, wenn Sie aufgefordert werden, "meine Website zu prüfen", "Webqualität zu überprüfen", "einen Lighthouse-Audit durchzuführen", "Seitenqualität zu überprüfen" oder "meine Website zu optimieren".