Ground My Shopware

ground-my-shopware

**Shopware ships almost every component you need — and tells you nothing when you ask for one wrongly. Read the installed contract, reuse the core screen, measure the result.**

`ground-my-shopware` is an agent skill for building and repairing Shopware 6 Administration and Storefront UI. It is the Shopware-specific counterpart to [`ground-my-ui`](https://github.com/silkyland/ground-my-ui): where that skill teaches the stack-agnostic method, this one carries the verified contracts — `mt-card`'s twelve slots, `sw-data-grid`'s preview slot, `sw-modal`'s four width caps, which package defines `--scale-size-*`, and the core file to copy for each of them.

It exists because of how this framework fails. Nothing throws:

• content addressed to #action on an mt-card is dropped silently — Vue has no such slot, so a card's "Add" button is not misplaced, it is gone, and with a non-empty list there is no other way to reach the action;
• sw-media-upload-v2 variant="small" has no preview block at all, so an image field holding a valid media id renders as an empty dashed box;
• a BEM class with no stylesheet leaves a section looking cramped, and a plugin can carry dozens of them against two .scss files;
• .mt-card[data-v-…] is a scoped style, so your single-class margin-top computes to 0px;
• sw-price-field throws on a null price and everything after it in the template disappears with no visible error;
• grep -- '--color-gray-300:' finds nothing, yet the token resolves — the Administration generates a custom property from every SCSS variable;
• an

  inside a {# … #} comment renders perfectly and crashes every template spec.

Each of those cost real debugging time before it was written down here.

How it works

1. Locate the truth on disk      vendor/, node_modules/@shopware-ag/, snippet JSON
2. Read the contract             slots, required props, styled enums, defaults
3. Build on core