Educational UI Design Skill

Educational UI Design Skill

When to Use

Use this skill when creating:

• Student-facing interfaces
• Teacher dashboards
• Learning activities
• Assessment components
• Progress tracking UI

Core Principles

1. Learning Science

• Clear objectives: Always show what students will learn
• Progress visibility: Show advancement toward goals
• Immediate feedback: Respond to interactions instantly
• Scaffolding: Break complex tasks into steps
• Spaced retrieval: Support review and practice

2. Accessibility (WCAG 2.1 AA)

• Minimum 4.5:1 contrast for text
• Keyboard navigable
• Screen reader compatible
• Focus indicators visible
• Form labels and error messages

3. Mobile-First

• Touch targets ≥44px
• Readable without zoom
• Thumb-friendly placement
• Responsive breakpoints

Elon Brand Tokens

// ALWAYS use design tokens, NEVER hex codes
className="bg-maroon text-white"     // Primary brand
className="bg-gold text-black"       // Secondary accent
className="bg-surface-dark"          // Dark backgrounds
className="text-muted-foreground"    // Subdued text

// In SVG/​Charts
fill="var(--color-maroon)"
stroke="var(--color-gold)"

Component Patterns

Progress Indicator

import { Progress } from '@/​components/​ui/​progress';

function LessonProgress({ completed, total }: { completed: number; total: number }) {
  const percentage = Math.round((completed / total) * 100);

  return (
    <div className="space-y-2">
      <div className="flex justify-between text-sm">
        <span className="text-muted-foreground">Progress</​span>
        <span className="font-medium">{percentage}%</​span>
      </​div>
      <Progress value={percentage} className="h-2" />
      <p className="text-xs text-muted-foreground">
        {completed} of {total} activities completed
      </​p>
    </​div>
  );
}

Learning Objective Card

import { Card, CardContent, CardHeader, CardTitle } from '@/​components/​ui/​card';
import { Target } from 'lucide-react';

function LearningObjective({ objective }: { objective: string }) {
  return (
    <Card className="border-l-4 border-l-maroon">
      <CardHeader className="pb-2">
        <CardTitle className="flex items-center gap-2 text-base">
          <Target className="h-4 w-4 text-maroon" />
          Learning Objective
        </​CardTitle>
      </​CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">{objective}</​p>
      </​CardContent>
    </​Card>
  );
}

Feedback Message

import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';
import { cn } from '@/​lib/​utils';

type FeedbackType = 'success' | 'error' | 'hint';

function Feedback({ type, message }: { type: FeedbackType; message: string }) {
  const config = {
    success: { icon: CheckCircle, className: 'bg-green-50 border-green-200 text-green-800' },
    error: { icon: XCircle, className: 'bg-red-50 border-red-200 text-red-800' },
    hint: { icon: AlertCircle, className: 'bg-amber-50 border-amber-200 text-amber-800' },
  };

  const { icon: Icon, className } = config[type];

  return (
    <div className={cn('flex items-start gap-2 p-4 rounded-lg border', className)}>
      <Icon className="h-5 w-5 flex-shrink-0 mt-0.5" />
      <p className="text-sm">{message}</​p>
    </​div>
  );
}

Streamed AI Response

'use client';

import { useChat } from 'ai/​react';
import { StreamdownContent } from '@/​components/​streamdown-content';

function AITutor({ assistantId }: { assistantId: string }) {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
    api: '/​api/​chat',
    body: { assistantId },
  });

  return (
    <div className="flex flex-col h-full">
      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {messages.map((m) => (
          <div key={m.id} className={cn(
            'rounded-lg p-4',
            m.role === 'user' ? 'bg-muted ml-8' : 'bg-card mr-8 border'
          )}>
            {m.role === 'assistant' ? (
              <StreamdownContent content={m.content} />
            ) : (
              <p>{m.content}</​p>
            )}
          </​div>
        ))}
      </​div>
      {/​* Input area */​}
    </​div>
  );
}

Chart Styling (Tremor/​Recharts)

// Always use CSS variables for Elon brand colors
const chartColors = {
  primary: 'var(--color-maroon)',
  secondary: 'var(--color-gold)',
  tertiary: 'hsl(var(--muted))',
};

// Example with Tremor
<BarChart
  data={data}
  index="name"
  categories={['value']}
  colors={['rose']} // Maps to maroon
  valueFormatter={(v) => `${v}%`}
/>

Checklist

• Learning objective visible
• Progress indicator present
• Immediate feedback implemented
• Uses shadcn/​ui components
• Color tokens (no hex codes)
• WCAG AA compliant
• Mobile responsive
• Keyboard navigable
• Screen reader labels
• Loading states with Suspense