Communitygithub.com

creativetimofficial/ui

Creative Tim UI Block-Bibliothek-Assistent. Verwenden beim Hinzufügen, Generieren oder Ändern von UI-Blöcken/Komponenten/Seiten von creative-tim.com/ui. Deckt Designphilosophie (Minimalismus, 95%-Regel, Research-First), Block-Erkennung, beide CLI-Installationsmethoden, PRO-API-Key-Setup und Creative Tim Designregeln (orange Marke, shadcn/ui-Basis, Tailwind v4). Erzeugt Blöcke, die bewusst und zurückhaltend sind, nicht maximalistisch.

Was ist ui?

Diese Skill ermöglicht es einem KI-Agenten, mit der Creative Tim UI Block-Bibliothek zu arbeiten – einer umfassenden, auf shadcn/ui aufbauenden Sammlung von über 390 produktionsreifen Blöcken in über 40 Kategorien. Alle Blöcke sind in React + Tailwind CSS geschrieben und mit Next.js (App Router), Remix und Vite kompatibel. Der Agent kann Blöcke installieren (über die Creative Tim CLI oder die shadcn CLI), PRO-Blöcke mit einem API-Key verwalten und neue Blöcke generieren, die strikt den Creative Tim Designregeln folgen. Die Skill enthält eine detaillierte Designphilosophie („95%-Regel“, „Light-Prinzip“, „Forschung vor Rendering“) und spezifische Regeln für Markenfarben (Orange als Primärakzent), Typografie (text-sm für Fließtext), Tailwind v4 Konventionen (keine beliebigen Werte) und Hydration-Sicherheit. Dadurch wird sichergestellt, dass alle generierten Blöcke konsistent, professionell und sofort einsatzbereit sind.

Funktioniert mit✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/creativetimofficial/ui/tree/HEAD/skills/creative-tim-ui
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

Creative Tim UI

Eine umfassende Block-Bibliothek aufbauend auf shadcn/ui, mit über 390 produktionsreifen Blöcken in über 40 Kategorien. Alle Blöcke sind React + Tailwind CSS, kompatibel mit Next.js (App Router), Remix und Vite.

Durchstöbern Sie die vollständige Bibliothek: https://www.creative-tim.com/ui KI-lesbarer Index: https://www.creative-tim.com/ui/llms.txt

Diese Skill installieren

# Installation über die Skills CLI (empfohlen)
npx skills add creativetimofficial/ui

# Global installieren (in allen Projekten verfügbar)
npx skills add creativetimofficial/ui -g

# Oder nur für einen bestimmten Agenten installieren
npx skills add creativetimofficial/ui --agent claude-code

Skill-Seite: https://skills.sh/creativetimofficial/ui/creative-tim-ui

Designphilosophie

Über 300+ Produkte und Kategorien hinweg hat Creative Tim dieselbe Disziplin angewandt: identifizieren, was Entwickler wirklich brauchen, das außergewöhnlich gut bauen und alles andere weglassen. Diese Zurückhaltung ist der Kern der Bibliothek.

Beim Generieren oder Ändern von Blöcken befolgen Sie diese Prinzipien:

Die 95%-Regel — den häufigsten Anwendungsfall außergewöhnlich gut umsetzen. Fügen Sie keine Konfiguration, Abstraktion oder Flexibilität für Probleme hinzu, die selten auftreten. Ein Entwickler sollte einen Block lesen und sofort verstehen, was er tut.

Das „Light“-Prinzip — ein Block ist fertig, wenn nichts mehr entfernt werden kann, nicht wenn nichts mehr hinzugefügt werden kann. Hinterfragen Sie jedes Wrapper-Div, jede Prop, jede Animation, jedes Icon. Wenn der Block auch ohne funktioniert, sollte er es wahrscheinlich auch ohne.

Forschung vor dem Rendern — fragen Sie, was die Person, die auf diesen Bildschirm schaut, tun möchte. Ein Dashboard präsentiert die Zahl, auf die jemand reagieren muss. Ein Formular sammelt Informationen mit dem geringstmöglichen Widerstand. Gestalten Sie auf den Zweck hin, nicht auf die Oberfläche.

