Skills, Agents & Tools

Was kann der Skill?

Generiert distinctive, nicht-generische Frontend-UIs mit außergewöhnlicher Ästhetik. Vermeidet typische "AI-Slop"-Designs. Wählt ungewöhnliche Fonts, mutige Farbpaletten, kreative Layouts und überraschende Animationen.

Vorteile

• Jedes Design ist einzigartig — keine Cookie-Cutter-UIs
• Produktionsreifer Code (HTML/CSS/JS, React, Vue)
• Tiefe Ästhetik-Richtlinien für Typografie, Farbe, Motion

3 Anwendungsbeispiele

• "Erstelle eine Landing Page für mein SaaS-Produkt"
• "Designe ein Dashboard mit dunklem Theme und Glasmorphism"
• "Baue eine Portfolio-Seite mit brutalistischem Design"

Aktivierung

Automatisch wenn du nach Web-Komponenten, Seiten, Landing Pages, Dashboards oder UI-Design fragst.

Was kann der Skill?

Prüft UI-Code gegen 100+ Regeln: Accessibility (ARIA, semantisches HTML), Focus States, Formulare, Animationen, Typografie, Bilder, Performance, Navigation, Dark Mode, Touch-Interaktionen und i18n.

Vorteile

• Automatisches Audit nach Web-Best-Practices
• Deckt WCAG-Accessibility-Standards ab
• Erkennt Performance-Probleme und UX-Fehler

3 Anwendungsbeispiele

• "Review meine UI auf Accessibility-Probleme"
• "Prüfe ob meine Seite Dark Mode korrekt unterstützt"
• "Audit mein Formular auf UX-Best-Practices"

Aktivierung

Bei "Review my UI", "Check accessibility", "Audit design", "Review UX" oder ähnlichen Anfragen.

Was kann der Skill?

Erstellt Canvas-basierte Grafiken und Designs mit über 30 eingebetteten Schriftarten (von Outfit bis Silkscreen). Ideal für Poster, Infografiken und visuelle Inhalte.

Vorteile

• 30+ hochwertige Fonts direkt verfügbar (TTF-Dateien)
• Pixel-perfekte Canvas-Grafiken
• Keine externen Font-Services nötig

3 Anwendungsbeispiele

• "Erstelle ein Poster für mein Event"
• "Designe eine Infografik über Klimadaten"
• "Generiere Social-Media-Banner mit Canvas"

Aktivierung

Automatisch bei Canvas-basierten Design-Anfragen oder wenn spezielle Fonts benötigt werden.

Was kann der Skill?

Erzeugt algorithmische Kunst mit JavaScript — Fraktale, Perlin Noise, Partikelsysteme, geometrische Muster. Enthält Templates für Generator und Viewer.

3 Anwendungsbeispiele

• "Generiere ein Fraktal-Kunstwerk mit Perlin Noise"
• "Erstelle eine interaktive Partikel-Animation"
• "Baue generative geometrische Muster"

3 Anwendungsbeispiele

• "Erstelle Brand Guidelines für mein Startup"
• "Definiere Farbpalette und Typografie für meine Marke"
• "Baue ein Style Guide Dokument"

3 Anwendungsbeispiele

• "Erstelle ein Arctic Frost Theme für meine App"
• "Designe ein Midnight Galaxy Farbschema"
• "Generiere ein botanisches Theme mit Naturfarben"

3 Anwendungsbeispiele

• "Baue eine interaktive Datenvisualisierung"
• "Erstelle ein React-Widget mit shadcn Komponenten"
• "Generiere ein standalone Web-Tool als Artifact"

3 Anwendungsbeispiele

• "Erstelle ein animiertes Emoji-GIF für Slack"
• "Baue eine Lade-Animation als GIF"
• "Generiere ein Party-Parrot-Style GIF"

Was kann der Skill?

65 Regeln in 8 Kategorien: Waterfalls eliminieren, Bundle-Size optimieren, Server-Side Performance, Client-Side Data Fetching, Re-render Optimierung, Rendering Performance, JS-Performance und Advanced Patterns.

Vorteile

• Von Vercel Engineering — bewährte Production-Patterns
• Priorisiert nach Impact (CRITICAL → LOW)
• Konkrete Code-Beispiele für jede Regel

3 Anwendungsbeispiele

