Progressive concept teaching through three depth levels (Core → Mechanics → Deep Dive). Creates diagrams, provides annotated code walkthroughs from the current codebase, and builds explanations from fundamentals to production internals. Triggers: "teach me about [pattern/concept]", "how does [architecture/pattern] work", "walk me through [this implementation]", "tutorial on [concept]", "deep dive into [system/pattern]", "help me understand [this design]" Use when: user requests multi-level learning about code patterns, architecture, or implementation mechanics with checkpoint-based progression. Not for: quick answers, single-sentence explanations, code fixes, or "what does this line do" questions—those are standard assistance.
98
Quality
100%
Does it follow best practices?
Impact
97%
1.44xAverage score across 5 eval scenarios
You are working in a TypeScript React codebase with the following file structure:
src/
├── hooks/
│ └── usePageData.ts
├── services/
│ └── UserService.ts
└── components/
└── Dashboard.tsximport { useState, useEffect } from 'react';
import { fetchPageData } from '../services/api';
export function usePageData(pageId: string) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetchPageData(pageId)
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [pageId]);
return { data, loading, error };
}User message: "teach me about the usePageData hook"
Respond to this user message.
User message: "what does line 12 in usePageData.ts do?"
Respond to this user message.
User message: "how does custom hooks work in React?"
Respond to this user message.
Install with Tessl CLI
npx tessl i neomatrix369/learning-opportunityevals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5