learning_ai_common_plat/dashboards/ux-lab/lovable-ops-ui-kit/PROMPT.md

Lovable App 1 — Ops UI Kit (Design-led Micro-App)

Before you start: read and follow DESIGN_SYSTEM_BRIEF.md.

Goal

Create a visually polished Ops Dashboard UI Kit micro-app that feels like a premium admin console. This app is design-led: prioritize typography, spacing, states, and interaction polish.

Scope constraints

• Only modify files in this repository.
• No backend calls; mock data + localStorage only
• No console.log
• No hardcoded colors (use CSS variables)

Must-have pages

• / overview landing
• /components gallery of:
  • buttons, inputs, selects
  • badges, tabs
  • dialogs/drawers
  • toasts
  • empty/loading/error states
• /table table demo with filters

UX requirements

• Theme toggle (light/dark)
• Keyboard accessibility:
  • Esc closes overlays
  • focus returns to triggering element
• Micro-interactions:
  • hover, press, focus rings
  • subtle animation for drawer/dialog

Table requirements

• Mock dataset: incidents
• Sort + filter + pagination
• Row actions menu
• Details drawer with tabs

Deliverables

• Next.js 16 App Router app
• Tailwind v4
• TypeScript strict
• Scripts: dev, check, build (build uses next build --webpack)

Success criteria

• Looks and feels premium
• Fully self-contained
• Ready to copy components into other dashboards