ui-stylingpar nextlevelbuilder

UI Styling Skill.

Un skill Claude Code et Codex pour le design UI : stylisation UI accessible avec shadcn/ui, Tailwind CSS et visuels canvas.

Web et UI
Code UI

Télécharger OpenDesign Voir le guide d'utilisation

nextlevelbuilder/ui-ux-pro-max-skill · .claude/skills/ui-styling/SKILL.mdSKILL.md

--- name: ui-styling description: Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and … --- ## When to Use This Skill ## Core Stack ## Script Paths ## Quick Start ## Component Library Guide ## Theme & Customization

En-tête et titres de section lus depuis le fichier source le 14/09/2026 · 10 626 caractères au total

01 Ce qu'il fait

Ce que fait le skill ui-styling dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Ce skill construit des interfaces utilisateur React accessibles en combinant des composants shadcn/ui (primitives Radix UI avec Tailwind CSS), un style utility-first avec Tailwind CSS, et des systèmes de design visuel basés sur canvas. Il cible les projets Next.js, Vite, Remix et Astro. Les composants sont copiés dans votre codebase via CLI, ce qui vous donne un contrôle total et la sécurité de types TypeScript.

Le skill couvre les mises en page responsives, le mode sombre, les tokens de design, la validation de formulaires, les tableaux de données et des compositions visuelles de qualité muséale. Il inclut une documentation de référence pour les patterns de composants, la théorisation, l'accessibilité (ARIA, navigation au clavier), les points de rupture responsives et la personnalisation Tailwind. Des scripts Python automatisent l'installation des composants et la génération de configuration.

Ce qu'il produit

tailwind.config.js généré avec des tokens de thème personnalisés, couleurs, polices, espacements et extensions de points de rupture.

Voir l'exemple de prompt ↗

Fonctionnement

01
Initialiser Shadcn/ui avec Tailwind
Exécutez npx shadcn@latest init pour configurer à la fois shadcn/ui et Tailwind CSS, en demandant le framework, TypeScript, les chemins et les préférences de thème.
02
Ajouter des Composants à Votre Codebase
Installez des composants avec npx shadcn@latest add button card dialog form, qui les copie dans votre projet pour un contrôle et une personnalisation totaux.
03
Composer avec des Classes Utilitaires
Combinez les composants shadcn/ui avec les classes utilitaires Tailwind pour les mises en page responsives, l'espacement, les couleurs et les états au survol directement dans les attributs className JSX.
04
Appliquer des Variantes de Mode Sombre
Utilisez next-themes pour le changement de thème et ajoutez des classes utilitaires préfixées dark: à tous les éléments thématisés pour une prise en charge cohérente du mode sombre.
05
Exploiter l'Accessibilité de Radix
Les primitives Radix UI fournissent des patterns ARIA intégrés, une navigation au clavier et une gestion du focus sans configuration supplémentaire.

02 Trouvez celui qui vous convient

Quand utiliser le skill ui-styling

Utilisez le skill ui-styling dans Claude Code ou Codex lorsque la tâche concerne ce type de design UI. Portée et limites ci-dessous proviennent du fichier propre au skill.

Bon choix

Construction d'interfaces avec des frameworks basés sur React comme Next.js, Vite, Remix ou Astro.
Implémentation de composants accessibles tels que des dialogues, des formulaires, des tableaux et de la navigation.
Création de mises en page responsives, mobile-first, avec une approche CSS utility-first.
Construction de systèmes de design avec des tokens cohérents et une prise en charge du mode sombre.
Génération de designs visuels, d'affiches ou de matériaux de marque avec des workflows basés sur canvas.

Connaître les limites

Nécessite shadcn/ui, Tailwind CSSLe SKILL.md nomme cette dépendance ; le skill ne fonctionne pas sans elle dans votre projet.

Quoi fournir

Noms de composants pour l'installationPassez les noms de composants à shadcn_add.py ou npx shadcn@latest add pour installer avec gestion des dépendances.
Tokens de thème personnalisésFournissez des couleurs et polices personnalisées à tailwind_config_gen.py pour générer tailwind.config.js avec un thème étendu.

03 Dans le skill

Règles que le Skill ui-styling Donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Responsive Mobile-first
Commencez par les styles mobiles, puis superposez des variantes responsives à l'aide des points de rupture (sm, md, lg, xl, 2xl). Tailwind traite le mobile-first par défaut.
Extraction Utility-first
Utilisez les classes Tailwind directement dans le JSX. N'extrayez des composants qu'en cas de véritable répétition, pas pour des motifs à usage unique.
Chemins de scripts relatifs au répertoire du skill
Les chemins de scripts de ce skill sont relatifs au répertoire contenant SKILL.md, pas à la racine du projet.
Utilisation de composants axée sur l'accessibilité
Exploitez les primitives Radix UI pour les patterns ARIA, ajoutez des états de focus aux éléments interactifs et utilisez du HTML sémantique. Le support des lecteurs d'écran est intégré aux composants shadcn/ui.
Tokens de design pour la cohérence
Utilisez une échelle d'espacement cohérente, des palettes de couleurs et un système typographique définis dans la configuration Tailwind. Appliquez des variables de thème plutôt que des valeurs arbitraires.
Sécurité de type TypeScript
Tous les composants sont conçus TypeScript-first avec une sécurité de type complète. Utilisez des props typées et des schémas de formulaire pour une meilleure expérience développeur.
Évitez les noms de classes dynamiques
La purge CSS automatique de Tailwind exige des noms de classes statiques. Une construction dynamique des classes empêche l'élimination du code mort.
Norme d'artisanat expert
Chaque détail compte — traitez l'UI comme un artisanat. Appliquez une exécution de qualité muséale aux compositions visuelles avec des motifs systématiques et une esthétique raffinée.

