Borrowing it
Nothing to install: this file belongs to hoangsonww/AI-RAG-Assistant-Chatbot. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/hoangsonww/AI-RAG-Assistant-Chatbot/master/.agents/skills/lumina-frontend-ui/SKILL.mdgit clone --depth 1 https://github.com/hoangsonww/AI-RAG-Assistant-ChatbotWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/hoangsonww/ai-rag-assistant-chatbot/lumina-frontend-ui)<a href="https://agentmods.dev/skills/hoangsonww/ai-rag-assistant-chatbot/lumina-frontend-ui"><img src="https://agentmods.dev/badge/skills/hoangsonww/ai-rag-assistant-chatbot/lumina-frontend-ui/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/hoangsonww/ai-rag-assistant-chatbot/lumina-frontend-ui"><img src="https://agentmods.dev/badge/skills/hoangsonww/ai-rag-assistant-chatbot/lumina-frontend-ui.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00062 | $0.00460 |
| Opus 5 | $0.00031 | $0.00230 |
| Sonnet 5 | $0.00012 | $0.00092 |
| Haiku 4.5 | $0.00006 | $0.00046 |
Grade A, and why
lumina-frontend-ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
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.mdbefore editing when you need to locate the right page, component, or client-side service. - Read
references/validation.mdbefore 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.tsxplusclient/src/components/ChatArea.tsxandclient/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.tsxas 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.yamlin the same task when feasible. - If the bug is really caused by retrieval, citations, or chat response composition, switch to
lumina-rag-knowledgeorlumina-backend-apiinstead of forcing a frontend-only patch.
Finish With Real Validation
- Run
npm run buildinclient/after meaningful frontend changes. - Treat
npm testinclient/as a placeholder, not as evidence of coverage. - Call out any unverified browser behavior if you could not run the app interactively.
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 12d ago First seen · 36 lines · 62 tokens per session scan A a2a6db1b935c
lumina-frontend-ui is a skill published in the GitHub repository hoangsonww/AI-RAG-Assistant-Chatbot (47 stars, last pushed 4d ago), licensed MIT. It adds 62 tokens to every session and 460 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
storybook
Storybook is the fidelity oracle, not the runtime. The converter bundles the package's compiled dist/ into dsbundle.js - the same bundle the claude.ai/design agent builds with - and generates each preview by compiling the story source module itself (hooks, fixtures, local helpers - the whole closure comes along), with…
nextjs-app-router
Full end-to-end tRPC setup for Next.js App Router. Covers route handler with fetchRequestHandler (GET + POST exports), TRPCProvider with QueryClientProvider, createTRPCOptionsProxy for RSC prefetching, HydrateClient/HydrationBoundary for hydration, useSuspenseQuery for Suspense, and server-side callers.
nextjs-pages-router
Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.
react-query-setup
Set up @trpc/tanstack-react-query with createTRPCContext(), TRPCProvider, useTRPC() hook, queryOptions/mutationOptions factories, query invalidation via queryClient.invalidateQueries with queryFilter, and type inference with inferInput/inferOutput.
design-sync
Push a React design system to claude.ai/design. This runs a converter that bundles the real component code (from Storybook or a bare package) and uploads it. Use when the user runs /design-sync or says "sync my design system to Claude Design".
react-query-classic-migration
Migrate from @trpc/react-query (classic) to @trpc/tanstack-react-query. Run npx @trpc/upgrade CLI for automated codemod. Manually migrate remaining patterns: hook-based to options-factory, utils.invalidate to queryClient.invalidateQueries with queryFilter, provider changes.