Menu
Creates educational UI components following learning science principles. Use for classroom, student, or teacher interfaces.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Creates Next.js 16 API routes with auth, validation, and tenant scoping. Use when creating API endpoints.
Implements AI tools for Canvas generation and updates. Use when creating GenUI tools for code generation, document editing, or Canvas interactions.
Develops Canvas code execution features with Pyodide/iframe sandboxing. Use when working on Python/JS execution, package management, or sandbox security.
Creates and extends Canvas UI components with Monaco editor, split views, and educational context. Use when building Canvas panel, editor, or preview features.
Foundational Canvas type definitions and language support patterns. Use when working with Canvas types, schemas, or language configuration.
Comprehensive document creation, editing, and analysis with support for tracked changes, comments, formatting preservation, and text extraction. When Claude needs to work with professional documents (.docx files) for: (1) Creating new documents, (2) Modifying or editing content, (3) Working with tracked changes, (4) Adding comments, or any other document tasks
| 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 |
Use this skill when creating:
// 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)"
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>
);
}
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>
);
}
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>
);
}
'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>
);
}
// 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}%`}
/>