• "Optimiere meine Next.js Seite für bessere Performance"
• "Review meinen React-Code auf Bundle-Size-Probleme"
• "Refactore meine Data-Fetching-Logik"

Aktivierung

Automatisch beim Schreiben, Reviewen oder Refactoren von React/Next.js Code.

Was kann der Skill?

9 Regeln für skalierbare React-Architektur: Boolean-Props durch Composition ersetzen, Compound Components, State-Lifting, Provider-Pattern, React 19 APIs.

3 Anwendungsbeispiele

• "Refactore meine Komponente — sie hat zu viele Boolean Props"
• "Designe eine flexible Component-API für meine Library"
• "Migriere meine Komponenten auf React 19 Patterns"

Was kann der Skill?

31 Regeln in 8 Kategorien für mobile Apps: Listen-Performance (FlashList), Animationen (Reanimated), Navigation, UI-Patterns, State Management, Rendering, Monorepo und Konfiguration.

3 Anwendungsbeispiele

• "Optimiere meine FlatList — sie ruckelt beim Scrollen"
• "Implementiere eine flüssige Swipe-Animation"
• "Richte ein Monorepo mit Expo und shared packages ein"

Was kann der Skill?

Erstellt und bearbeitet Word-Dokumente (.docx) mit vollem XML-Zugriff. Unterstützt Kommentare, Änderungsnachverfolgung (Redlining), Validierung gegen Office-Schemas.

3 Anwendungsbeispiele

• "Erstelle ein Vertragsdokument als .docx"
• "Füge Review-Kommentare zu diesem Word-Dokument hinzu"
• "Konvertiere meinen Markdown-Text in ein formatiertes Word-Dokument"

3 Anwendungsbeispiele

• "Fülle dieses PDF-Formular mit meinen Daten aus"
• "Erstelle eine PDF-Rechnung mit Logo und Tabellen"
• "Extrahiere alle Formularfelder aus dieser PDF"

3 Anwendungsbeispiele

• "Erstelle eine Investoren-Präsentation mit 10 Slides"
• "Bearbeite diese PowerPoint und ändere das Design"
• "Generiere Thumbnails meiner Präsentation"

3 Anwendungsbeispiele

• "Erstelle eine Excel-Tabelle mit Umsatzdaten und Diagrammen"
• "Berechne die Formeln in dieser Spreadsheet neu"
• "Konvertiere CSV-Daten in eine formatierte Excel-Datei"

3 Anwendungsbeispiele

• "Hilf mir diesen Blogpost zu überarbeiten"
• "Schreibe diesen Abschnitt meines Papers um"
• "Verbessere den Ton und die Klarheit meines Texts"

Was kann der Skill?

Extrahiert Text, Tabellen und Bilder aus komplexen PDFs, Word-Docs und Präsentationen. Nutzt KI-gestütztes Parsing mit OCR. Mehrere Tiers: fast, cost_effective, agentic, agentic_plus.

Vorteile

• Erkennt Tabellen und Charts die normale Parser übersehen
• OCR für gescannte Dokumente
• Strukturierte Ausgabe statt rohem Text

3 Anwendungsbeispiele

• "Extrahiere alle Tabellen aus diesem gescannten PDF"
• "Parse dieses komplexe Forschungspaper mit Diagrammen"
• "Konvertiere diese gescannte Rechnung in strukturierte Daten"

Voraussetzungen

LLAMA_CLOUD_API_KEY als Umgebungsvariable. Kostenloser Account unter cloud.llamaindex.ai

Was kann der Skill?

Lokales, schnelles Parsing von PDFs und Office-Dokumenten ohne API-Key. Weniger genau als llamaparse, aber sofort einsatzbereit und offline-fähig.

3 Anwendungsbeispiele

• "Extrahiere schnell den Text aus diesem PDF"
• "Parse dieses Word-Dokument lokal"
• "Konvertiere mehrere PDFs in Text ohne API-Kosten"

Was kann der Skill?

Führt dich durch einen strukturierten Design-Prozess: Kontext verstehen, Fragen stellen, 2-3 Ansätze vorschlagen, Design präsentieren und genehmigen lassen — BEVOR Code geschrieben wird.

Vorteile

• Verhindert verschwendete Arbeit durch voreiliges Coden
• Deckt Anforderungen und Edge-Cases auf
• Produziert ein klares Spec-Dokument

