ThreadMatch

APP NAME
ThreadMatch

APP IDEA
Build a polished, mobile-first outfit pairing app where the user independently browses a top and a bottom, locks either slot and lets clear compatibility rules narrow the other. This is not a store, wardrobe upload tool or generic swipe-card clone. The complete original image pool is exactly 25 garments total: 13 tops and 12 bottoms.

CORE EXPERIENCE
Open directly into the live pairing workspace in English. Show compact Scenario (Casual, Work, Date, Outdoor), Weather (Warm, Mild, Cool) and Style (Minimal, Relaxed, Bold) chips, then a vertically stacked two-part outfit composition: the current top above the current bottom. Defaults are Casual, Mild and Minimal. One slot is active at a time and is clearly outlined. Provide Swap, Keep and Undo controls for the active slot plus a direct tap target to activate either half. Keep both garment images, active state and controls discoverable without an initial downward scroll.

INTERACTION AND STATE
- Swipe left on the active half or press Swap to advance that slot to the next eligible garment. Swipe right or press Keep to lock it. A locked top filters and reranks bottoms; a locked bottom filters and reranks tops. The user may tap a locked slot and choose Unlock to revise it.
- A transition resolves once even under rapid input. Undo restores the exact previous top ID, bottom ID, active slot and lock state without reshuffling candidate order.
- Compatibility is deterministic. Hard reject a season or temperature mismatch, a formality gap greater than 2 for Work, and combinations with two strong patterns. Strongly penalize severe color clashes and two oversized or very wide silhouettes unless Style=Relaxed. Prefer scenario fit, adjacent formality, balanced silhouette, compatible palette and weather fit. Never claim these are universal fashion rules; phrase the explanation as this app's styling rationale.
- Once both slots are kept, immediately show a compact Outfit Match result with the primary top and bottom, a compatibility explanation, weather and scenario fit, one backup pairing from unused compatible items, Replay and Share before optional garment details.
- If no compatible counterpart exists, explain which active constraint caused the empty state and offer Loosen one rule or Unlock; never silently violate a hard rule.
- Persist locale, filters, ordered top and bottom candidate queues, current IDs, active slot, locks, Undo history and result locally. Refresh preserves the exact outfit. Replay resets the locks and creates new candidate orders; it is not required to exhaust all 25 garments.

VISUAL AND CONTENT DIRECTION
Use an editorial fitting-room look: warm pearl background, charcoal typography, cobalt selection outline, vermilion Keep accent, fine tailoring-grid lines and restrained fabric-like CSS texture. The upper and lower product photos should read as one outfit without pretending to be worn by a real person. Avoid fake shopping UI, prices, carts, checkout, brand tags, generic dashboard cards or a decorative phone frame.

Produce exactly 25 final original 4:5 portrait WebP garment photos at 800 x 1000 in public/garments using the exact paths below. Generate sequentially in three build-time batches of at most 10: T01-T10, then T11-T13 plus B01-B07, then B08-B12. Complete and save each batch before the next. Retry only missing or invalid IDs. Final public/garments contains exactly these 25 WebP files and no PNG masters or superseded copies. Each must be publicly loadable, non-empty, exact 4:5, no more than 300 KB and visually unique.

GLOBAL PHOTO BIBLE: convincing original fashion-editorial product photography, physically plausible fabric, seams, folds and shadows, coherent premium studio family but materially different backgrounds and lighting. Use invisible forms, plain hangers or sculptural flat lays; never show a model, face, body part, mannequin head or copied catalogue composition. No external images, downloads, third-party sources, runtime generation, brands, logos, monograms, labels, readable tags, text, watermarks, recognizable designer details, counterfeit products or living-photographer imitation. Garment names and metadata remain accessible HTML outside images.

