DmfCmsCustomElements

DmfCmsCustomElements extends Shopware 6 Shopping Experiences with additional CMS elements and ships a full generator for new elements, both as a Claude Code skill (/create-element) and as a CLI.

Quick facts

Composer package	dmf/sw6-plugin-cms-custom-elements
Plugin class	Dmf\CmsCustomElements\DmfCmsCustomElements
Namespace	Dmf\CmsCustomElements
Version	0.1.0
Shopware	>=6.5.0 <6.8.0
Required dependency	dmf/sw6-plugin-splide-slider

Installation

composer require dmf/sw6-plugin-cms-custom-elements
bin/console plugin:refresh
bin/console plugin:install --activate DmfCmsCustomElements

After activation the elements appear under Content → Shopping Experiences.

Generate a new element

Option A: slash command (recommended)

In Claude Code:

/create-element <name> --pattern <simple|array|slider> -- <description>

Examples:

# Simple element
/create-element call-to-action -- Background image with overlay, headline, description, and CTA button

# Array element
/create-element timeline --pattern array -- Timeline entries with date, title, description, and optional image

# Slider element
/create-element testimonial-slider --pattern slider -- Testimonial carousel with quote, author, company, and avatar

Arguments:

Argument	Description
name	Element name in kebab-case (required, first word)
--pattern	simple (default), array, or slider
--label	Human-readable label (optional, auto-generated from name)
-- ...	Everything after -- is the creative description

Post-generation:

./bin/build-administration.sh
./bin/build-storefront.sh
bin/console cache:clear

Option B: PROMPT.md

Use the included PROMPT.md as a stand-alone prompt template for Claude Code or any other AI tool when you need full control over every generated file.

Create a new CMS element based on PROMPT.md:

Element Name: call-to-action
Pattern: Simple (use hero-banner as reference)

Requirements:
- Background image with overlay
- Headline and description text
- Primary button with link

Option C: generator CLI

# Generate element boilerplate
node generator/bin/cms-generate.mjs <name> --pattern <pattern> --ai all

# List existing elements
node generator/bin/cms-generate.mjs --list

# Dry run
node generator/bin/cms-generate.mjs <name> --pattern <pattern> --dry-run

# Remove an element
node generator/bin/cms-remove.mjs <name>

Patterns and reference elements

Pattern	Reference element	Use case
Simple	hero-banner	Single item with media, text, toggles
Array	hero-product-grid	Multiple items with add/remove/sort
Slider	banner-slider	Splide.js carousel with autoplay

Configuration

DmfCmsCustomElements ships no central plugin configuration, configuration options live per element inside the admin component schema.

In-plugin documentation

• CLAUDE.md, quick reference with critical rules
• PROMPT.md, full prompt template
• .claude/architecture.md, plugin structure, reference implementations
• .claude/code-patterns.md, JavaScript patterns, Splide, video support
• .claude/design-standards.md, SCSS patterns, admin UI patterns
• .claude/element-creation-guide.md, step-by-step instructions

Notes

Don't forget the builds

After /create-element you must run build-administration.sh and build-storefront.sh. Otherwise the new element won't appear in the admin picker or render in the storefront.

Splide as a required dependency

DmfCmsCustomElements requires DmfSplideSlider via Composer. Instead of bundling its own copy of Splide, the plugin consumes the shared library through window.DmfSplide (single source of truth). DmfSplideSlider must be installed and active, otherwise slider elements won't render in the storefront.