3 Anwendungsbeispiele

• "Ich will ein Notification-System bauen — lass uns brainstormen"
• "Hilf mir die Architektur für einen Chat-Service zu planen"
• "Ich brauche ein Feature — lass uns erst designen"

3 Anwendungsbeispiele

• "Erstelle einen Implementierungsplan aus meinem Spec-Dokument"
• "Plane die Schritte für dieses Feature mit TDD"
• "Zerlege dieses große Feature in kleinere Tasks"

3 Anwendungsbeispiele

• "Führe den Plan Schritt für Schritt aus"
• "Implementiere Task 3 aus unserem Plan"
• "Arbeite den Plan ab, aber frage mich bei jedem Schritt"

3 Anwendungsbeispiele

• "Implementiere den Plan mit Subagents"
• "Lass Subagents die einzelnen Tasks parallel abarbeiten"
• "Starte die automatische Implementierung mit Review"

3 Anwendungsbeispiele

• "Analysiere diese 3 Bereiche gleichzeitig"
• "Recherchiere parallel zu Frontend und Backend"
• "Teste mehrere Ansätze gleichzeitig"

3 Anwendungsbeispiele

• "Erstelle einen Worktree für dieses Feature"
• "Arbeite an zwei Features parallel ohne Branch-Wechsel"
• "Teste einen Fix in einem isolierten Worktree"

3 Anwendungsbeispiele

• "Feature ist fertig — schließe den Branch ab"
• "Erstelle einen PR für meinen Feature-Branch"
• "Merge diesen Branch und räume auf"

Was kann der Skill?

Erstellt und pflegt persistente Planungsdateien (task_plan.md, progress.md, findings.md) während der gesamten Entwicklung. Strukturiert komplexe Aufgaben in nachverfolgbare Schritte. Enthält Commands: /plan, /start, /status.

Vorteile

• Planung überlebt Session-Wechsel
• Fortschritt ist jederzeit nachvollziehbar
• Strukturierte Templates für Tasks und Findings

3 Anwendungsbeispiele

• "/plan — Erstelle einen strukturierten Plan für mein Feature"
• "/status — Zeige den aktuellen Fortschritt"
• "/start — Beginne mit der Umsetzung des Plans"

Aktivierung

Via /plan, /start, /status Commands oder automatisch bei komplexen Entwicklungsaufgaben.

Was kann der Skill?

Erzwingt echtes TDD: Kein Produktionscode ohne fehlschlagenden Test. Enthält Anti-Pattern-Referenz und Testing Best Practices.

3 Anwendungsbeispiele

• "Implementiere dieses Feature mit TDD"
• "Schreibe erst den Test, dann den Code"
• "Refactore mit der Red-Green-Refactor Methode"

Was kann der Skill?

Systematisches Debugging in 4 Phasen mit Techniken wie Root-Cause-Tracing, Defense-in-Depth und Condition-Based-Waiting. Enthält Shell-Scripts und Beispiele.

3 Anwendungsbeispiele

• "Mein Test schlägt sporadisch fehl — debugge systematisch"
• "Finde die Root-Cause für diesen Race-Condition-Bug"
• "Dieser Fehler tritt nur in Production auf — hilf mir debuggen"

3 Anwendungsbeispiele

• "Reviewe meinen Code bevor ich committe"
• "Lass einen Code-Review Agent über meine Änderungen schauen"
• "Prüfe meinen PR auf Bugs und Code-Qualität"

3 Anwendungsbeispiele

• "Bewerte das Review-Feedback objektiv"
• "Welche Punkte aus dem Review sind wirklich wichtig?"
• "Hilf mir auf die Review-Kommentare zu antworten"

3 Anwendungsbeispiele

• "Verifiziere dass alles funktioniert bevor du sagst es ist fertig"
• "Zeige mir Beweise dass der Fix funktioniert"
• "Teste die Änderung und zeig mir das Ergebnis"

3 Anwendungsbeispiele

• "Teste meine Web-App automatisiert mit Playwright"
• "Überprüfe ob das Login-Formular korrekt funktioniert"
• "Erstelle E2E-Tests für meinen Checkout-Flow"

Was kann der Skill?

Deployt jedes Projekt auf Vercel mit automatischer Framework-Erkennung (Next.js, Vite, Astro, etc.). Unterstützt Git-Push-Deploys, CLI-Deploys und No-Auth-Fallback mit Claim-URLs.