GARMENT MANIFEST
T01 | /garments/garment-t01.webp | White Oxford Shirt / 白色牛津衬衫 | kind=top | color=white | style=classic,minimal | fit=regular | formality=4 | season=all | temperature=mild,cool | material=cotton | pattern=solid | scenarios=work,date,casual | PHOTO: crisp white Oxford shirt on an invisible torso form, sleeves naturally relaxed, pale gray seamless studio and soft side shadow.
T02 | /garments/garment-t02.webp | Black Fitted Tee / 黑色修身T恤 | kind=top | color=black | style=minimal,street | fit=fitted | formality=1 | season=spring,summer | temperature=warm,mild | material=cotton jersey | pattern=solid | scenarios=casual,outdoor,date | PHOTO: black crew-neck tee suspended on a transparent form, subtle jersey texture, warm concrete background and grazing light.
T03 | /garments/garment-t03.webp | Oatmeal Hoodie / 燕麦色连帽衫 | kind=top | color=oatmeal | style=relaxed,street | fit=oversized | formality=1 | season=autumn,winter | temperature=cool,cold | material=brushed cotton | pattern=solid | scenarios=casual,outdoor | PHOTO: oatmeal hoodie folded in a dimensional flat lay with hood open, tactile fleece visible, muted sand paper backdrop.
T04 | /garments/garment-t04.webp | Navy Merino Sweater / 海军蓝美利奴毛衣 | kind=top | color=navy | style=classic,minimal | fit=regular | formality=3 | season=autumn,winter | temperature=cool,cold | material=merino wool | pattern=solid | scenarios=work,date,casual | PHOTO: navy fine-knit sweater on an invisible form, clean ribbed cuffs, smoky blue studio and narrow rim light.
T05 | /garments/garment-t05.webp | Sage Cardigan / 鼠尾草绿开衫 | kind=top | color=sage | style=soft,relaxed | fit=regular | formality=2 | season=spring,autumn | temperature=mild,cool | material=cotton knit | pattern=solid | scenarios=casual,date,work | PHOTO: sage cardigan laid open on cream linen with plain unbranded buttons, gentle morning light and realistic knit grain.
T06 | /garments/garment-t06.webp | Indigo Denim Jacket / 靛蓝牛仔夹克 | kind=top | color=indigo | style=street,classic | fit=structured | formality=2 | season=spring,autumn | temperature=mild,cool | material=denim | pattern=solid | scenarios=casual,outdoor,date | PHOTO: indigo denim jacket on a transparent form, original pocket geometry without signature stitching, warm off-white backdrop.
T07 | /garments/garment-t07.webp | Sand Linen Shirt / 沙色亚麻衬衫 | kind=top | color=sand | style=relaxed,minimal | fit=loose | formality=2 | season=spring,summer | temperature=warm,hot | material=linen | pattern=solid | scenarios=casual,date,outdoor | PHOTO: sand linen shirt loosely draped over a pale wooden hanger, visible natural wrinkles, sunlit plaster wall.
T08 | /garments/garment-t08.webp | Forest Polo / 森林绿Polo衫 | kind=top | color=forest | style=classic,sport | fit=regular | formality=3 | season=spring,summer | temperature=warm,mild | material=pique cotton | pattern=solid | scenarios=casual,work,date | PHOTO: deep forest polo on an invisible torso, clean collar with no chest mark, muted clay studio and crisp natural texture.
T09 | /garments/garment-t09.webp | Cream Ribbed Tank / 奶油色罗纹背心 | kind=top | color=cream | style=minimal,soft | fit=fitted | formality=1 | season=summer | temperature=hot,warm | material=ribbed cotton | pattern=solid | scenarios=casual,outdoor | PHOTO: cream ribbed tank laid flat on pale stone, sculptural sunlight and accurate fabric thickness, no body or jewelry.
T10 | /garments/garment-t10.webp | Charcoal Blazer / 炭灰色西装外套 | kind=top | color=charcoal | style=tailored,minimal | fit=structured | formality=5 | season=all | temperature=mild,cool | material=wool blend | pattern=solid | scenarios=work,date | PHOTO: charcoal single-breasted blazer on a transparent form, clean original tailoring, dark taupe seamless background and soft rim light.
T11 | /garments/garment-t11.webp | Burgundy Cropped Knit / 酒红短款针织衫 | kind=top | color=burgundy | style=bold,soft | fit=fitted | formality=2 | season=autumn,winter | temperature=cool,cold | material=wool blend | pattern=solid | scenarios=date,casual | PHOTO: burgundy cropped sweater in a dimensional flat lay, folded sleeves and chunky knit, dusty rose background.
T12 | /garments/garment-t12.webp | Olive Utility Jacket / 橄榄绿工装夹克 | kind=top | color=olive | style=utility,street | fit=relaxed | formality=2 | season=spring,autumn | temperature=mild,cool | material=cotton twill | pattern=solid | scenarios=outdoor,casual | PHOTO: olive utility jacket on an invisible form, generic patch pockets without labels, limestone backdrop and directional daylight.
T13 | /garments/garment-t13.webp | Blue Striped Shirt / 蓝色条纹衬衫 | kind=top | color=blue,white | style=classic,playful | fit=loose | formality=3 | season=spring,summer | temperature=warm,mild | material=cotton poplin | pattern=stripe | scenarios=work,casual,date | PHOTO: blue-and-white striped shirt draped asymmetrically on a plain hanger, airy sky-gray backdrop and bright window light.
B01 | /garments/garment-b01.webp | Dark Straight Jeans / 深色直筒牛仔裤 | kind=bottom | color=indigo | style=classic,street | fit=straight | formality=2 | season=all | temperature=mild,cool | material=denim | pattern=solid | scenarios=casual,date,outdoor | PHOTO: dark straight jeans laid vertically with one soft fold, original unbranded pocket stitching, warm gray background.
B02 | /garments/garment-b02.webp | Stone Pleated Trousers / 石色褶裥长裤 | kind=bottom | color=stone | style=tailored,minimal | fit=straight | formality=4 | season=all | temperature=mild,cool | material=wool blend | pattern=solid | scenarios=work,date | PHOTO: stone pleated trousers suspended on a clipless invisible hanger, precise drape, cool beige seamless studio.
B03 | /garments/garment-b03.webp | Khaki Chino Shorts / 卡其休闲短裤 | kind=bottom | color=khaki | style=classic,relaxed | fit=regular | formality=2 | season=summer | temperature=hot,warm | material=cotton twill | pattern=solid | scenarios=casual,outdoor | PHOTO: khaki chino shorts in a clean flat lay with natural crease and no belt, sunlit sand background.
B04 | /garments/garment-b04.webp | Black Midi Skirt / 黑色中长裙 | kind=bottom | color=black | style=minimal,soft | fit=a-line | formality=4 | season=all | temperature=mild,cool | material=matte crepe | pattern=solid | scenarios=work,date,casual | PHOTO: black A-line midi skirt on a transparent waist form, visible matte drape, soft ivory background and long shadow.
B05 | /garments/garment-b05.webp | Olive Cargo Pants / 橄榄绿工装裤 | kind=bottom | color=olive | style=utility,street | fit=relaxed | formality=1 | season=spring,autumn | temperature=mild,cool | material=ripstop cotton | pattern=solid | scenarios=casual,outdoor | PHOTO: olive cargo trousers laid at a slight diagonal, generic pockets without labels, textured cement background.
B06 | /garments/garment-b06.webp | Heather Sweatpants / 混灰运动裤 | kind=bottom | color=heather-gray | style=relaxed,sport | fit=relaxed | formality=1 | season=autumn,winter | temperature=cool,cold | material=fleece | pattern=solid | scenarios=casual,outdoor | PHOTO: heather-gray sweatpants in a soft folded flat lay, unbranded drawcord, warm white textile backdrop.
B07 | /garments/garment-b07.webp | Cream Wide-Leg Trousers / 奶油色阔腿裤 | kind=bottom | color=cream | style=minimal,soft | fit=wide | formality=4 | season=spring,summer | temperature=warm,mild | material=linen blend | pattern=solid | scenarios=work,date,casual | PHOTO: cream wide-leg trousers hanging with fluid movement, pale sage studio and diffuse daylight.
B08 | /garments/garment-b08.webp | Indigo Denim Skirt / 靛蓝牛仔裙 | kind=bottom | color=indigo | style=classic,street | fit=a-line | formality=2 | season=spring,summer | temperature=warm,mild | material=denim | pattern=solid | scenarios=casual,date | PHOTO: indigo midi denim skirt on a transparent form, original clean seam placement, peach-gray seamless background.
B09 | /garments/garment-b09.webp | Navy Tailored Trousers / 海军蓝西裤 | kind=bottom | color=navy | style=tailored,classic | fit=straight | formality=5 | season=all | temperature=mild,cool | material=wool blend | pattern=solid | scenarios=work,date | PHOTO: navy tailored trousers suspended straight with crisp crease, no hanger visible, deep blue-gray studio.
B10 | /garments/garment-b10.webp | Rust Corduroy Pants / 铁锈色灯芯绒裤 | kind=bottom | color=rust | style=retro,bold | fit=straight | formality=2 | season=autumn,winter | temperature=cool,cold | material=corduroy | pattern=texture | scenarios=casual,date | PHOTO: rust corduroy pants laid over a muted teal paper sweep, raking light revealing real wale texture.
B11 | /garments/garment-b11.webp | Black Athletic Shorts / 黑色运动短裤 | kind=bottom | color=black | style=sport,minimal | fit=relaxed | formality=1 | season=summer | temperature=hot,warm | material=technical weave | pattern=solid | scenarios=outdoor,casual | PHOTO: black athletic shorts floating on a transparent form, no logo or reflective text, energetic cobalt-gray studio.
B12 | /garments/garment-b12.webp | Sage Linen Pants / 鼠尾草绿亚麻裤 | kind=bottom | color=sage | style=relaxed,minimal | fit=wide | formality=2 | season=spring,summer | temperature=hot,warm | material=linen | pattern=solid | scenarios=casual,outdoor,date | PHOTO: sage drawstring linen trousers draped naturally on pale stone, unbranded tie, soft coastal daylight.

