Prompts per Hand müde? Claude Code Skills verdreifachen die Effizienz

Eine echte Geschichte

Im Oktober letzten Jahrs stand ich vor einem React-Refactoring: eine God-Class mit über 2.000 Zeilen – allein der Anblick war demotivierend. Jedes Mal, wenn ich Claude Code zur Code-Optimierung bat, musste ich wiederholen:

• „TypeScript im Strict Mode“
• „API-Calls mit Fehlerbehandlung“
• „Komponenten nach Single Responsibility“

Copy-Paste dieser Anforderungen kostete jedes Mal zwei bis drei Minuten. Noch ärgerlicher: Nach einem Dutzend Runden „vergaß“ Claude Code oft die ursprünglichen Vorgaben und lieferte wieder Code außerhalb der Konventionen.

Dann stieß ich in der Doku auf die Skill-Funktion.

Nach einer Woche Test hatte ich die wiederkehrenden Anforderungen in Skill-Dateien gepackt. Heute reicht @skill react-refactor – Claude Code weiß sofort, was zu tun ist. Die 2.000-Zeilen-Klasse: ursprünglich drei Tage geschätzt, in zwei Nachmittagen erledigt.

Was sind Skills?

Kurz gesagt: Skills sind Skill-Pakete für Claude Code.

Sie legen eine Markdown-Datei unter .claude/skills/ an, packen häufige Prompts, Workflows und Code-Standards hinein – und rufen sie mit @skill skill-name auf. Wie Skills in einem Spiel: für Output offensive Skills, für Verteidigung defensive.

Ein minimales Beispiel:

---

title: "React-Code-Review-Experte"
description: "Review von React-Code zu Qualität, Performance und Best Practices"

---

# React-Code-Review-Ablauf
Sie sind ein erfahrener React-Code-Review-Experte. Prüfen Sie Code nach diesen Kriterien:
## Schwerpunkte
1. **Komponenten-Design**
   - Single Responsibility
   - Vollständigkeit der Props-Typen
   - Sinnvolle Komponenten-Aufteilung
2. **Performance**
   - Unnötige Re-Renders
   - Nutzung von useMemo/useCallback
   - Keys bei Listen-Rendering
3. **Code-Qualität**
   - TypeScript-Typsicherheit
   - Error Boundaries
   - Barrierefreiheit (a11y)
## Ausgabeformat
- Problemliste (nach Schwere sortiert)
- Konkrete Code-Vorschläge
- Priorität (P0/P1/P2)

Datei als .claude/skills/react-review.md speichern – beim React-Review reicht @skill react-review. Claude Code folgt Ihren definierten Standards.

Warum handgeschriebene Prompts nicht mehr reichen

Ich war Prompt-Engineer mit Dutzenden ausgefeilter Vorlagen in Notion. Nach Monaten zeigten sich harte Grenzen:

Zu viel Wiederholarbeit

Jeden Tag Copy-Paste aus Notion, oft noch projektspezifische Anpassungen. Allein das Prompt-Kopieren fraß leicht eine halbe Stunde pro Tag.

Chaotisches Versionsmanagement

Vultr - Hochleistungs-NVMe-Cloud-Server mit 32 Standorten weltweit, Docker per Klick

Preise ansehen →Anzeige

Heute ein Prompt, letzte Woche ein anderer – instabile Ergebnisse. Die „gute Version von damals“? Weg.

Team-Kollaboration als Albtraum

Gute Prompts per WeChat teilen, Verbesserungen manuell zurücksyncen – Steinzeit-Effizienz.

KI vergisst

In langen Chats verliert Claude Code frühe Vorgaben. In Runde 20 wiederholen sich alte Fehler.

Skills lösen das gebündelt:

• Versionierung: Git, Rollback jederzeit
• Teilen: Team-Repo pullen, alle synchron
• Konstant wirksam: auch in langen Dialogen

