ui-stylingvon nextlevelbuilder

UI Styling Skill.

Ein Claude Code- und Codex-Skill für UI-Design: barrierefreies UI-Styling mit shadcn/ui, Tailwind CSS und canvas-basierten Visuals.

Web & UI
UI-Code

OpenDesign herunterladen Anleitung ansehen

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 10.626 Zeichen insgesamt

01 Was es tut

Was der ui-styling Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill erstellt barrierefreie React-Benutzeroberflächen durch die Kombination von shadcn/ui-Komponenten (Radix UI-Primitiven mit Tailwind CSS), Utility-First-Styling mit Tailwind CSS und Canvas-basierten visuellen Design-Systemen. Er richtet sich an Next.js-, Vite-, Remix- und Astro-Projekte. Komponenten werden über die CLI in Ihre Codebasis kopiert, was Ihnen volle Kontrolle und TypeScript-Typsicherheit gibt.

Der Skill umfasst responsive Layouts, Dark Mode, Design-Tokens, Formularvalidierung, Datentabellen und Bildkompositionen in Museumsqualität. Er enthält Referenzdokumentation zu Komponentenmustern, Theming, Barrierefreiheit (ARIA, Tastaturnavigation), responsiven Breakpoints und Tailwind-Anpassungen. Python-Skripte automatisieren die Komponenteninstallation und Konfigurationsgenerierung.

Was er erzeugt

tailwind.config.js wird mit benutzerdefinierten Theme-Tokens, Farben, Schriften, Abständen und Breakpoint-Erweiterungen generiert.

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Shadcn/ui mit Tailwind initialisieren
Führen Sie npx shadcn@latest init aus, um sowohl shadcn/ui als auch Tailwind CSS zu konfigurieren. Dabei werden Sie nach Framework, TypeScript, Pfaden und Theme-Einstellungen gefragt.
02
Komponenten zu Ihrer Codebasis hinzufügen
Installieren Sie Komponenten mit npx shadcn@latest add button card dialog form, wodurch diese für volle Kontrolle und Anpassung in Ihr Projekt kopiert werden.
03
Mit Utility-Klassen komponieren
Kombinieren Sie shadcn/ui-Komponenten mit Tailwind-Utility-Klassen für responsive Layouts, Abstände, Farben und Hover-Zustände direkt in JSX-className-Attributen.
04
Dark-Mode-Varianten anwenden
Verwenden Sie next-themes für den Theme-Wechsel und fügen Sie allen thematisierten Elementen mit dark: versehene Utility-Klassen für durchgängige Dark-Mode-Unterstützung hinzu.
05
Radix-Barrierefreiheit nutzen
Radix UI-Primitiven bieten integrierte ARIA-Muster, Tastaturnavigation und Fokusverwaltung ohne zusätzliche Konfiguration.

02 Finden Sie Ihren Favoriten

Wann Sie den ui-styling Skill verwenden

Verwenden Sie den ui-styling Skill in Claude Code oder Codex, wenn die Aufgabe UI-Design dieser Art ist. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Erstellen von UI mit React-basierten Frameworks wie Next.js, Vite, Remix oder Astro.
Implementieren barrierefreier Komponenten wie Dialoge, Formulare, Tabellen und Navigation.
Erstellen responsiver, Mobile-First-Layouts mit Utility-First-CSS-Ansatz.
Erstellen von Design-Systemen mit konsistenten Tokens und Dark-Mode-Unterstützung.
Erstellen visueller Designs, Poster oder Markenmaterialien mit Canvas-basierten Workflows.

Grenzen kennen

Benötigt shadcn/ui, Tailwind CSSDie SKILL.md nennt diese Abhängigkeit; das Skill funktioniert ohne sie in Ihrem Projekt nicht.

Was Sie bereitstellen sollten

Komponentennamen für die InstallationÜbergeben Sie Komponentennamen an shadcn_add.py oder npx shadcn@latest add, um mit Abhängigkeitsbehandlung zu installieren.
Benutzerdefinierte Theme-TokensGeben Sie tailwind_config_gen.py benutzerdefinierte Farben und Schriften an, um tailwind.config.js mit erweitertem Theme zu generieren.

03 Innerhalb des Skills

Regeln, die der ui-styling Skill Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Mobile-First Responsive
Beginnen Sie mit mobilen Stilen und schichten Sie responsive Varianten mit Breakpoints (sm, md, lg, xl, 2xl). Tailwind verarbeitet standardmäßig mobile-first.
Utility-first-Extraktion
Verwenden Sie Tailwind-Klassen direkt in JSX. Extrahieren Sie Komponenten nur bei echter Wiederholung, nicht für einmalig genutzte Muster.
Skript-Pfade relativ zum Skill-Verzeichnis
Skript-Pfade in diesem Skill sind relativ zum Verzeichnis, das SKILL.md enthält, nicht zum Projekt-Root.
Accessibility-first Komponentennutzung
Nutzen Sie Radix-UI-Primitive für ARIA-Muster, fügen Sie Fokuszustände zu interaktiven Elementen hinzu und verwenden Sie semantisches HTML. Screenreader-Unterstützung ist bereits in shadcn/ui-Komponenten integriert.
Design Tokens für Konsistenz
Verwenden Sie eine konsistente Abstandsskala, Farbpaletten und ein Typografiesystem, die in der Tailwind-Konfiguration definiert sind. Wenden Sie Theme-Variablen an, statt beliebige Werte zu nutzen.
TypeScript-Typsicherheit
Alle Komponenten sind TypeScript-first mit vollständiger Typsicherheit. Verwenden Sie typisierte Props und Form-Schemas für eine bessere Entwicklererfahrung.
Dynamische Klassennamen vermeiden
Das automatische CSS-Purging von Tailwind erfordert statische Klassennamen. Dynamische Klassenerzeugung verhindert die Dead-Code-Eliminierung.
Anspruch an Handwerkskunst
Jedes Detail zählt – behandeln Sie UI als Handwerk. Wenden Sie eine Ausführung in Museumsqualität auf visuelle Kompositionen an, mit systematischen Mustern und verfeinerter Ästhetik.