OUTCOME
A primary two-piece outfit, one compatible backup and a plain-language explanation of why the pairing suits the chosen scenario, weather and style.

ONE-SENTENCE INSTRUCTION
Choose a half, swap until it feels right, then keep both pieces to reveal your outfit.

TASK-SPECIFIC REQUIREMENTS
- generatedRealImageAssets=true; assetCountPerApp=25; topCount=13; bottomCount=12. Do not convert this mechanism into a seven-card round or duel flow.
- Use the manifest metadata as data, not text baked into images. All garment names, filters, compatibility reasons, fallback labels and accessibility strings require complete English and Simplified Chinese.
- For immediate browsing, eagerly load the two visible garments. Warm and decode a bounded window containing the next three eligible items for each unlocked slot; deduplicate by source URL and release abandoned queue references on Replay. Never preload the complete 25-image pool.
- No accounts, user photos, body measurements, size recommendation, shopping links, inventory, pricing, checkout, analytics, tracking, external APIs or medical/body-shape claims.

IMPLEMENTATION INSTRUCTIONS

Treat this specification as the final implementation brief and build the complete app now.

Open directly into the live app experience. Do not add a splash screen, opening cover, welcome page or separate onboarding flow.

Include exactly one concise sentence that explains how to play or use the app. Use the sentence provided under ONE-SENTENCE INSTRUCTION. Show it inside the live app interface, not on a separate opening screen.

