Aura ILP Frontend Development Skill

This skill guides creation of distinctive, production-grade frontend interfaces for the Aura ILP platform. Implement real working code following established patterns with exceptional attention to aesthetic details.

---

Project Stack Overview

Technology	Details
Framework	React 19 + TypeScript
Build Tool	Vite (dev server on port 3000)
Styling	Tailwind CSS (loaded from CDN with custom config)
Icons	Lucide React
Fonts	Cormorant Garamond (display), IBM Plex Sans (body), JetBrains Mono (code)
Theme	Dark cosmic/mystical editorial aesthetic

---

Component Architecture

Directory Structure

/components/
├── wizards/     # 23 wizard components (shadow, mind, body, spirit work)
├── tabs/        # 15 tab views (dashboard, stack, practice, analysis)
├── modals/      # 7 modal components (practice management, explanations)
├── visualizations/ # 6 D3-based visualizations
└── shared/      # 27 shared UI components (buttons, sidebars, loaders)

Component Pattern

// Functional components with hooks, no class components
import React, { useState, useEffect } from 'react';
import { SomeIcon } from 'lucide-react';

interface MyComponentProps {
  initialData?: SomeType;
  onComplete: (data: ResultType) => void;
}

export default function MyComponent({ initialData, onComplete }: MyComponentProps) {
  const [state, setState] = useState<StateType>(initialState);
  
  return (
    <div className="bg-slate-900 rounded-lg p-6 border border-slate-700">
      {/* component content */}
    </div>
  );
}

Import Order

// 1. External libraries
import React, { useState, useEffect } from 'react';
import { Menu, X, Home } from 'lucide-react';

// 2. Internal services
import { generateText } from '../../services/geminiService';

// 3. Components
import { LoadingFallback } from '../shared/LoadingFallback';

// 4. Types and constants
import type { WizardSession } from '../../types';
import { WIZARD_STEPS } from '../../constants';

---

Navigation & Layout Patterns

Main App Layout

<div className="flex h-screen bg-neutral-950 text-neutral-100 font-sans relative overflow-hidden">
  {/* Desktop Sidebar - hidden on mobile */}
  <div className="hidden md:flex md:w-64 md:flex-shrink-0 relative z-20">
    <NavSidebar ... />
  </div>

  {/* Mobile Sidebar Overlay */}
  {sidebarOpen && (
    <div className="md:hidden fixed inset-0 bg-black/50 z-30" onClick={() => setSidebarOpen(false)} />
  )}

  {/* Mobile Sidebar - slides from left */}
  <div className="md:hidden fixed top-0 left-0 h-screen w-64 z-40 transform transition-transform duration-300"
       style={{transform: sidebarOpen ? 'translateX(0)' : 'translateX(-100%)'}}>
    <NavSidebar ... />
  </div>

  {/* Main Content */}
  <main className="flex-1 flex flex-col overflow-hidden relative z-10">
    {/* Header */}
    <div className="flex items-center justify-between px-4 py-3 border-b border-accent/20 min-h-[56px]">
      ...
    </div>
    {/* Scrollable Content */}
    <div className="flex-1 overflow-y-auto px-4 py-6 md:p-8">
      ...
    </div>
  </main>
</div>

Z-Index Hierarchy

z-10  - Main content layer
z-20  - Desktop sidebar
z-30  - Mobile overlay backdrop
z-40  - Mobile sidebar drawer
z-50  - Modals and floating elements (Coach, dialogs)

Mobile Navigation Rules

• Sidebar starts closed on mobile (useState(false))
• Hamburger button toggles sidebar visibility
• Tab changes automatically close sidebar on mobile
• Use touch-target class for minimum 44px touch areas
• Back button appears when navigation history exists

---

Tailwind CSS Patterns

Custom Tailwind Config (in index.html)

tailwind.config = {
  theme: {
    extend: {
      fontFamily: {
        'display': ['Cormorant Garamond', 'serif'],
        'sans': ['IBM Plex Sans', 'system-ui', 'sans-serif'],
        'mono': ['JetBrains Mono', 'monospace'],
      }
    }
  }
}

CSS Variables (Defined in index.html)