"Der Kernwert von Skills ist Wiederverwendbarkeit und Konsistenz – Prompt-Engineering wird zu wartbarem, teilbarem Projekt-Asset."

Mein erster Skill: API-Schnittstellen-Generator

In einem E-Commerce-Projekt lieferte das Backend eine Swagger-Doku mit über 100 Endpunkten. Manuell pro Endpunkt:

1. TypeScript-Typen
2. axios-Request-Funktion
3. Fehlerbehandlung
4. Loading-State

Grober Aufwand: ~30 Stunden für 100 APIs.

Eine Stunde für den Skill api-generator:

---

title: "API-Schnittstellen-Code-Generator"
description: "TS-Typen und axios-Wrapper aus API-Dokumentation"
version: "1.3.0"

---

# API-Code-Generator-Experte
Sie sind Full-Stack-Engineer mit Fokus auf Frontend-Backend-Anbindung. Erzeugen Sie hochwertigen TypeScript-Code aus der API-Doku.
## Ausgabe
### 1. TypeScript-Typen
```typescript
// Request-Typ
interface GetUserRequest {
  userId: string;
  includeDetails?: boolean;
}
// Response-Typ
interface GetUserResponse {
  id: string;
  name: string;
  email: string;
  createdAt: string;
}

2. Axios-Request-Funktion

import request from '@/utils/request';
export const getUserAPI = async (
  params: GetUserRequest
): Promise<GetUserResponse> => {
  try {
    const response = await request.get<GetUserResponse>('/api/user', { params });
    return response.data;
  } catch (error) {
    console.error('Benutzerabruf fehlgeschlagen:', error);
    throw error;
  }
};

3. React-Hook (optional)

export const useGetUser = (userId: string) => {
  const [data, setData] = useState<GetUserResponse | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const result = await getUserAPI({ userId });
        setData(result);
      } catch (err) {
        setError(err as Error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [userId]);
  return { data, loading, error };
};

Code-Konventionen

• camelCase für Namen
• API-Funktionen enden auf API
• Hooks beginnen mit use
• Async-Funktionen mit Fehlerbehandlung
• Exportierte Typen und Funktionen mit JSDoc

Ausgabeformat

1. Zuerst Typdefinitionen
2. Dann API-Funktionen
3. Bei häufigen APIs optional Hook
4. Abschließend Nutzungsbeispiel

Mit dem Skill: ein Endpunkt von 30 auf 5 Minuten. 100 APIs in zwei Tagen. Noch wichtiger: Neue im Team nutzen dieselben Konventionen – einheitlicher Stil im Projekt.

## Fortgeschritten: Skills im Verbund

Einzelne Skills reichen oft nicht – reale Arbeit braucht mehrere.

Standard-Refactoring-Ablauf:

```bash
# Schritt 1: Code analysieren
@skill code-analyzer src/legacy/UserService.ts
# Schritt 2: Refactoring-Plan
@skill refactor-planner
# Schritt 3: Tests (Sicherheitsnetz vor dem Refactoring)
@skill test-generator
# Schritt 4: Refactoring ausführen
# (manuell oder mit Claude Code)
# Schritt 5: Finaler Review
@skill code-reviewer

Vier Skills in Folge – kompletter Refactoring-Workflow. Optional automatisiert:

#!/bin/bash
# refactor-workflow.sh
echo "🔍 Schritt 1/4: Code analysieren..."
claude-code @skill code-analyzer $1
read -p "Enter für weiter..."
echo "📋 Schritt 2/4: Refactoring-Plan..."
claude-code @skill refactor-planner
read -p "Enter für weiter..."
echo "🧪 Schritt 3/4: Tests generieren..."
claude-code @skill test-generator
read -p "Tests grün? Enter für weiter..."
echo "✅ Schritt 4/4: Finaler Review..."
claude-code @skill code-reviewer

Damit eine 2.000-Zeilen-God-Class in sieben klar getrennte Klassen – Test-Coverage von 40 % auf 85 %.