Vorteile

• Erkennt automatisch 40+ Frameworks
• Wählt die beste Deploy-Methode
• Preview-URLs sofort verfügbar

3 Anwendungsbeispiele

• "Deploy meine App auf Vercel"
• "Push das live und gib mir den Link"
• "Erstelle ein Preview-Deployment für diesen Branch"

Voraussetzungen

Vercel CLI: npm install -g vercel. Für authentifizierte Deploys: vercel login

Was kann der Skill?

Umfassende Referenz für die Claude API in Python, TypeScript, Go, Java, PHP, Ruby und C#. Enthält Beispiele für Streaming, Tool-Use, Batches, Files-API und Agent SDK Patterns.

3 Anwendungsbeispiele

• "Baue eine App die Claude API nutzt"
• "Implementiere Tool-Use mit dem Anthropic SDK"
• "Erstelle einen Agent mit dem Claude Agent SDK"

3 Anwendungsbeispiele

• "Baue einen MCP Server für meine Datenbank"
• "Erstelle einen MCP Server der meine REST API wrappet"
• "Evaluiere meinen MCP Server gegen Best Practices"

3 Anwendungsbeispiele

• "Baue eine MCP App die Slack integriert"
• "Erstelle einen MCP Server für GitHub Issues"
• "Bridge meine bestehende API als MCP Service"

3 Anwendungsbeispiele

• "Integriere einen MCP Server in mein Plugin"
• "Konfiguriere MCP Tools für mein Plugin"
• "Verbinde externe Services via MCP"

Was können die Skills?

Vollständiges Toolkit zum Erstellen von Claude Code Plugins: Plugin-Struktur verstehen, Agents/Commands/Hooks/Skills entwickeln, Settings konfigurieren.

3 Anwendungsbeispiele

• "Erstelle ein neues Claude Code Plugin"
• "Baue einen custom Agent für mein Projekt"
• "Entwickle einen Hook der bei jedem Commit läuft"

Was kann der Skill?

Browser-Automatisierung über CLI-Befehle statt MCP. Token-effizienter als der MCP-Server. Enthält Referenzen für Session-Management, Test-Generierung, Request-Mocking, Tracing und Video-Recording.

3 Anwendungsbeispiele

• "Teste meine Web-App im Browser"
• "Generiere Playwright-Tests aus meiner laufenden App"
• "Nimm ein Video meiner App-Interaktion auf"

Was kann der Skill?

Vollständiger programmatischer Zugriff auf Google NotebookLM. Erstellt Notebooks, fügt Quellen hinzu (URLs, YouTube, PDFs), generiert Podcasts, Videos, Quizze, Flashcards, Reports, Infografiken und mehr.

Vorteile

• Features die im Web-UI nicht verfügbar sind
• Batch-Downloads, Export als JSON/Markdown
• Automatisierte Research-to-Podcast Pipelines

3 Anwendungsbeispiele

• "Erstelle einen Podcast über dieses Thema"
• "Generiere Flashcards aus meinen Recherche-Quellen"
• "Fasse diese 5 URLs als NotebookLM Report zusammen"

Voraussetzungen

Python-Package notebooklm-py + Google Auth via notebooklm login

3 Anwendungsbeispiele

• Wird automatisch beim Session-Start geladen
• Hilft den passenden Skill für jede Aufgabe zu finden
• Koordiniert zwischen verschiedenen Skills

3 Anwendungsbeispiele

• "Verbessere meine CLAUDE.md"
• /revise-claude-md — Command zum Überarbeiten
• "Prüfe meine CLAUDE.md gegen Best Practices"

3 Anwendungsbeispiele

• "Erstelle einen neuen Skill für Datenbankmigrationen"
• "Evaluiere meinen Skill gegen Benchmarks"
• "Verbessere die Beschreibung meines Skills"

Übersicht

• writing-skills — Skills nach TDD-Methodik erstellen (superpowers)
• writing-rules — Hooks und Regeln schreiben (Hookify)
• claude-automation-recommender — Empfiehlt Automatisierungen
• internal-comms — Newsletter, FAQs, Updates verfassen
• math-olympiad — Mathe-Wettbewerb-Aufgaben lösen
• playground — Experimentier-Umgebung