e-commerce-prototype

Imported from PradnyaPrameswara/e-commerce-prototype (AGENTS.md). Install upstream with npx skills add PradnyaPrameswara/e-commerce-prototype. Copyright stays with the author.

AGENTS.md — Stynra Migration

Mission

Rebuild the Webflow export in this folder as a new, self-contained app:

• Astro (static, .astro pages/layouts/components)
• Tailwind CSS (tokens extracted from the Webflow shared CSS)
• ShadCN UI Primitives (React islands only where interactivity requires them)
• React (islands: nav dropdowns, FAQ accordion, testimonial slider, product variants)
• TypeScript everywhere

The 35 raw .html Webflow files in this directory are source reference only. They will be deleted by the user when the migration is finished. Nothing in the new app may reference them, the Webflow CDN, or Webflow runtime files.

Non-negotiable rules

1. No useEffect anywhere in the codebase. Also no componentDidMount/componentDidUpdate class lifecycles.
2. No Webflow code migrated: no webflow.js, no w-* classes, no data-w-id / data-wf-* attributes, no w-commerce-* markup, no Webflow IX2. Markup is rewritten from scratch using the raw HTML only as visual/structural reference.
3. Layout must match the Webflow version exactly — same sections, order, spacing, typography, and responsive breakpoints. Styling is rebuilt in Tailwind from extracted tokens, not copied CSS.
4. All assets self-hosted: images, fonts, and the 2 Lottie JSONs (Plus to minus.json, Menu Black Hamburger.json) downloaded from cdn.prod.website-files.com into public/. No external Webflow URLs in the final build.
5. Modern code only — no legacy patterns, no jQuery, no class components.

Decisions (locked)

Site inventory (from export)

• Home (index.html): 9 sections — hero, product, season, marquee, exclusive-product, destination, testimonial (slider), multi, footer
• Commerce: shop, categories, checkout, 9 product pages (product/*)
• Content: blog + 8 posts (blog-posts/*), our-story, faq (accordion), contact-us
• Auth (static): login, sign-up, 401 (password), 404
• Utility: utility-pages/{changelog,license,refund-policy,style-guide}
• Odd files (+01)–888777999.html, utility-pages/support@stynra.com.html are phone/email mailto-tel artifacts — do not migrate as pages; keep as contact links.
• Shared chrome on every page: navbar with dropdown, mobile hamburger (Lottie), footer, newsletter form.

Target structure

stynra/                      # new Astro app (sibling of this folder's raw files)
├── public/
│   ├── images/              # downloaded from Webflow CDN
│   ├── fonts/
│   └── lottie/
├── src/
│   ├── components/
│   │   ├── astro/           # static: Header, Footer, ProductCard, Marquee, sections
│   │   └── react/           # islands: MobileNav, FaqAccordion, TestimonialSlider, VariantPicker
│   ├── data/                # products.ts, posts.ts (typed, extracted from export)
│   ├── layouts/BaseLayout.astro
│   ├── pages/               # all routes mirroring export URLs
│   └── styles/global.css    # Tailwind + tokens
├── tailwind.config.mjs
└── astro.config.mjs

Routes mirror export paths exactly (/product/leather-jacket, /blog-posts/..., /utility-pages/...).

Phases

1. Scaffold — Astro + Tailwind + React + TS; shadcn init; folder structure.
2. Tokens — download shared CSS; extract colors, fonts, spacing scale, breakpoints; build tailwind.config.mjs; download all assets to public/.
3. Data — extract 9 products, 8 blog posts, FAQs, testimonials into typed TS modules.
4. Shared chrome — Header (nav + dropdown), MobileNav island (hamburger Lottie), Footer, newsletter form. BaseLayout with per-page meta.
5. Home — all 9 sections, marquee (CSS animation), testimonial slider island.
6. Commerce pages (static) — shop, categories, 9 products (VariantPicker island), checkout (stubbed form).
7. Content pages — blog index, 8 posts, our-story, FAQ (accordion island), contact.
8. Auth + utility — login, sign-up, 401, 404, changelog, license, refund-policy, style-guide.
9. QA — per-page visual diff against raw export at desktop/tablet/mobile; zero Webflow URLs; useEffect grep must return nothing.

Verification gates (run before "done")

• grep -r "useEffect" src/ → empty
• grep -rE "w-commerce|data-w-id|webflow\.js|cdn\.prod\.website-files" src/ public/ → empty
• astro build succeeds; all 33 routes render
• Visual check: each page side-by-side with its raw export counterpart

Anti-slop

Code is linted with the vendored anti-slop Oxlint plugin once scaffolded (typed rules, no unsafe assertions, readable spacing). Do not bypass its errors with casts or suppressions.