DmfAutoStyleguide

DmfAutoStyleguide renders all relevant Bootstrap and Shopware components at /styleguide using the active, compiled theme CSS: no separate stylesheet, no post-install build step. The plugin also ships a CLI and Claude Code Skill pipeline for extracting and applying design tokens.

Quick facts

Composer package	dmf/sw6-plugin-auto-styleguide
Plugin class	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

No build step required, the styleguide reuses the already compiled theme CSS.

Configuration

Plugin setting in the admin (System → Plugins → DmfAutoStyleguide → Configure):

Field	Type	Default	Effect
enabled	bool	false	Enable the styleguide in prod. It is always reachable in dev and stage.

Visibility

In production environments /styleguide returns 404 by default. Toggle enabled to expose it explicitly, e.g. for stakeholder access.

Styleguide sections

15 component sections at /styleguide:

Section	Contents
Colors	Theme SCSS tokens (auto-detected) + Bootstrap theme colors
Typography	h1–h6, Display 1–3, body, weights, inline elements
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 scale, border radius, shadows, text/bg colors

Token pipeline (CLI)

dmf:styleguide:map-tokens

Compares the token configuration between parent and child theme. Auto-detected via configInheritance in theme.json.

bin/console dmf:styleguide:map-tokens                 # dry run
bin/console dmf:styleguide:map-tokens --theme=MyTheme # specific child theme
bin/console dmf:styleguide:map-tokens --format=json   # CI-friendly output
bin/console dmf:styleguide:map-tokens --apply         # write overrides into the child theme

Write protection

TokenMapWriter only writes to paths containing /custom/. Writes targeting vendor/ are blocked.

dmf:styleguide:generate

Extracts design tokens from an HTML source and writes them as JSON.

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

Output:

File	Contents
var/styleguide/design-tokens.json	Color, typography, spacing, border
var/styleguide/component-mapping.json	CSS classes grouped by component category

Claude Code Skill: /extract-tokens

The plugin ships an extract-tokens skill that runs the full workflow interactively (Figma MCP → token diff → SCSS and theme.json write).

/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)
Parse HTML	JSON output	Interactive report + diff
Figma	Only pre-exported JSON	Directly via MCP, paste a URL
Detect theme	--theme flag	Auto-detected from project structure
Write tokens	map-tokens --apply only	Directly into SCSS and theme.json
Context	,	Knows SCSS conventions, asks when unsure

Auto-detection

The plugin auto-detects:

• Child theme via configInheritance in theme.json.
• Parent theme as the last entry (after @Storefront) in configInheritance.
• Token prefix based on the most common $prefix- convention in SCSS.
• SCSS path in known directories (abstract/variables/custom.scss, overrides.scss, …).

Notes

Theme-agnostic

The default sections render with any Shopware theme. The plugin detects the active child theme and its tokens automatically. Theme-specific extensions are included via {% sw_include ... ignore missing %}, missing templates do not cause errors.