Agent-Skills.md

Agent Skills: Frontend Design (Lumina)

Design or redesign frontend interfaces in quant-lab with high-quality, production-ready UI/UX while preserving Lumina identity. Use when the user asks for UI polish, visual redesign, page/layout revamp, dashboard/chart UX improvements, interaction quality upgrades, or anti-generic "AI-looking" frontend output.

UncategorizedID: CheekyCodexConjurer/quant-lab/frontend-design-lumina

Repository

CheekyCodexConjurer/quant-lab
CheekyCodexConjurer

Install this agent skill to your local

pnpm dlx add-skill https://github.com/CheekyCodexConjurer/quant-lab/tree/HEAD/skills/frontend-design-lumina

Skill Files

Browse the full folder contents for frontend-design-lumina.

Download Skill

Loading file tree…

skills/frontend-design-lumina/SKILL.md

Skill Metadata

Name
frontend-design-lumina
Description
Design or redesign frontend interfaces in quant-lab with high-quality, production-ready UI/UX while preserving Lumina identity. Use when the user asks for UI polish, visual redesign, page/layout revamp, dashboard/chart UX improvements, interaction quality upgrades, or anti-generic "AI-looking" frontend output.

Frontend Design (Lumina)

Use this skill to produce distinctive, production-grade UI without drifting from quant-lab visual identity.

Design intent

Before coding, define in 4 bullets:

  1. Purpose: what user problem this UI solves now.
  2. Audience context: trader/dev/analyst and primary scenario.
  3. Tone direction: one explicit direction (ex: "minimal quant-tech", "dense professional terminal", "calm analytical").
  4. Constraints: performance, accessibility, existing component primitives, and file-size limits.

Then pick one memorable signature detail (layout rhythm, motion moment, or visual hierarchy choice) and keep it coherent across the feature.

Lumina-first guardrails

  • Preserve minimalist, symmetric, clean quant-tech style.
  • Prefer compact overlays/menus over heavy panels.
  • Reuse existing primitives before creating new patterns.
  • Keep spacing and hierarchy consistent; avoid decorative noise.
  • Use motion to clarify state/intent, never as visual clutter.

Anti-generic UI checklist

Avoid shipping generic AI-looking UI. Before finalizing, verify:

  • No random gradient/glow usage without semantic purpose.
  • No inconsistent radius/spacing scale between nearby components.
  • No mixed interaction quality (all controls must cover hover/focus/disabled/loading/error as applicable).
  • No broken density balance (too sparse or too crowded for the workflow).
  • No accidental style drift from neighboring Lumina surfaces.

Implementation workflow

  1. Start with a small UI brief (purpose, audience, tone, constraints).
  2. Define component boundaries (view/hook/service/types) to stay LLM-friendly.
  3. Implement minimal diffs first; add polish after behavior is correct.
  4. Validate interaction completeness:
    • keyboard/focus-visible
    • escape/click-outside when relevant
    • reduced-motion safe behavior
    • viewport fit/flip for floating surfaces
  5. Run verification with skills/verify_changes/SKILL.md and UI smoke when UI behavior changed.

Deliverable standard

In final output, always include:

  • chosen visual direction (1 line)
  • what was improved in UX/clarity (short bullets)
  • risks/trade-offs (if any)
  • modified/created files