Storybook Komplettkurs

Storybook-Grundlagen und Projekt-Setup

• Rolle im Front-End-Workflow
• Installation in bestehenden Projekten
• Framework-spezifische Konfiguration
• Ordnerstruktur und Story-Organisation

Stories, Varianten und Interaktion

• Aufbau von Component Stories
• Args, Controls und Parameter
• Komponentenzustände und Varianten
• Interaktive Stories mit Actions
• Mocking von Daten und Events

Dokumentation und Design-System-Arbeit

• Automatische Docs-Seiten
• MDX für ergänzende Inhalte
• Komponentenbeschreibung und Usage Notes
• Add-ons für Design-Workflows

Testing mit Storybook

• Interaction-Tests in Stories
• Component Tests mit Vitest
• Accessibility-Checks im Storybook
• Visual Tests mit Chromatic
• Snapshot-Vergleiche und Regressionen

CI/CD, Build und Deployment

• Storybook-Build für Pipelines
• Automatisierte Testläufe in CI/CD
• Review-Workflows für Pull Requests
• Deployment der Storybook-Dokumentation

Erweiterung und Wartbarkeit

• Add-on-Auswahl für Projektanforderungen
• Theming und UI-Anpassungen
• Wiederverwendbare Preview-Konfiguration
• Pflege langlebiger Story-Strukturen

• Sichere Kenntnisse in TypeScript
• Erfahrung mit React, Vue oder Angular
• Grundlagen in HTML, CSS und komponentenbasierter Front-End-Entwicklung
• Erste Berührungspunkte mit Testing-Tools wie Vitest, Cypress oder Playwright hilfreich
• Für App-Projekte sind Kenntnisse aus dem Flutter Apps mit Dart Grundkurs eine sinnvolle Ergänzung, aber keine Voraussetzung

• Front-End-Entwicklerinnen und Front-End-Entwickler mit React-, Vue- oder Angular-Projekten
• App-Entwicklerinnen und App-Entwickler mit komponentenbasierten UI-Architekturen
• UX- und Design-System-Teams, die Komponenten dokumentieren und abstimmen
• QA- und Test-Engineers, die UI-Regressionen früher im Entwicklungsprozess prüfen