---
name: geist-learning-lab
description: Build explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations,…
---

# geist-learning-lab

Build explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations,…

# geist-learning-labby vercel
Build explorative, interactive learning experiences as Next.js apps using the Geist design system. Use when creating tutorials, explorable explanations,…

`npx skills add https://github.com/vercel-labs/skill-geist-learning-labs --skill geist-learning-lab`Download ZIPGitHub

## Geist Learning Lab

Build interactive learning experiences that teach by making the learner do something, get feedback, and iterate — using Geist's dark-first, minimal, precise UI language.

## Design Philosophy

* Learning loops, not pages — Every screen completes: prompt → attempt → feedback → refinement → checkpoint

* Cognitive load management — Progressive disclosure, chunking, one concept + one action at a time

* Error-friendly design — Mistakes are expected; the UI normalizes them and turns them into learning moments

* Interactive representations — Sliders, toggles, diagrams, live code — not just text

* Geist precision — Dark backgrounds, tight tracking, semantic color, 4px grid, Swiss typography

## Critical Rules

* Every lesson must include at least one attempt+feedback loop — No passive-only pages

* Every interactive control must have a visible effect — Within ~100ms or show loading state

* Progress/review must exist even in a prototype — Track steps completed, checkpoints passed

* Active attempt before explanation — Ask a question or show a task, then explain

* Immediate, specific feedback — "Correct" isn't enough; explain why

* Multiple representations — Always at least 2 of: text, code, visual, interactive, real data

* Color is learning signal — Green=correct, Red=incorrect, Amber=hint/warning, Blue=info/definition

* Progressive disclosure by default — Depth behind "Why?", "Edge Cases", "Formal Definition"

* URL state for exploration — Shareable slider/toggle configurations via search params

* Misconception-first design — Bake in common traps: "Most people get this wrong because..."

## The Learning Loop (Central Doctrine)

Every lesson repeats this cycle:

StepWhat HappensComponentOrientWhat you'll learn in 5-10 minHeading + learning objectiveAttemptLearner predicts/answers/edits firstQuickCheck, CodePlayground, ParameterDockFeedbackImmediate + specific responseFeedback surface (green/red panel)ExplainShort explanation anchored to their attemptCallout, WorkedExampleExtendVariation, edge case, or transfer taskBeforeAfterSplit, ConceptExplorerCheckpointQuick recall questionQuickCheck with ConfidenceRatingReflect"What changed in your understanding?"Optional text input or self-rating

## "Aha Moment" Design Patterns

PatternHow It WorksWhen to UsePrediction Gap"What do you think happens if...?" then revealBefore introducing a conceptContrast PairTwo near-identical cases with different outcomesClarifying subtle distinctionsSlider to FailureLet learner push a parameter until it breaksUnderstanding boundaries/limitsTime TravelScrub algorithm step-by-step, watch invariantsAlgorithms, state machinesMisconception TrapTempting wrong option, then explain why wrongCommon errors in a domain

## Quick Color Reference (Learning Semantics)

SignalColor TokenHexUsageCorrectgreen-700`#46A758`Success feedback, completed stepsIncorrectred-700`#E5484D`Error feedback, failed checksHint/Cautionamber-700`#FFB224`Hints, warnings, "watch out"Info/Definitionblue-700`#0070F3`Definitions, current step, linksDefaultgray-400`#737373`Everything else: borders, muted textProgress donegreen-700 dot`#46A758`Completed step indicatorProgress currentblue-700 ring`#0070F3`Current step focus stateProgress pendinggray-400 dot`#737373`Upcoming steps

## Component Library (23 Patterns)

### Lesson Flow & Progress

`<LessonShell />` `<ProgressRail />` `<StepFlow />` `<CheckpointCard />` `<ResumeBanner />`

### Explorable Explanations

`<ParameterDock />` `<LiveOutputPanel />` `<ConceptExplorer />` `<InteractiveDiagram />` `<BeforeAfterSplit />` `<TimelineExplorer />` `<ConceptMap />`

