deveshpunjabi/modern-frontend-skill

Was macht modern-frontend-skill?

Eine Fähigkeit für Coding-Agenten, die vage UI-Anfragen in ausgefeilte, produktionsreife Frontends verwandelt.

Beschreibung

Dieser Skill ermöglicht es KI-Coding-Assistenten (wie Claude Code, Cursor, Codex), aus unkonkreten oder vagen UI-Beschreibungen direkt ein vollständiges, modernes und produktionsreifes Frontend zu generieren. Der Skill interpretiert die Benutzerabsicht, wählt geeignete Technologien (z. B. React, Vue, Tailwind CSS) aus und erzeugt eine saubere, gut strukturierte Codebasis.

Hauptfunktionen

• Anforderungsinterpretation: Versteht und präzisiert vage UI-Beschreibungen (z. B. "Ein modernes Dashboard für Verkaufsdaten").
• Komponenten-Generierung: Erstellt wiederverwendbare UI-Komponenten mit Zuständigkeitsbereichen.
• Responsives Design: Implementiert mobilfreundliche Layouts mit CSS-Grid, Flexbox oder Tailwind.
• Barrierefreiheit: Fügt automatisch ARIA-Attribute und semantisches HTML hinzu.
• Produktionsreife Optimierung: Generiert TypeScript, Tests (Jest/Vitest) und Linting-Konfiguration (ESLint).

Verwendung

Der Skill wird aktiviert, wenn ein Benutzer eine UI-bezogene Anfrage stellt. Der Agent verwendet dann die folgenden Schritte:

1. Extrahiere die Kernanforderungen aus der Benutzereingabe.
2. Wähle ein geeignetes Frontend-Framework (standardmäßig React, es sei denn, der Benutzer gibt ein anderes an).
3. Erstelle eine Projektstruktur mit Ordnern für Komponenten, Styles und Tests.
4. Implementiere jede UI-Komponente als separate Datei mit korrektem Styling und Props.
5. Füge optionale Animationen und Übergänge hinzu.
6. Stelle sicher, dass der gesamte Code den Best Practices entspricht.

Beispiel

Benutzereingabe: "Erstelle mir eine Landingpage für einen SaaS-Dienst mit einem Hero-Bereich, Funktionen und einem Preisvergleich."

Agent-Ausgabe:

LandingPage/
├── components/
│   ├── Hero.tsx
│   ├── Features.tsx
│   └── Pricing.tsx
├── App.tsx
├── tailwind.config.js
└── README.md

Konfiguration

Diese Fähigkeit benötigt keine spezielle Einrichtung – sie funktioniert out-of-the-box mit jedem Coding-Agenten, der SKILL.md unterstützt. Sie kann jedoch durch das Setzen von Umgebungsvariablen angepasst werden:

• UI_FRAMEWORK: Bevorzugtes Framework (z. B. react, vue, svelte). Standard: react
• UI_STYLING: Bevorzugte Styling-Methode (z. B. tailwind, css-modules, styled-components). Standard: tailwind

Einschränkungen

• Der Skill generiert statische oder client-seitige Frontends; serverseitige Logik (APIs, Datenbanken) muss separat implementiert werden.
• Komplexe UI-Animationen erfordern möglicherweise manuelle Anpassung.
• Barrierefreiheit wird automatisch hinzugefügt, sollte aber für spezifische Anforderungen manuell überprüft werden.

Kompatibilität

Getestet mit:

• Claude Code
• Cursor
• GitHub Copilot Chat
• Codex CLI

Lizenz

MIT