DevLearn

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.

Teaches DevOps while building pipelines: CI/CD, GitHub Actions, Docker, environments, test gates, secrets in CI. Use when user adds workflow yaml, Dockerfile, "set up CI", staging vs prod, or wants deploy automation. Pairs with devlearn-pre-ship, devlearn-deploy, devlearn-security, devlearn-post-ship. Voice triggers: "CI/CD", "pipeline", "github actions", "docker", "automated deploy".

Turns the current git diff or pull request into a guided What/Why/How walkthrough grouped by intent. Use when the user asks to explain a diff, "what did you change", "walk me through the PR", or after large edit batches when they seem lost. Pairs with devlearn-teach-while-coding and devlearn-git. Voice triggers: "explain the diff", "what changed", "walk through the PR".

Teaches git commits, branches, pull requests, and merge workflow while the agent performs real git operations. Use when the user asks about git, commits, branches, PRs, "what did you just run in git", or curriculum routes here. Pairs with devlearn-explain-diff. Proactively suggest when git commands run and DEVLEARN.md is enabled.

Maintains and explains a running session glossary of dev terms tied to the user's project. Use when user asks "what terms did we cover", "define X", "what does that mean in our app", quiz on terms, or to merge Term of the moment entries from ambient lessons. Works with DEVLEARN.md when glossary true. Pairs with devlearn-teach-while-coding, devlearn-recap, and all topic skills. Voice triggers: "glossary", "define", "what does X mean".

Teaches HTML structure and CSS layout while building real pages for vibe coders. Covers semantic tags, accessibility basics, flex/grid, and responsive patterns. Use when the user wants a webpage, layout help, styling, or curriculum routes here. Proactively suggest when creating or editing .html/.css and DEVLEARN.md is enabled.

Teaches JavaScript for interactivity while building features: variables, functions, events, DOM updates, and async/fetch preview. Use when the user wants buttons to do things, todo logic, DOM manipulation, or curriculum routes here. Proactively suggest when editing .js/.ts client code and DEVLEARN.md is enabled.

Meta-QA: reviews the last DevLearn lesson or decision block against the lesson rubric and suggests a tighter rewrite. Use when user says lesson was too long, too basic, jargon-heavy, missing tradeoffs, or "review that explanation". Does not re-do code unless the explanation was factually wrong. Voice triggers: "too much detail", "dumb it down", "PR review style".

Teaches Next.js App Router while building: file-based routes, layouts, server vs client components, route handlers, env vars, and data fetching patterns. Use when package.json includes next, DEVLEARN.md stack is next, or editing app/, page.tsx, layout.tsx, route.ts. Pairs with devlearn-react, devlearn-apis, devlearn-deploy (Vercel). Voice triggers: "next.js", "app router", "server component", "route handler".

Teaches post-deploy verification: smoke tests, health checks, monitoring vocabulary, rollback, and declaring a release healthy. Use after deploy, "is prod ok", "post ship", canary, or when user shares a live URL. Pairs with devlearn-deploy and devlearn-pre-ship. Voice triggers: "post deploy", "prod check", "smoke test", "monitoring", "is it live".

Pre-ship release checklist before merge or deploy: tests, lint, build, secrets scan, staging verify, rollback plan, breaking changes. Use when user says "ready to ship", "pre-ship", "release checklist", "before we merge", or before production deploy. Differs from devlearn-before-you-ship (plans code before editing). Pairs with devlearn-security, devlearn-deploy, devlearn-devops. Voice triggers: "pre ship", "release ready", "merge checklist".

Teaches React while building components: JSX, props, state, effects, lists/keys, and when not to useEffect. Use when project uses React, user asks about components, hooks, props, state, or DEVLEARN.md stack is react/next. Proactively suggest for .jsx/.tsx edits. Pairs with devlearn-javascript (fundamentals), devlearn-next (App Router), devlearn-apis (client fetch). Voice triggers: "react component", "useState", "hooks".

Produces a 60-second session recap from DEVLEARN_GLOSSARY.md, .devlearn/progress.md, decisions log, and recent lesson blocks. Use when user says "what did I learn", "recap", "catch me up", end of long session, or before starting a new day. Updates progress Last session when done. Voice triggers: "session summary", "what we covered".

Teaches application security while fixing real issues: secrets, auth, XSS, injection, dependencies, HTTPS, error leakage. Use when user asks security review, auth hardening, "is this safe", secrets in code, OWASP, or before shipping sensitive features. Pairs with devlearn-pre-ship, devlearn-apis, devlearn-devops. Proactively suggest when diff touches auth, .env, user input, crypto, or payments. Voice triggers: "security review", "is this secure", "OWASP".