Lumina Frontend UI

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.