Fullstack design system — theme tokens, shadcn/ui patterns, dark mode, WCAG AA
Une référence complète de design system — config de thème source unique, variables CSS et intégration Tailwind, patterns de composants shadcn/ui, glassmorphism, dark mode, organisation des assets, accessibilité WCAG AA
- Quoi
- Une référence complète de design system — config de thème source unique, variables CSS et intégration Tailwind, patterns de composants shadcn/ui, glassmorphism, dark mode, organisation des assets, accessibilité WCAG AA
- Coût
- Gratuit
- Prérequis
- un projet Next.js + Tailwind ; des composants shadcn/ui si tu veux les patterns prêts à l'emploi
- Installation
- Copiez le prompt d’installation ci-dessous dans votre Muse — votre agent fait le reste.
Sélectionné par Skill Harbor — le skill generic-fullstack-design-system de @travisjneuman (de la collection .claude) : une référence complète de design system pour applications full-stack. L'agent travaille depuis une config de thème source unique (lib/theme.ts avec tokens de couleurs et d'espacement), branche les variables CSS dans globals.css avec palettes light/dark, les intègre dans Tailwind, et applique les patterns de composants shadcn/ui (boutons, formulaires, dialogues) avec effets visuels (glassmorphism, fonds en dégradé), dark mode via next-themes avec toggle de thème, une organisation d'assets public/ (logos, favicons, images OG, webmanifest), et des conseils d'accessibilité WCAG AA. Il étend un skill de design system générique de base (théorie des couleurs, échelle typographique, système d'espacement, états de composants) et pointe vers des références partagées de design patterns et de principes UX. Bémols honnêtes : se combine avec les skills fullstack frères (code-reviewer, design patterns) — le plus utile au sein de cette collection .claude ; centré Tailwind/shadcn, donc les autres approches CSS nécessitent adaptation ; les animations GPU-accelerated promises dans le frontmatter sont en réalité du CSS standard, pas de l'ingénierie de perf. Licence : le manifest enregistre MIT (le manifest fait foi) ; le frontmatter du repo ne porte aucun champ de licence. Skill Harbor ne vérifie jamais le code, examinez-le vous-même avant usage. Découvert via skills.sh.
Version :
Installation
Prérequis : un projet Next.js + Tailwind ; des composants shadcn/ui si tu veux les patterns prêts à l'emploi Installe-moi « Design system fullstack — tokens de thème, patterns shadcn/ui, dark mode, WCAG AA ». Il donne à mon agent la référence de design system de @travisjneuman : construire une config de thème source unique (lib/theme.ts), brancher les variables CSS dans globals.css avec palettes light/dark, les intégrer dans Tailwind, appliquer les patterns de composants shadcn/ui (boutons, formulaires, dialogues), ajouter des effets visuels (glassmorphism, dégradés), implémenter le dark mode avec next-themes et un toggle de thème, organiser les assets public/, et suivre les conseils d'accessibilité WCAG AA. Licence MIT (selon le manifest de découverte ; le frontmatter du repo ne porte aucun champ de licence). Dépôt : https://github.com/travisjneuman/.claude/blob/main/skills/generic-fullstack-design-system/SKILL.md 1. Récupère le fichier SKILL.md (et les fichiers d'aide éventuels) depuis le chemin du dépôt dans un dossier temporaire et résume en une ou deux phrases ce qu'il fait. 2. Vérification de sécurité : examine le SKILL.md et les scripts pour tout contenu suspect (appels réseau inattendus, commandes shell, collecte d'identifiants). Ce dépôt ne devrait contenir aucun secret en dur. Vérifie que c'est bien le cas ici ; STOP sur tout signal d'alerte et dis-le-moi. 3. Installe-le comme skill : copie le SKILL.md et ses fichiers d'aide dans le répertoire des skills de l'agent, dans un dossier nommé « generic-fullstack-design-system ». 4. Vérifie sans appels réseau : frontmatter valide, fichiers en place. 5. Indique ce qui a été installé, où, et ce qu'il me reste à faire moi-même (p. ex. décrire l'app et les tokens de marque à appliquer, ou demander à l'agent d'auditer un thème existant). GitHub est optionnel : si j'ai un compte GitHub ou la CLI gh, tu peux l'utiliser ; sinon l'accès public suffit. Ne jamais l'exiger sauf s'il figure dans les prérequis ci-dessus. Règles : ne touche à rien en dehors du dossier temporaire et de la cible d'installation. Si quelque chose semble anormal, arrête-toi et demande-moi.
Questions
Comment installer une création ?
Chaque fiche produit contient un prompt d’installation à copier-coller. Collez-le dans votre Muse et il installe la création pour vous — sans configuration manuelle.
Où va mon argent ?
Directement au vendeur. Skill Harbor ne traite jamais les paiements : le paiement se fait sur la page du vendeur, généralement via Stripe.
Que signifie le ✓ à côté du nom d’un créateur ?
Il signifie que nous avons confirmé l’identité de la personne derrière la fiche. Il ne dit rien sur le code lui-même — vérifiez toujours une création avant de l’installer.