# Product ## Platform web ## Stack - **Design prototype (this folder):** static multi-page HTML/CSS with a little vanilla JS, opened straight from disk. Confirmed by the owner on 2026-10-12. The owner ports it to React later as React practice, which is a stated goal of the project. - **Product (from the approved spec, `code/docs/superpowers/specs/2026-08-18-skap-virtual-wardrobe-design.md`):** React + TypeScript + Vite, React Router, TanStack Query, Zustand (builder canvas draft only), dnd-kit, Tailwind CSS. Backend: Node.js + Express modular monolith, PostgreSQL, Redis + BullMQ for AI jobs, S3-compatible photo storage, Stripe in test mode, JWT session in an httpOnly cookie. ## Users Women who own more clothes than they can keep in their head and lose time every morning deciding what to wear. The launch market is Norway: interface language Norwegian bokmål, prices in NOK, weather for Norwegian cities (confirmed 2026-10-12). Acquisition starts from cold traffic, so the audience is broad, not a friendly beta circle. Jobs: - photograph and catalogue the clothes they already own; - put items together into outfits on a canvas; - plan an outfit for a date (work, a walk, an event) so the morning has no decision left; - publish outfits to a feed, follow other women, share an outfit by link. ## Product Purpose SKAP is a virtual wardrobe. It exists to remove the daily "what do I wear" decision. Success is a user who opens SKAP in the morning, sees today's outfit already chosen (by her plan or by Plus), and gets dressed without thinking. Business model: freemium. Free is fully usable with no cap on items or outfits. Plus is a paid subscription that sells saved time. ## Positioning An autopilot for your own wardrobe. Inspiration and validation come second. SKAP works only with clothes the user already owns, and Plus picks an outfit for the day from the weather plus combination rules. ## Operating Context - Phone photos of real clothes, often shot on a bed, floor or hanger. - The morning routine: checking the weather, then the closet. - Week planning: work days, walks, events. - Sharing to social media through a public outfit link that opens without an account (`/o/:id`), which doubles as an acquisition channel. ## Capabilities and Constraints From the approved spec and the UX addendum (2026-09-15): - Sign-up and login with email + password, plus email verification. **No social login in the MVP**, even though the early Figma sketch shows Google/Facebook/X. - Wardrobe items: photo, category (fixed list: overdel/top, underdel/bottom, kjole/dress, yttertøy/outerwear, sko/footwear, hodeplagg/headwear, tilbehør/accessory, undertøy/underwear, veske/bag), clothing type from a shared growing dictionary with autocomplete, color, season (sommer, vinter, vår/høst, hele året; optional), notes. Items are soft-deleted, so outfits never visually break. - Outfit builder: a free canvas with drag and drop. Each item keeps x, y, rotation, scale and z-index. Touch targets are enlarged on mobile. - Outfits: name, public or private, cover image, optional AI avatar render. Export as an image and share by direct link. - Feed: public outfits from people you follow plus a general feed, with likes, follows and basic report/block. - Planning: an outfit per date for everyone. Plus adds "pick for me" (weather + combination rules) and reminders. - Plus also includes auto-recognition of items from a photo and a feed without ads. Free gets **3 auto-recognitions** first, then manual tagging with a Plus hint. - AI avatar render ("the outfit on a generic model"): available to everyone with a monthly limit. It is planned for a later stage after the base MVP. - Plus via Stripe Checkout. A cancelled plan keeps access until the end of the paid period, then falls back quietly to Free with no data lost. - Account deletion on request, change password, change email. - Soft cap on wardrobe size (an alert, never a hard block). - Onboarding is never paywalled. The first outfit is free for everyone. Undecided: the Plus price, the ad format in the Free feed, notification channels for reminders. ## Brand Commitments - Name **SKAP** ("skap" means cupboard/wardrobe in Norwegian). Written in caps with wide letterspacing in the owner's Figma. - Logo: a line-drawn two-door wardrobe with two drawers, next to the letterspaced wordmark (Figma file `u5rFr4fION7ocF3kSYByuR`, frame "Cover"). - Palette is binding and comes from the owner's Figma (realtimecolors): ink `#0A190B`, background `#F2FAF3`, primary green `#51B75C`, secondary green `#47DD56`, accent sky blue `#5DB7D7`. The owner said on 2026-09-17: take the Figma colors, except the orange "List of clothes (DEMO)" frame. - Green is the main accent (CTAs, active states, brand). Blue is strictly semantic: the Plus badge, a planned outfit in the calendar, info states. It never competes with the green (addendum 2026-09-15). The brand deliberately avoids "pink for women". - The voice is warm, light and a little playful. The owner's own copy reads "Oops! I forgot my password." and "Not a member yet? Join us!". - Footer credit from the owner's Figma: "Made with ❤ by Tim Gonch". ## Evidence on Hand - Owner's Figma sketches: Login, Registration, Main page ("Hi, Sofia!"), Profile settings, About us, plus a component sheet. The other frames are empty shells. - Structural references in `code/docs/design/references/screenshots/` (6 screenshots, 2026-09-17): split-screen auth, glow seam between cards, a diagonal marquee wall, a product grid with a list/2-col/4-col density switch, a card with image + badge + CTA, and a second split auth. They are component references, not color references. Links in `code/docs/design/references/links.md` (karateacadamy.framer.website, landing pattern). - **No real users, testimonials, press, metrics, partner logos or real clothing photos exist.** Prototype people, outfits, numbers and weather are synthetic placeholders and must never be presented as real. ## Product Principles 1. **Time saved is the product.** Every screen should make "what do I wear" shorter. Features that only add browsing time come second. 2. **Show the magic before the paywall.** Free users get the first outfit and three auto-recognitions. Plus is sold where its saved time is visible on the same screen (planning). 3. **Your own clothes, not a catalogue.** Items have no prices or shop links. The wardrobe belongs to the user. 4. **Honest, soft monetization.** No dark patterns. Cancelling keeps what you paid for, and downgrading never deletes data. 5. **Private by default, public by choice.** Outfits are published deliberately. Block, report and full account deletion are always reachable. ## Accessibility & Inclusion - Enlarged touch targets on the outfit builder for mobile (spec). - Treated as a project default (an assumption, not stated by the owner): WCAG 2.2 AA contrast and keyboard access, plus reduced-motion support.