Skill shadcn/ui pour OpenClaw

Présentation du Skill shadcn/ui pour OpenClaw

Le skill shadcn/ui connecte OpenClaw à la bibliothèque de composants shadcn/ui, donnant à votre agent la capacité d'ajouter, configurer et composer des composants React accessibles dans votre projet. Une fois installé, vous pouvez générer des fonctionnalités UI complètes — formulaires, tableaux de données, navigation, boîtes de dialogue et plus encore — en utilisant de simples descriptions en français.

Contrairement aux bibliothèques de composants traditionnelles distribuées sous forme de packages npm, shadcn/ui copie le code source des composants directement dans votre projet. Cela signifie que vous possédez chaque ligne de code et pouvez personnaliser les composants sans vous heurter aux abstractions de la bibliothèque. Le skill shadcn/ui pour OpenClaw rend ce flux de travail encore plus rapide en gérant la sélection, l'installation, la composition et le style des composants par la conversation.

Flux de travail typique :

1. Demandez à OpenClaw d'ajouter un tableau de données avec tri et pagination.
2. L'agent exécute npx shadcn@latest add table et les composants associés, puis génère l'implémentation du tableau avec les colonnes spécifiées.
3. Un tableau de données entièrement fonctionnel et accessible apparaît dans votre projet — prêt à être personnalisé.

Ce skill est conçu pour les projets React et Next.js utilisant Tailwind CSS. Il s'associe naturellement avec le skill Frontend Design pour les conseils de mise en page et d'UX, et fonctionne bien avec tout flux de travail de design system.

Prérequis pour le Skill shadcn/ui

Avant d'installer le skill shadcn/ui, assurez-vous d'avoir :

• OpenClaw installé et en cours d'exécution (v1.0+)
• Un projet React ou Next.js avec Tailwind CSS configuré
• Node.js v18+ et un gestionnaire de paquets (npm, pnpm ou bun)
• clawhub CLI installé pour la gestion des skills

Vérifiez votre configuration :

# Vérifier la version d'OpenClaw
openclaw --version

# Vérifier la version de Node.js
node --version

# Vérifier que Tailwind CSS est configuré
npx tailwindcss --help

Si vous démarrez un nouveau projet, l'agent peut vous aider à initialiser un projet Next.js avec shadcn/ui pré-configuré en utilisant npx shadcn@latest init.

Comment Installer le Skill shadcn/ui

Installez le skill shadcn/ui avec une seule commande :

npx clawhub@latest install shadcn-ui

Pour vérifier l'installation :

clawhub list

Vous devriez voir shadcn-ui dans la liste des skills installés.

Configuration du Skill shadcn/ui

Le skill shadcn/ui ne nécessite ni clé API ni authentification externe. Il fonctionne avec les fichiers locaux de votre projet et le CLI shadcn.

Initialisation du Projet

Si votre projet n'a pas encore shadcn/ui configuré, l'agent peut l'initialiser :

# Initialiser shadcn/ui dans votre projet
npx shadcn@latest init

Cela crée un fichier de configuration components.json à la racine de votre projet avec les paramètres suivants :

| Paramètre | Description | |-----------|-------------| | style | Variante de style des composants (default ou new-york) | | tailwind.baseColor | Couleur de base du thème (slate, gray, zinc, etc.) | | tailwind.cssVariables | Utilisation ou non de variables CSS pour le thème | | aliases.components | Alias de chemin d'import pour les composants | | aliases.utils | Alias de chemin d'import pour les fonctions utilitaires |

Personnalisation du Thème

Personnalisez le thème par défaut en modifiant vos variables CSS ou en demandant à l'agent d'ajuster les couleurs :

/* Exemple : Variables de thème personnalisées dans globals.css */
@layer base {
  :root {
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
  }
}

Important : Les composants shadcn/ui sont copiés dans le code source de votre projet. Vous avez un contrôle total sur chaque composant — il n'y a pas de dépendances cachées ni d'abstractions verrouillées.

Exemples d'Utilisation du Skill shadcn/ui

1. Ajouter un Formulaire Complet

Vous : "Crée un formulaire d'inscription utilisateur avec des champs pour le nom, l'e-mail, le mot de passe et une case à cocher pour les conditions. Ajoute la validation avec zod."

