store-designlisted

Design and build a store, product page, landing page or checkout that sells — deciding which selling mechanics belong on THIS merchant's product rather than pasting a template. Reads the product (one item or a catalogue, impulse or considered, physical or digital, consumable or durable, variants, expiry) and deduces which sections to lay and in what order, each with its reason. Carries quantity breaks (a radio group of named tiers, never a quantity stepper), the free-shipping threshold bar, the order bump (never pre-ticked), the sticky mobile add-to-cart, email capture, the buy box order, and proof that is never fabricated. Use for any product page, landing page, cart, checkout, upsell, bundle, volume discount, tiered pricing, average order value or AOV work, for Shopify sections, and whenever a generated storefront looks fine but sells nothing. Carries the EU rules on pre-ticked add-ons (Article 22, Directive 2011/83/EU) and on struck-through prices.
kinerette/claude-code-store-design · ★ 0 · Web & Frontend · score 73

Install: claude install-skill kinerette/claude-code-store-design

# Store design A page that looks finished and takes no money is the normal outcome of generating a storefront. Not because the design is bad — because nobody decided **how the basket grows**, and the components that decide it are the ones a model has read least about. This skill is the deciding, not a template. --- ## Do this first **Read `references/decision-table.md` before laying a single section.** It is the centre of this skill. Seven questions about the merchant's product, and from the answers: which mechanics belong on this page, which do not, and in what order the sections go — each with the reason. Applying a mechanic whose reason does not hold for this merchant is how a €900 chair ends up with a "buy 3 and save" tier list. The reasons are what make the table usable on a product it has never seen. ## If you take one rule from this file **Quantity breaks are a radio group of named tiers, never a number input.** A stepper asks *how many* — arithmetic the buyer performs, with nothing suggesting that two is a better idea than one. A radio group of named packages asks *which one*, and one of them is visibly sensible. It is the most common defect in a generated storefront, and it is one line of judgement to avoid. ## When to use this skill - Any product page, landing page, cart, checkout, or Shopify section. - The task mentions an upsell, a bundle, an order bump, a volume discount, a quantity break, tiered pricing, average order value or AOV. - Someone says t