Team-Sharing: Skills als Infrastruktur

Wir verwalten Skills wie Infrastruktur in einem Git-Repo team-skills:

team-skills/
├── frontend/
│   ├── react-review.md          # React-Code-Review
│   ├── vue-component-gen.md     # Vue-Komponenten
│   └── css-optimizer.md         # CSS-Performance
├── backend/
│   ├── api-design.md            # API-Design
│   ├── database-review.md       # Datenbank-Review
│   └── security-audit.md        # Security-Audit
└── common/
    ├── code-cleaner.md          # Code-Bereinigung
    ├── test-generator.md        # Test-Generator
    └── commit-msg.md            # Git-Commit-Messages

Lokales Projekt per Symlink:

# Einmalige Einrichtung
git clone [email protected]:your-team/team-skills.git ~/.team-skills
ln -s ~/.team-skills/* .claude/skills/

Effekte:

• Onboarding: Tag eins volle Skill-Bibliothek, Code nach Standard
• Sync: git pull holt Updates für alle
• Einheitlicher Stil unabhängig vom Autor

Ein Praktikant schrieb am zweiten Tag konformen Code – früher eine Woche Einarbeitung.

Skills und CLAUDE.md – ideale Kombination

Noch stärker mit CLAUDE.md im Projektroot.

Globale Regeln in CLAUDE.md:

KiloClaw - Managed OpenClaw für Unternehmen: AI-Agent-Orchestrierung und smartes Modell-Routing

Jetzt starten →Anzeige

# Projektkontext
- Stack: React 18 + TypeScript 5.0 + Vite 4
- Lint: Airbnb ESLint
- Commits: Conventional Commits
- State: Zustand (kein Redux)
## Wichtige Konventionen
- Vollständige TS-Typen in allen Komponenten
- API-Calls nur über src/utils/request.ts
- Komponenten: PascalCase (z. B. UserProfile.tsx)
- Utils: camelCase (z. B. formatDate.ts)
## Verzeichnisstruktur
src/
├── components/    # Shared Components
├── pages/        # Seiten
├── hooks/        # Custom Hooks
├── utils/        # Hilfsfunktionen
├── services/     # API-Services
└── stores/       # Zustand-Stores

Skill referenziert die Regeln:

---

title: "React-Komponenten-Generator"

---

# Komponenten-Anweisung
Erzeugen Sie React-Komponenten strikt nach Stack, Verzeichnis und Naming in CLAUDE.md.
Komponenten müssen:
- TypeScript nutzen
- ESLint des Projekts erfüllen
- im richtigen Verzeichnis liegen
- das vereinbarte State-Management nutzen

Der Skill liest CLAUDE.md mit – neues Repo klonen, Skills passen sofort.

Meine fünf Must-have-Skills

Nach einem halben Jahr: über 20 Skills. Die häufigsten:

1. Test-Generator (test-gen.md)

Nach Features fehlt oft Zeit für Tests. Der Skill analysiert Logik und erzeugt Unit-Tests inkl. Grenzfälle und Exceptions.

Effekt: Coverage von 40 % auf 85 %, etwa halbe Zeit für Test-Schreiben.

2. Git-Commit-Message-Generator (commit-msg.md)

Commit-Messages kosten Nerven. Der Skill liest git diff und liefert Conventional Commits.

Beispiel:

feat(user-auth): OAuth2.0-Login hinzugefügt
- Google- und GitHub-Login integriert
- JWT-Token-Refresh
- Berechtigungs-Middleware ergänzt
Closes #123

Nur ~30 Zeilen Skill – täglich im Einsatz, Stunden gespart.

3. Refactoring-Assistent (refactor.md)

Bei Legacy-Code:

• Code-Smells erkennen
• Prioritäten sortieren
• Schritt-für-Schritt-Plan
• Funktionsgleichheit sichern

Die 2.000-Zeilen-God-Class ging so runter.

4. Security-Audit (security-audit.md)

Prüft u. a.:

• SQL-Injection
• XSS-Schutz
• Datenlecks
• Berechtigungen

Vor einem Release: drei kritische Lücken gefunden – Glück gehabt.

5. Dokumentations-Generator (doc-gen.md)

API-Docs aus Code, Markdown aus Kommentaren, Changelog pflegen.

Doku von zwei Stunden auf zehn Minuten – kein „Code geändert, Doku vergessen“ mehr.

Fünf Tipps für gute Skills

1. Frontmatter ernst nehmen

title und description erscheinen in der Skill-Liste:

---

title: "Full-Stack-Code-Review-Experte"
description: "Review von Frontend und Backend: Security, Performance, Wartbarkeit"
version: "2.1.0"
tags: ["Code-Review", "Security", "Performance"]

---

version für Versionskontrolle, tags zum Filtern.

Alibaba Cloud - Top-Wahl für Entwickler, exklusiv 15 % Rabatt auf Lighthouse-Server

15 % Rabatt sichern →Anzeige

2. Klare Rollendefinition

„Sie sind … Experte mit X Jahren Erfahrung“ bringt Claude Code schnell in die Rolle – besser als nur „bitte Code prüfen“.

3. Gegenbeispiele nutzen

✅/❌-Vergleiche helfen dem Modell:

### SQL-Injection-Risiko
❌ Unsicher:
```javascript
const query = `SELECT * FROM users WHERE id = ${userId}`;

✅ Sicher:

const query = 'SELECT * FROM users WHERE id = ?';
db.query(query, [userId]);

### 4. Konkretes Ausgabeformat

Nicht „geben Sie Empfehlungen“, sondern:

```markdown
## Ausgabeformat
### 🔴 Kritisch (sofort beheben)
- [Datei:Zeile] Beschreibung
- Risiko
- Fix mit Code-Beispiel
### 🟡 Empfohlen
- [Datei:Zeile] Beschreibung
- Begründung
- Optimierung

5. Fehlerregeln definieren

## Fehlerbehandlung
Bei:
- Syntaxfehler: Position nennen, Review abbrechen
- Datei nicht lesbar: Pfad prüfen lassen
- Code >5000 Zeilen: Batch-Review vorschlagen

Häufige Fragen

Zu viele Skill-Namen?

Namenskonvention:

• review-*: Reviews
• gen-*: Generierung
• util-*: Utilities
• fix-*: Fixes

Beispiele: review-frontend.md, gen-api.md, util-commit.md

Ausgabe zu lang?

Kurzmodus im Skill:

Standard: ausführlich. Mit `--brief` nur:
- Problemliste (eine Zeile pro Punkt)
- Schweregrad
- wichtigste Fixes

Skills wirken projektübergreifend unterschiedlich?

Kontext vorab anfordern:

## Vor der Analyse
1. package.json (Dependencies)
2. tsconfig.json
3. .eslintrc
4. README.md (Architektur)

Zum Schluss

Nach einem halben Jahr Skills: mindestens 40 % mehr Effizienz. Wiederkehrende Denkarbeit entfällt – mehr Zeit für Architektur und Fachlogik.

Wenn Sie noch Prompts von Hand tippen:

1. Heute starten – ein einfacher Skill (Review oder Tests)
2. Iterieren – nach jedem Einsatz verbessern
3. Im Team teilen – gute Skills wie gute Libraries
4. Doku folgen – neue Features können Patterns ändern

Der Wert liegt nicht in der Komplexität, sondern im echten Problem. Mein kleinster commit-msg-Skill: 30 Zeilen, täglich, Stunden gespart.

Packen Sie Ihre täglichen Copy-Paste-Prompts in Skills – in drei Monaten werden Sie es danken.

Ressourcen

• Claude Code Dokumentation
• Skill Best Practices
• Community Skill-Vorlagen