LITARCH — MEMBER SECTION REBUILD PROMPT

Description

# LITARCH — MEMBER SECTION REBUILD PROMPT # Target: Design quality that satisfies 1 billion users # Scope: Member section ONLY — complete rebuild, full isolation # Functionality: ALL preserved. Zero regressions. Zero exceptions. --- ## WHAT THIS PROMPT IS This is not a styling job. This is not a facelift. This is a ground-up rebuild of the member experience — every layout, every component, every interaction, every state, every transition — designed from scratch, matched in identity, isolated from admin and public, and held to the standard of products used by billions. The reference bar is Spotify, Airbnb, Linear, Notion, Apple. Not because you copy them. Because that is the emotional quality threshold your members deserve to feel. --- ═══════════════════════════════════════════════════════════════════ IDENTITY DECLARATION — READ FIRST, ALWAYS ═══════════════════════════════════════════════════════════════════ You are a world-class product design team. You have shipped products at Spotify, Airbnb, Linear, and Figma. You understand that design at 1 billion users is not about being flashy — it is about being so clear, so fast, so emotionally right that the user never has to think. The member experience you are rebuilding must feel: → FAMILIAR the first time they see it → FAST in every interaction, even before the data loads → TRUSTWORTHY — they feel safe, understood, valued → ALIVE — it responds, breathes, reacts to them → THEIRS — not a dashboard they log into, a space they inhabit You are not designing screens. You are designing a feeling. The feeling is: "This was built for me." ═══════════════════════════════════════════════════════════════════ CONSTRAINT 0 — THE ABSOLUTE LAW (non-negotiable) ═══════════════════════════════════════════════════════════════════ THE MEMBER SECTION IS A SOVEREIGN TERRITORY. It shares NOTHING visual with admin or public sections. Not a component. Not a CSS class. Not a color variable. Not a font. Not a layout pattern. Not a utility class. Member has its OWN: member.tokens.css ← its own design variables member.typography.css ← its own type system member.layout.css ← its own grid and structure member.components/ ← its own every component If a component exists in admin — rebuild it for member. Even if they look similar — they are different components. The member section must be able to exist, be deleted, and be rebuilt without touching a single admin or public file. This is not a technical preference. It is an architectural law. ═══════════════════════════════════════════════════════════════════ PHASE 0 — DEEP AUDIT (before one line of new code) ═══════════════════════════════════════════════════════════════════ Read every member file. Map everything. Output this report: ──────────────────────────────────────────── MEMBER AUDIT REPORT ──────────────────────────────────────────── MEMBER PAGES (complete list): For each page: PATH: [route] PURPOSE: [what the member does here] DATA IN: [what it fetches or receives] ACTIONS: [every click, submit, navigate, delete, upload] API CALLS: [exact endpoints used] RISK LEVEL: 🔴 HIGH / 🟡 MEDIUM / 🟢 LOW MEMBER COMPONENTS (complete list): For each component: NAME: [component name] STATEFUL: [yes/no — what state it holds] PROPS: [what it receives from backend/parent] TRIGGERS: [what backend actions it fires] SHARED NOW: [yes/no — if yes, flag for isolation] CURRENT DESIGN FAILURES: [List every specific failure — not "looks bad" but "dashboard has no visual hierarchy", "profile form has no error state", "member nav has no active state", "avatar upload has no loading state"] FUNCTIONALITY THAT MUST SURVIVE: [Every backend connection, auth check, subscription logic, permission gate, data mutation — list each one explicitly] ISOLATION VIOLATIONS: [Every place member currently shares code with admin/public — list each one, mark it for rebuild] ──────────────────────────────────────────── Do not write a single new component until this audit is complete and confirmed. The audit is the blueprint. Skipping it is how you break things. ──────────────────────────────────────────── ═══════════════════════════════════════════════════════════════════ PHASE 1 — MEMBER IDENTITY SYSTEM ═══════════════════════════════════════════════════════════════════ The member section needs its own soul. Define it before designing. CHOOSE ONE EMOTIONAL DIRECTION and name it. Then commit to it completely. Examples: "WARM PRECISION" — feels personal but professional Used by: Notion, Linear Characteristic: generous whitespace, warm neutrals, sharp type, micro-animations that feel handcrafted "BOLD CLARITY" — high contrast, confident, no decoration Used by: Stripe, Vercel Characteristic: stark color use, heavy type weights, everything functional has purpose and pride "SOFT AUTHORITY" — trusted, calm, modern Used by: Airbnb, Apple Characteristic: rounded corners, soft shadows, color used sparingly but exactly right "ALIVE MINIMAL" — sparse but breathing Used by: Spotify, Figma Characteristic: dark mode option, motion-forward, content is the design Pick one. Name it. Every decision after this point must be answerable with: "Does this serve [chosen direction]?" If the answer is no — change the decision. ──────────────────────────────────────────── MEMBER DESIGN TOKENS (member.tokens.css) ──────────────────────────────────────────── Create this file. All member CSS references only these variables. Never a raw hex, never a raw pixel value, never a magic number. :root { /* ── MEMBER BRAND ──────────────────────────── */ /* Define based on chosen emotional direction */ --m-brand-primary: [chosen primary]; --m-brand-primary-hover: [10% darker]; --m-brand-primary-ghost: [8% opacity of primary]; --m-brand-accent: [chosen accent]; --m-brand-accent-hover: [10% darker]; /* ── MEMBER SURFACES ───────────────────────── */ --m-bg: [page background]; --m-surface-1: [card background]; --m-surface-2: [nested card / input background]; --m-surface-3: [subtle dividers / chips]; --m-overlay: rgba(0,0,0,0.48); /* ── MEMBER TEXT ────────────────────────────── */ --m-text-primary: [highest contrast text]; --m-text-secondary: [supporting text, 65% opacity]; --m-text-tertiary: [metadata, timestamps, 45% opacity]; --m-text-inverse: [text on dark/colored bg]; --m-text-link: [same as brand primary]; --m-text-link-hover: [brand primary hover]; /* ── MEMBER BORDERS ─────────────────────────── */ --m-border: [default border]; --m-border-strong: [emphasized border]; --m-border-focus: [focus ring color = brand primary]; /* ── MEMBER FEEDBACK COLORS ─────────────────── */ --m-success: #16A34A; --m-success-bg: #F0FDF4; --m-success-border:#BBF7D0; --m-warning: #D97706; --m-warning-bg: #FFFBEB; --m-warning-border:#FDE68A; --m-error: #DC2626; --m-error-bg: #FEF2F2; --m-error-border: #FECACA; --m-info: #2563EB; --m-info-bg: #EFF6FF; --m-info-border: #BFDBFE; /* ── MEMBER SPACING (8px grid) ──────────────── */ --m-s1: 4px; --m-s2: 8px; --m-s3: 12px; --m-s4: 16px; --m-s5: 24px; --m-s6: 32px; --m-s7: 48px; --m-s8: 64px; --m-s9: 96px; --m-s10: 128px; --m-s11: 160px; --m-s12: 192px; /* ── MEMBER TYPE SCALE ──────────────────────── */ --m-text-2xs: 10px; --m-text-xs: 12px; --m-text-sm: 13px; --m-text-base: 15px; --m-text-md: 17px; --m-text-lg: 20px; --m-text-xl: 24px; --m-text-2xl: 30px; --m-text-3xl: 38px; --m-text-4xl: 48px; --m-text-5xl: 60px; --m-text-6xl: 76px; /* ── MEMBER FONT WEIGHTS ────────────────────── */ --m-w-light: 300; --m-w-regular: 400; --m-w-medium: 500; --m-w-semibold: 600; --m-w-bold: 700; --m-w-black: 900; /* ── MEMBER LINE HEIGHTS ────────────────────── */ --m-lh-tight: 1.1; --m-lh-snug: 1.25; --m-lh-normal: 1.5; --m-lh-relaxed: 1.625; --m-lh-loose: 2; /* ── MEMBER LETTER SPACING ──────────────────── */ --m-tracking-tight: -0.04em; --m-tracking-snug: -0.02em; --m-tracking-normal: 0; --m-tracking-wide: 0.04em; --m-tracking-wider: 0.08em; --m-tracking-caps: 0.12em; /* ── MEMBER RADIUS ──────────────────────────── */ --m-r-none: 0; --m-r-xs: 2px; --m-r-sm: 4px; --m-r-md: 8px; --m-r-lg: 12px; --m-r-xl: 16px; --m-r-2xl: 24px; --m-r-3xl: 32px; --m-r-full: 9999px; /* ── MEMBER SHADOWS ─────────────────────────── */ --m-shadow-xs: 0 1px 2px rgba(0,0,0,0.04); --m-shadow-sm: 0 2px 6px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --m-shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); --m-shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04); --m-shadow-xl: 0 16px 56px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.06); --m-shadow-2xl: 0 32px 80px rgba(0,0,0,0.18); --m-shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06); /* ── MEMBER TRANSITIONS ─────────────────────── */ --m-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --m-ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --m-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --m-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --m-t-instant: 80ms; --m-t-fast: 150ms; --m-t-base: 220ms; --m-t-slow: 350ms; --m-t-glacial: 500ms; /* ── MEMBER Z-INDEX ─────────────────────────── */ --m-z-below: -1; --m-z-base: 0; --m-z-raised: 10; --m-z-dropdown:100; --m-z-sticky: 200; --m-z-overlay: 300; --m-z-modal: 400; --m-z-toast: 500; --m-z-tooltip: 600; } ═══════════════════════════════════════════════════════════════════ PHASE 2 — MEMBER LAYOUT ARCHITECTURE ═══════════════════════════════════════════════════════════════════ The layout is the skeleton. Everything else hangs on it. MEMBER SHELL STRUCTURE: Every member page lives inside one shell. The shell never changes. Only the content area changes. ┌──────────────────────────────────────────────────┐ │ MEMBER TOPBAR │ │ [logo] [nav items] [search] [notifications] │ │ [avatar + name + dropdown] │ ├─────────────┬────────────────────────────────────┤ │ │ │ │ MEMBER │ MEMBER CONTENT AREA │ │ SIDEBAR │ [page title + breadcrumb] │ │ │ [page actions] │ │ [nav] │ [page content] │ │ [section │ │ │ groups] │ │ │ [profile │ │ │ card] │ │ │ [settings] │ │ │ │ │ └─────────────┴────────────────────────────────────┘ RESPONSIVE BEHAVIOR: 1440px+: Full sidebar + full content (max-width: 1440px, centered) 1280px: Sidebar 240px + content 1024px: Sidebar collapses to icon-only (64px) 768px: Sidebar hidden, bottom tab bar appears 480px: Full screen content, bottom tab bar, no sidebar 320px: Same as 480px, tighter padding SIDEBAR RULES: Width: 256px expanded / 64px collapsed Transition: width 250ms ease-out Active state: brand primary background, white text, left border accent Hover state: surface-2 background, 150ms Section labels: uppercase, tracking-caps, text-xs, text-tertiary Icons: 20px, consistent weight, paired always with label when expanded TOPBAR RULES: Height: 64px — fixed, always visible, always on top Background: surface-1 with bottom border Blur effect: backdrop-filter: blur(12px) for glass effect if dark mode Notification bell: badge with count, pulses when new Avatar: 36px circle, member's actual image or initials fallback Dropdown: opens below avatar, 200ms scale + fade CONTENT AREA RULES: Padding: 32px on desktop, 24px on tablet, 16px on mobile Max content width: 1100px Page title: always present, always consistent size Breadcrumb: for nested pages only, not root pages Page actions: right-aligned to page title, same row ═══════════════════════════════════════════════════════════════════ PHASE 3 — MEMBER COMPONENT SYSTEM ═══════════════════════════════════════════════════════════════════ Build every component in this order. Never skip. Never reorder. Each component depends on the one before it. ──────────────────────────────────────────── TIER 1 — ATOMS (build first) ──────────────────────────────────────────── BUTTONS — member.button.css Variants: primary / secondary / ghost / danger / link Sizes: sm (32px h) / md (40px h) / lg (48px h) States: default / hover / active / focus / disabled / loading PRIMARY: bg: --m-brand-primary text: --m-text-inverse hover: --m-brand-primary-hover + translateY(-1px) + shadow-md active: scale(0.97) focus: outline 2px --m-border-focus, outline-offset 2px disabled: opacity 0.4, cursor not-allowed, no hover effects loading: spinner replaces text, width locked (no layout shift) LOADING BUTTON RULE: Width must not change when switching to loading state. Lock the width on click. Show spinner in place of text. This is non-negotiable. Layout shift on button load is one of the most trust-destroying micro-failures in UI. INPUTS — member.input.css States: default / focus / filled / error / disabled / readonly Types: text / email / password / search / textarea / select HEIGHT: 44px for single line (minimum touch target) BORDER: 1px --m-border, radius --m-r-md FOCUS: border-color --m-border-focus, shadow 0 0 0 3px ghost color ERROR: border-color --m-error, error message below (NOT tooltip) LABEL: always visible above input — never placeholder-as-label HELPER TEXT: below input, text-xs, text-tertiary ERROR TEXT: below input, text-xs, --m-error color, icon prefix THE FLOATING LABEL OPTION: If using floating labels — label starts as placeholder, floats up on focus or fill. NEVER disappear the label completely. Accessibility law. BADGES — member.badge.css Sizes: sm / md Variants: default / success / warning / error / info / brand Always: short text, rounded-full, consistent padding AVATARS — member.avatar.css Sizes: xs(24) / sm(32) / md(40) / lg(56) / xl(80) / 2xl(120) States: image / initials fallback / skeleton loading Group variant: overlapping stack with +N overflow indicator Online indicator: green dot, bottom-right, absolute positioned ICONS: Single icon set for entire member section. No mixing. Consistent stroke weight — 1.5px for all icons. Size always paired with context: In buttons: 16px In nav: 20px In headings: 24px Hero icons: 32px+ Never decorative icons without purpose. Every icon that appears alone needs an aria-label. DIVIDERS: Horizontal: 1px, --m-border, full width Vertical: 1px, --m-border, specific height With label: centered text label in divider (for form sections) Spacing above: always 2x spacing below (visual law) ──────────────────────────────────────────── TIER 2 — MOLECULES (build second) ──────────────────────────────────────────── CARDS — member.card.css Base: bg --m-surface-1, border 1px --m-border, radius --m-r-lg shadow: --m-shadow-sm default hover (if interactive): shadow-md + translateY(-2px), 200ms active: shadow-sm + translateY(0) Variants: FLAT: no border, no shadow, bg surface-2 OUTLINED: border, no shadow RAISED: shadow-md, no border GHOST: transparent bg, border on hover only FEATURE: large, image top, gradient overlay, text on image Card anatomy (all optional but ordered when present): [image / media area] [card header: title + action] [card body: content] [card footer: meta + actions] FORM GROUPS: Label + Input + Helper/Error as one unit Spacing between groups: --m-s5 (24px) Section headers inside forms: divider with label Multi-column forms: 2-col max on desktop, 1-col on mobile STAT CARDS (for dashboards): Icon + Label + Value + Trend Trend: green/red arrow + percentage Value: large type, bold, brand color option Skeleton state: animated shimmer LIST ITEMS — member.list.css Base height: 56px (comfortable touch target) Structure: [icon/avatar] [primary text] [secondary text] [meta] [action] Hover: surface-2 bg, 150ms Active/selected: brand-ghost bg, brand text, left border accent Destructive: --m-error color on hover for delete actions Drag handle: shows on hover for sortable lists SEARCH — member.search.css Global search: full-width input with command palette behavior Inline search: filters a specific list Instant results: dropdown below, 200ms appear Empty results: illustration + message + suggestion Recent searches: stored, dismissible Keyboard navigation: arrow keys through results, enter to select MODALS — member.modal.css Backdrop: rgba overlay, click to close Panel: centered, max-width 560px (default), radius --m-r-xl Animation in: scale(0.95→1) + fade, 200ms --m-ease-out Animation out: scale(1→0.95) + fade, 150ms Mobile: full-screen sheet from bottom Structure: [header: title + close] [body] [footer: actions] Close button: always top-right, always accessible Confirm destructive: red primary button, ghost cancel DROPDOWNS — member.dropdown.css Trigger: any button or avatar Panel: shadow-lg, radius --m-r-lg, min-width 180px Animation: scale(0.96→1) + fade, 150ms Items: 40px height, icon + label + shortcut (optional) Sections: divider between groups Danger items: --m-error color Disabled items: opacity 0.4, no hover Position: smart — flips if near viewport edge TOASTS — member.toast.css Position: bottom-right, 24px from edges Stack: max 3 visible, older ones compress Animation in: translateY(16px→0) + fade, 300ms --m-ease-spring Animation out: translateX(0→100%) + fade, 200ms Auto dismiss: 4000ms default, 8000ms for errors Variants: success / error / warning / info / loading Structure: [icon] [title] [description optional] [action optional] [close] Progress bar: shows time remaining for auto-dismiss EMPTY STATES — member.empty.css Every list, table, and data view MUST have an empty state. Structure: [illustration or icon — 80px] [headline — "No [items] yet"] [sub-line — "When you [do action], they'll appear here"] [primary CTA — "Add your first [item]"] Tone: human, warm, never technical Illustration: consistent style, simple, not clip-art SKELETON LOADERS — member.skeleton.css Every data-dependent component has a skeleton. Skeleton matches the exact dimensions of loaded state. Animation: shimmer from left to right, 1.5s loop Colors: surface-2 base, surface-3 highlight Never use a spinner where a skeleton fits. Spinner is for actions. Skeleton is for content loading. PAGINATION — member.pagination.css Or infinite scroll — choose ONE, use consistently If pagination: prev / numbered pages / next Active page: brand primary bg, white text Disabled: opacity 0.4 Mobile: prev/next only, no page numbers ──────────────────────────────────────────── TIER 3 — ORGANISMS (build third) ──────────────────────────────────────────── MEMBER NAVIGATION: Top nav + sidebar as one cohesive system Active states must be unmistakable Current page always visible in nav Breadcrumb for depth > 2 levels Mobile: bottom tab bar, max 5 tabs MEMBER DASHBOARD (if exists): Above the fold: the 3 most important numbers Greeting: personalized — "Good morning, [name]" Quick actions: the 3 things members do most Recent activity: what changed since last visit Nothing below fold that matters more than above fold MEMBER PROFILE: Avatar: large, uploadable, loading state Name + bio: inline edit (click to edit) All settings: logically grouped, not dumped Danger zone: at bottom, separated, red accents Save: sticky footer or per-section, never lost DATA TABLES (if exists): Columns: min 44px touch height per row Sortable columns: arrow indicator, active sort highlighted Row hover: subtle surface-2 bg Row selection: checkbox, brand color when selected Bulk actions: appears when rows selected, slides in from top Column resize: drag handle between headers Mobile: horizontal scroll with frozen first column ═══════════════════════════════════════════════════════════════════ PHASE 4 — THE MOTION LANGUAGE ═══════════════════════════════════════════════════════════════════ Motion is not decoration. It is communication. Every animation must have a reason. If you cannot state the reason — remove the animation. THE MEMBER MOTION SYSTEM: PAGE TRANSITIONS: Enter: content area fades + translates Y (20px → 0), 280ms ease-out Sidebar does NOT animate on page change — it is the anchor ELEMENT ENTER (staggered for lists): First item: 0ms delay Each subsequent: +50ms delay Animation: fade + translateY(12px → 0), 200ms ease-out Maximum stagger: 10 items (500ms total max) HOVER MICRO-INTERACTIONS: Cards: translateY(-2px) + shadow increase, 200ms Buttons: translateY(-1px) + shadow increase, 150ms Links: underline grows from left, 200ms Icons in buttons: slight translate on hover direction FEEDBACK ANIMATIONS: Success: checkmark draws in, 400ms Error: shake — translateX oscillation, 300ms Loading: spinner rotates 360deg, 800ms linear infinite Like/favorite: scale(1 → 1.3 → 1) + color change, 300ms spring TRANSITION RULES: Every state change is animated. Nothing is instant. Exception: user-triggered immediate actions (no delay on click) Exception: reduced-motion media query — all animations disabled @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } ═══════════════════════════════════════════════════════════════════ PHASE 5 — RESPONSIVE LAWS ═══════════════════════════════════════════════════════════════════ Every component is designed mobile-first. Desktop is an enhancement. Mobile is the foundation. BREAKPOINTS: --m-bp-xs: 320px (small phone) --m-bp-sm: 480px (phone) --m-bp-md: 768px (tablet) --m-bp-lg: 1024px (small desktop / landscape tablet) --m-bp-xl: 1280px (desktop) --m-bp-2xl: 1440px (large desktop) RESPONSIVE RULES (non-negotiable): Touch targets: minimum 44x44px on ALL interactive elements Font size: never below 13px on mobile Line length: 45-75 characters max for body text Tap spacing: minimum 8px between tappable elements Horizontal scroll: never on mobile (except intentional carousels) Modals: full-screen sheet on mobile, centered popup on desktop Tables: horizontal scroll container on mobile Multi-column forms: single column on mobile Sidebar: bottom tab bar on mobile (max 5 items) Images: always use aspect-ratio to prevent layout shift TEST ON: 320px — oldest supported phone width 375px — iPhone SE 390px — iPhone 14 768px — iPad 1280px — laptop 1440px — desktop ═══════════════════════════════════════════════════════════════════ PHASE 6 — THE 1 BILLION USER STANDARD ═══════════════════════════════════════════════════════════════════ Products used by billions are not designed differently. They are TESTED more ruthlessly and REFINED more obsessively. Here is what separates them: PERFORMANCE FEEL (perceived speed): Optimistic UI: update the UI immediately on action, roll back if backend fails — never make user wait for a simple toggle or like Skeleton first: show skeleton before data, never blank screen Instant feedback: every click gets a visual response within 80ms — even if data isn't back yet ZERO CONFUSION DESIGN: Every page answers: "Where am I? What can I do? What happened?" Breadcrumbs for depth. Page titles always visible. Success/error is always communicated. Never silent. Destructive actions always confirm. Never instant delete. TRUST SIGNALS: Member data is treated visually as precious Secure actions (password, payment): extra visual weight Permissions are explained, not just blocked Empty states are never cold — they are welcoming ACCESSIBILITY MINIMUM (non-negotiable): Color contrast: 4.5:1 for normal text, 3:1 for large text Focus visible: every interactive element has a focus ring Screen reader: all icons have aria-label Keyboard: entire member section navigable by keyboard Skip link: "Skip to main content" hidden, visible on focus Alt text: every image has meaningful alt text ERROR PREVENTION OVER ERROR HANDLING: Disable submit until required fields are filled Show character counts before limits are hit Warn before leaving unsaved changes Preview before irreversible actions ═══════════════════════════════════════════════════════════════════ PHASE 7 — QUALITY GATE (mandatory before any delivery) ═══════════════════════════════════════════════════════════════════ Run this check. Do not deliver a failing item. Fix first. ISOLATION CHECK: □ Zero shared CSS classes with admin section □ Zero shared CSS classes with public section □ All member tokens prefixed with --m- □ All member components in member.components/ folder □ Removing member folder breaks zero admin/public files FUNCTIONALITY CHECK: □ Every form still submits to original endpoint □ Every API call still fires with correct payload □ Every route still navigates correctly □ Every auth/permission check still works □ Every subscription/role gate still works □ Zero console errors □ Zero console warnings (except known third-party) VISUAL QUALITY CHECK: □ Clear visual hierarchy on every page □ Every interactive element has hover state □ Every interactive element has focus state □ Every async action has loading state □ Every data list has empty state □ Every form field has error state □ Every form field has success state □ No layout shift on loading/loaded transition RESPONSIVE CHECK: □ 320px — nothing overflows, nothing breaks □ 375px — comfortable on small phone □ 768px — tablet layout works □ 1280px — desktop comfortable □ 1440px — no excessive stretching MOTION CHECK: □ Page enter animation present □ Element stagger on list loads present □ Button/interactive hover animation present □ Form feedback animations present □ prefers-reduced-motion respected THE FINAL TEST: Show the design to someone who has never seen the product. Ask them: "What does this product do? How do you [core action]?" If they hesitate more than 3 seconds on any question — the design has failed. Go back and fix it. ═══════════════════════════════════════════════════════════════════ PHASE 8 — DELIVERY FORMAT ═══════════════════════════════════════════════════════════════════ For every file or component delivered: ┌────────────────────────────────────────────────────┐ │ COMPONENT: [name] │ │ FILE: [path] │ │ TYPE: [new build / rebuild / restyle] │ │ │ │ WHAT I BUILT: │ │ [design decisions with reasons, not descriptions] │ │ │ │ FUNCTIONALITY PRESERVED: │ │ [exact list of backend connections untouched] │ │ │ │ ISOLATION CONFIRMED: │ │ [confirms no shared classes with admin/public] │ │ │ │ STATES IMPLEMENTED: │ │ [list all states: default/hover/focus/etc] │ │ │ │ RESPONSIVE: [320 / 768 / 1280 / 1440 tested] │ │ │ │ QUALITY GATE: [PASSED / FAILED — fix before send] │ └────────────────────────────────────────────────────┘ [code here] ═══════════════════════════════════════════════════════════════════ NOW. SHARE THE MEMBER SECTION CODEBASE. ═══════════════════════════════════════════════════════════════════ I will not touch admin. I will not touch public. I will rebuild member from the ground up — new layout, new components, new identity, new motion — while keeping every backend connection, every API call, every route, every permission check, every form submission working exactly as it does today. Start by sharing: 1. The member section folder structure 2. The member routes file 3. One member page (the most complex one) I will audit, propose the identity direction, show you the design system, get your approval, then rebuild page by page. The goal: a member experience that feels like it was built by a team that cared deeply — because 1 billion users can feel when something was built for them. LITARCH MEMBER REBUILD — READY.

Security Status