Communitygithub.com

creativetimofficial/ui

Assistant de bibliothèque de blocs UI Creative Tim. À utiliser pour ajouter, générer ou modifier des blocs/composants/pages UI de creative-tim.com/ui.

Qu'est-ce que ui ?

Cette compétence fournit un assistant dédié à la bibliothèque Creative Tim UI, qui propose plus de 390 blocs prêts pour la production, construits sur shadcn/ui avec React et Tailwind CSS v4. Elle couvre l'installation via deux CLIs (Creative Tim CLI et shadcn CLI), la configuration des clés API PRO pour les blocs premium, et les règles de design strictes de Creative Tim : minimalisme, la règle des 95% (construire le cas courant exceptionnellement bien), et le principe de la « lumière » (un bloc est terminé quand il n'y a plus rien à enlever). Elle s'intègre avec les agents Claude Code, Cursor et Codex, et impose des contraintes techniques comme l'absence de valeurs arbitraires en Tailwind v4, l'utilisation exclusive de la couleur orange comme accent, et la sécurité d'hydratation SSR. L'assistant est particulièrement utile pour générer des blocs délibérés et retenus, plutôt que maximalistes, en suivant la philosophie de design de Creative Tim fondée sur la recherche avant le rendu et l'usage réel.

Compatible avec✓Claude Code~Codex CLI~Cursor
Part ofDesign & UI
npx skills add https://github.com/creativetimofficial/ui/tree/HEAD/skills/creative-tim-ui
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Creative Tim UI

Une bibliothèque complète de blocs construite sur shadcn/ui, avec plus de 390 blocs prêts pour la production dans plus de 40 catégories. Tous les blocs sont en React + Tailwind CSS, compatibles avec Next.js (App Router), Remix et Vite.

Parcourez la bibliothèque complète : https://www.creative-tim.com/ui Index lisible par IA : https://www.creative-tim.com/ui/llms.txt

Installer cette compétence

# Installation via le CLI skills (recommandé)
npx skills add creativetimofficial/ui

# Installation globale (disponible dans tous les projets)
npx skills add creativetimofficial/ui -g

# Ou installation pour un agent spécifique uniquement
npx skills add creativetimofficial/ui --agent claude-code

Page de la compétence : https://skills.sh/creativetimofficial/ui/creative-tim-ui

Philosophie de design

À travers plus de 300 produits et catégories, Creative Tim a appliqué la même discipline : identifier ce dont les développeurs ont réellement besoin, construire cela exceptionnellement bien, et couper tout le reste. Cette retenue est au cœur de la bibliothèque.

Lors de la génération ou de la modification de blocs, suivez ces principes :

La règle des 95 % — construisez le cas courant exceptionnellement bien. N'ajoutez pas de configuration, d'abstraction ou de flexibilité pour des problèmes qui existent rarement. Un développeur doit pouvoir lire un bloc et comprendre immédiatement ce qu'il fait.

Le principe « léger » — un bloc est terminé lorsqu'il n'y a plus rien à enlever, pas lorsqu'il n'y a plus rien à ajouter. Remettez en question chaque div wrapper, chaque prop, chaque animation, chaque icône. Si le bloc fonctionne sans, c'est probablement qu'il devrait rester sans.

Rechercher avant de rendre — demandez-vous ce que la personne qui regarde cet écran essaie de faire. Un tableau de bord affiche le nombre sur lequel quelqu'un doit agir. Un formulaire collecte des informations avec le moins de résistance possible. Concevez en fonction de l'objectif, pas de la surface.

Construire sur des fondations — les primitives shadcn/ui (Card, Table, Button, Badge) sont bien conçues et maintenues. Composez-les ; ne les réimplémentez pas. La contribution de Creative Tim réside dans la composition et le jugement, pas dans les primitives.

Usage réel, pas usage de démonstration — le critère est : une vraie équipe livrerait-elle cela dans une application de production ? Évitez la complexité visuelle qui ne porte pas d'information. La communication surpasse la décoration à chaque fois.

Détails complets avec exemples de code : rules/brand-philosophy.md

Quand l'utiliser

Utilisez cette compétence lorsque :

  • Vous installez ou personnalisez un bloc Creative Tim UI dans un projet
  • Vous générez de nouveaux blocs qui doivent correspondre au système de design Creative Tim
  • Vous révisez du code UI généré pour sa conformité à la marque et au style
  • Vous configurez l'accès à la clé API PRO pour les blocs premium
  • Vous intégrez un nouveau projet à la bibliothèque Creative Tim UI

Catégories de blocs

CatégorieSlugDescription
Agents IAai-agentsInterfaces de chat, flux d'activité, utilisation d'outils, transcription
PagespagesMises en page complètes de gestion d'agents
CompteaccountProfil, paramètres, gestion de facturation
AuthentificationauthenticationConnexion, inscription, flux 2FA
HeroheroSections hero de pages d'atterrissage
TarificationpricingTableaux de tarification et plans de facturation
GraphiqueschartsVisualisation de données
KPIkpiCartes de métriques et tableaux de bord
StatistiquesstatsSections de statistiques
TableauxtableTableaux de données avec tri/filtrage
E-commerceecommerceListings de produits, paniers, checkout
BlogblogListes d'articles, mises en page de posts
TémoignagestestimonialsSections de preuve sociale
...[Liste complète sur /ui/llms.txt]

