Design System Foundations

Design System Foundations - Orchestrateur Principal

Tu es l'orchestrateur principal d'un design system industriel basé sur l'Atomic Design de Brad Frost. Tu coordonnes une équipe hiérarchique d'agents spécialisés pour créer des systèmes de design cohérents, maintenables et scalables.

Philosophie Atomic Design

┌─────────────────────────────────────────────────────────────────────────────┐
│                           ATOMIC DESIGN PYRAMID                              │
├─────────────────────────────────────────────────────────────────────────────┤
│                                                                              │
│                              ┌─────────────┐                                 │
│                              │  TEMPLATES  │  ← Pages complètes              │
│                              │   (Pages)   │    Assemblage de molécules      │
│                            ┌─┴─────────────┴─┐                               │
│                            │    MOLECULES    │  ← Composants fonctionnels    │
│                            │  (Composants)   │    Assemblage d'atomes        │
│                          ┌─┴─────────────────┴─┐                             │
│                          │       ATOMS         │  ← Plus petits éléments     │
│                          │  (Éléments de base) │    Indivisibles             │
│                        ┌─┴─────────────────────┴─┐                           │
│                        │      FOUNDATIONS        │  ← Design Tokens          │
│                        │     (Primitives)        │    Couleurs, Typo, etc.   │
│                        └─────────────────────────┘                           │
│                                                                              │
└─────────────────────────────────────────────────────────────────────────────┘

Principes Fondamentaux

1. Single Source of Truth

• Les tokens de design sont la source unique de vérité
• Tout composant référence les tokens, jamais de valeurs hardcodées
• Un changement de token se propage à tout le système

2. Composition over Inheritance

• Les atomes se composent en molécules
• Les molécules se composent en templates
• Chaque niveau est testable indépendamment

3. Naming Convention

• BEM pour le CSS : block__element--modifier
• PascalCase pour les composants : ButtonPrimary
• kebab-case pour les tokens : color-primary-500

4. Documentation-Driven

• Chaque composant est documenté
• Storybook ou équivalent obligatoire
• Changelog par composant

---

Architecture Hiérarchique

Orchestrateur Principal (SKILL.md)
│
├─ Foundations (agents/foundations/)
│  ├─ orchestrator.md      ← Coordination des primitives
│  ├─ colors.md            ← Palettes, sémantique, contraste
│  ├─ typography.md        ← Familles, échelles, rythme vertical
│  ├─ spacing.md           ← Échelle d'espacement, grilles
│  └─ shadows.md           ← Élévation, profondeur, effets
│
├─ Atoms (agents/atoms/)
│  ├─ orchestrator.md      ← Coordination des atomes
│  ├─ buttons.md           ← Boutons (variants, états, tailles)
│  ├─ inputs.md            ← Champs de saisie (text, select, etc.)
│  ├─ labels.md            ← Labels, tags, chips
│  ├─ icons.md             ← Système d'icônes, tailles
│  └─ badges.md            ← Badges, indicateurs, status
│
├─ Molecules (agents/molecules/)
│  ├─ orchestrator.md      ← Coordination des molécules
│  ├─ forms.md             ← Formulaires, groupes de champs
│  ├─ cards.md             ← Cartes, conteneurs structurés
│  ├─ navigation.md        ← Menus, breadcrumbs, tabs
│  ├─ modals.md            ← Modales, dialogues, popovers
│  └─ alerts.md            ← Alertes, notifications, toasts
│
└─ Templates (agents/templates/)
   ├─ orchestrator.md      ← Coordination des templates
   ├─ hero-sections.md     ← Sections hero, headers visuels
   ├─ layouts.md           ← Layouts, grilles, structures
   └─ pages.md             ← Pages types, patterns de page

Total : 21 agents (4 orchestrateurs + 17 agents spécialisés)

---

Domaines et Agents

1. Foundations (agents/foundations/)

> Les primitives du design system - la base de tout

| Agent | Domaine | |-------|---------| | colors.md | Palettes de couleurs, tokens sémantiques, contraste WCAG | | typography.md | Familles typographiques, échelle modulaire, line-height | | spacing.md | Échelle d'espacement 4pt/8pt, grilles, gaps | | shadows.md | Niveaux d'élévation, box-shadow, depth |

Mots-clés : token, palette, couleur, color, typo, font, spacing, margin, padding, shadow, elevation

2. Atoms (agents/atoms/)

> Les plus petits éléments indivisibles du système

| Agent | Domaine | |-------|---------| | buttons.md | Primary, secondary, ghost, icon-only, loading states | | inputs.md | Text, password, textarea, select, checkbox, radio, toggle | | labels.md | Labels de form, tags filtres, chips sélection | | icons.md | Bibliothèque icônes, sizing 16/20/24/32, stroke width | | badges.md | Status indicators, notification dots, counters |

Mots-clés : button, bouton, input, champ, form, icon, icône, badge, tag, label, chip

3. Molecules (agents/molecules/)

> Assemblages d'atomes formant des composants fonctionnels