:root {
  /* Module Colors */
  --mind-primary: #22d3ee;    /* Cyan - clarity */
  --shadow-primary: #c084fc;  /* Purple - mystery */
  --body-primary: #fb923c;    /* Orange - vitality */
  --spirit-primary: #facc15;  /* Gold - transcendence */
}

Card Patterns

// Standard glass-morphism card
<div className="bg-neutral-900/50 backdrop-blur-sm border border-neutral-800/50 
               shadow-[0_4px_24px_rgba(0,0,0,0.6)] rounded-lg p-6
               hover:shadow-[0_8px_32px_rgba(0,0,0,0.8)] 
               transition-all duration-300 hover:-translate-y-0.5">
  ...
</div>

// Card with module accent (uses CSS variables)
<div className="card-accent accent-purple">...</div>
<div className="card-accent accent-cyan">...</div>
<div className="card-accent accent-orange">...</div>

Button Patterns

// Primary luminous button
<button className="btn-luminous font-bold py-3 px-6 rounded-xl 
                   flex items-center justify-center gap-2 
                   shadow-glow-sm hover:shadow-glow-lg 
                   transition-all duration-300 transform hover:scale-105">
  ...
</button>

// Secondary glass button
<button className="card-glass bg-gradient-to-r from-slate-700/50 to-slate-800/30 
                   hover:from-slate-600/60 hover:to-slate-700/40 
                   text-slate-100 font-bold py-3 px-6 rounded-xl">
  ...
</button>

// Icon button with hover effect
<button className="p-2 text-slate-400 hover:text-slate-200 
                   hover:bg-slate-800/50 rounded-lg transition-colors 
                   group touch-target">
  <Icon className="group-hover:scale-110 transition-transform" />
</button>

---

Animation Classes

Available Animations (defined in index.html)

.animate-fade-in        /* Opacity 0→1, 0.6s */
.animate-fade-in-up     /* Opacity + translateY 24px→0, 0.7s */
.animate-slide-in-right /* Opacity + translateX -24px→0, 0.6s */
.animate-pop-in         /* Scale 0.92→1.04→1, 0.4s (bouncy) */
.animate-glow-pulse     /* Box-shadow pulse, 4s infinite */
.animate-shimmer        /* Gradient shimmer, 3s infinite */
.animate-float          /* translateY 0→-10px→0, 6s infinite */
.animate-gradient       /* Background position shift, 8s infinite */

Transition Patterns

// Smooth hover transitions
className="transition-all duration-300"
className="transition-colors duration-200"
className="transition-transform duration-500"

// Transform effects
className="hover:scale-105"
className="hover:-translate-y-1"
className="group-hover:scale-110"

// Opacity transitions
className="opacity-0 group-hover:opacity-100 transition-opacity"

Staggered Entrance

<div className="animate-fade-in-up" style={{ animationDelay: '0ms' }}>Item 1</div>
<div className="animate-fade-in-up" style={{ animationDelay: '100ms' }}>Item 2</div>
<div className="animate-fade-in-up" style={{ animationDelay: '200ms' }}>Item 3</div>

---

Modal Patterns

Standard Modal Structure

<div className="fixed inset-0 bg-black/60 backdrop-blur-sm 
                flex justify-center items-center z-50 p-4">
  <div className="bg-slate-800 border border-slate-700 rounded-lg 
                  shadow-2xl w-full max-w-lg max-h-[90vh] overflow-y-auto">
    {/* Header */}
    <div className="sticky top-0 bg-slate-800 border-b border-slate-700 p-6 
                    flex items-center justify-between">
      <h2 className="text-2xl font-bold">Title</h2>
      <button onClick={onClose} className="p-2 hover:bg-slate-700 rounded-lg">
        <X size={24} />
      </button>
    </div>
    
    {/* Content */}
    <div className="p-6">
      ...
    </div>
    
    {/* Footer (optional) */}
    <div className="border-t border-slate-700 p-6 flex justify-end gap-3">
      <button onClick={onClose}>Cancel</button>
      <button onClick={onSubmit}>Confirm</button>
    </div>
  </div>
</div>

---

Responsive Design

Breakpoint Usage

