Build a pixel-perfect clone of the Shopify Concept theme homepage using pure HTML/CSS/JS. Covers asset scraping, Claude Code orchestration, and GitHub push.
User wants to replicate a Shopify theme (or any ecommerce site) as a static HTML page.
document.querySelectorAll('iframe')[0].src
// e.g. https://concept-theme-tech.myshopify.com/
browser_vision + browser_scroll to document every sectionbrowser_get_images on the target brand's site to enumerate all image URLscurl -sL -o assets/filename.ext "URL"https://dreamplay-media-indexer.vercel.appX-API-Key: <key>GET /api/v1/assets?starred=true&mediaType=image&limit=1000fileUrl (public Cloudflare R2 URL) into a dedicated folder such as public/assets/dreamplay/media-indexer-starred/.https://dreamplay-media-indexer.vercel.appGET /api/v1/assets?starred=true&mediaType=image&limit=1000X-API-Key: <key>fileUrlpublic/assets/dreamplay/media-indexer-starred/ for curated/starred pullspublic/assets/dreamplay/real-site/ for direct website pullsGET https://dreamplay-media-indexer.vercel.app/api/v1/assets?starred=true&mediaType=image&limit=1000X-API-Key: <key>public/assets/dreamplay/media-indexer-starred//api/v1/assetsassets[]fileUrl (public, no auth needed)aiDescriptionsubjectpurposecampaigndsModelshotTypethumbPathfileUrlstarredFor: [], meaning globally starred assets rather than campaign-specific starred sets.public/assets/dreamplay/real-site/ for direct website downloadspublic/assets/dreamplay/media-indexer-starred/ for indexer/API downloadsASSET_INVENTORY_DREAMPLAY_SITE_INITIAL_<date>.mdASSET_INVENTORY_MEDIA_INDEXER_STARRED_<date>.mdhttps://concept-theme-tech.myshopify.com/ for the Concept preset), inspect the header nav and dropdown details elements with browser_console to enumerate real page targets./pages/theme-features, /pages/compare, /pages/contact-with-map/pages/about, /blogs/news, /pages/faqs, /pages/contact, /pages/contact-with-map-2, /pages/contact-with-maps, /pages/bundle/pages/theme-features as the primary fidelity reference; it is the closest analogue to a custom /features page and shows how Concept sequences media-led feature modules./pages/compare as the secondary reference when building spec matrices, product comparisons, or model-selection pages.notify_on_complete=true — it takes 5-10 min for a full page--max-turns 40 --allowedTools "Write,Edit,Read"repo scope for the target orghttps://USERNAME:[email protected]/ORG/REPO.gitgit remote set-url origin if remote already existsWhen transforming a legacy HTML monolith into a modular Next.js application:
tmux to orchestrate an interactive Claude Code session./permissions bypassPermissions during massive file-writing batches to eliminate interaction overhead.tmux capture-pane to approve structural architectural changes./public/assets/dreamplay/).git add . && git commit cycles with the GitHub PAT embedded in the remote URL to track major component milestones.Problem: Live Shopify theme demo is password-protected, but the embedded iframe on themes.shopify.com is accessible.
Solution:
Navigate to https://themes.shopify.com/themes/concept/presets/concept
Extract iframe URL via console:
document.querySelectorAll('iframe')[0].src
// Returns: https://concept-theme-tech.myshopify.com/
Use Playwright to systematically scrape:
cubic-bezier(0.4, 0.22, 0.28, 1) timing curvesthreshold: 0.15, rootMargin: "20px")browser_scroll at 400px incrementsBuild scraper iteratively — 3 iterations required to bypass Shopify's embedding
Decide on implementation: Pure CSS + Intersection Observer (not GSAP/AOS/Framer Motion) for performance match
Output: Generate ANIMATIONS.md with all extracted animation specs and implementation notes
-p mode times out at 300s for complex builds — always use background=true + notify_on_complete=truerepo scopebrowser_consoleCannot GET /; always verify the listening process with ss -ltnp / ps before browser QA, and run the local Next preview on another port such as 3001 when neededEADDRINUSE, retry on another port (for example 3002) instead of assuming the app is broken.browser_console to force the open-state classes (for example adding the panel is-open class and header active class) so vision can inspect the megamenu layout reliably.scroll-reveal, .byb-reveal, etc.), do not trust the accessibility snapshot alone. The snapshot can expose text even while the live page still has opacity: 0 / transformed hidden content. Check computed styles in browser_console before judging layout. If critical above-the-fold sections stay hidden, either fix the reveal logic so visible-initial-viewport content is shown immediately, or add a page-scoped CSS override during QA so layout can be inspected reliably.gh CLI may not be installed — use git + token in remote URL instead