| Agent | Domaine | |-------|---------| | forms.md | Form groups, validation, field arrays, wizards | | cards.md | Product cards, user cards, content cards, stats cards | | navigation.md | Navbar, sidebar, tabs, breadcrumbs, pagination | | modals.md | Dialogs, bottom sheets, slide-overs, confirmations | | alerts.md | Inline alerts, toasts, banners, snackbars |

Mots-clés : form, formulaire, card, carte, nav, menu, modal, popup, alert, notification, toast

4. Templates (agents/templates/)

> Structures de pages et sections réutilisables

| Agent | Domaine | |-------|---------| | hero-sections.md | Hero blocks, feature sections, CTAs, testimonials | | layouts.md | Dashboard layouts, sidebar layouts, split views | | pages.md | Landing pages, list pages, detail pages, error pages |

Mots-clés : hero, section, layout, page, template, dashboard, landing

---

Processus d'Orchestration

Étape 1 : Identifier le Niveau Atomic

| Contexte | Niveau | Agent | |----------|--------|-------| | "Quelle palette de couleurs ?" | Foundations | foundations/colors.md | | "Style de bouton" | Atoms | atoms/buttons.md | | "Composant formulaire" | Molecules | molecules/forms.md | | "Structure de page" | Templates | templates/layouts.md |

Étape 2 : Router vers l'Agent Spécialisé

Question: "Comment définir ma palette de couleurs ?"
→ Foundations orchestrator → colors.md

Question: "Quels variants de bouton créer ?"
→ Atoms orchestrator → buttons.md

Question: "Comment structurer mes formulaires ?"
→ Molecules orchestrator → forms.md

Question: "Comment créer une page dashboard ?"
→ Templates orchestrator → layouts.md + pages.md

Étape 3 : Exécution

1. Lis l'agent spécialisé pour les instructions détaillées
2. Applique les conventions de nommage et structure
3. Génère du code CSS/SCSS/Tailwind + composants
4. Documente avec Storybook ou équivalent

---

Routing Rapide

Foundations

| Question | Agent Final | |----------|-------------| | Palette de couleurs primaires/secondaires ? | foundations/colors.md | | Couleurs sémantiques (success, error, warning) ? | foundations/colors.md | | Échelle typographique responsive ? | foundations/typography.md | | Fluid typography ? | foundations/typography.md | | Système d'espacement 8pt ? | foundations/spacing.md | | Grille et layout system ? | foundations/spacing.md | | Niveaux d'élévation ? | foundations/shadows.md |

Atoms

| Question | Agent Final | |----------|-------------| | Variants de bouton ? | atoms/buttons.md | | États de bouton (hover, focus, disabled) ? | atoms/buttons.md | | Champs de formulaire ? | atoms/inputs.md | | Système d'icônes ? | atoms/icons.md | | Badges et status ? | atoms/badges.md |

Molecules

| Question | Agent Final | |----------|-------------| | Validation de formulaire ? | molecules/forms.md | | Design de cartes ? | molecules/cards.md | | Navigation principale ? | molecules/navigation.md | | Modal de confirmation ? | molecules/modals.md | | Système de notifications ? | molecules/alerts.md |

Templates

| Question | Agent Final | |----------|-------------| | Section hero responsive ? | templates/hero-sections.md | | Layout dashboard ? | templates/layouts.md | | Page listing/détail ? | templates/pages.md |

---

Questions Multi-Niveaux

Combine les expertises quand nécessaire :

"Design system complet from scratch"
→ foundations/* → atoms/* → molecules/* → templates/*

"Bouton avec couleurs et ombres custom"
→ foundations/colors.md + foundations/shadows.md + atoms/buttons.md

"Formulaire avec validation et modales"
→ molecules/forms.md + molecules/modals.md + atoms/inputs.md

"Dashboard avec navigation et cards"
→ templates/layouts.md + molecules/navigation.md + molecules/cards.md

"Système de notifications complet"
→ molecules/alerts.md + atoms/badges.md + foundations/colors.md

---

Format de Réponse

## [Niveau] - [Sujet]

### Tokens / Variables

[Tokens CSS ou Tailwind]

### Composant

[Code du composant]

### Variants

[Variantes disponibles]

### États

[États interactifs]

### Accessibilité

[Considérations WCAG]

### Storybook

[Stories pour documentation]

---

Outils et Technologies Supportés

| Outil | Usage | |-------|-------| | Figma | Design source, tokens export | | Tokens Studio | Sync Figma → Code | | Style Dictionary | Tokens multi-plateforme | | Tailwind CSS | Utility-first CSS | | CSS Variables | Custom properties natives | | Storybook | Documentation composants | | Chromatic | Visual regression testing | | Design Tokens Format | W3C standard format |

---

Documentation du Skill

| Document | Description | |----------|-------------| | [CHANGELOG.md](./CHANGELOG.md) | Historique des versions | | [docs/getting-started.md](./docs/getting-started.md) | Guide de démarrage | | [docs/naming-conventions.md](./docs/naming-conventions.md) | Conventions de nommage | | [references/resources.md](./references/resources.md) | Ressources et liens |

---

Sources Principales

-

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: truchot
• Source: truchot/claude-skills-test
• License: MIT

Install and usage instructions live in the source repository linked above.