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