UI-Stilgestaltung

UI-Stilgestaltung Skill

Umfassender Skill zur Erstellung schöner, barrierefreier Benutzeroberflächen, die shadcn/ui-Komponenten, Tailwind CSS Utility-First-Stil und canvas-basierte visuelle Designsysteme kombinieren.

Referenz

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

Wann dieser Skill verwendet werden sollte

Verwende ihn bei:

• Entwicklung von UI mit React-basierten Frameworks (Next.js, Vite, Remix, Astro)
• Implementierung barrierefreier Komponenten (Dialoge, Formulare, Tabellen, Navigation)
• Gestaltung mit Utility-First-CSS-Ansatz
• Erstellung responsiver, Mobile-First-Layouts
• Implementierung von Dark Mode und Theme-Anpassung
• Aufbau von Designsystemen mit konsistenten Tokens
• Generierung visueller Designs, Poster oder Markenmaterialien
• Schnellem Prototyping mit sofortigem visuellem Feedback
• Hinzufügen komplexer UI-Muster (Datentabellen, Diagramme, Kommandopaletten)

Kern-Stack

Komponentenebene: shadcn/ui

• Vorgefertigte barrierefreie Komponenten über Radix UI Primitiven
• Copy-Paste-Verteilungsmodell (Komponenten leben in deiner Codebasis)
• TypeScript-first mit vollständiger Typsicherheit
• Kombinierbare Primitive für komplexe UIs
• CLI-basierte Installation und Verwaltung

Styling-Ebene: Tailwind CSS

• Utility-First-CSS-Framework
• Build-Zeit-Verarbeitung ohne Laufzeit-Overhead
• Mobile-First-Responsive-Design
• Konsistente Design-Tokens (Farben, Abstände, Typografie)
• Automatische Entfernung von totem Code

Visuelle Designebene: Canvas

• Museumqualität visuelle Kompositionen
• Philosophiegetriebener Designansatz
• Anspruchsvolle visuelle Kommunikation
• Minimaler Text, maximale visuelle Wirkung
• Systematische Muster und verfeinerte Ästhetik

Skriptpfade

Skriptpfade in diesem Skill und seinem references/-Verzeichnis sind relativ zu dem Verzeichnis, das diese SKILL.md enthält, nicht zum Projekt: scripts/<datei> bezieht sich auf das eigene scripts/-Verzeichnis dieses Skills, und ../<skill>/scripts/<datei> ist ein daneben installierter Unter-Skill. Baue den vollständigen Pfad von diesem Verzeichnis aus (Claude Code meldet es als Basisverzeichnis des Skills beim Laden des Skills) und behalte das Arbeitsverzeichnis im Projektstamm – die Skripte lesen und schreiben Projektdateien wie docs/brand-guidelines.md, assets/design-tokens.json oder src/ relativ dazu.

Schnellstart

Komponenten- und Style-Einrichtung

shadcn/ui mit Tailwind installieren:

npx shadcn@latest init

CLI fordert Framework, TypeScript, Pfade und Theme-Präferenzen ab. Dies konfiguriert sowohl shadcn/ui als auch Tailwind CSS.

Komponenten hinzufügen:

npx shadcn@latest add button card dialog form

Komponenten mit Utility-Styling verwenden:

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analysen</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">Zeige deine Metriken</p>
          <Button variant="default" className="w-full">
            Details anzeigen
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

Alternative: Tailwind-Only-Einrichtung

Vite-Projekte:

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

Komponentenbibliotheksleitfaden

Umfassender Komponentenkatalog mit Nutzungsmustern, Installation und Kompositionsbeispielen.

Siehe: references/shadcn-components.md

Behandelt:

• Formular- und Eingabekomponenten (Button, Input, Select, Checkbox, Date Picker, Formularvalidierung)
• Layout und Navigation (Card, Tabs, Accordion, Navigation Menu)
• Overlays und Dialoge (Dialog, Drawer, Popover, Toast, Command)
• Feedback und Status (Alert, Progress, Skeleton)
• Anzeigekomponenten (Table, Data Table, Avatar, Badge)

Theme und Anpassung

Theme-Konfiguration, CSS-Variablen, Dark Mode-Implementierung und Komponentenanpassung.

Siehe: references/shadcn-theming.md

Behandelt:

• Dark Mode-Einrichtung mit next-themes
• CSS-Variable-System
• Farbanpassung und Paletten
• Komponentenvariantenanpassung
• Theme-Umschaltimplementierung

Barrierefreiheitsmuster

ARIA-Muster, Tastaturnavigation, Screenreader-Unterstützung und barrierefreie Komponentennutzung.

Siehe: references/shadcn-accessibility.md

Behandelt:

• Radix UI Barrierefreiheitsfunktionen
• Tastaturnavigationsmuster
• Fokusverwaltung
• Screenreader-Ansagen
• Barrierefreiheit von Formularvalidierung

Tailwind Utilities

Kern-Utility-Klassen für Layout, Abstände, Typografie, Farben, Rahmen und Schatten.

