UI UX Pro Max Skill
Skill Verifiziert AktivErstellen Sie schöne, zugängliche Benutzeroberflächen mit shadcn/ui-Komponenten (basierend auf Radix UI + Tailwind), Utility-First-Styling mit Tailwind CSS und canvasbasierten visuellen Designs. Verwenden Sie dies beim Erstellen von Benutzeroberflächen, Implementieren von Designsystemen, Erstellen responsiver Layouts, Hinzufügen zugänglicher Komponenten (Dialoge, Dropdowns, Formulare, Tabellen), Anpassen von Themes und Farben, Implementieren des Dark Mode, Generieren visueller Designs und Poster oder Herstellen konsistenter Styling-Muster über Anwendungen hinweg.
Entwicklern zu ermöglichen, schöne, zugängliche und konsistente Benutzeroberflächen effizient zu erstellen, indem sie branchenübliche Tools wie shadcn/ui und Tailwind CSS nutzen.
Funktionen
- Generiert branchenspezifische Designsysteme
- Unterstützt 67 UI-Stile und 161 Farbpaletten
- Bietet stackspezifische Anleitungen für 15 Tech-Stacks
- Enthält detaillierte Komponentenbeispiele und Anpassungsoptionen
- Bietet 99 UX-Richtlinien und Best Practices
Anwendungsfälle
- Erstellen von Benutzeroberflächen mit React-basierten Frameworks
- Implementieren zugänglicher Komponenten
- Styling mit Utility-First-CSS
- Erstellen responsiver, Mobile-First-Layouts
- Generieren visueller Designs und Poster
Nicht-Ziele
- Bereitstellung von Backend-Logik oder Datenmanagement
- Ersetzen von Full-Stack-Entwicklungswerkzeugen
- Anbieten von Grafikdesign-Dienstleistungen außerhalb von UI-Komponenten
Praktiken
- Komponentenkomposition
- Utility-First-Styling
- Mobile-First-Responsive Design
- Accessibility-First
- Design-Tokens
- Dark-Mode-Konsistenz
- TypeScript
- Visuelle Hierarchie
- Handwerkliche Exzellenz
Voraussetzungen
- Python 3.x
- Node.js 18+
- npm
Installation
npx skills add nextlevelbuilder/ui-ux-pro-max-skillFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Shadcn/ui Component Library
99shadcn/ui component library for React with Tailwind CSS - copy-paste accessible components with full code ownership
Shadcn Ui
98Expertenanleitung für die Integration und Erstellung von Anwendungen mit shadcn/ui-Komponenten, einschließlich Komponentenfindung, Installation, Anpassung und Best Practices.
UI Styling Skill
95Style UIs with shadcn/ui components (Radix UI + Tailwind CSS). Use for accessible components, themes, dark mode, responsive layouts, design systems, color customization.
Figma Generate Library
100Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.
Refactor Plan
100Prioritized redesign action plan covering quick wins, medium effort, major rework
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.