Internationalization is required. Implement a lightweight built-in i18n layer supporting exactly two locales: English (en) and Simplified Chinese (zh). The app must always open in English and must never auto-detect or follow the browser, device or system language. Provide one clear EN / 中文 language toggle. Every user-facing string, including the one-sentence instruction and all loading, empty, success, error and result states, must have complete English and Chinese versions. Switching languages must update the entire interface without mixed-language text or untranslated fallback strings.

Let Eazo adapt the app to its actual host and available viewport. Do not hard-code or target a particular browser size, device size, viewport width or height, App frame size, root-height formula, or host-container CSS implementation. In the live preview, keep the current primary action easy to discover and usable without requiring an initial downward scroll; avoid horizontal overflow and avoid decorative layers blocking required controls. Optional detail may scroll. Keep active media and secondary copy compact enough that the next action remains visible. In result states, show the summary plus Replay and Share before optional detail. Do not eagerly render a large collection of full-size result images in one long page; use a compact summary, carousel, pagination, expansion, or virtualization. Use accessible touch targets.

Respect the host safe areas for iPhone notches, Dynamic Island, the status bar and the bottom home indicator in the initial implementation, before the first preview. Keep the header, language toggle, primary controls and result actions entirely inside the usable safe area. In the standard Eazo mobile host, use `padding-top: max(56px, env(safe-area-inset-top, 0px))` and `padding-bottom: max(34px, env(safe-area-inset-bottom, 0px))`, or Eazo's current official safe-area equivalent. These are safe-area insets only, not fixed viewport or App-frame dimensions; continue to let Eazo adapt the overall width and height. Make sure flex children can shrink inside the remaining usable area and that required controls are not covered or pushed off screen.

