lumina-frontend-ui

name	lumina-frontend-ui
description	Build, refine, and debug the React/Vite frontend for Lumina. Use when editing files under client/src or client/package.json, changing chat UX, landing page content, auth flows, routing, theme behavior, markdown rendering, animations, responsive layout, or frontend API wiring.

Lumina Frontend UI

Overview

Use this skill for frontend tasks in client/. Keep changes aligned with Lumina's existing visual language: animated, polished, content-rich, and responsive rather than generic dashboard UI.

Load The Right Reference

• Read references/component-map.md before editing when you need to locate the right page, component, or client-side service.
• Read references/validation.md before finishing when frontend behavior, build health, or API coupling changed.

Work The Frontend Deliberately

• Start from the user-facing entry point, then trace inward. For chat issues this usually means client/src/pages/Home.tsx plus client/src/components/ChatArea.tsx and client/src/services/api.ts.
• Keep route-level changes consistent with client/src/App.tsx.
• Prefer focused edits to the page or component that owns the behavior instead of broad global rewrites.
• Treat client/src/pages/LandingPage.tsx as intentionally branded and heavily customized. Preserve its personality unless the task explicitly asks for a redesign.
• Keep responsive behavior intact on mobile and desktop.
• Keep markdown, math, and citation rendering working when changing chat output.

Coordinate With The Backend Carefully

• If a frontend change depends on a new request shape, endpoint, or response contract, update the backend and openapi.yaml in the same task when feasible.
• If the bug is really caused by retrieval, citations, or chat response composition, switch to lumina-rag-knowledge or lumina-backend-api instead of forcing a frontend-only patch.

Finish With Real Validation

• Run npm run build in client/ after meaningful frontend changes.
• Treat npm test in client/ as a placeholder, not as evidence of coverage.
• Call out any unverified browser behavior if you could not run the app interactively.