Builds a custom Next.js learning platform for Andrej Karpathy's "The Unreasonable Effectiveness of Recurrent Neural Networks" blog post, incorporating 13+ learning techniques with interactive code execution, LaTeX equations, visualizations, and progress tracking.
This skill guides an AI agent through building a comprehensive, interactive web application that teaches Andrej Karpathy's blog post "The Unreasonable Effectiveness of Recurrent Neural Networks" using evidence-based learning techniques.
Creates a Next.js-based learning platform that incorporates 13+ pedagogical techniques (active learning, scaffolding, narrative learning, curiosity, cognitive load management, adaptive learning, metacognition, multimodal learning, constructivism, gamification, goal setting, self-regulation, and feedback) to help working professionals understand RNNs through interactive code editors, visualizations, color-coded LaTeX equations, and progress tracking.
1. **Read source material**
- Fetch and analyze https://karpathy.github.io/2015/05/21/rnn-effectiveness/
- Extract key concepts, code examples, and mathematical equations
- Identify learning objectives for working professionals
2. **Create lesson plan draft**
- Create `lesson_plan.md` in project root
- Structure content into logical modules/chapters
- For each section, annotate which learning technique(s) apply and how
- Example format:
```markdown
## Module 1: Introduction to RNNs
**Learning Technique: Narrative Learning** - Use the blog's storytelling approach
**Learning Technique: Curiosity** - Hook with surprising text generation examples
### Topics:
- What are RNNs?
- Why they're "unreasonably effective"
### Interactive Elements:
- [ ] Quiz: Basic sequence modeling concepts
- [ ] Visualization: RNN unrolling animation
```
3. **Plan interactive elements**
- Mark spots for quizzes, code editors, visualizations in lesson plan
- Don't implement yet—just reserve space and describe purpose
- Include equation presentation strategy with color-coding plan
4. **Equation presentation guidelines**
- All equations must be in LaTeX format
- Color-code each element with explicit notation legend
- Provide 3 concrete examples after each equation
- Example structure:
```latex
h_t = \tanh(\color{blue}{W_{hh}} h_{t-1} + \color{green}{W_{xh}} x_t)
Legend:
- Blue: Recurrent weight matrix
- Green: Input weight matrix
Examples:
1. Character prediction: ...
2. Sentiment analysis: ...
3. Time series: ...
```
5. **Initialize Next.js project**
```bash
npx create-next-app@latest unreasonable-rnn --typescript --tailwind --app --no-src-dir
cd unreasonable-rnn
```
6. **Install core dependencies**
```bash
npm install katex react-katex @monaco-editor/react pyodide d3 zustand
npm install -D vitest @playwright/test eslint prettier
```
7. **Setup project structure**
```
app/
├── layout.tsx
├── page.tsx
└── modules/
└── [moduleId]/
└── page.tsx
components/
├── ui/
├── equations/
├── interactive/
└── modules/
hooks/
lib/
content/
tests/
```
8. **Build component library (atomic design)**
- **Atoms**: Button, Card, Badge, Progress indicator
- **Molecules**: EquationDisplay (with color coding), CodeBlock, QuizQuestion
- **Organisms**: CodeEditor (Monaco), InteractiveVisualization (D3), ModuleNav
- Keep components < 250 lines
- Co-locate tests with components
9. **Implement LaTeX equation system**
- Create `EquationDisplay` component with KaTeX
- Support color-coding via custom syntax
- Auto-generate symbol legend
- Add 3-example requirement
- Test rendering with various equations
10. **Build interactive code editor**
- Integrate Monaco Editor with Python syntax highlighting
- Setup Pyodide for browser-based execution
- Add line numbers, syntax highlighting
- Implement run button with output display
- Error handling with clear messages
11. **Create visualization framework**
- Build reusable D3 wrapper components
- Implement RNN unrolling animation
- Add heatmap for attention/activations
- Ensure < 16ms frame time
- Mobile-responsive canvas sizing
12. **Setup Zustand store**
- Progress tracking (module completion, quiz scores)
- User settings (theme, equation complexity level)
- Code editor history
- Quiz attempt tracking
13. **Implement localStorage persistence**
- Auto-save progress every 30s
- Restore state on page load
- Export/import progress JSON
- Clear progress option
14. **Convert lesson plan to MDX/JSON**
- Break lesson plan into module content files
- Embed interactive component markers
- Structure quiz questions with answers/explanations
- Include equation metadata (color codes, examples)
15. **Build module pages**
- Dynamic routes for each module (`/modules/[moduleId]`)
- Progressive disclosure of content
- Navigation between sections
- Progress indicators
16. **Implement quizzes**
- Multiple choice, code completion, equation interpretation
- Immediate feedback with explanations
- Retry mechanism with hints
- Track attempts for adaptive difficulty
17. **Write unit tests (Vitest)**
- Test utility functions (equation parser, quiz scorer)
- Test custom hooks (useProgress, useCodeExecution)
- Aim for >80% coverage on logic
18. **Write component tests**
- Test code editor execution flow
- Test quiz feedback rendering
- Test equation color coding
19. **Write E2E tests (Playwright)**
- Test full learning path navigation
- Test progress persistence across sessions
- Test code execution in browser
- Test mobile responsive behavior
- **REQUIRED**: Verify each new feature with Playwright before proceeding
20. **Accessibility audit**
- ARIA labels on interactive elements
- Keyboard navigation for all features
- Focus management in modals/quizzes
- Screen reader testing
21. **Branch naming convention**
- Use Beads ticket IDs: `RNN-XX/short-description`
- Examples: `RNN-20/web-app-foundation`, `RNN-4/rnn-architecture-module`
22. **Development cycle**
```bash
# Pick ticket
bd ready
# Create branch
git checkout -b RNN-XX/feature-name
# Update ticket
bd update RNN-XX in_progress
# Make commits
git commit -m "feat(RNN-XX): add feature"
# Run tests
npm run test
npx playwright test
# Merge to main
git checkout main
git merge --no-ff RNN-XX/feature-name
# Close ticket
bd close RNN-XX "Feature complete and tested"
# Delete branch
git branch -d RNN-XX/feature-name
```
23. **Commit message format**
- `feat(RNN-XX): description`
- `fix(RNN-XX): description`
- `test(RNN-XX): description`
- `docs(RNN-XX): description`
- Always reference ticket ID
24. **Performance optimization**
- Lazy load Monaco Editor, Pyodide
- Code split by module
- Optimize D3 renders with memoization
- Image optimization (Next.js Image component)
25. **Build & deploy**
- Run production build: `npm run build`
- Test production bundle
- Deploy to Vercel/Netlify
- Setup continuous deployment from main branch
```bash
"GO! Build the RNN learning app"
1. Fetch Karpathy blog post
2. Analyze content and create lesson_plan.md
3. Initialize Next.js project with dependencies
4. Build component library (UI → equations → interactive)
5. Implement state management and persistence
6. Create content modules from lesson plan
7. Write comprehensive tests (unit + E2E)
8. Deploy to production
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/interactive-rnn-learning-web-app-builder/raw