Siehe: references/tailwind-utilities.md

Behandelt:

• Layout-Utilities (Flexbox, Grid, Positionierung)
• Abstandssystem (Padding, Margin, Gap)
• Typografie (Schriftgrößen, -gewichte, -ausrichtung, Zeilenhöhe)
• Farben und Hintergründe
• Rahmen und Schatten
• Beliebige Werte für benutzerdefinierte Styles

Responsives Design

Mobile-First-Breakpoints, responsive Utilities und adaptive Layouts.

Siehe: references/tailwind-responsive.md

Behandelt:

• Mobile-First-Ansatz
• Breakpoint-System (sm, md, lg, xl, 2xl)
• Responsive Utility-Muster
• Container-Queries
• Max-Width-Queries
• Benutzerdefinierte Breakpoints

Tailwind-Anpassung

Konfigurationsdateistruktur, benutzerdefinierte Utilities, Plugins und Theme-Erweiterungen.

Siehe: references/tailwind-customization.md

Behandelt:

• @theme-Direktive für benutzerdefinierte Tokens
• Benutzerdefinierte Farben und Schriftarten
• Abstands- und Breakpoint-Erweiterungen
• Erstellung benutzerdefinierter Utilities
• Benutzerdefinierte Varianten
• Layer-Organisation (@layer base, components, utilities)
• Apply-Direktive für Komponentenextraktion

Visuelles Designsystem

Canvas-basierte Designphilosophie, Prinzipien der visuellen Kommunikation und anspruchsvolle Kompositionen.

Siehe: references/canvas-design-system.md

Behandelt:

• Designphilosophie-Ansatz
• Visuelle Kommunikation statt Text
• Systematische Muster und Komposition
• Farbe, Form und räumliches Design
• Minimale Textintegration
• Ausführung in Museumsqualität
• Mehrseitige Designsysteme

Utility-Skripte

Python-Automatisierung für Komponenteninstallation und Konfigurationsgenerierung.

shadcn_add.py

Füge shadcn/ui-Komponenten mit Abhängigkeitsverwaltung hinzu:

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generiere tailwind.config.js mit benutzerdefiniertem Theme:

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

Der Generator weigert sich, eine Konfiguration zu erstellen oder zu ersetzen, wenn bereits eine verwandte tailwind.config.js, .cjs, .mjs oder .ts-Datei existiert. Überprüfe zuerst die gemeldete Konfiguration und übergib --force nur, wenn die konkurrierende Ausgabe beabsichtigt ist:

python scripts/tailwind_config_gen.py --colors brand:blue --force

Bewährte Methoden

1. Komponentenkomposition: Baue komplexe UIs aus einfachen, kombinierbaren Primitiven
2. Utility-First-Styling: Verwende Tailwind-Klassen direkt; extrahiere Komponenten nur bei echter Wiederholung
3. Mobile-First-Responsive: Beginne mit mobilen Styles, überlagere responsive Varianten
4. Barrierefreiheit zuerst: Nutze Radix UI Primitiven, füge Fokus-Zustände hinzu, verwende semantisches HTML
5. Design-Tokens: Verwende konsistente Abstandsskala, Farbpaletten, Typografiesystem
6. Dark Mode-Konsistenz: Wende dunkle Varianten auf alle thematisierten Elemente an
7. Leistung: Nutze automatisches CSS-Purging, vermeide dynamische Klassennamen
8. TypeScript: Verwende vollständige Typsicherheit für bessere DX
9. Visuelle Hierarchie: Lasse Komposition die Aufmerksamkeit lenken, verwende Abstände und Farben bewusst
10. Expertenhandwerk: Jedes Detail zählt – behandle UI als Handwerk

Referenznavigation

Komponentenbibliothek

• references/shadcn-components.md – Vollständiger Komponentenkatalog
• references/shadcn-theming.md – Theming und Anpassung
• references/shadcn-accessibility.md – Barrierefreiheitsmuster

Styling-System

• references/tailwind-utilities.md – Kern-Utility-Klassen
• references/tailwind-responsive.md – Responsives Design
• references/tailwind-customization.md – Konfiguration und Erweiterungen

Visuelles Design

• references/canvas-design-system.md – Designphilosophie und Canvas-Workflows

Automatisierung

• scripts/shadcn_add.py – Komponenteninstallation
• scripts/tailwind_config_gen.py – Konfigurationsgenerierung

Häufige Muster

Formular mit Validierung:

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>E-Mail</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Anmelden</Button>
      </form>
    </Form>
  )
}

Responsives Layout mit Dark Mode:

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Inhalt
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

Ressourcen

• shadcn/ui-Dokumentation: https://ui.shadcn.com
• Tailwind CSS-Dokumentation: https://tailwindcss.com
• Radix UI: https://radix-ui.com
• Tailwind UI: https://tailwindui.com
• Headless UI: https://headlessui.com
• v0 (KI-UI-Generator): https://v0.dev