| name | lumina_frontend_design |
| description | Use this skill when designing, building, or modifying frontend UI — Vue 3 SFC, Element Plus components, CSS/SCSS, layouts, themes, or animations. Enforces Luminous design system consistency and accumulates design learnings across sessions. |
Lumina Frontend Design Skill
When to Apply
Must Use (always load this skill):
- Creating or modifying
.vue files (template, style, or script affecting UI)
- Writing or editing SCSS/CSS in
src/assets/styles/
- Building new pages, components, or layouts
- Theme changes (dark/light, color adjustments)
Recommended:
- Adding ECharts/visualization configurations
- Modifying i18n keys that affect UI labels
- Responsive design adjustments
Skip:
- Pure backend Java changes
- API type definitions with no visual impact
- Test file modifications
- Build config / package.json changes
Design Philosophy: "Luminous"
Lumina's UI follows the Luminous design language:
- Brand: Indigo-Violet
#7c3aed × Amber #f59e0b — confident, warm, techy
- Mood: Dark-first, deep space backgrounds with glowing accents
- Density: Comfortable spacing, breathable cards, clear visual hierarchy
- Motion: Subtle transitions (150-400ms), staggered entrance animations, no bounce
- Typography: Outfit (display) / IBM Plex Sans (body) / JetBrains Mono (code)
Self-Evolution Protocol (CRITICAL)
This skill learns from every session. Follow exactly:
Before any UI task:
- Read
lumina-frontend/DESIGN.md — this is the current design source of truth
- Read
lumina-frontend/.agents/ui-learnings.md — accumulated discoveries
- Summarize 3-5 relevant learnings before proceeding (do not skip this step)
After completing a UI task:
- Update
DESIGN.md if design tokens, patterns, or principles changed
- Append to
.agents/ui-learnings.md:
## [Date] — [Task type]
- Observation: [what happened / what worked / what didn't]
- Action: [what to do or avoid going forward]
- Confidence: [high/medium/low]
- Reject vague entries ("be careful with styling" = useless). Be specific.
- Prune Learnings.md at ~80 lines — signal density over size.
Workflow (4 Phases)
Phase 1: Audit (read-only)
- Read
lumina-frontend/src/assets/styles/variables.scss — the --lumina-* token system
- Read
lumina-frontend/DESIGN.md — current design state
- Scan target files for hardcoded colors, non-token spacing, missing CSS vars
- Report drift (e.g.,
#fff instead of var(--lumina-bg-card))
Phase 2: Plan
- Identify page type: dashboard / form / list-table / chat / designer / dialog
- Check if
DESIGN.md has page-specific overrides
- Propose component approach using Element Plus +
--lumina-* tokens
- Do NOT modify
variables.scss without explicit confirmation
Phase 3: Confirm
Ask the user (pause before coding):
- Page flavor (e.g., dense data table vs. spacious marketing card)
- Any motion-sensitive context (accessibility)
- Whether to update DESIGN.md with new patterns
Phase 4: Build
- Use
--lumina-* CSS variables — NEVER hardcode hex colors
- Use Element Plus components with
--el-* mapping (already remapped in index.scss)
- Scoped styles in
<style scoped lang="scss">
- Responsive:
@media (max-width: 768px) breakpoints
- Run
pnpm build to verify TypeScript + Vite compilation
Rule Categories (Priority Order)
| Priority | Category | Key Checks | Anti-Patterns |
|---|
| P0 | color-tokens | All colors use var(--lumina-*) | Hardcoded #fff, #333, rgba() |
| P0 | dark-theme | Dark-first design, WCAG AA contrast | Light-only testing, unreadable text |
| P0 | spacing-scale | Use --lumina-spacing-* steps | Random margin: 13px |
| P1 | typography | Outfit/IBM Plex/JetBrains Mono stack | Arial, system-ui as primary |
| P1 | component-consistency | Same component type looks same everywhere | Ad-hoc card styles per page |
| P1 | motion | 150-400ms, cubic-bezier(0.4,0,0.2,1) | transition: all 0.5s |
| P2 | responsive | el-row with xs/sm/md breakpoints | Fixed widths on mobile |
| P2 | accessibility | focus-visible, aria-labels, contrast ≥ 4.5:1 | Removing focus outlines |
| P2 | empty-states | el-empty with description and action | Blank screen when no data |
Quick Reference: Token Lookups
| Need | Token | Value |
|---|
| Primary color | var(--lumina-primary) | #7c3aed |
| Accent color | var(--lumina-accent) | #f59e0b |
| Card background | var(--lumina-bg-card) | #1e293b |
| Page background | var(--lumina-bg-page) | #0f172a |
| Primary text | var(--lumina-text-primary) | #f1f5f9 |
| Secondary text | var(--lumina-text-secondary) | #94a3b8 |
| Border | var(--lumina-border) | #334155 |
| Card radius | var(--lumina-radius-md) | 10px |
| Base spacing | var(--lumina-spacing-md) | 16px |
| Fast transition | var(--lumina-transition-fast) | 150ms |
| Display font | var(--lumina-font-display) | Outfit |
| Body font | var(--lumina-font-body) | IBM Plex Sans |
| Code font | var(--lumina-font-mono) | JetBrains Mono |
| Card shadow | var(--lumina-shadow-md) | 0 4px 12px rgba(0,0,0,0.4) |
| Glow effect | var(--lumina-shadow-glow) | 0 0 20px primary-glow |
References
- Design tokens:
lumina-frontend/src/assets/styles/variables.scss (13 sections, ~130 vars)
- Global styles:
lumina-frontend/src/assets/styles/index.scss (Element Plus overrides)
- Design state:
lumina-frontend/DESIGN.md (persistent source of truth)
- Learnings:
lumina-frontend/.agents/ui-learnings.md (accumulated discoveries)
- Component examples:
lumina-frontend/src/views/dashboard/index.vue (stat cards), lumina-frontend/src/views/login/index.vue (glass morphism), lumina-frontend/src/layouts/components/AppSidebar.vue (dark sidebar)
Pre-Delivery Checklist
Before marking any UI task complete:
