DmfAutoStyleguide

DmfAutoStyleguide rendert alle relevanten Bootstrap- und Shopware-Komponenten unter /styleguide mit dem aktiven, kompilierten Theme-CSS: kein separates Stylesheet, kein Build-Schritt nach Installation. Zusätzlich liefert das Plugin eine CLI- und Claude-Code-Skill-Pipeline zur Extraktion und Übernahme von Design-Tokens.

Schnellinfo

Composer-Paket	dmf/sw6-plugin-auto-styleguide
Plugin-Klasse	DmfAutoStyleguide\DmfAutoStyleguide
Namespace	DmfAutoStyleguide
Version	1.0.0
Shopware	~6.7.0
PHP	8.2+

Installation

composer require dmf/sw6-plugin-auto-styleguide
bin/console plugin:refresh
bin/console plugin:install --activate DmfAutoStyleguide
bin/console cache:clear

Kein Build-Schritt nötig, der Styleguide nutzt das bereits kompilierte Theme-CSS.

Konfiguration

Plugin-Einstellung im Admin (System → Plugins → DmfAutoStyleguide → Konfigurieren):

Feld	Typ	Default	Wirkung
enabled	bool	false	Aktiviert den Styleguide auch in prod. In dev und stage ist er ohnehin erreichbar.

Sichtbarkeit

In Produktivumgebungen ist /styleguide per default ein 404. Der Toggle enabled schaltet ihn explizit frei, falls er für Stakeholder zugänglich sein soll.

Styleguide-Sektionen

15 Komponenten-Sektionen unter /styleguide:

Sektion	Inhalt
Colors	Theme-SCSS-Tokens (auto-detected) + Bootstrap Theme Colors
Typography	h1–h6, Display 1–3, Body, Weights, Inline-Elemente
Buttons	Solid, Outline, Sizes, States, Full-Width
Forms	Inputs, Select, Textarea, Checkboxes, Radios, Switches
Badges	Variants, Pills
Alerts	Success, Danger, Warning, Info
Cards	Body, Header/Footer, Themed
Tables	Default, Striped
Dropdowns	Primary, Outline, Active/Disabled Items
Pagination	Default, Sizes (sm/lg)
Breadcrumb	Standard Shopware Breadcrumb
Modals	Trigger + Modal Dialog
Tabs & Accordion	Bootstrap Tabs + Accordion
Links	Default, Colored, Bold, No-Underline
Utilities	Spacing-Skala, Border-Radius, Shadows, Text/BG Colors

Token-Pipeline (CLI)

dmf:styleguide:map-tokens

Vergleicht Token-Konfiguration zwischen Parent- und Child-Theme. Auto-Detection via configInheritance in theme.json.

bin/console dmf:styleguide:map-tokens                 # Dry-Run
bin/console dmf:styleguide:map-tokens --theme=MyTheme # bestimmtes Child-Theme
bin/console dmf:styleguide:map-tokens --format=json   # CI-tauglicher Output
bin/console dmf:styleguide:map-tokens --apply         # Overrides ins Child-Theme schreiben

Schreibschutz

TokenMapWriter schreibt ausschließlich in Pfade, die /custom/ enthalten. Schreibvorgänge in vendor/ werden hart blockiert.

dmf:styleguide:generate

Extrahiert Design-Tokens aus einer HTML-Quelle und schreibt sie als JSON.

bin/console dmf:styleguide:generate -i path/to/styleguide.html
bin/console dmf:styleguide:generate -i styleguide.html -o var/tokens

Output:

Datei	Inhalt
var/styleguide/design-tokens.json	Color, Typography, Spacing, Border
var/styleguide/component-mapping.json	CSS-Klassen nach Komponenten-Kategorie

Claude Code Skill: /extract-tokens

Im Plugin liegt der Skill extract-tokens, der den vollen Workflow (Figma MCP → Token-Diff → SCSS- und theme.json-Schreibvorgang) interaktiv ausführt.

/extract-tokens path/to/styleguide.html
/extract-tokens https://figma.com/design/ABC123/MyDesign?node-id=0-1
/extract-tokens current
/extract-tokens styleguide.html --theme MyCustomTheme
/extract-tokens styleguide.html --write

CLI vs. Skill

Feature	CLI (bin/console)	Skill (/extract-tokens)
HTML parsen	JSON-Output	Interaktiver Report + Diff
Figma	nur vorher exportiertes JSON	direkt über MCP, URL reingeben
Theme erkennen	--theme-Flag	Auto-Detect aus Projektstruktur
Tokens schreiben	nur map-tokens --apply	direkt in SCSS und theme.json
Kontext	,	kennt SCSS-Konventionen, fragt bei Unklarheit

Auto-Detection

Das Plugin erkennt automatisch:

• Child-Theme über configInheritance in theme.json.
• Parent-Theme als letzten Eintrag (nach @Storefront) in configInheritance.
• Token-Prefix anhand der häufigsten $prefix--Konvention im SCSS.
• SCSS-Pfad in bekannten Verzeichnissen (abstract/variables/custom.scss, overrides.scss, …).

Hinweise

Theme-Agnostik

Die Standard-Sektionen rendern mit jedem Shopware-Theme. Das Plugin erkennt das aktive Child-Theme und dessen Tokens automatisch. Theme-spezifische Erweiterungen werden via {% sw_include ... ignore missing %} eingebunden, fehlende Templates erzeugen keinen Fehler.