Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Design system Tailwind CSS et shadcn/ui v1.0.0

Utilisez cette ressource pour mettre en place les tokens, le thème et les composants d'un design system pour un site

Nouveau

  • 413 téléchargements
  • 238 mentions J'aime
  • 120 sauvegardes

Gratuit

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install tailwind-shadcn-design-system

Sans option, la skill va dans ~/.agents/skills/ ; ajoutez --agent claude-code (ou codex, cursor…) pour viser un agent.

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent initialise Tailwind et shadcn/ui, écrit les tokens de couleur en variables CSS au format oklch, branche le thème clair et sombre et enveloppe les composants dans des primitives qui imposent vos règles. Chaque étape a un point de contrôle. Vous obtenez une base de style centralisée où l'on change une couleur à un seul endroit.

Choisie surtout par

Mise à jour le 2 novembre 2026

Fichier de tokens de couleur et boutons déclinés en thème clair et sombre

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
Le modèle de votre agent
Utilise
  • Node.js
  • Tailwind CSS 4.1 ou plus
  • shadcn/ui
Licence
MIT

Ressources similaires

Tout voir

Ce que vous obtenez

  • SKILL.md, traduit en français : cinq étapes avec points de contrôle, exemples, contraintes et bonnes pratiques
  • references/component-wrapping.md : exemples complets de primitives (Button, Text, Stack)
  • references/theming.md et globals.css.example : thèmes multiples et fichier de tokens de départ

Pour qui

  • Créer la base visuelle d'un nouveau site avec une palette de marque
  • Ajouter un mode sombre ou plusieurs thèmes de marque à un projet existant
  • Imposer une cohérence de couleurs et de composants à toute une équipe

Pas pour qui

  • Concevoir la palette ou le logo (la skill suppose que vous avez déjà vos couleurs)
  • Projets qui n'utilisent ni Tailwind ni shadcn/ui
  • Installer un composant isolé sans toucher au système de design

Étiquettes

  • tailwind
  • shadcn
  • tokens
  • thème
  • design-system

À propos

Vous dites

« Mets en place un design system Tailwind v4 avec shadcn/ui : tokens de ma marque en bleu profond, mode sombre et un bouton enveloppé. »

Fichier de tokens de couleur et boutons déclinés en thème clair et sombre

Skill publiée par giuseppe-trisciuoglio sous licence MIT, traduite par PalateKit.

Voir plus

Prérequis

À préparer
Vos couleurs de marque et Un projet web avec Node.js (React ou Next.js)
Dépendances
Node.js, Tailwind CSS 4.1 ou plus et shadcn/ui

Comment l'utiliser

  1. Copiez le dossier de la skill dans le répertoire de skills de votre agent.
  2. Donnez vos couleurs de marque et dites si un thème sombre est nécessaire.
  3. Validez chaque point de contrôle (build, tokens présents, mode sombre) avant de passer à l'étape suivante.

Aperçu du contenu

Fichiers

  • LICENSE1,1 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • references/component-wrapping.md4,8 Ko
  • references/globals.css.example7,8 Ko
  • references/theming.md5,8 Ko
  • SKILL.md10,4 Ko

Origine et licence

Modifié par PalateKit

Auteur
giuseppe-trisciuoglio
Source
github.com/giuseppe-trisciuoglio/developer-kit/tree/fe73fb33a09ee6562eeec7415a3f9a3bcf795177/plugins/developer-kit-typescript/skills/tailwind-design-system
Licence
MIT

Notice

Version modifiée de « tailwind-design-system » (giuseppe-trisciuoglio, MIT) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Faut-il installer d'autres skills ?

Non. La skill cite tailwind-css-patterns et shadcn-ui comme compléments, mais fonctionne avec ses seuls fichiers.

Compatible avec Tailwind v3 ?

Les directives @theme demandent Tailwind v4.1 ou plus. Pour la v3, utilisez tailwind.config.js avec theme.extend, comme l'indique la skill.