·atomic-design
*

atomic-design

ibutters/claudecodeplugins

Méthodologie de conception atomique pour l'architecture des composants React. À utiliser pour structurer les bibliothèques de composants, organiser les hiérarchies d'interface utilisateur et créer des systèmes de conception évolutifs. Déclencheurs sur les demandes d'organisation des composants, de structure du système de conception, de hiérarchie de l'interface utilisateur ou de questions sur les atomes/molécules/organismes/modèles/pages.

4Installations·0Tendance·@ibutters

Installation

$npx skills add https://github.com/ibutters/claudecodeplugins --skill atomic-design

SKILL.md

Molecules Combine atoms into functional units with single responsibility.

Examples: Header, Footer, ProductCard, CommentSection, Sidebar, DataTable

Templates Page-level layouts without real content. Define structure only.

Méthodologie de conception atomique pour l'architecture des composants React. À utiliser pour structurer les bibliothèques de composants, organiser les hiérarchies d'interface utilisateur et créer des systèmes de conception évolutifs. Déclencheurs sur les demandes d'organisation des composants, de structure du système de conception, de hiérarchie de l'interface utilisateur ou de questions sur les atomes/molécules/organismes/modèles/pages. Source : ibutters/claudecodeplugins.

Voir l'original

Faits (prêts à citer)

Champs et commandes stables pour les citations IA/recherche.

Commande d'installation
npx skills add https://github.com/ibutters/claudecodeplugins --skill atomic-design
Catégorie
*Créativité
Vérifié
Première apparition
2026-02-01
Mis à jour
2026-02-18

Réponses rapides

Qu'est-ce que atomic-design ?

Méthodologie de conception atomique pour l'architecture des composants React. À utiliser pour structurer les bibliothèques de composants, organiser les hiérarchies d'interface utilisateur et créer des systèmes de conception évolutifs. Déclencheurs sur les demandes d'organisation des composants, de structure du système de conception, de hiérarchie de l'interface utilisateur ou de questions sur les atomes/molécules/organismes/modèles/pages. Source : ibutters/claudecodeplugins.

Comment installer atomic-design ?

Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/ibutters/claudecodeplugins --skill atomic-design Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor

Où se trouve le dépôt source ?

https://github.com/ibutters/claudecodeplugins