learning_ai_common_plat/dashboards/ux-lab/lovable-settings-ux-kit/PROMPT.md

Lovable — Settings Page UX Kit (Micro-App)

Before you start: read and follow DESIGN_SYSTEM_BRIEF.md, UX_TOKEN_CONTRACT.md, REPO_SCOPING_RULES.md, and ACCEPTANCE_CHECKLIST.md.

Goal

Build a UI/UX-rich settings dashboard micro-app demonstrating premium settings patterns that we can reuse across dashboards and product web apps.

This is design-led: prioritize spacing, typography, states, and interaction polish.

Constraints

• Only modify files in this repository.
• pnpm only.
• Next.js 16 App Router, React 19, TypeScript strict.
• TailwindCSS v4.
• No network calls.
• No console.log.
• No hardcoded colors — use --ux-* CSS variables from UX_TOKEN_CONTRACT.md.
• Avoid unnecessary dependencies. If you add a dependency, justify why it is required.

Must-have routes

• / overview landing
• /settings main settings dashboard
• /settings/account account settings section
• /settings/notifications notifications settings section
• /settings/privacy privacy settings section
• /settings/appearance appearance settings section

App shell / IA

• Left settings nav (section list)
• Main content area
• Sticky top header with:
  • search settings (filters visible settings rows)
  • “Reset changes” (revert local edits)
  • save status indicator (Saved / Saving / Error)

Core UX requirements

Settings layout patterns

• Section headers with description
• Rows with:
  • label
  • description
  • control (toggle/select/input)
  • optional inline error

Autosave behavior (local-only)

• Changes persist to localStorage
• Simulate async save:
  • show “Saving…” for 400–800ms
  • then “Saved”
  • provide a demo toggle to simulate “Save failed” state

Danger zone

• “Delete local profile” action
• confirm dialog (destructive)
• requires typing a confirmation word (e.g. DELETE)

Accessibility

• Full keyboard navigation
• Correct labels for inputs
• Focus rings are token-driven

Visual / UX bar

• Premium spacing/typography
• Subtle animations
• Mobile responsive (nav collapses to drawer on small screens)

Deliverables

• Full Next.js app with scripts:
  • dev
  • check (must run tsc --noEmit + eslint)
  • build (must run next build --webpack)

Verification

From repo root:

• pnpm install
• pnpm run check
• pnpm run build

Output expectation

Open a PR that only changes files in this repo.