Use Eazo's built-in defaults and official platform capabilities. Do not add unrelated features or expand the scope beyond this specification.

When implementation is complete, provide a working preview for QA.

REAL-IMAGE RUNTIME DELIVERY, DISPLAY AND PREDECODE

This is a generated real-photo asset app, so implement all requirements in this section before providing the first preview. Apply them only to this app. Do not turn them into a reusable gameplay template and do not add card, swipe, random-round, seven-step, or duel mechanics unless this app's own specification requires them.

During the build, the image generator may create temporary high-resolution masters, but the final public runtime directory must contain exactly the required N high-quality WebP assets and no superseded PNG copies. Keep every stable content ID and every data, cover-preview and fallback path mapped to its matching `.webp` file. Never send multi-megabyte PNG masters to the user. For a 2:3 image displayed at up to about 360 CSS pixels wide in the standard Eazo mobile host, use 800 x 1200 WebP at about quality 82 as the proven baseline. If this app renders images at a different size or ratio, export at roughly twice the actual maximum rendered CSS width while preserving the exact intrinsic ratio. Target 200 KB or less per runtime image and treat 300 KB as the hard maximum unless this specification explicitly justifies a larger asset.

Serve these local WebP files directly from stable `public/` URLs and do not make image visibility depend on the `/_next/image` optimization service. If this Next.js project has an `images` configuration, keep `images.unoptimized: true` for this direct-static-asset path. Prefer a native `<img>` for the visible card, comparison and result image, with the current image loaded eagerly and `decoding="async"`. For a height-driven 2:3 layout, use an image that participates in layout, such as `height: 100%; width: auto; max-width: 100%; object-fit: contain; aspect-ratio: 2 / 3`. Never combine `next/image` `fill` with a parent whose width is `auto` or content-derived: the absolutely positioned image does not size that parent and the image region can collapse to zero width. If `fill` is used anywhere else, its positioning parent must have explicit non-auto width and height and the rendered image must be proven to have non-zero dimensions.

When an active round or immediate sequence is small enough that its compressed runtime images total about 1 MB or less, start preloading and decoding every remaining image in that active round as soon as the round is created. Use `new Image()`, assign the direct WebP URL, call `decode()` when available, and keep a module- or session-level `Set` of warmed source URLs so each image is fetched and decoded only once. This rule applies to the active round, including images that may appear in comparisons or results, not to the complete 25-image pool. For a larger immediate sequence, use a bounded byte-budget window rather than preloading the whole pool, and make it wide enough that rapid consecutive actions never expose a blank or waiting image.

Keep a clean named fallback for load failure. Do not add a runtime image-generation API, external URL, hotlink or third-party image service.