# Lumina Frontend UI

> 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.

- Skill: `hoangsonww/lumina-frontend-ui` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add hoangsonww/lumina-frontend-ui`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangsonww/lumina-frontend-ui/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: hoangsonww (https://skillmd.com/u/hoangsonww)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hoangsonww/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.