commerce-kitlisted

Build the four components that raise average order value on a store, with the commercial and legal rules attached — quantity breaks (a radio group of named tiers, never a quantity stepper), the free-shipping threshold bar (remaining amount in currency, never a bare percentage), the order bump (one complement, never pre-ticked, never a gate), and the mobile sticky add-to-cart. Use whenever the task involves a product page, a cart, a checkout, an upsell, a bundle, a volume discount, quantity breaks, tiered pricing, average order value, AOV, cross-sell, or "make this store convert". Also use when a generated storefront looks fine but sells nothing. Carries the EU constraints that several commercial upsell widgets get wrong by default — Article 22 of Directive 2011/83/EU on pre-ticked boxes, and the prior-price rules on struck-through anchors.
kinerette/uxgen-commerce-kit · ★ 0 · AI & Automation · score 73

Install: claude install-skill kinerette/uxgen-commerce-kit

# Commerce Kit Four components. Each one asks the buyer a specific question, at a specific moment. If you take one rule from this file: **quantity breaks are a radio group of named tiers, never a number input.** That single mistake is the most common one in generated storefronts, and it is the difference between a page that asks *how many* and a page that asks *which package*. ## When to use this skill - The task mentions a product page, cart, checkout, upsell, bundle, order bump, volume discount, quantity break, tiered pricing, average order value or AOV. - Someone says their store looks fine and does not sell. - A page is being built for a merchant and no one has decided how the basket grows. ## Reference implementations Read the file before writing your own — each carries the rules as code, including guardrails that throw in development rather than shipping a defect silently. | Component | File | The one rule | |---|---|---| | Quantity breaks | `src/quantity-breaks.tsx` | radio group of named tiers, never a stepper | | Free-shipping bar | `src/free-shipping-bar.tsx` | show the remaining amount in currency | | Order bump | `src/order-bump.tsx` | one item, never pre-ticked, never a gate | | Sticky add-to-cart | `src/sticky-add-to-cart.tsx` | appears only once the inline button leaves view | ## Build order 1. **Quantity breaks**, on the product page. Acts earliest and on the largest share of orders, before a cart exists. 2. **Free-shipping bar**, in the cart. Cheapes