04 Mettez-le en pratique

Installer ui-styling dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter ui-styling à Claude Code, Codex ou Votre Agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Forme générique de la CLI skills pour .claude/skills/ui-styling/SKILL.md ; le dépôt peut documenter son propre chemin.

Donnez au skill une première tâche de design UI

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

Starter prompt

Build a responsive dashboard with a three-column card grid layout that shows analytics metrics. Add a data table component with sorting and filtering for user records. Implement dark mode using next-themes with consistent color variants across all cards and table elements. Include a form dialog with email and password validation using react-hook-form and zod schema. Make sure all interactive elements have proper focus states and keyboard navigation.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Testez les points de rupture responsives à sm, md, lg, xl et 2xl pour vous assurer que la mise en page mobile-first s'adapte correctement.
Validez l'accessibilité en testant la navigation au clavier, la gestion du focus et les annonces des lecteurs d'écran sur les dialogues et formulaires.
Vérifiez la validation des formulaires avec react-hook-form et le résolveur zod pour vous assurer que les messages d'erreur s'affichent correctement.

Dans OpenDesign, importez ui-styling depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: nextlevelbuilder
Repository: github.com/nextlevelbuilder/ui-ux-pro-max-skill Branche main
Fichier du skill: .claude/skills/ui-styling/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 7f69fed
License: Apache-2.0 Depuis .claude/skills/ui-styling/LICENSE.txt ; SKILL.md indique « MIT ». Le LICENSE.txt au niveau du fichier indique Apache-2.0 tandis que le front matter indique MIT ; listé selon la licence au niveau du fichier.
Étoiles du dépôt: 127 450 Instantané GitHub pris le 2026-09-14 pour l'ensemble du dépôt nextlevelbuilder/ui-ux-pro-max-skill, qui contient 7 skills dans ce catalogue. Pas une note ou un décompte d'utilisation pour ui-styling.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Quand utiliser ce skillListe des scénarios : frameworks React, composants accessibles, mises en page responsives, mode sombre, systèmes de design, designs visuels.
Stack principaleDécrit les composants shadcn/ui, le style utility Tailwind et les couches de design visuel canvas.
Chemins de scriptsExplique que les chemins de scripts sont relatifs au répertoire du skill, pas à la racine du projet.
Démarrage rapidePrésente l'initialisation de shadcn/ui, l'installation de composants et une configuration Tailwind uniquement pour Vite.
Guide de la bibliothèque de composantsRenvoie vers shadcn-components.md couvrant les formulaires, mises en page, overlays, retours et composants d'affichage.
Thème et personnalisationRenvoie à shadcn-theming.md pour le mode sombre, les variables CSS, les couleurs et les variantes de composants.
Modèles d'accessibilitéRenvoie à shadcn-accessibility.md pour l'ARIA, la navigation au clavier, la gestion du focus et les lecteurs d'écran.
Utilitaires TailwindRenvoie à tailwind-utilities.md pour la mise en page, l'espacement, la typographie, les couleurs, les bordures et les ombres.
Design responsiveRenvoie à tailwind-responsive.md pour les points de rupture mobile-first et les modèles d'utilitaires responsives.
Personnalisation TailwindRenvoie à tailwind-customization.md pour la structure de configuration, les utilitaires personnalisés, les plugins et les extensions de thème.
Système de design visuelRenvoie à canvas-design-system.md pour la philosophie de design, la communication visuelle et les compositions sophistiquées.
Scripts utilitairesDécrit shadcn_add.py pour l'installation de composants et tailwind_config_gen.py pour la génération de configuration.

Description du skill lui-même

« Créez de belles interfaces utilisateur accessibles avec les composants shadcn/ui (construits sur Radix UI + Tailwind), le style utilitaire Tailwind CSS, et des designs visuels basés sur canvas. À utiliser lors de la construction d'interfaces utilisateur, de l'implémentation de systèmes de design, de la création de mises en page responsives, de l'ajout de composants accessibles (dialogues, menus déroulants, formulaires, tableaux), de la personnalisation de thèmes et de couleurs, de l'implémentation du mode sombre, de la génération de designs visuels et d'affiches, ou de l'établissement de motifs de style cohérents dans les applications. »

Description du front matter depuis SKILL.md. Le fichier complet fait environ 10 626 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill ui-styling

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Quels formats de sortie produit le système de design visuel ?

La couche de design visuel basée sur canvas crée des compositions de qualité muséale pour les designs visuels, les affiches et les supports de marque. Elle suit une approche guidée par la philosophie, avec un minimum de texte et un maximum d'impact visuel.

UI Styling

Exécutez ui-styling sur une Véritable Tâche de Conception d'Interface.

Téléchargez OpenDesign, importez ui-styling depuis son lien SKILL.md, collez l'invite ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill ui-styling

Ce que fait le skill ui-styling dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill ui-styling

Bon choix

Connaître les limites

Quoi fournir

Règles que le Skill ui-styling Donne à Claude Code et Codex

Responsive Mobile-first

Extraction Utility-first

Chemins de scripts relatifs au répertoire du skill

Utilisation de composants axée sur l'accessibilité

Tokens de design pour la cohérence

Sécurité de type TypeScript

Évitez les noms de classes dynamiques

Norme d'artisanat expert