Teaches how a live webpage was built from a URL the user provides. Inspects HTML structure, CSS layout, typography, responsiveness, and JavaScript behavior; maps patterns to skills (html-css, javascript, react, next). Use when user pastes a link and asks how a site works, how it was made, reverse engineer a page, learn from a website, or recreate a layout. Voice triggers: "analyze this site", "how was this built", "break down this page", "teach me from this URL".
Maps the user's learning goal to an ordered DevLearn skill chain, suggested weekend project, and depth setting. Use when the user asks what to learn next, "I'm new where do I start", "I want a webpage/app/live site", or feels lost in the curriculum. Voice triggers: "what should I learn", "learning path".
Guided 60-second DevLearn setup. Asks persona, goal, depth, and stack; writes DEVLEARN.md, initializes .devlearn/ artifacts, runs install reminder, and gives a copy-paste first prompt. Use when user says "set up devlearn", "help me get started learning", first time using DevLearn, or DEVLEARN.md is missing. Voice triggers: "onboard", "devlearn setup", "get started with devlearn".
Ambient teaching layer for vibe coders and seasoned devs. After substantive changes, emits persona-aware lesson or decision blocks without blocking shipping. Use when user says "teach me while you work", "learn while I vibe", or when DEVLEARN.md exists with enabled true. Proactively apply after edit batches. Supports viber (What/Why/How) and seasoned (Decision/Alternatives/Risk) personas. Voice triggers: "teach me", "explain while you build", "explain like PR review".
Teaches APIs, REST, JSON, env vars, auth basics, and error handling while wiring real client-server or localStorage persistence. Use when the user wants to save data, fetch from a server, login, fix CORS, or curriculum routes here. Proactively suggest when adding fetch, routes, .env, or API handlers and DEVLEARN.md is enabled.
Pre-coding plain-English plan before large refactors or multi-file changes. Use when >5 files will change, architecture shifts, new dependencies, or user asks "what will you change before you do it". NOT the release checklist — use devlearn-pre-ship before merge/deploy. Pairs with devlearn-teach-while-coding when before_big_changes is true. Lifecycle: shared/ship-lifecycle.md. Voice triggers: "plan first", "before you refactor", "what are you about to change".
Teaches debugging while fixing real errors: reproduce, read stack/console, trace root cause, minimal fix, verify. Use when user pastes an error, "it's broken", blank page, failed test, or unexpected behavior. Proactively suggest when console/stack trace appears and DEVLEARN.md is enabled. Pairs with devlearn-apis (CORS/404), devlearn-react/next (hooks), devlearn-security (auth failures). Voice triggers: "debug this", "why is it broken".
Teaches deployment: build, hosting, environment on production, and what users actually hit when they open a URL. Use when the user wants to go live, share a link, set up CI, Docker, Vercel/Netlify/Fly, or curriculum routes here. Proactively suggest when adding deploy config and DEVLEARN.md is enabled.