### Code Learning

`<CodePlayground />` `<DiffEditor />` `<TaskRunner />` `<SnippetCopy />`

### Quizzes & Active Recall

`<QuickCheck />` `<ConfidenceRating />` `<HintLadder />` `<MistakeAnalyzer />`

### Reading Support

`<GlossaryPopover />` `<Callout />` `<WorkedExample />`

## Typography in Learning Context

ElementWhat It MeansStyleBig heading"What you're doing"`text-heading-{32|24}` semibold, negative trackingSmall label"Where you are"`text-label-{14|12}` gray-400Mono"What the computer sees"`text-copy-14-mono` or `text-label-14-mono`BodyReading content`text-copy-14` or `text-copy-16`, max-w-2xl

## Layout Patterns

ContextMax WidthStructureReading content`max-w-2xl` / `max-w-4xl`Single column, comfortable line lengthInteractive lab`max-w-6xl`Two panels: explanation + playgroundFull explorer`max-w-7xl`Three zones: nav + content + lab panel

## App Router Structure

```
`/ → Landing / course picker
/learn → Course catalog + resume
/learn/[courseSlug] → Course overview, modules, progress
/learn/[courseSlug]/[moduleSlug] → Module overview
/learn/[courseSlug]/[moduleSlug]/[lessonSlug] → Lesson shell
`
```

## File Organization

```
`content/courses/<courseSlug>/course.json → Metadata, module order
content/courses/<courseSlug>/<module>/<lesson>.mdx → Lesson content
components/learning/ → Reusable learning components
lib/learning/progress.ts → Schema + storage adapters
lib/learning/grading.ts → Quiz validation, code tests
lib/learning/spaced.ts → Review scheduling
`
```

## References

* `references/lesson-shell.md` — LessonShell, ProgressRail, StepFlow, CheckpointCard, ResumeBanner TSX patterns

* `references/explorable-explanations.md` — ParameterDock, LiveOutputPanel, ConceptExplorer, InteractiveDiagram, BeforeAfterSplit, TimelineExplorer, ConceptMap

* `references/code-learning.md` — CodePlayground (read-only/guided/free), DiffEditor, TaskRunner, SnippetCopy

* `references/quiz-assessment.md` — QuickCheck, ConfidenceRating, HintLadder, MistakeAnalyzer with feedback patterns

* `references/reading-support.md` — GlossaryPopover, Callout variants, WorkedExample with stepwise reveal

* `references/pedagogical-framework.md` — The Learning Loop doctrine, progressive disclosure rules, aha patterns, scaffolded complexity

* `references/architecture.md` — Next.js App Router routing, MDX content system, state management, file organization

* `references/progress-state.md` — Progress schema, localStorage adapter, spaced repetition, URL state for explorations

* `references/learning-animations.md` — Step transitions, feedback reveals, diagram animations, reduced-motion compliance

## More skills from vercel
agent-friendly-apisby vercelCompanion skill for the Agent-Friendly APIs course on Vercel Academy. Build a feedback API, make it agent-friendly with structured documentation, then create a Claude Code skill that generates the docs automatically.filesystem-agentsby vercelYou are a knowledgeable teaching assistant for the Building Filesystem Agents course on Vercel Academy. You help students build agents that navigate filesystems with bash to answer questions about structured data.add-provider-packageby vercelGuide for adding new AI provider packages to the AI SDK. Use when creating a new @ai-sdk/<provider> package to integrate an AI service into the SDK.csvby vercelAnalyze and transform CSV data using bash toolsaiby vercelPython `ai` module — models, agents, hooks, middleware, MCP, structured outputcron-jobsby vercelVercel Cron Jobs configuration and best practices. Use when adding, editing, or debugging scheduled tasks in vercel.json.frontend-designby vercelCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…vercel-react-best-practicesby vercelReact and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…

---

**Source**: https://github.com/vercel-labs/skill-geist-learning-labs/tree/HEAD/skills/geist-learning-lab
**Author**: vercel
**Discovered via**: mcpservers.org