L'agent installe les composants nécessaires (form, input, checkbox, button, label) via npx shadcn@latest add, puis génère un composant formulaire complet avec validation de schéma zod, messages d'erreur et labels accessibles. Le formulaire suit les patterns React Hook Form et est prêt à être connecté à votre API.

2. Construire un Tableau de Données

Vous : "Ajoute un tableau de données pour afficher les utilisateurs avec des colonnes pour le nom, l'e-mail, le rôle et le statut. Inclus le tri, le filtrage et la pagination."

L'agent ajoute le composant table et construit un tableau de données complet en utilisant @tanstack/react-table. Il génère les définitions de colonnes, les contrôles de filtre, les gestionnaires de tri et la pagination — le tout avec des types TypeScript appropriés et des attributs d'accessibilité.

3. Créer une Mise en Page de Tableau de Bord

Vous : "Configure une mise en page de tableau de bord avec une barre latérale repliable, une barre de navigation supérieure, un fil d'Ariane et une zone de contenu principal."

L'agent installe les composants sidebar, navigation-menu, breadcrumb et separator, puis les assemble en une mise en page responsive avec un bouton de barre latérale adapté au mobile et une structure HTML sémantique appropriée.

4. Ajouter une Palette de Commandes

Vous : "Ajoute une palette de commandes style VS Code avec le raccourci Ctrl+K qui permet aux utilisateurs de rechercher des pages et des actions."

L'agent installe les composants command et dialog, configure l'écouteur de raccourci clavier et crée un menu de commandes avec recherche, éléments groupés, icônes et gestionnaires de navigation.

5. Composer une Page de Paramètres

Vous : "Construis une page de paramètres avec des onglets pour Profil, Compte, Notifications et Apparence. Utilise des cartes dans chaque onglet pour regrouper les options associées."

L'agent installe les composants tabs, card, switch, select et separator, puis construit une interface de paramètres complète avec des champs de formulaire, des interrupteurs et des sélecteurs déroulants organisés en groupes d'onglets logiques.

Sécurité et Bonnes Pratiques

Suivez ces recommandations lors de l'utilisation du skill shadcn/ui :

• Vérifiez le code généré. L'agent génère le code des composants directement dans votre projet. Vérifiez toujours les nouveaux fichiers et modifications avant de commiter, en particulier les gestionnaires de formulaires et les intégrations API.
• Validez les entrées utilisateur. shadcn/ui fournit des composants UI, pas de validation des entrées. Associez toujours les formulaires à une validation côté serveur en utilisant des bibliothèques comme zod ou yup, et assainissez les entrées avant traitement.
• Maintenez vos dépendances à jour. Les composants shadcn/ui dépendent des primitives Radix UI et d'autres packages. Exécutez npm audit régulièrement et mettez à jour les dépendances vulnérables.
• Utilisez du HTML sémantique. L'agent génère un balisage accessible par défaut, mais vérifiez que les modifications personnalisées préservent les attributs ARIA et la navigation au clavier.
• Suivez le pattern des composants. Gardez les composants shadcn/ui dans votre répertoire de composants désigné (par exemple, components/ui/). Évitez de les modifier en ligne — étendez-les par composition à la place. Consultez la Liste de Vérification de Sécurité pour les recommandations générales d'OpenClaw.

Résolution des Erreurs Courantes

"components.json not found"

Votre projet n'a pas encore été initialisé avec shadcn/ui.

# Initialiser shadcn/ui dans votre projet
npx shadcn@latest init

Suivez les invites pour sélectionner votre style, couleur de base et alias d'import. L'agent peut également le faire pour vous.

"Module not found: Can't resolve '@/components/ui/button'"

L'alias de chemin d'import ne correspond pas à la configuration de votre projet.

1. Vérifiez dans votre components.json le chemin d'alias configuré.
2. Vérifiez que votre tsconfig.json a des alias de chemin correspondants :

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

3. Si vous utilisez Next.js, redémarrez le serveur de développement après avoir modifié tsconfig.json.

"Tailwind CSS classes not applying"

Tailwind ne traite pas le répertoire des fichiers de composants.

1. Vérifiez que votre tailwind.config.js inclut le chemin des composants :

module.exports = {
  content: [
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
}

2. Assurez-vous que globals.css importe les directives Tailwind (@tailwind base; @tailwind components; @tailwind utilities;).
3. Redémarrez le serveur de développement.