UI-Stilgestaltung-Fähigkeit

Umfassende Fähigkeit zur Erstellung schöner, barrierefreier Benutzeroberflächen, die shadcn/ui-Komponenten, Tailwind CSS Utility-Styling und canvas-basierte visuelle Designsysteme kombiniert.

Referenz

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

Wann diese Fähigkeit verwenden

Verwenden Sie sie, wenn:

Sie UI mit React-basierten Frameworks (Next.js, Vite, Remix, Astro) erstellen
Sie barrierefreie Komponenten (Dialoge, Formulare, Tabellen, Navigation) implementieren
Sie mit einem Utility-First-CSS-Ansatz stylen
Sie responsive, mobile-first Layouts erstellen
Sie Dark Mode und Theme-Anpassung implementieren
Sie Designsysteme mit konsistenten Tokens aufbauen
Sie visuelle Designs, Poster oder Markenmaterialien generieren
Sie schnelles Prototyping mit sofortiger visueller Rückmeldung durchführen
Sie komplexe UI-Muster (Datentabellen, Diagramme, Befehlspaletten) hinzufügen

Kern-Stack

Komponentenebene: shadcn/ui

Vorgefertigte barrierefreie Komponenten über Radix UI-Primitive
Copy-Paste-Verteilungsmodell (Komponenten leben in Ihrer Codebasis)
TypeScript-first mit vollständiger Typsicherheit
Komponierbare 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

Museumswürdige visuelle Kompositionen
Philosophiegetriebener Designansatz
Anspruchsvolle visuelle Kommunikation
Minimaler Text, maximale visuelle Wirkung
Systematische Muster und verfeinerte Ästhetik

Schnellstart

Komponenten- + Styling-Einrichtung

shadcn/ui mit Tailwind installieren:

npx shadcn@latest init

CLI fragt nach Framework, TypeScript, Pfaden und Theme-Präferenzen. 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">Ihre Metriken anzeigen</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";

Komponentenbibliothek-Leitfaden

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, Navigationsmenü)
Overlays und Dialoge (Dialog, Drawer, Popover, Toast, Command)
Feedback und Status (Alert, Progress, Skeleton)
Anzeigekomponenten (Tabelle, Datentabelle, 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-Variablen-System
Farbanpassung und Paletten
Anpassung von Komponentenvarianten
Theme-Umschalt-Implementierung

Barrierefreiheitsmuster

ARIA-Muster, Tastaturnavigation, Bildschirmleserunterstützung und barrierefreie Komponentennutzung.

Siehe: references/shadcn-accessibility.md

Behandelt:

Radix UI-Barrierefreiheitsfunktionen
Tastaturnavigationsmuster
Fokusverwaltung
Bildschirmleser-Ansagen
Barrierefreiheit der Formularvalidierung

Tailwind-Hilfsprogramme

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, Zeilenabstand)
Farben und Hintergründe
Rahmen und Schatten
Beliebige Werte für benutzerdefiniertes Styling

Responsive 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

Konfigdateistruktur, 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 zur Komponentenextraktion

Visuelles Designsystem

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

Siehe: references/canvas-design-system.md

Behandelt:

Design-Philosophie-Ansatz
Visuelle Kommunikation über Text
Systematische Muster und Komposition
Farb-, Form- und Raumgestaltung
Minimale Textintegration
Museumswürdige Ausführung
Mehrseitige Designsysteme

Hilfsskripte

Python-Automatisierung für Komponenteninstallation und Konfigurationsgenerierung.

shadcn_add.py

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

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

Generiert tailwind.config.js mit benutzerdefiniertem Theme:

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

Best Practices

Komponentenkomposition: Bauen Sie komplexe UIs aus einfachen, komponierbaren Primitiven auf.
Utility-First-Styling: Verwenden Sie Tailwind-Klassen direkt; extrahieren Sie Komponenten nur bei echter Wiederholung.
Mobile-First-Responsive: Beginnen Sie mit mobilen Stilen und fügen Sie responsive Varianten hinzu.
Barrierefreiheit zuerst: Nutzen Sie Radix UI-Primitive, fügen Sie Fokuszustände hinzu und verwenden Sie semantisches HTML.
Design-Tokens: Verwenden Sie eine konsistente Abstandsskala, Farbpaletten und ein Typografie-System.
Dark-Mode-Konsistenz: Wenden Sie Dark-Varianten auf alle thematisierten Elemente an.
Leistung: Nutzen Sie automatisches CSS-Purgen und vermeiden Sie dynamische Klassennamen.
TypeScript: Nutzen Sie die volle Typsicherheit für eine bessere Entwicklererfahrung.
Visuelle Hierarchie: Lassen Sie die Komposition die Aufmerksamkeit lenken, setzen Sie Abstände und Farben bewusst ein.
Expertenhandwerk: Jedes Detail zählt – behandeln Sie 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 - Responsive 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

UI-Stilgestaltung

Was ist UI-Stilgestaltung?

In Ihrer bevorzugten KI fragen

Dokumentation