docs(misc): replace monolithic tutorials with focused topic-based tutorials

[jaysoo]

Current Behavior

The Tutorials section has three large framework-specific tutorials (React Monorepo, Angular Monorepo, TypeScript Monorepo) that each teach everything at once. They are 500+ lines, tightly coupled to a specific tech stack, and don't build knowledge incrementally.

Expected Behavior

Seven focused, technology-agnostic tutorials that each teach one concept in ~5 minutes. The design follows progressive disclosure so users learn one thing well before moving to the next.

Preview: https://deploy-preview-34998--nx-docs.netlify.app/docs/getting-started/tutorials/crafting-your-workspace

Design goals

• Learn the basics in an hour: A user going through all 7 tutorials covers workspace structure, dependencies, tasks, running, caching, debugging, and plugins.
• AI agent friendly: Each page has an llm_copy_prompt at the top that an AI agent can use as a tutor prompt. A user can paste this into Claude Code, Cursor, or any AI tool and be guided through the topic in their own workspace.
• No assumed workspace state: Each tutorial works whether you used create-nx-workspace, ran nx init on an existing repo, or jumped to a specific topic. Pages link back to prerequisites when needed.
• One concept per page: Progressive disclosure means plugins aren't mentioned until tutorial 7, nx graph isn't shown until tutorial 6, and caching configuration doesn't appear until tutorial 5.

Tutorial sequence

1. Crafting your workspace - Nx as a build intelligence layer, workspace structure, package manager workspaces, TypeScript solution-style project references, adding projects
2. Managing dependencies - Workspace libraries, buildable vs non-buildable (with exports and customConditions), workspace:* protocol, single version policy with catalogs
3. Configuring tasks - package.json scripts vs project.json targets, dependsOn with ^ syntax, continuous tasks, named configurations, target defaults
4. Running tasks - nx run, shorthand, run-many with --targets/--projects, task ordering with SVG diagram, parallelism control, passing arguments
5. Caching tasks - Run-twice demo, computation hashing with SVG diagram, inputs/outputs, named inputs, env vars/runtime inputs, sandboxing, remote caching with nx connect
6. Understanding your workspace - nx graph as entry point, project graph with edge screenshots, task graph with screenshots, nx show project/nx show target, affected analysis with --base/--head, cache debugging
7. Reducing configuration boilerplate - targetDefaults, Nx plugins, inferred tasks, nx add, configuration cascade, presented as optional

Other changes

• CI tutorial rewritten to cover remote caching, affected (with NX_BASE/NX_HEAD), Nx Agents, and self-healing (was previously self-healing only)
• Concept pages ("How Nx works") link to relevant tutorials via "Learn by doing" callouts
• Redirects from old tutorial URLs to new pages
• Cross-references updated across 11 technology/guide pages
• SVG diagrams for task dependency ordering and cache hash flow (same style as sandboxing page)
• Screenshots for project graph edge detail and task graph views
• Sidebar: Tutorials group has "New" badge, collapsed by default

Screenshots

Tutorials topics as ordered in sidebar:

AI instructions that can be copied and pasted into Claude Code to act as a tutor:

Linking to prev/next tutorials at the bottom of each tutorial topic:

For concept pages that are covered by a tutorial, link to the tutorial in Next steps:

Related Issue(s)

Fixes DOC-452

[netlify]

✅ Deploy Preview for nx-docs ready!

Name	Link
🔨 Latest commit	f06d411
🔍 Latest deploy log	https://app.netlify.com/projects/nx-docs/deploys/69c46911dd2aa6f9a6b89c43
😎 Deploy Preview	https://deploy-preview-34998--nx-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[netlify]

✅ Deploy Preview for nx-dev ready!

Name	Link
🔨 Latest commit	f06d411
🔍 Latest deploy log	https://app.netlify.com/projects/nx-dev/deploys/69c467d0ed21950008a70b2c
😎 Deploy Preview	https://deploy-preview-34998--nx-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit f06d411

Command	Status	Duration	Result
nx affected --targets=lint,test,build,e2e,e2e-c...	✅ Succeeded	10m 47s	View ↗
nx run-many -t check-imports check-lock-files c...	✅ Succeeded	9s	View ↗
nx-cloud record -- pnpm nx conformance:check	✅ Succeeded	8s	View ↗
nx build workspace-plugin	✅ Succeeded	2m 18s	View ↗
nx-cloud record -- nx format:check	✅ Succeeded	1s	View ↗
nx-cloud record -- nx sync:check	✅ Succeeded	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-26 00:14:02 UTC

[nx-cloud]

Important

At least one additional CI pipeline execution has run since the conclusion below was written and it may no longer be applicable.

Nx Cloud has identified a possible root cause for your failed CI:

We determined this failure is an environment state issue unrelated to the PR's changes. The create-nx-plugin:build-base task failed because create-nx-workspace build outputs (declaration files) were missing when it ran — a CI dependency-ordering problem, not caused by any source code modification in this documentation-only PR.

No code changes were suggested for this issue.

Trigger a rerun:

View detailed reasoning on Nx Cloud ↗

🔔 Heads up, your workspace has pending recommendations ↗ to auto-apply fixes for similar failures.

_{🎓 Learn more about Self-Healing CI on nx.dev}

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.