Can I vibe code Kiwi Sizing?

Build a lightweight, self-hosted Size Chart and Recommendation engine for a Shopify store as a Theme App Extension.

1. DATA STRUCTURE
- Define a Shopify Product Metafield namespace `custom.size_chart` containing JSON data:
  - `unit_default`: "in" or "cm"
  - `measurements`: Array of objects containing `size` (string), `chest` (min/max object), `waist` (min/max object), `hip` (min/max object).
  - `fit_type`: "slim", "regular", or "oversized".

2. FRONTEND WIDGET (VANILLA JS / ALPINE.JS)
- Inject a "Size Guide" button adjacent to the variant selector on product pages.
- On click, open an accessible modal containing:
  - A toggle switch for units (Imperial/Metric) that dynamically recalculates values using 1 inch = 2.54 cm.
  - A clean HTML table displaying garment dimensions per size.
  - A tab to switch to the "Fit Recommendation Calculator".

3. FIT RECOMMENDATION LOGIC
- Questionnaire steps: Gender, Height, Weight, Preference (Tighter, Standard, Looser).
- Estimate body specs using standard BMI body ratio baselines if exact body measurements are not provided.
- Match the calculated chest/waist targets to the stored `custom.size_chart` ranges.
- Output a clear recommended size with a confidence percentage and explanation (e.g., "Based on your inputs, size Medium will fit standard. Size Large for a looser fit.").

4. PERFORMANCE AND STYLING
- Script size must remain under 15KB gzipped.
- Zero external CSS dependencies; rely on web components or scoped Shadow DOM styles matching theme CSS variables.
- Load asynchronously without triggering Cumulative Layout Shift.

5. OUT OF SCOPE
- External admin portal (all charts must be configured via standard Shopify Product Metafields).
- PDF processing or vision-based scanning.

$ each button prefixes agent-specific run instructions · build your own product, never copy proprietary code, trademarks or designs