Auf Fundamenten aufbauen — shadcn/ui-Primitive (Card, Table, Button, Badge) sind gut gestaltet und werden gewartet. Kombinieren Sie sie; implementieren Sie sie nicht neu. Der Beitrag von Creative Tim liegt in der Komposition und dem Urteilsvermögen, nicht in den Primitiven.

Echte Nutzung, nicht Demo-Nutzung — der Maßstab ist: Würde ein echtes Team dies in einer Produktionsanwendung ausliefern? Vermeiden Sie visuelle Komplexität, die keine Information trägt. Kommunikation schlägt Dekoration zu jeder Zeit.

Ausführliche Details mit Codebeispielen: rules/brand-philosophy.md

Wann anwenden

Diese Skill anwenden, wenn:

  • Ein Creative Tim UI-Block in einem Projekt installiert oder angepasst wird
  • Neue Blöcke generiert werden, die dem Creative Tim Designsystem entsprechen sollen
  • Generierter UI-Code auf Marken-/Stilkonformität überprüft wird
  • PRO-API-Key-Zugriff für Premium-Blöcke eingerichtet wird
  • Ein neues Projekt für die Nutzung der Creative Tim UI-Bibliothek eingerichtet wird

Block-Kategorien

KategorieSlugBeschreibung
KI-Agentenai-agentsChat-Oberflächen, Aktivitätsfeeds, Tool-Nutzung, Transkription
SeitenpagesVollständige Agent-Management-Layouts
KontoaccountProfil, Einstellungen, Abrechnungsverwaltung
AuthentifizierungauthenticationLogin, Registrierung, 2FA-Abläufe
HeroheroHero-Bereiche für Landingpages
PreisepricingPreistabellen und Abrechnungspläne
DiagrammechartsDatenvisualisierung
KPIkpiMetrik-Karten und Dashboards
StatistikenstatsStatistikbereiche
TabellentableDatentabellen mit Sortierung/Filterung
E-CommerceecommerceProduktlisten, Warenkörbe, Checkout
BlogblogArtikellisten, Beitragslayouts
TestimonialstestimonialsSocial-Proof-Bereiche
...[Vollständige Liste unter /ui/llms.txt]

Blöcke installieren

Zwei Methoden werden vollständig unterstützt – wählen Sie die, die zu Ihrem Setup passt.

Option 1 — Creative Tim CLI (empfohlen)

npx @creative-tim/ui@latest add <block-name>

Initialisieren Sie zuerst ein neues Projekt (erkennt Next.js / Vite / Remix / Astro automatisch):

npx @creative-tim/ui@latest init

Beispiele:

npx @creative-tim/ui@latest add hero-01
npx @creative-tim/ui@latest add ai-agent-activity-01
npx @creative-tim/ui@latest add agent-management-list-01

Das Paket liefert auch benannte Binärdateien (creative-tim-ui, creative-tim) – gleiche Befehle:

npx creative-tim-ui add hero-01
npx creative-tim add hero-01

Option 2 — shadcn CLI (vollständige URL)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<block-name>.json

Beispiel:

npx shadcn@latest add https://www.creative-tim.com/ui/r/hero-01.json
npx shadcn@latest add https://www.creative-tim.com/ui/r/ai-agent-activity-01.json

Beide Methoden kopieren den Komponentenquelltext in Ihr Projekt und installieren automatisch alle erforderlichen shadcn/ui-Primitive (Button, Card, Badge, usw.).

PRO-Blöcke (API-Key)

Einige Blöcke sind als PRO markiert und erfordern einen Creative Tim API-Key. Sie können einen kostenlosen Schlüssel unter https://www.creative-tim.com/ui erhalten.

Einrichtung

Fügen Sie den Schlüssel zu Ihrer Umgebung hinzu:

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

Übergeben Sie den Schlüssel bei der Verwendung einer der CLIs:

# Creative Tim CLI
npx @creative-tim/ui@latest add pro-block-name --api-key $CREATIVE_TIM_UI_API_KEY

# shadcn CLI — Authorization-Header über Registry-Konfiguration setzen

Oder legen Sie ihn global über die Creative Tim CLI-Konfiguration fest:

npx @creative-tim/ui@latest login --api-key pk_live_xxxxxxxxxxxxxxxx

Nach dem Festlegen des Schlüssels werden PRO-Blöcke identisch zu kostenlosen Blöcken installiert.

