vibe-shop-normalizer

原文涵盖的主题

• Vibe-Coded Storefront & Zero-CLS Normalizer
• Quick Start
• When to Use
• Best Practices
• Dependencies
• Examples
• Step-by-Step
• Validation

Turning tangled multi-pass HTML/CSS/JS shop files into crisp, light-themed, Zero-CLS storefronts that pass every test. A single-file or static HTML/CSS/JS storefront has accumulated duplicate navbars, conflicting dark/light overrides, or leaked ${...} literals Product cards jump or shift horizontally/vertically across mobile (320px), tablet (768px), and desktop (1024px+) viewports Converting an inconsistent dark/neon draft into a clean commercial light theme (#F4F5F7 canvas, #FFFFFF surfaces, #141619 primary actions) Synchronizing static storefront files (index.html, public/index.html) while keeping 100% of existing DOM unit tests green Audit existing unit tests (tests/.test.js) before touching markup so required IDs, hash routes (#/catalog, #/p/:id), and price classes stay intact. Strip leaked JavaScript template expressions (${...}) outside tags and remove duplicate or modal containers. Lock card aspect ratios (aspect-ratio: 1 / 1), title heights (min-height: 38px), spec heights (min-height: 32px), and button heights (h-10). Use font-variant-numeric: tabular-nums on all price, discount, and cart badge counters so digit updates never shift layout. Always call .unref() on recurring

这里只展示节选，请以完整原文和当前要求为准。