// Mobile-first approach
className="px-4 md:px-8"           // More padding on desktop
className="grid-cols-1 md:grid-cols-2 lg:grid-cols-3"  // Responsive grid
className="md:hidden"              // Hide on desktop
className="hidden md:flex"         // Show only on desktop
className="text-sm md:text-base"   // Responsive text

Touch Targets

// Minimum 44x44px touch area for mobile
className="touch-target"  // Custom class adds min-height/width: 44px

// Or explicit sizing
className="p-3 min-h-[44px] min-w-[44px]"

---

Typography

Heading Hierarchy

// h1 - Page titles
<h1 className="text-4xl md:text-5xl font-display font-bold tracking-tight">

// h2 - Section titles  
<h2 className="text-2xl md:text-3xl font-display font-semibold">

// h3 - Card/subsection titles
<h3 className="text-xl font-semibold text-slate-200">

// Body text
<p className="text-slate-300 leading-relaxed">

// Small/metadata
<span className="text-xs text-slate-400 font-mono tracking-wide">

Text Colors

text-slate-100  - Primary headings
text-slate-200  - Secondary headings
text-slate-300  - Body text
text-slate-400  - Muted text, labels
text-slate-500  - Very muted, placeholders

---

Form Elements

Input Fields

<input
  type="text"
  className="w-full px-4 py-3 bg-neutral-700 border border-neutral-600 
             rounded-lg text-slate-200 placeholder-slate-500 
             focus:border-accent/40 focus:outline-none focus:ring-2 focus:ring-accent/20"
  placeholder="Enter text..."
/>

Textarea

<textarea
  className="w-full px-4 py-3 bg-neutral-700 border border-neutral-600 
             rounded-lg text-slate-200 placeholder-slate-500 
             focus:border-accent/40 focus:outline-none resize-none"
  rows={4}
/>

---

Lazy Loading

Pattern for Large Components

// In App.tsx or parent component
const HeavyWizard = lazy(() => import('./components/wizards/HeavyWizard'));

// Usage with Suspense
<Suspense fallback={<WizardLoadingFallback />}>
  <HeavyWizard ... />
</Suspense>

Loading Fallbacks

import LoadingFallback, { 
  TabLoadingFallback, 
  WizardLoadingFallback, 
  ModalLoadingFallback 
} from './components/shared/LoadingFallback';

---

Error Handling

Error Boundary Usage

import ErrorBoundary from './components/shared/ErrorBoundary';

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Error States in Components

{error && (
  <div className="bg-red-900/20 border border-red-700/50 rounded-lg p-4 text-red-300">
    <p className="font-medium">Error occurred</p>
    <p className="text-sm text-red-400">{error}</p>
  </div>
)}

---

Accessibility

Key Patterns

// Button aria labels
<button aria-label="Close menu" aria-expanded={isOpen}>

// Form labels
<label htmlFor="email" className="sr-only">Email</label>

// Focus management
className="focus:outline-none focus:ring-2 focus:ring-accent/50"

// Skip links (if needed)
<a href="#main-content" className="sr-only focus:not-sr-only">
  Skip to content
</a>

---

Design Thinking

Before building new UI, understand the context:

1. Purpose: What problem does this interface solve? Who uses it?
2. Tone: Match the mystical/editorial aesthetic - dark, sophisticated, subtle glows
3. Consistency: Follow existing patterns in similar components
4. Mobile-first: Design for mobile, enhance for desktop

Key Aesthetic Elements:

• Dark cosmic backgrounds with subtle gradients
• Glass-morphism cards with blur effects
• Purple/gold accent colors for interactive elements
• Serif display fonts for headings (Cormorant Garamond)
• Subtle animations on interactions
• Generous spacing and clean hierarchy

---

Quick Reference

Need	Solution
Card	bg-neutral-900/50 backdrop-blur-sm border border-neutral-800/50 rounded-lg
Button	btn-luminous or card-glass classes
Modal backdrop	fixed inset-0 bg-black/60 backdrop-blur-sm z-50
Icon button	p-2 hover:bg-slate-800/50 rounded-lg transition-colors
Gradient text	bg-gradient-to-r from-accent to-accent-gold bg-clip-text text-transparent
Loading spinner	<LoadingFallback /> component
Hide on mobile	hidden md:block
Show on mobile	md:hidden