--- name: educational-ui description: Creates educational UI components following learning science principles. Use for classroom, student, or teacher interfaces. allowed-tools: Read, Write, Edit, Glob model: sonnet context: fork --- # 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 ```typescript // 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 ```typescript import { Progress } from '@/components/ui/progress'; function LessonProgress({ completed, total }: { completed: number; total: number }) { const percentage = Math.round((completed / total) * 100); return (

Progress {percentage}%

{completed} of {total} activities completed

); } ``` ### Learning Objective Card ```typescript import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Target } from 'lucide-react'; function LearningObjective({ objective }: { objective: string }) { return ( Learning Objective

{objective}

); } ``` ### Feedback Message ```typescript 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 (

{message}

); } ``` ### Streamed AI Response ```typescript '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 (

{messages.map((m) => (

{m.role === 'assistant' ? ( ) : (

{m.content}

)}

))}

{/* Input area */}

); } ``` ## Chart Styling (Tremor/Recharts) ```typescript // 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 `${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

educational-ui

Install this skill