Tailwind CSS

Nutze das design-system Skill, um ein UI-System zu erstellen oder zu prüfen, Tokens aus bestehendem Code zu extrahieren und Styling-Konsistenz in realen Repos zu bewerten.

Nutze den shadcn-Skill, um den Projektkontext zu prüfen, die passenden CLI-Befehle auszuführen, Komponenten zu installieren und UI anhand dokumentierter Muster für base vs radix, Formulare, Theming und Registries zusammenzustellen.

frontend-design verwandelt vage UI-Ideen in markante, produktionsreife Interfaces mit echtem Frontend-Code, klarer Designrichtung und weniger generischem AI-Look.

ckm:ui-styling unterstützt Sie beim Erstellen barrierefreier, produktionsreifer Benutzeroberflächen mit shadcn/ui, Tailwind CSS und Canvas-basiertem Design. Optimal für React-Projekte, die strukturierte, responsive Layouts, zugängliche Komponenten, Dark Mode und konsistente Designsysteme benötigen. Nutzen Sie ckm:ui-styling für UI-Design, Theming und schnelles Prototyping mit praxisnahen, stack-spezifischen Tipps.

ckm:design-system unterstützt dich beim Aufbau dreistufiger Tokens, Component Specs, CSS-Variablen, Tailwind-Mappings und markenkonsistenter Slides auf Basis einer klaren Token-Architektur.

Nutze die tailwind-design-system Skill, um Designsysteme mit Tailwind CSS v4 zu erstellen – mit Tokens, Theming, Varianten, Barrierefreiheit und Hinweisen zur Migration von v3 auf v4.

Nutze figma, um Design-Kontext, Screenshots, Variablen und Assets vom Figma-MCP-Server abzurufen und Figma-Nodes in umsetzbare UI-Entscheidungen zu übersetzen. Diese figma skill ist ideal, wenn du eine Figma-URL oder eine Node-ID hast und präzise figma-Nutzung für Design-to-Code-Arbeiten, Setup oder Troubleshooting brauchst.

frontend-dev ist ein frontend-dev Skill zum Erstellen hochwertiger, produktionsreifer Webpages mit erstklassiger UI, cineastischer Motion, KI-generierten Medien, überzeugenden Texten und generativer Kunst. Verwende ihn für Landingpages, Marketingseiten, Produktseiten, Dashboards und andere Frontend-Aufgaben, bei denen Design, Inhalte und Implementierungsdetails eng aufeinander abgestimmt bleiben müssen.

frontend-ui-dark-ts hilft dir, dunkle React-UI mit TypeScript, Tailwind CSS, Framer Motion und wiederverwendbaren Design Tokens aufzubauen. Es eignet sich für Dashboards, Admin-Oberflächen, Analytics-Ansichten und andere datenintensive Interfaces, die eine polierte dunkle Ästhetik und konsistente Komponentenmustern brauchen.

expo-tailwind-setup ist ein praxisnaher Leitfaden zur Installation und Konfiguration von Tailwind CSS v4 in Expo mit react-native-css und NativeWind v5 für iOS, Android und Web.

ui-web hilft dir, Web-UI-Komponenten mit WCAG-2.1-AA-Prüfungen, hohem Kontrast, klar erkennbaren Bedienelementen und Tailwind-Mustern für den Dark Mode zu entwerfen und zu gestalten. Nutze dieses ui-web Skill für React-ähnliche Frontends, wenn du praxisnahe UI-Design-Leitlinien brauchst, die die Barrierefreiheit verbessern und Rätselraten reduzieren.

Die Skill „redesign-existing-projects“ hebt bestehende Websites und Apps auf ein Premium-Niveau. Sie prüft das aktuelle Design, erkennt generische AI-Muster und setzt hochwertige Design-Umsetzungen um, ohne die Funktionalität zu beeinträchtigen. Funktioniert mit jedem CSS-Framework oder reinem CSS.

baseline-ui hilft dabei, Tailwind-basierte UI an einem klaren, meinungsstarken Standard für Abstände, Typografie, Barrierefreiheit und Bewegung zu prüfen oder zu erzeugen. Nutze den baseline-ui skill, wenn du sicherere Komponenten-Ausgaben, klarere UI-Design-Entscheidungen und weniger Abweichung von vorhandenen Primitives brauchst. Er eignet sich besonders für React/Tailwind-Workflows und praxisnahe baseline-ui guide-Checks.

Das shadcn-ui-Skill hilft dir, shadcn/ui-Komponenten in einer echten App zu planen, zu installieren und anzupassen. Nutze diesen shadcn-ui-Guide für Design-Implementierung, Komponentenfindung, Customizing und den praktischen Einsatz von shadcn-ui in Formularen, Tabellen, Auth-Flows und Layouts.

web-artifacts-builder hilft beim Aufsetzen eines React-, Tailwind-CSS- und shadcn/ui-Projekts, das sich anschließend zu einem einzelnen `bundle.html` bündeln lässt. Ideal für komplexe Frontend-Artefakte mit State, Routing oder umfangreicher UI – weniger passend für einfache One-File-Demos.