Designregeln

Vollständige Details finden Sie in den einzelnen Regeldateien. Kurzzusammenfassung:

Markenfarben

  • Primärakzent: Orange (orange-500 / orange-600) — Creative Tims Markenfarbe
  • Niemals violet, purple oder indigo als Akzentfarben verwenden – diese signalisieren KI-generierte Standardeinstellungen
  • Neutrale Oberflächen: slate, gray, zinc
  • Status: emerald (Erfolg), amber (Warnung), red (Fehler), blue (Info)

Typografie

  • text-sm für allen lesbaren Textkörper — Labels, Beschreibungen, Tabellenzellen, Listenelemente
  • text-xs nur für: Avatar-Initialen, font-mono-Zeitstempel, Badge-Pillen (Status/Priorität), Sidebar-Gruppenüberschriften (Großbuchstaben + tracking-wider), kleine h-6/h-7-Aktionsschaltflächen
  • Niemals text-[10px], text-[11px] oder beliebige Schriftgrößenwerte verwenden

Tailwind v4 — Keine beliebigen Werte

  • Den numerischen Maßstab für Abstände/Größen verwenden: h-8, w-12, gap-3, p-4 — niemals h-[32px]
  • Standardbrüche für Breiten verwenden: max-w-sm, max-w-2xl, w-1/2 — niemals max-w-[85%]
  • Nur responsive Breakpoints: sm:, md:, lg:, xl: — niemals [@media(min-width:640px)]:

Komponentenmuster

  • Card > CardHeader + CardContent für Inhaltsgruppierung bevorzugen
  • KPI / Statistik-Karten: CardContent className="px-4 py-0" (py-0, nicht Standard py-6)
  • ScrollArea für jede Liste verwenden, die überlaufen kann
  • Sidebar-Navigation: 64 (w-64), border-r, bg-muted/30
  • Inline style={{}} vermeiden — immer Tailwind-Klassen verwenden

Hydrationssicherheit

  • Niemals new Date(), Date.now() oder toLocaleTimeString() in useState-Initialisierern verwenden
  • Statische/fest codierte Zeichenketten für SSR-sicheren Anfangszustand verwenden; auf Live-Werte innerhalb von useEffect / setInterval umschalten

Vollständiges Designhandbuch

Für die vollständigen Regeln mit Codebeispielen: AGENTS.md

Einzelne Regeln:

rules/install-blocks.md     — CLI-Installationsanleitung
rules/pro-api-key.md        — PRO-Key-Setup und Authentifizierung
rules/design-brand.md       — Markenfarben und Identität
rules/tailwind-rules.md     — Tailwind v4-Codierungsbeschränkungen
rules/component-patterns.md — Bevorzugte Komponentenmuster
rules/hydration-safety.md   — SSR/CSR-Hydrationsregeln

Diese Skill bereitstellen

Diese Skill befindet sich im Repository unter .claude/skills/creative-tim-ui/. Jeder kann sie in seinem eigenen Claude Code-Setup installieren, indem er Folgendes ausführt:

claude skill install github.com/creativetimofficial/ui .claude/skills/creative-tim-ui

Oder durch Klonen und manuelles Verlinken:

# Klonen oder Kopieren des Skills-Verzeichnisses in Ihr Projekt
cp -r path/to/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

Nach der Installation ist die Skill als /creative-tim-ui in jeder Claude Code-Sitzung innerhalb dieses Projekts verfügbar.

Verwandte Skills

steipete/sag

ElevenLabs text-to-speech with mac-style say UX.

community

steipete/oracle

Oracle CLI second-model review/debug/refactor/design with selected files, dry-run token checks, API or browser engine.

community

steipete/peekaboo

Capture and automate macOS UI with the Peekaboo CLI.

community

mattpocock/design-an-interface

Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explore interface options, compare module shapes, or mentions "design it twice".

community

mattpocock/prototype

Build a throwaway prototype to flesh out a design — a runnable terminal app for state/business-logic questions, or several radically different UI variations toggleable from one route.

community

mattpocock/grill-me

Interview the user relentlessly about a plan or design until reaching shared understanding, resolving each branch of the decision tree. Use when user wants to stress-test a plan, get grilled on their design, or mentions "grill me".

community