--- title: "Anwendungsfall: Einzelner Skill" description: Detaillierte Anleitung für Einzeldomänen-Aufgaben in oh-my-agent — wann verwenden, Preflight-Checkliste, Prompt-Vorlage mit Erklärung, praxisnahe Beispiele für Frontend, Backend, Mobile und Datenbank, erwarteter Ausführungsablauf, Qualitäts-Gate-Checkliste und Eskalationssignale. --- # Einzelne Skill-Ausführung Einzelne Skill-Ausführung ist der schnelle Weg — ein Agent, eine Domäne, eine fokussierte Aufgabe. Kein Orchestrierungsaufwand, keine Multi-Agenten-Koordination. Der Skill aktiviert sich automatisch aus Ihrem natürlichsprachlichen Prompt. --- ## Wann einzelne Skills verwenden Verwenden Sie dies, wenn Ihre Aufgabe ALLE diese Kriterien erfüllt: - **Gehört einer Domäne** — die gesamte Aufgabe gehört zu Frontend, Backend, Mobile, Datenbank, Design, Infrastruktur oder einer anderen einzelnen Domäne - **In sich abgeschlossen** — keine domänenübergreifenden API-Vertragsänderungen, keine Backend-Änderungen für eine Frontend-Aufgabe nötig - **Klarer Umfang** — Sie wissen, wie das Ergebnis aussehen soll (eine Komponente, ein Endpunkt, ein Schema, eine Korrektur) - **Keine Koordination** — andere Agenten müssen nicht vorher oder nachher laufen **Beispiele für Einzelne-Skill-Aufgaben:** - Eine UI-Komponente erstellen - Einen API-Endpunkt hinzufügen - Einen Bug in einer Schicht beheben - Eine Datenbanktabelle entwerfen - Ein Terraform-Modul schreiben - Einen Satz i18n-Strings übersetzen - Einen Design-System-Abschnitt erstellen **Zu Multi-Agent wechseln** (`/work` oder `/orchestrate`) wenn: - UI-Arbeit einen neuen API-Vertrag braucht (Frontend + Backend) - Eine Korrektur sich über Schichten hinweg auswirkt (Debug + Implementierungsagenten) - Das Feature Frontend, Backend und Datenbank umfasst - Der Umfang nach der ersten Iteration über eine Domäne hinauswächst --- ## Preflight-Checkliste Beantworten Sie vor dem Prompt diese vier Fragen (sie entsprechen den vier Elementen der [Prompt-Struktur](/docs/core-concepts/skills)): | Element | Frage | Warum es wichtig ist | |---------|----------|----------------| | **Ziel** | Welches spezifische Artefakt soll erstellt oder geändert werden? | Verhindert Mehrdeutigkeit — "einen Button hinzufügen" vs. "ein Formular mit Validierung hinzufügen" | | **Kontext** | Welcher Stack, welches Framework und welche Konventionen gelten? | Agent erkennt aus Projektdateien, aber explizit ist besser | | **Einschränkungen** | Welche Regeln müssen eingehalten werden? (Stil, Sicherheit, Performance, Kompatibilität) | Ohne Einschränkungen verwenden Agenten Standards, die möglicherweise nicht zu Ihrem Projekt passen | | **Fertig wenn** | Welche Akzeptanzkriterien werden Sie prüfen? | Gibt dem Agenten ein Ziel und Ihnen eine Verifikationscheckliste | Fehlt ein Element in Ihrem Prompt, wird der Agent entweder: - **LOW-Unsicherheit:** Standards anwenden und Annahmen auflisten - **MEDIUM-Unsicherheit:** 2-3 Optionen präsentieren und mit der wahrscheinlichsten fortfahren - **HIGH-Unsicherheit:** Blockieren und Fragen stellen (wird keinen Code schreiben) --- ## Prompt-Vorlage ```text Build using . Constraints: . Acceptance criteria: 1) 2) 3) Add tests for: . ``` ### Vorlagenaufschlüsselung | Teil | Zweck | Beispiel | |------|---------|---------| | `Build ` | Das Ziel — was erstellt werden soll | "Build a user registration form component" | | `using ` | Der Kontext — Tech-Stack | "using React + TypeScript + Tailwind CSS" | | `Constraints:` | Regeln, die der Agent einhalten muss | "accessible labels, no external form libraries, client-side validation only" | | `Acceptance criteria:` | Fertig wenn — verifizierbare Ergebnisse | "1) email format validation 2) password strength indicator 3) submit disabled while invalid" | | `Add tests for:` | Testanforderungen | "valid/invalid submit paths, edge cases for email validation" | --- ## Praxisbeispiele ### Frontend: Login-Formular ```text Create a login form component in React + TypeScript + Tailwind CSS. Constraints: accessible labels, client-side validation with Zod, no external form library beyond @tanstack/react-form, shadcn/ui Button and Input components. Acceptance criteria: 1) Email validation with meaningful error messages 2) Password minimum 8 characters with feedback 3) Disabled submit button while form is invalid 4) Keyboard and screen-reader friendly (ARIA labels, focus management) 5) Loading state while submitting Add unit tests for: valid submission path, invalid email, short password, loading state. ``` **Erwarteter Ausführungsablauf:** 1. **Skill-Aktivierung:** `oma-frontend` aktiviert sich (Keywords: "form", "component", "Tailwind CSS", "React") 2. **Schwierigkeitsbewertung:** Mittel (2-3 Dateien, einige Designentscheidungen zur Validierungs-UX) 3. **Geladene Ressourcen:** - `execution-protocol.md` (immer) - `snippets.md` (Formular- + Zod-Muster) - `component-template.tsx` (React-Struktur) 4. **CHARTER_CHECK-Ausgabe:** ``` CHARTER_CHECK: - Clarification level: LOW - Task domain: frontend - Must NOT do: backend API, database, mobile screens - Success criteria: form validation, accessibility, loading state, tests - Assumptions: Next.js App Router, @tanstack/react-form + Zod, shadcn/ui, FSD-lite architecture ``` 5. **Implementierung:** - Erstellt `src/features/auth/components/login-form.tsx` (Client Component mit `"use client"`) - Erstellt `src/features/auth/utils/login-schema.ts` (Zod-Schema) - Erstellt `src/features/auth/components/skeleton/login-form-skeleton.tsx` - Verwendet shadcn/ui `