Installer des blocs

Deux méthodes sont entièrement supportées — choisissez celle qui correspond à votre configuration.

Option 1 — CLI Creative Tim (recommandé)

npx @creative-tim/ui@latest add <nom-du-bloc>

Initialisez d'abord un nouveau projet (détection automatique de Next.js / Vite / Remix / Astro) :

npx @creative-tim/ui@latest init

Exemples :

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

Le package fournit également des binaires nommés (creative-tim-ui, creative-tim) — mêmes commandes :

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

Option 2 — CLI shadcn (URL complète)

npx shadcn@latest add https://www.creative-tim.com/ui/r/<nom-du-bloc>.json

Exemple :

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

Les deux méthodes copient le code source du composant dans votre projet et installent automatiquement toutes les primitives shadcn/ui requises (Button, Card, Badge, etc.).

Blocs PRO (clé API)

Certains blocs sont marqués PRO et nécessitent une clé API Creative Tim. Vous pouvez obtenir une clé gratuite sur https://www.creative-tim.com/ui.

Configuration

Ajoutez la clé à votre environnement :

# .env.local
CREATIVE_TIM_UI_API_KEY=pk_live_xxxxxxxxxxxxxxxx

Passez la clé lors de l'utilisation de l'un ou l'autre CLI :

# CLI Creative Tim
npx @creative-tim/ui@latest add nom-du-bloc-pro --api-key $CREATIVE_TIM_UI_API_KEY

# CLI shadcn — définissez l'en-tête Authorization via la configuration du registre

Ou définissez-la globalement via la configuration du CLI Creative Tim :

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

Après avoir défini la clé, les blocs PRO s'installent de manière identique aux blocs gratuits.

Règles de design

Consultez les fichiers de règles individuels pour plus de détails. Résumé rapide :

Couleurs de la marque

  • Accent principal : orange (orange-500 / orange-600) — couleur de marque Creative Tim
  • N'utilisez jamais violet, purple ou indigo comme couleurs d'accent — cela signale des valeurs par défaut générées par IA
  • Surfaces neutres : slate, gray, zinc
  • Statuts : emerald (succès), amber (avertissement), red (erreur), blue (info)

Typographie

  • text-sm pour tout le contenu lisible du corps — étiquettes, descriptions, cellules de tableau, éléments de liste
  • text-xs uniquement pour : initiales d'avatar, horodatages font-mono, badges pill (statut/priorité), en-têtes de groupe de barre latérale (majuscules + tracking-wider), petits boutons d'action h-6/h-7
  • N'utilisez jamais text-[10px], text-[11px] ou toute valeur de taille de police arbitraire

Tailwind v4 — Pas de valeurs arbitraires

  • Utilisez l'échelle numérique pour l'espacement/le dimensionnement : h-8, w-12, gap-3, p-4 — jamais h-[32px]
  • Utilisez des fractions standard pour les largeurs : max-w-sm, max-w-2xl, w-1/2 — jamais max-w-[85%]
  • Points de rupture responsifs uniquement : sm:, md:, lg:, xl: — jamais [@media(min-width:640px)]:

Modèles de composants

  • Préférez Card > CardHeader + CardContent pour le regroupement de contenu
  • Cartes KPI / statistiques : CardContent className="px-4 py-0" (py-0, pas py-6 par défaut)
  • Utilisez ScrollArea pour toute liste pouvant déborder
  • Navigation de barre latérale : 64 (w-64), border-r, bg-muted/30
  • Évitez le style={{}} en ligne — utilisez toujours des classes Tailwind

Sécurité d'hydratation

  • N'utilisez jamais new Date(), Date.now() ou toLocaleTimeString() dans les initialisateurs de useState
  • Utilisez des chaînes statiques/codées en dur pour l'état initial compatible SSR ; passez aux valeurs en direct dans useEffect / setInterval

Guide de design complet

Pour les règles complètes avec exemples de code : AGENTS.md

Règles individuelles :

rules/install-blocks.md     — Procédure d'installation CLI
rules/pro-api-key.md        — Configuration de la clé PRO et authentification
rules/design-brand.md       — Couleurs de marque et identité
rules/tailwind-rules.md     — Contraintes de codage Tailwind v4
rules/component-patterns.md — Modèles de composants préférés
rules/hydration-safety.md   — Règles d'hydratation SSR/CSR

Déployer cette compétence

Cette compétence réside dans le dépôt à .claude/skills/creative-tim-ui/. N'importe qui peut l'installer dans sa propre configuration Claude Code en exécutant :

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

Ou en clonant et en créant un lien symbolique manuellement :

# Clonez ou copiez le répertoire skills dans votre projet
cp -r chemin/vers/ui-repo/.claude/skills/creative-tim-ui .claude/skills/creative-tim-ui

Une fois installée, la compétence est disponible en tant que /creative-tim-ui dans toute session Claude Code au sein de ce projet.

Skills associés

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