ui-ux-master 1.2.0 → 1.5.0

package/references/brand-method-technical-authority.md

@@ -0,0 +1,290 @@
+# Brand Method: Technical Authority
+
+Use this skill when building for AI platforms, developer tools, semiconductors, infrastructure, cloud computing, or any context where the buyer/user evaluates credibility through technical depth, performance data, and precision.
+
+Reference brands: NVIDIA, Intel, AMD, Qualcomm, IBM, Cisco (developer), AWS, Vercel, Cloudflare, Stripe (developer docs), GitHub, Figma (developer).
+
+---
+
+## When to Apply This Method
+
+Apply Technical Authority when:
+- The audience is developers, engineers, architects, data scientists, or technical decision-makers.
+- The product's value is measured in specs, benchmarks, throughput, latency, or compatibility.
+- Credibility is demonstrated through diagrams, code, architecture, and precision.
+- The primary user actions are: read docs, run a benchmark, integrate, download SDK.
+
+Do not apply when:
+- The audience is non-technical business buyers (use Enterprise Trust Hub).
+- The product is consumer-facing (use Product Cinema, Playful Familiarity, or Conversion Simplicity).
+- The brand leads with campaign/culture storytelling (use Editorial Brand World).
+
+---
+
+## Layout Structure
+
+### Hero
+- Technical claim: specific, measurable. "3× faster inference." "Sub-10ms global latency." Never vague.
+- Visual: architecture diagram, code snippet, or benchmark chart.
+- CTA: "Get Started", "View Docs", "Run in Browser", "Download SDK."
+- Sub-CTA: GitHub stars badge, npm install command, version badge.
+
+### Navigation
+- Logo left.
+- Navigation: Product, Docs, Pricing, Blog, GitHub link, Login, primary CTA.
+- Docs always reachable in 1 click from any page.
+- Search: prominent, especially on docs pages.
+- Dark or light depending on brand — NVIDIA black, Vercel black/white, AWS dark navy.
+
+### Homepage (in order)
+1. **Hero** — technical claim, CTA, code/visual proof.
+2. **Social proof** — companies using it (logos) or GitHub star count, npm downloads.
+3. **Core capabilities** — 3-4 technical capabilities with icons, precise description, link to docs.
+4. **Architecture diagram** — how the product fits into a user's stack.
+5. **Performance proof** — benchmark chart, speed comparison table, or numbers with methodology.
+6. **Integration logos** — compatible tools and platforms.
+7. **Code example** — real, runnable snippet showing the simplest useful thing.
+8. **CTA section** — "Start building" with install command.
+
+### Docs Pages
+- Sidebar navigation: collapsible tree, search, current page highlighted.
+- Content: full-width readable column (max 720px), code blocks right or inline.
+- Code blocks: syntax highlighting, copy button, language label.
+- Table of contents: right sidebar on desktop.
+- Breadcrumb: always.
+- "Edit this page" link: bottom of every doc.
+
+---
+
+## Color Scheme
+
+### Palette Archetypes
+
+**Dark Technical (NVIDIA, Vercel, Linear)**
+- Background: `#0A0A0A` or `#111111`
+- Surface: `#1A1A1A` or `#161616`
+- Text: `#EDEDED` or `#F0F0F0`
+- Secondary text: `#A3A3A3`
+- Accent (NVIDIA green): `#76B900`
+- Accent (Vercel): `#FFFFFF` or subtle indigo
+- Border: `#2A2A2A`
+- Code block background: `#1E1E1E` (VS Code Dark-like)
+- Syntax: strings `#CE9178`, keywords `#569CD6`, comments `#6A9955`, numbers `#B5CEA8`
+
+**Light Technical (AWS, Stripe, GitHub)**
+- Background: `#FFFFFF`
+- Surface: `#F6F8FA` (GitHub) or `#F4F6F9`
+- Text: `#1A1A1A`
+- Secondary text: `#57606A`
+- Primary: `#0969DA` (GitHub blue), `#FF9900` (AWS orange), `#635BFF` (Stripe purple)
+- Border: `#D0D7DE`
+- Code block background: `#F6F8FA`
+
+**Semiconductor / Infrastructure (Intel, Cisco)**
+- Background: `#FFFFFF`
+- Primary: Intel blue `#0068B5`, Cisco blue `#1BA0D7`
+- Surface: `#F5F7FA`
+- Text: `#1A1A1A`
+- Accent: brand blue
+- Code: light mode syntax
+
+### Rules
+- Dark surfaces: excellent for developer tools — developers associate dark mode with code environments.
+- Accent color: used only for links, CTAs, active states, and syntax highlights.
+- Green accents (NVIDIA): only one use per viewport — for performance/success signals.
+- Never use gradient backgrounds in technical authority contexts — precision, not decoration.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Hero claim | 36-56px | 700 | Specific and measurable |
+| Hero sub | 17-20px | 400 | Technical context sentence |
+| Section headline | 24-32px | 600-700 | |
+| Feature title | 18-20px | 600 | |
+| Feature body | 14-16px | 400 | |
+| Code (inline) | 13-14px | 400 | Monospace |
+| Code (block) | 12-14px | 400 | Monospace |
+| Benchmark number | 40-60px | 700 | Tabular, brand accent |
+| Nav | 13-14px | 500 | |
+| Badge | 11px | 600 | Version, status |
+
+### Font Pairings
+| Context | Heading | Body | Code |
+|---|---|---|---|
+| AI / developer | Geist (Vercel), Inter | Inter, Geist | Geist Mono, JetBrains Mono |
+| Infrastructure | Helvetica Neue, Inter | Helvetica Neue | Fira Code, Cascadia Code |
+| Semiconductor | Intel Clear, or Roboto | Roboto, Inter | Roboto Mono |
+| Dev tool (light) | GitHub's Mona Sans, or Inter | Inter | GitHub Monaspace or JetBrains Mono |
+
+### Rules
+- Monospace code font must be installed and loaded — never fall back to `monospace` alone.
+- Technical numbers (benchmarks): tabular numerals, bold, large — data is the argument.
+- Inline code: `background: var(--code-bg)`, `border-radius: 4px`, `padding: 2px 6px`, `font-family: monospace`.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Inline code gaps, badge padding |
+| `--space-sm` | 8px | List item gaps, icon margins |
+| `--space-md` | 16px | Component padding, form inputs |
+| `--space-lg` | 24-32px | Between feature blocks |
+| `--space-xl` | 48-64px | Section separation |
+| `--space-2xl` | 80-96px | Hero, benchmark section |
+
+- Docs: body content max-width 720px, line-height 1.7 for readability.
+- Code blocks: padding 16-20px, line-height 1.5.
+- Benchmark section: generous — numbers need room to be impressive.
+
+---
+
+## Motion and Interaction
+
+### Principles
+- Minimal animation — technical users are not impressed by flourishes, but are annoyed by delays.
+- Benchmark number count-up on scroll: 0 → final value, 800ms ease-out.
+- Architecture diagram: SVG with nodes appearing in sequence on scroll (200ms stagger).
+- Code block: syntax highlighting is the visual — no animation needed.
+
+### Code Interaction
+- Copy button: appears on hover of code block, top-right corner. `aria-label="Copy code"`.
+- On copy: button changes to "Copied!" for 2 seconds, then reverts.
+- Code line highlights: specific lines highlighted with left border + background for callouts.
+- Terminal simulation: character-by-character typing of install command, 50ms per char, 300ms delay before start.
+
+### Performance Benchmark
+- Bar chart animation: bars grow from 0 to value, 600ms, ease-out, staggered 100ms.
+- Comparison table: scroll-activated row highlights.
+
+### `prefers-reduced-motion`
+- Skip all count-ups, diagram sequences, and terminal typing animations.
+- Show final state immediately.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Single column. Code blocks: horizontal scroll. Docs sidebar: off-canvas. Hero claim: 28-36px. Benchmark numbers: single column. Architecture diagram: scrollable or simplified. |
+| Tablet 768px | Docs: collapsible sidebar. Homepage: 2-column capabilities. |
+| Desktop 1024px | Full sidebar on docs. Side-by-side code + description. Architecture diagram full size. |
+| Wide 1440px+ | Max-width 1280px. Three-column docs (nav + content + ToC). |
+
+- Mobile code blocks: always horizontal scroll, never wrap — broken code is broken.
+- Mobile docs: off-canvas sidebar accessible via hamburger.
+
+---
+
+## Accessibility Requirements
+
+- Code blocks: `<pre><code role="region" aria-label="Code example: [language]">`. Copy button accessible.
+- Benchmark charts: provide a data table alternative or aria-described fallback. Never chart-only.
+- Architecture diagram: `<figure>` with `<figcaption>` text description of what the diagram shows.
+- Terminal animation: provide static text alternative for screen readers.
+- Docs navigation: `<nav aria-label="Documentation">`, current page `aria-current="page"`.
+- Search: `role="search"`, results `role="listbox"`, keyboard navigable.
+- Version badge: `aria-label="Version 3.2.1"`.
+- Dark mode: syntax highlighting must maintain 4.5:1 contrast. Verify strings, keywords, and comments all pass.
+- Tables (comparison, compatibility): `<th scope="col/row">`, proper header associations.
+- "Edit this page" GitHub link: descriptive `aria-label` including page title.
+
+---
+
+## UX Principles for This Method
+
+1. **Claims require proof.** Every marketing claim must be followed by a spec, benchmark, or code example within the same viewport.
+2. **Docs are the product.** For developer tools, the documentation experience IS the product experience.
+3. **Make the first success fast.** Show the simplest useful thing in the first code block. Developers test before they commit.
+4. **Precision over personality.** Numbers over stories. Diagrams over illustrations. Code over description.
+5. **Performance is a feature.** A slow documentation site is a credibility problem.
+6. **Trust the reader.** Don't oversimplify or over-explain. Technical audiences respect when you give them the detail they need.
+
+---
+
+## Component Specs
+
+### Code Block
+```
+Background: #1E1E1E (dark) or #F6F8FA (light)
+Border-radius: 8px
+Padding: 16-20px
+Font: JetBrains Mono, Geist Mono, or Fira Code, 13-14px
+Line-height: 1.5
+Language label: top-left, 11px, all-caps, text-muted
+Copy button: top-right, 14px icon, transparent button, hover: surface background
+Horizontal scroll: always on overflow, never wrap
+Line number gutter: optional, 40px wide, text-muted
+Highlight line: left border 3px accent, background rgba(accent, 0.1)
+```
+
+### Architecture Diagram
+```
+Container: full-width, background: var(--surface)
+Border-radius: 12px
+Padding: 32px
+SVG or image: max-width 100%, responsive
+Node labels: 11-13px, clean, monospace or sans
+Arrows: 1.5-2px, brand accent or muted
+Legend: below diagram, 12px, inline color swatches
+Figcaption: below, 13px, text-secondary
+```
+
+### Benchmark Bar Chart
+```
+Container: grid of bars
+Bar background: var(--surface-2)
+Bar fill: brand accent (for "our product"), neutral for competitors
+Bar height: 40-48px
+Label: left of bar, 13-14px
+Value: right of bar, 14-16px bold, brand accent for highest
+Source footnote: 12px, text-muted, below chart
+```
+
+### Install Command Display
+```
+Background: var(--code-bg)
+Border-radius: 8px
+Padding: 12px 16px
+Font: monospace, 14px
+Prompt: $ symbol, text-muted
+Command: text-primary
+Copy icon: right side
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not make unverifiable performance claims without benchmarks or methodology.
+- Do not show only marketing copy on the homepage — developers will bounce without a code example.
+- Do not bury the docs link — technical users look for it first.
+- Do not use syntax-error-prone code examples — all code shown must be correct and runnable.
+- Do not use line-wrapped code blocks — broken code destroys technical credibility.
+- Do not use animations that fire on scroll over benchmark numbers if they require JavaScript that blocks render.
+- Do not use "email to see pricing" for developer tools — pricing must be public.
+- Do not use generic stock photos of servers, cables, or data centers — use diagrams and screenshots.
+
+---
+
+## QA Checklist
+
+- [ ] Hero claim is specific and measurable — no generic "fast" or "powerful."
+- [ ] At least one real, runnable code example on the homepage.
+- [ ] Docs link accessible from homepage in one click.
+- [ ] Code blocks: horizontal scroll, not wrap, on mobile.
+- [ ] Copy button: works, shows "Copied!" confirmation, has `aria-label`.
+- [ ] Benchmark chart has data table fallback or `aria-describedby` text.
+- [ ] Architecture diagram has `<figcaption>` text description.
+- [ ] All dark-mode syntax highlighting passes 4.5:1 contrast.
+- [ ] Docs search: keyboard accessible, results announced to screen reader.
+- [ ] Version badges have `aria-label`.
+- [ ] `prefers-reduced-motion`: no count-up animations, no typing animations.
+- [ ] Pricing visible — no "contact sales for pricing" for developer products.
+- [ ] Page LCP ≤ 2.5s — technical users will measure this.

package/references/brand-method-utility-command-center.md

@@ -0,0 +1,278 @@
+# Brand Method: Utility Command Center
+
+Use this skill when building for ecommerce, logistics, booking platforms, dashboards, admin tools, marketplaces with strong search/filter, or any context where the user's primary goal is to find, track, order, or manage something fast.
+
+Reference brands: Amazon, FedEx, UPS, DHL, Booking.com, Expedia, Walmart, Target, Costco, IKEA, Dell, Domino's.
+
+---
+
+## When to Apply This Method
+
+Apply Utility Command Center when:
+- Speed and task completion are the primary UX goals.
+- Users arrive with a specific item, destination, order, or task in mind.
+- The product catalog or inventory is large (hundreds to millions of items).
+- Users compare, filter, track, or manage rather than just browse.
+
+Do not apply when:
+- Brand aspiration or emotion drives the visit (use Product Cinema or Editorial Brand World).
+- The product is premium/luxury (use Premium Restraint).
+- The primary user action is sign-up or subscription (use Conversion Simplicity).
+
+---
+
+## Layout Structure
+
+### Header / Primary Utility Bar
+- Full-width header with logo left.
+- **Search bar is dominant**: centered or filling most of the header width on desktop, full-width on mobile.
+- Search must have: placeholder with example query, clear button, submit, and autocomplete.
+- Secondary navigation: categories, account, cart/orders, location — compact, never competing with search.
+- Persistent across all pages.
+
+### Homepage Structure (in order)
+1. **Primary utility** — search, track, or book above the fold. No exception.
+2. **Deal / promotion strip** — thin banner, 1-2 active offers, dismissible.
+3. **Category navigation** — visual grid or horizontal scroll of top categories.
+4. **Recommended / featured** — personalized or curated product/listing grid.
+5. **Trust signals** — delivery times, return policy, security badges (compact).
+6. **Secondary categories / browse** — deeper catalog entry points.
+
+### Product / Listing Page
+- Sticky filter panel (left on desktop, bottom drawer on mobile).
+- Product grid: 3-4 columns desktop, 2 columns tablet, 1-2 columns mobile.
+- Each card: image, name (2 lines max), price, rating (star + count), delivery estimate, primary CTA.
+- Sort controls: above grid, always visible.
+- Pagination or infinite scroll: provide "back to top" and page indicator.
+
+### Product Detail Page
+- Breadcrumb at top.
+- Images: large primary + thumbnail strip. Zoom on hover (desktop), pinch on mobile.
+- Price: large, prominent. Savings amount if applicable.
+- Delivery / availability: above fold, always.
+- Primary CTA: "Add to Cart" or "Buy Now" — sticky on mobile scroll.
+- Specs, reviews, related products: below fold in tabs or sections.
+
+---
+
+## Color Scheme
+
+### Primary Palette by Sub-category
+
+**General Ecommerce / Retail**
+- Background: `#FFFFFF`
+- Surface: `#F0F2F2` (off-white cards, sidebar)
+- Primary text: `#0F1111`
+- Secondary text: `#565959`
+- Primary CTA: `#FF9900` (Amazon-style) or `#CC0000` (Target), `#0071CE` (Walmart)
+- CTA hover: Darken 8%
+- Link: `#007185`
+- Border: `#D5D9D9`
+- Badge/deal: `#CC0000` or `#E31837`
+
+**Logistics / Tracking**
+- Background: `#FFFFFF`
+- Primary: Brand color (FedEx `#4D148C`/`#FF6600`, UPS `#351C15`/`#FFB500`, DHL `#FFCC00`/`#D40511`)
+- Surface: `#F4F4F4`
+- Text: `#333333`
+- Status indicators: `#00A651` (success), `#E67E22` (in transit), `#C0392B` (exception)
+
+**Booking / Travel**
+- Background: `#FFFFFF`
+- Primary: `#003580` (Booking.com blue) or `#00355F`
+- Accent: `#FEBB02` (deal/highlight)
+- Surface: `#F2F2F2`
+- Text: `#333333`
+- Urgency: `#C0392B` (few left), `#E67E22` (limited time)
+
+### Rules
+- Never use dark backgrounds for utility layouts — they slow scanning.
+- CTA color must be visually distinct from every other element on the page.
+- Urgency / deal badges: use red or orange only; never use urgency color for non-urgent content.
+- White background with strong card borders or subtle shadows improves scannability.
+
+---
+
+## Typography
+
+### Scale
+| Role | Size | Weight | Notes |
+|---|---|---|---|
+| Site title / logo | — | — | Image/SVG, not text |
+| H1 (page title) | 22-28px | 600-700 | Category or search results title |
+| H2 (section title) | 18-22px | 600 | |
+| Product name | 14-16px | 400-500 | 2-line clamp |
+| Price | 18-24px | 600-700 | Tabular numerals |
+| Strikethrough price | 13-14px | 400 | `text-decoration: line-through`, muted color |
+| Rating / metadata | 12-13px | 400 | |
+| CTA | 13-16px | 600-700 | |
+| Body / description | 14-16px | 400 | 1.5 line-height |
+| Label / badge | 11-12px | 600-700 | All-caps or bold |
+
+### Font Pairings
+| Context | Font |
+|---|---|
+| General utility | System font stack: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif` |
+| Logistics | Helvetica Neue, Arial, or Inter |
+| Travel booking | Circular, Inter, or Source Sans |
+
+### Rules
+- Prefer system fonts for performance — users arrive with a task, not a brand appreciation moment.
+- Product names must be readable at 2-line clamp. Avoid decorative fonts.
+- Price must be the most visually prominent number on a product card.
+
+---
+
+## Spacing System
+
+| Token | Value | Use |
+|---|---|---|
+| `--space-xs` | 4px | Badge padding, tight inline gaps |
+| `--space-sm` | 8px | Card inner padding, icon gaps |
+| `--space-md` | 12-16px | Component padding, form inputs |
+| `--space-lg` | 24px | Card gutters, section dividers |
+| `--space-xl` | 32-40px | Major section separation |
+| `--space-2xl` | 48-64px | Page-level section separation |
+
+- Product grids: 12-16px gap between cards.
+- Page padding: 16px mobile, 24px tablet, 40-64px desktop (or centered max-width container).
+- Avoid excessive breathing room — utility UX is information-dense by design.
+
+---
+
+## Motion and Interaction
+
+### Principles
+- **Instant feedback over animation.** Users are in task mode; delays feel like failures.
+- Hover states: subtle background shift, no slow transitions.
+- Add-to-cart: brief success micro-animation (cart icon pulse, item count update).
+- Skeleton loading: always show skeletons instead of blank areas.
+
+### Key States
+| Component | States |
+|---|---|
+| Search input | Default, focused (border highlight), has-value (show clear button), loading (spinner) |
+| Product card | Default, hover (shadow lift + image zoom), loading (skeleton) |
+| Add to cart button | Default, hover, loading, success (brief), disabled (out of stock) |
+| Filter checkbox | Default, checked, hover, focus, disabled |
+| Sort dropdown | Default, open, selected option |
+| Tracking step | Completed (filled icon), Active (pulsing dot), Pending (hollow icon) |
+
+### Transitions
+- Card hover: `box-shadow 150ms ease`, `transform 150ms ease`
+- Button click: `background 100ms ease`, `transform 100ms`
+- Dropdown: `opacity 150ms ease`, `transform 150ms ease`
+- Never exceed 250ms for task-critical UI transitions.
+
+---
+
+## Responsive Behavior
+
+| Breakpoint | Key changes |
+|---|---|
+| Mobile 375px | Single column. Search full-width. Categories horizontal scroll. Sticky add-to-cart bar. Filter as bottom sheet. |
+| Tablet 768px | 2-column product grid. Collapsible filter sidebar. |
+| Desktop 1024px | 3-4 column grid. Persistent filter sidebar. Full header utility bar. |
+| Wide 1440px+ | Max content width 1440px, sidebar fixed, grid expands to 4-5 columns. |
+
+- Mobile: filter panel becomes a full-screen modal or bottom drawer.
+- Mobile: sticky "Add to Cart / Proceed" bar fixed to bottom viewport.
+- Mobile: search bar always accessible (sticky or easy scroll-to-top).
+
+---
+
+## Accessibility Requirements
+
+- Search input: `<label>` associated via `for`/`id`, or `aria-label`. Autocomplete results use `role="listbox"` with `aria-expanded`.
+- Product cards: each card is a landmark. Product name is the accessible label. Price announced. CTA has context: "Add [Product Name] to cart".
+- Filters: `<fieldset>` with `<legend>` per group. Checkboxes with visible labels.
+- Sort: `<select>` or custom control with `aria-label="Sort by"` and `aria-selected` on option.
+- Rating stars: `aria-label="4.5 out of 5 stars, 1,203 ratings"` — never visually-only stars.
+- Pagination: `<nav aria-label="Pagination">` with current page `aria-current="page"`.
+- Loading states: `aria-busy="true"` on the container while data loads.
+- Urgency badges ("Only 2 left"): announce with `aria-live="polite"` if dynamic.
+- Touch targets: minimum 44×44px for all interactive elements.
+- Focus: visible focus ring on all interactive elements, not removed.
+
+---
+
+## UX Principles for This Method
+
+1. **Search is sacred.** The search bar is the most important element. Never de-prioritize it.
+2. **Show don't hide.** Price, delivery estimate, and availability must be on the card — not behind a click.
+3. **Scan mode.** Users skim product grids. Design for F-pattern reading: image left, name top, price prominent.
+4. **Reduce checkout friction.** Guest checkout, saved addresses, payment tokens. Every field removed increases conversion.
+5. **Status visibility.** For logistics: always show where the order/shipment is in real-time.
+6. **Honest urgency.** Use scarcity only when true. Fake urgency destroys trust and constitutes a dark pattern.
+7. **Recovery is easy.** Undo add to cart, saved carts, continue shopping. Users make mistakes.
+
+---
+
+## Component Specs
+
+### Search Bar
+```
+Height: 40-48px
+Border: 1px solid var(--border), 2px focus
+Border-radius: 4px (utilitarian) | 24px (modern)
+Background: white
+Icon: magnifying glass left (16-20px)
+Clear button: right, appears when has-value
+Padding: 8px 40px (icon side) 8px 12px
+Font: 14-16px
+Autocomplete: absolute positioned, full width, max-height 300px, overflow-y scroll
+```
+
+### Product Card
+```
+Width: flexible (grid cell)
+Border: 1px solid var(--border)
+Border-radius: 4-8px
+Padding: 12-16px
+Image: aspect-ratio 1/1 or 4/3, object-fit: contain
+Product name: 14-16px, 2-line clamp, margin-bottom 4px
+Price: 18-22px bold, tabular-nums
+Rating: 12-13px, star icons + count
+CTA: full-width button, 40px height, brand accent
+```
+
+### Status Tracker (Logistics)
+```
+Steps: horizontal on desktop, vertical on mobile
+Active step: filled circle, brand color, pulse animation
+Completed: filled check icon, muted brand color
+Pending: hollow circle, gray
+Step label: 11-12px below/beside icon
+Connector line: 2px, colored for completed, gray for pending
+```
+
+---
+
+## Anti-Patterns to Avoid
+
+- Do not hide the price until the product page — users need it to scan.
+- Do not use dark backgrounds for product grids — reduces readability and scan speed.
+- Do not use fake urgency ("Only 3 left!" when 300 are in stock).
+- Do not auto-play promotional videos in the product grid.
+- Do not use hover-only filters or sort controls — mobile users cannot hover.
+- Do not paginate to page 1 after applying a filter — preserve scroll position or result context.
+- Do not use captcha on checkout — use it only before purchase if fraud risk is high.
+- Do not require account creation before cart or checkout.
+- Do not show "out of stock" only after the user has added to cart.
+
+---
+
+## QA Checklist
+
+- [ ] Search returns results within 300ms (or shows skeleton).
+- [ ] Product card: price, name, rating, delivery visible without hover.
+- [ ] Filter panel: applying a filter immediately updates results (no "Apply" button required unless many simultaneous changes).
+- [ ] Sticky add-to-cart bar visible on mobile product detail page scroll.
+- [ ] Guest checkout path exists and is accessible without account creation.
+- [ ] Tracking status page shows current step, timestamp, and next expected step.
+- [ ] All interactive elements have visible focus ring.
+- [ ] Rating stars have accessible text alternative.
+- [ ] Search input has `<label>` or `aria-label`.
+- [ ] Mobile filter is accessible as full-screen modal with close button.
+- [ ] No fake urgency copy — verify against live inventory logic.
+- [ ] Core Web Vitals: LCP ≤ 2.5s, CLS ≤ 0.1 (product grids must not shift on image load).