04 In Betrieb nehmen

ui-styling in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

ui-styling zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Generische skills-CLI-Form für .claude/skills/ui-styling/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Dem Skill eine erste UI-Design-Aufgabe geben

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Testen Sie responsive Breakpoints bei sm, md, lg, xl und 2xl, um sicherzustellen, dass sich das mobile-first-Layout korrekt anpasst.
Prüfen Sie die Barrierefreiheit, indem Sie Tastaturnavigation, Fokusverwaltung und Screenreader-Ansagen bei Dialogen und Formularen testen.
Überprüfen Sie die Formularvalidierung mit react-hook-form und dem zod-Resolver, um sicherzustellen, dass Fehlermeldungen korrekt angezeigt werden.

In OpenDesign importieren Sie ui-styling über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branch main
Skill-Datei: .claude/skills/ui-styling/SKILL.md Inhaltsprüfsumme bei Verifikation erfasst; Commit 7f69fed
License: Apache-2.0 Aus .claude/skills/ui-styling/LICENSE.txt; SKILL.md sagt „MIT". Die Datei-Ebene LICENSE.txt sagt Apache-2.0, während das Front Matter MIT sagt; gelistet nach der Datei-Ebene-Lizenz.
Repository-Sterne: 127.450 GitHub-Snapshot vom 14.09.2026 für das gesamte nextlevelbuilder/ui-ux-pro-max-skill Repository, das 7 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für ui-styling.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Wann dieser Skill verwendet wirdListet Szenarien auf: React-Frameworks, barrierefreie Komponenten, responsive Layouts, Dark Mode, Design-Systeme, visuelle Designs.
Kern-StackBeschreibt shadcn/ui-Komponenten, Tailwind-Utility-Styling und visuelle Design-Ebenen auf dem Canvas.
Skript-PfadeErklärt, dass Skript-Pfade relativ zum Skill-Verzeichnis sind, nicht zum Projekt-Root.
SchnellstartZeigt shadcn/ui-Init, Komponenteninstallation und ein reines Tailwind-Setup für Vite.
Leitfaden zur KomponentenbibliothekVerweist auf shadcn-components.md, die Formulare, Layouts, Overlays, Feedback- und Anzeigekomponenten abdeckt.
Theme & AnpassungVerweist auf shadcn-theming.md für Dark Mode, CSS-Variablen, Farben und Komponentenvarianten.
BarrierefreiheitsmusterVerweist auf shadcn-accessibility.md für ARIA, Tastaturnavigation, Fokusverwaltung und Screenreader.
Tailwind-UtilitiesVerweist auf tailwind-utilities.md für Layout, Abstände, Typografie, Farben, Rahmen und Schatten.
Responsive DesignVerweist auf tailwind-responsive.md für Mobile-First-Breakpoints und responsive Utility-Muster.
Tailwind-AnpassungVerweist auf tailwind-customization.md für Konfigurationsstruktur, benutzerdefinierte Utilities, Plugins und Theme-Erweiterungen.
Visuelles DesignsystemVerweist auf canvas-design-system.md für Designphilosophie, visuelle Kommunikation und anspruchsvolle Kompositionen.
Utility-SkripteBeschreibt shadcn_add.py für die Komponenteninstallation und tailwind_config_gen.py für die Konfigurationsgenerierung.

Die eigene Beschreibung des Skills

„Erstellen Sie schöne, barrierefreie Benutzeroberflächen mit shadcn/ui-Komponenten (basierend auf Radix UI + Tailwind), Tailwind CSS Utility-First-Styling und canvas-basierten visuellen Designs. Verwenden Sie diesen Skill beim Erstellen von Benutzeroberflächen, Implementieren von Design-Systemen, Erstellen responsiver Layouts, Hinzufügen barrierefreier Komponenten (Dialoge, Dropdowns, Formulare, Tabellen), Anpassen von Themes und Farben, Implementieren des Dark Mode, Generieren visueller Designs und Poster oder beim Etablieren konsistenter Styling-Muster in Anwendungen."

Front-matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 10.626 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum Skill ui-styling

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Welche Ausgabeformate erzeugt das visuelle Designsystem?

Die Canvas-basierte visuelle Designebene erstellt Kompositionen in Museumsqualität für visuelle Designs, Poster und Markenmaterialien. Sie folgt einem philosophiegetriebenen Ansatz mit minimalem Text und maximaler visueller Wirkung.

UI Styling

ui-styling bei einer echten UI-Design-Aufgabe ausführen.

Laden Sie OpenDesign herunter, importieren Sie ui-styling über dessen SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Was der ui-styling Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den ui-styling Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der ui-styling Skill Claude Code und Codex vorgibt

Mobile-First Responsive

Utility-first-Extraktion

Skript-Pfade relativ zum Skill-Verzeichnis

Accessibility-first Komponentennutzung

Design Tokens für Konsistenz

TypeScript-Typsicherheit

Dynamische Klassennamen vermeiden

Anspruch an Handwerkskunst