[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BWRX43VF0KSGZDC2AFXBX":3,"skill-same:01M69BWRX43VF0KSGZDC2AFXBX":57},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":32,"frontMatter":33,"refName":34,"commitSha":35,"skillDirectory":36,"forksCount":37,"repositoryHtmlUrl":38,"repositoryHomepageUrl":6,"ownerHtmlUrl":39,"ownerBlogUrl":40,"ownerDescription":41,"updatedAt":42,"install":43,"resources":56},"01M69BWRX43VF0KSGZDC2AFXBX","content-track-scaffolder",null,"Scaffold a complete new content track (like Foundation, Advanced, or Terminal) with all required files — data parser, page components, routes, markdown content, and navigation. Use when adding a new learning path, creating a new track, or expanding the tutorial with a new module series. Use for questions like \"add a new track\", \"create learning path for X\", \"scaffold track pages\".","microsoft\u002Flearn-ai-native-dev","microsoft","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F6154722?v=4","01M698VYDXZ6JW5WH3CRV650R8","Microsoft","01M69BWP5CZJYHBN950HX4GQAX",21,"MIT","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcontent-track-scaffolder\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[24,25,26,27,28],"content track scaffolder","terminal","components","scaffold","create","2026-11-10 10:12:30",false,"---\nname: content-track-scaffolder\ndescription: Scaffold a complete new content track (like Foundation, Advanced, or Terminal) with all required files — data parser, page components, routes, markdown content, and navigation. Use when adding a new learning path, creating a new track, or expanding the tutorial with a new module series. Use for questions like \"add a new track\", \"create learning path for X\", \"scaffold track pages\".\n---\n\n# Content Track Scaffolder\n\nThis skill scaffolds a complete content track — the full set of files needed to add a new learning path to the tutorial, following the exact patterns established by Foundation, Advanced, and Terminal tracks.\n\n## When to Use This Skill\n\n- When adding a new learning path (e.g., \"Mobile\", \"Data\", \"Enterprise\")\n- When expanding the tutorial with a new series of modules\n- When cloning the architecture for a related tutorial site\n- When understanding how the existing tracks are wired together\n\n## Architecture Overview\n\nA track consists of 7 coordinated file groups:\n\n```\n1. Content files       → src\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-*.md\n2. Data parser module  → src\u002Fdata\u002F\u003Ctrack>Content.ts\n3. Home page           → src\u002Fpages\u002F\u003CTrack>HomePage.tsx\n4. Lesson page         → src\u002Fpages\u002F\u003CTrack>LessonPage.tsx\n5. Summary page        → src\u002Fpages\u002F\u003CTrack>SummaryPage.tsx\n6. Routes              → src\u002FApp.tsx (lazy imports + Route entries)\n7. Navigation links    → src\u002Fcomponents\u002FSiteHeader.tsx (header nav)\n```\n\n## Existing Tracks Reference\n\n| Track | Route | Content Dir | Data Module | Step Prefix | Modules |\n|---|---|---|---|---|---|\n| Foundation | `\u002Flearn\u002Ffoundation\u002F…` | `tutorial\u002F` | `tutorialContent.ts` | `Step N:` | Parts 0-8 |\n| Advanced | `\u002Flearn\u002Fagentic\u002F…` | `advanced\u002F` | `advancedContent.ts` | `Step A1:` | Modules A-E |\n| Terminal | `\u002Flearn\u002Fterminal\u002F…` | `terminal\u002F` | `terminalContent.ts` | `Step F1:` | Modules F-H |\n\n> Legacy routes (`\u002Flesson\u002F`, `\u002Fadvanced\u002F`, `\u002Fterminal\u002F`) still work via redirects in `App.tsx` but should not be used in new code.\n\n### Key Differences Between Tracks\n\n| Feature | Foundation | Advanced | Terminal |\n|---|---|---|---|\n| Template variables | `{{projectName}}` etc. | None (isAdvanced=true) | None |\n| Prompt type | Single per step | Multiple per step | Multiple + metaPrompt |\n| Prompt number format | `1, 2, 3` | `A1, B2, C3` | `F1, G2, H3` |\n| Step interface | `Step` (number prompt) | `Step` (string prompt) | `TerminalStep` |\n| Module interface | `Part` | `Module` | `TerminalModule` |\n| Meta-prompts | No | No | Yes (`===` separator) |\n| Home page theme | Default theme | Gradient\u002Fglass theme | Terminal green CRT |\n\n## Step-by-Step: Creating a New Track\n\n### Step 1: Plan the track identity\n\nDecide on:\n\n| Decision | Convention | Example |\n|---|---|---|\n| Track name | PascalCase | `Cloud` |\n| Route prefix | lowercase | `\u002Fcloud\u002F` |\n| Content directory | lowercase | `src\u002Fcontent\u002Fcloud\u002F` |\n| Module letter prefix | Sequential after H | `I, J, K` |\n| Step prefix | Letter + number | `Step I1:` |\n| Prompt prefix | Same letter | `I1, I2, J1` |\n\n### Step 2: Create content markdown files\n\nCreate `src\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-\u003Cletter>-\u003Cslug>.md`:\n\n```markdown\n---\nid: module-\u003Cletter>\nnumber: \u003CN>\ntitle: Module Title\nsubtitle: X minutes — What you'll learn\n---\n\n## step: why-this-matters\n### title: Why This Module Matters\n\nIntroductory content explaining motivation.\n\n## step: first-concept\n### title: Step \u003CL>1: First Concept Title\n\nContent explaining the concept.\n\n:::prompt\nnumber: \u003CL>1\ntitle: Prompt Title\n---\nThe actual prompt text that users will copy.\n:::\n\n## step: checkpoint\n### title: ✅ Checkpoint\n\nVerification section.\n```\n\n**Module letter conventions:**\n- Use `import.meta.glob` pattern: `module-*.md`\n- Number field in frontmatter determines sort order\n- Step IDs must be globally unique across the track (not across all tracks)\n\n### Step 3: Create the data parser module\n\nCreate `src\u002Fdata\u002F\u003Ctrack>Content.ts`. Use `advancedContent.ts` as the base template since it supports multiple prompts per step:\n\n```typescript\nexport interface \u003CTrack>Step {\n  id: string\n  title: string\n  content: string\n  prompt?: {\n    number: string\n    title: string\n    code: string\n    metaPrompt?: string  \u002F\u002F Include if track supports meta-prompts\n  }\n  prompts?: {\n    number: string\n    title: string\n    code: string\n    metaPrompt?: string\n  }[]\n}\n\nexport interface \u003CTrack>Module {\n  id: string\n  number: number\n  title: string\n  subtitle: string\n  steps: \u003CTrack>Step[]\n}\n\nconst moduleFiles = import.meta.glob\u003Cstring>('..\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-*.md', {\n  eager: true,\n  query: '?raw',\n  import: 'default'\n}) as Record\u003Cstring, string>\n```\n\nThe rest of the module follows the exact same parsing pipeline:\n1. `normalizeLF()` — normalize `\\r\\n` to `\\n`\n2. `parseKeyValueBlock()` — parse `key: value` lines\n3. `parseFrontmatter()` — extract YAML frontmatter and body\n4. `parsePromptBlocks()` — extract `:::prompt` blocks, replace with `:::prompt-placeholder:::`\n5. `parseSteps()` — split on `## step:`, extract titles\n6. `parseModuleMarkdown()` — combine frontmatter + steps into module\n7. `load\u003CTrack>Data()` — cached async loader\n8. `\u003Ctrack>SummaryContent` — workflow, quickReference, troubleshooting, learned objects\n\n**If the track uses meta-prompts** (like Terminal), include the `===` separator parsing in `parsePromptBlocks()`:\n\n```typescript\nconst metaSeparator = '\\n===\\n'\nconst metaSepIndex = codeBlock.indexOf(metaSeparator)\nlet metaPrompt: string | undefined\nif (metaSepIndex !== -1) {\n  metaPrompt = codeBlock.slice(metaSepIndex + metaSeparator.length).trim()\n  codeBlock = codeBlock.slice(0, metaSepIndex)\n}\n```\n\n**If the track uses template variables** (like Foundation), import `resolveContent` from `tutorialContent.ts` or replicate the `applyTemplate()` function.\n\n### Step 4: Create page components\n\n#### 4a. Home page — `src\u002Fpages\u002F\u003CTrack>HomePage.tsx`\n\n```typescript\nimport { Link } from 'react-router-dom'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Badge } from '@\u002Fcomponents\u002Fui\u002Fbadge'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport { load\u003CTrack>Data, \u003CTrack>Module } from '@\u002Fdata\u002F\u003Ctrack>Content'\nimport { ArrowRight, ArrowLeft } from '@phosphor-icons\u002Freact'\nimport { useEffect, useState } from 'react'\n\nexport function \u003CTrack>HomePage() {\n  const [modules, setModules] = useState\u003C\u003CTrack>Module[]>([])\n  const [isLoading, setIsLoading] = useState(true)\n\n  useEffect(() => {\n    load\u003CTrack>Data().then((data) => {\n      setModules(data)\n      setIsLoading(false)\n    })\n  }, [])\n\n  return (\n    \u003Cdiv className=\"min-h-[calc(100vh-56px)] bg-background\">\n      \u003Cdiv className=\"mx-auto max-w-4xl px-6 py-12 lg:px-12 lg:py-16\">\n        {\u002F* Hero, back link, module cards, summary link, start button *\u002F}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nKey patterns:\n- Async data loading with `useState` + `useEffect`\n- Module cards are `\u003CLink>` to `\u002F\u003Ctrack>\u002Fmodule\u002F${module.id}`\n- Summary link points to `\u002F\u003Ctrack>\u002Fsummary`\n- Back link returns to `\u002F` (Foundation) or previous track\n\n#### 4b. Lesson page — `src\u002Fpages\u002F\u003CTrack>LessonPage.tsx`\n\nClone from `AdvancedLessonPage.tsx` and update:\n- Data import: `load\u003CTrack>Data` and `\u003CTrack>Module`\n- Route param: `moduleId` from `useParams()`\n- Step deep-linking via optional `:stepId` param\n- `IntersectionObserver` for tracking visible steps\n- NavigationSidebar with parts\u002Fmodules mapped\n- StepCard rendering with `isAdvanced={true}` (unless the track uses template variables)\n- Progress calculation and previous\u002Fnext navigation\n\n#### 4c. Summary page — `src\u002Fpages\u002F\u003CTrack>SummaryPage.tsx`\n\nClone from `AdvancedSummaryPage.tsx` and update:\n- Import `\u003Ctrack>SummaryContent` from data module\n- Render workflow steps, quick reference, troubleshooting, learned sections\n- Back link to track home\n\n### Step 5: Add routes to App.tsx\n\nAdd lazy imports and routes:\n\n```typescript\n\u002F\u002F In lazy import section:\nconst \u003CTrack>HomePage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>HomePage').then(m => ({ default: m.\u003CTrack>HomePage })))\nconst \u003CTrack>LessonPage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>LessonPage').then(m => ({ default: m.\u003CTrack>LessonPage })))\nconst \u003CTrack>SummaryPage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>SummaryPage').then(m => ({ default: m.\u003CTrack>SummaryPage })))\n\n\u002F\u002F In Routes — use \u002Flearn\u002F:pathId routing pattern:\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\" element={\u003C\u003CTrack>HomePage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002F:moduleId\" element={\u003C\u003CTrack>LessonPage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002F:moduleId\u002F:stepId\" element={\u003C\u003CTrack>LessonPage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002Fsummary\" element={\u003C\u003CTrack>SummaryPage \u002F>} \u002F>\n```\n\n> Register the path in `src\u002Fdata\u002Fpaths.ts` (official) or `src\u002Fcontent\u002Fcommunity\u002F\u003Cid>\u002Fpath.json` (community) so it appears in the catalog.\n\n### Step 6: Add header navigation\n\nIn `src\u002Fcomponents\u002FSiteHeader.tsx`, add a link to the new track in the navigation menu, following the existing pattern for Advanced\u002FTerminal links.\n\n### Step 7: Create instruction file (optional)\n\nIf the track has special content conventions, create `.github\u002Finstructions\u002F\u003Ctrack>-content.instructions.md` with an `applyTo: src\u002Fcontent\u002F\u003Ctrack>\u002F**` pattern.\n\n## Summary Content Template\n\nEvery track needs a summary content object with 4 sections:\n\n```typescript\nexport const \u003Ctrack>SummaryContent = {\n  workflow: {\n    title: 'The \u003CTrack> Workflow',\n    description: \"Here's what you've mastered:\",\n    steps: [\n      'STEP 1 description',\n      'STEP 2 description',\n      \u002F\u002F 5-10 items summarizing the complete workflow\n    ]\n  },\n  quickReference: {\n    title: 'Quick Reference: \u003CTrack> Prompts',\n    items: [\n      { when: 'Activity description', prompts: 'PROMPT I1, I2' },\n      \u002F\u002F One entry per logical activity\n    ]\n  },\n  troubleshooting: {\n    title: '\u003CTrack> Troubleshooting',\n    items: [\n      {\n        problem: 'Problem description',\n        prevention: 'How to prevent it',\n        solution: 'How to fix it'\n      },\n      \u002F\u002F 5-10 common issues\n    ]\n  },\n  learned: {\n    title: \"What You've Mastered\",\n    items: [\n      'Key concept 1',\n      'Key concept 2',\n      \u002F\u002F One item per major learning\n    ],\n    closing: 'Motivational closing paragraph.'\n  }\n}\n```\n\n## Validation\n\n### PowerShell: Verify track wiring\n\n```powershell\nparam(\n  [string]$TrackName = \"cloud\",\n  [string]$TrackPascal = \"Cloud\"\n)\n\nWrite-Host \"`n=== TRACK AUDIT: $TrackPascal ===\" -ForegroundColor Cyan\n\n# 1. Content files\n$contentFiles = Get-ChildItem \"src\u002Fcontent\u002F$TrackName\u002Fmodule-*.md\" -ErrorAction SilentlyContinue\nWrite-Host \"`n[Content Files]\" -ForegroundColor Yellow\nif ($contentFiles) {\n  $contentFiles | ForEach-Object { Write-Host \"  $_\" }\n} else {\n  Write-Host \"  NONE FOUND\" -ForegroundColor Red\n}\n\n# 2. Data module\n$dataFile = \"src\u002Fdata\u002F${TrackName}Content.ts\"\nWrite-Host \"`n[Data Module]\" -ForegroundColor Yellow\nif (Test-Path $dataFile) {\n  Write-Host \"  $dataFile exists\" -ForegroundColor Green\n  $exports = Select-String -Path $dataFile -Pattern \"export (const|interface|function|async)\"\n  $exports | ForEach-Object { Write-Host \"    $($_.Line.Trim())\" }\n} else {\n  Write-Host \"  $dataFile MISSING\" -ForegroundColor Red\n}\n\n# 3. Page components\nWrite-Host \"`n[Page Components]\" -ForegroundColor Yellow\n@(\"HomePage\", \"LessonPage\", \"SummaryPage\") | ForEach-Object {\n  $page = \"src\u002Fpages\u002F${TrackPascal}$_.tsx\"\n  $exists = Test-Path $page\n  $color = if ($exists) { \"Green\" } else { \"Red\" }\n  $status = if ($exists) { \"exists\" } else { \"MISSING\" }\n  Write-Host \"  $page — $status\" -ForegroundColor $color\n}\n\n# 4. Routes\nWrite-Host \"`n[Routes in App.tsx]\" -ForegroundColor Yellow\n$appContent = Get-Content \"src\u002FApp.tsx\" -Raw\n$routePattern = \"\u002F$TrackName\"\nif ($appContent -match [regex]::Escape($routePattern)) {\n  Write-Host \"  Routes for \u002F$TrackName found\" -ForegroundColor Green\n} else {\n  Write-Host \"  Routes for \u002F$TrackName MISSING\" -ForegroundColor Red\n}\n\n# 5. Header navigation\nWrite-Host \"`n[Header Navigation]\" -ForegroundColor Yellow\n$headerContent = Get-Content \"src\u002Fcomponents\u002FSiteHeader.tsx\" -Raw\nif ($headerContent -match [regex]::Escape(\"\u002F$TrackName\")) {\n  Write-Host \"  SiteHeader links to \u002F$TrackName\" -ForegroundColor Green\n} else {\n  Write-Host \"  SiteHeader MISSING link to \u002F$TrackName\" -ForegroundColor Red\n}\n\n# 6. Build\nWrite-Host \"`n[Build Check]\" -ForegroundColor Yellow\nWrite-Host \"  Run: npm run build\"\n\nWrite-Host \"`n=== END AUDIT ===\" -ForegroundColor Cyan\n```\n\n## Checklist\n\nBefore completing a new track:\n\n- [ ] Content markdown files created in `src\u002Fcontent\u002F\u003Ctrack>\u002F`\n- [ ] Each file has valid frontmatter (`id`, `number`, `title`, `subtitle`)\n- [ ] Steps follow `## step:` \u002F `### title:` format\n- [ ] Prompts use letter-prefixed numbers (`I1`, `J1`, etc.)\n- [ ] Data parser module created with proper interfaces\n- [ ] `load\u003CTrack>Data()` exports cached async loader\n- [ ] Summary content object has all 4 sections\n- [ ] Home page shows module list with links\n- [ ] Lesson page renders steps with navigation\n- [ ] Summary page renders all summary sections\n- [ ] All 3 pages are lazy-loaded in `App.tsx`\n- [ ] All 4 routes added (`home`, `module\u002F:id`, `module\u002F:id\u002F:stepId`, `summary`)\n- [ ] Header navigation updated\n- [ ] `npm run build` succeeds\n- [ ] All modules render correctly in the browser\n- [ ] Navigation between modules works\n- [ ] Deep-linking to steps works (`\u002F\u003Ctrack>\u002Fmodule\u002F\u003Cid>\u002F\u003CstepId>`)\n","# Content Track Scaffolder\n\nThis skill scaffolds a complete content track — the full set of files needed to add a new learning path to the tutorial, following the exact patterns established by Foundation, Advanced, and Terminal tracks.\n\n## When to Use This Skill\n\n- When adding a new learning path (e.g., \"Mobile\", \"Data\", \"Enterprise\")\n- When expanding the tutorial with a new series of modules\n- When cloning the architecture for a related tutorial site\n- When understanding how the existing tracks are wired together\n\n## Architecture Overview\n\nA track consists of 7 coordinated file groups:\n\n```\n1. Content files       → src\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-*.md\n2. Data parser module  → src\u002Fdata\u002F\u003Ctrack>Content.ts\n3. Home page           → src\u002Fpages\u002F\u003CTrack>HomePage.tsx\n4. Lesson page         → src\u002Fpages\u002F\u003CTrack>LessonPage.tsx\n5. Summary page        → src\u002Fpages\u002F\u003CTrack>SummaryPage.tsx\n6. Routes              → src\u002FApp.tsx (lazy imports + Route entries)\n7. Navigation links    → src\u002Fcomponents\u002FSiteHeader.tsx (header nav)\n```\n\n## Existing Tracks Reference\n\n| Track | Route | Content Dir | Data Module | Step Prefix | Modules |\n|---|---|---|---|---|---|\n| Foundation | `\u002Flearn\u002Ffoundation\u002F…` | `tutorial\u002F` | `tutorialContent.ts` | `Step N:` | Parts 0-8 |\n| Advanced | `\u002Flearn\u002Fagentic\u002F…` | `advanced\u002F` | `advancedContent.ts` | `Step A1:` | Modules A-E |\n| Terminal | `\u002Flearn\u002Fterminal\u002F…` | `terminal\u002F` | `terminalContent.ts` | `Step F1:` | Modules F-H |\n\n> Legacy routes (`\u002Flesson\u002F`, `\u002Fadvanced\u002F`, `\u002Fterminal\u002F`) still work via redirects in `App.tsx` but should not be used in new code.\n\n### Key Differences Between Tracks\n\n| Feature | Foundation | Advanced | Terminal |\n|---|---|---|---|\n| Template variables | `{{projectName}}` etc. | None (isAdvanced=true) | None |\n| Prompt type | Single per step | Multiple per step | Multiple + metaPrompt |\n| Prompt number format | `1, 2, 3` | `A1, B2, C3` | `F1, G2, H3` |\n| Step interface | `Step` (number prompt) | `Step` (string prompt) | `TerminalStep` |\n| Module interface | `Part` | `Module` | `TerminalModule` |\n| Meta-prompts | No | No | Yes (`===` separator) |\n| Home page theme | Default theme | Gradient\u002Fglass theme | Terminal green CRT |\n\n## Step-by-Step: Creating a New Track\n\n### Step 1: Plan the track identity\n\nDecide on:\n\n| Decision | Convention | Example |\n|---|---|---|\n| Track name | PascalCase | `Cloud` |\n| Route prefix | lowercase | `\u002Fcloud\u002F` |\n| Content directory | lowercase | `src\u002Fcontent\u002Fcloud\u002F` |\n| Module letter prefix | Sequential after H | `I, J, K` |\n| Step prefix | Letter + number | `Step I1:` |\n| Prompt prefix | Same letter | `I1, I2, J1` |\n\n### Step 2: Create content markdown files\n\nCreate `src\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-\u003Cletter>-\u003Cslug>.md`:\n\n```markdown\n---\nid: module-\u003Cletter>\nnumber: \u003CN>\ntitle: Module Title\nsubtitle: X minutes — What you'll learn\n---\n\n## step: why-this-matters\n### title: Why This Module Matters\n\nIntroductory content explaining motivation.\n\n## step: first-concept\n### title: Step \u003CL>1: First Concept Title\n\nContent explaining the concept.\n\n:::prompt\nnumber: \u003CL>1\ntitle: Prompt Title\n---\nThe actual prompt text that users will copy.\n:::\n\n## step: checkpoint\n### title: ✅ Checkpoint\n\nVerification section.\n```\n\n**Module letter conventions:**\n- Use `import.meta.glob` pattern: `module-*.md`\n- Number field in frontmatter determines sort order\n- Step IDs must be globally unique across the track (not across all tracks)\n\n### Step 3: Create the data parser module\n\nCreate `src\u002Fdata\u002F\u003Ctrack>Content.ts`. Use `advancedContent.ts` as the base template since it supports multiple prompts per step:\n\n```typescript\nexport interface \u003CTrack>Step {\n  id: string\n  title: string\n  content: string\n  prompt?: {\n    number: string\n    title: string\n    code: string\n    metaPrompt?: string  \u002F\u002F Include if track supports meta-prompts\n  }\n  prompts?: {\n    number: string\n    title: string\n    code: string\n    metaPrompt?: string\n  }[]\n}\n\nexport interface \u003CTrack>Module {\n  id: string\n  number: number\n  title: string\n  subtitle: string\n  steps: \u003CTrack>Step[]\n}\n\nconst moduleFiles = import.meta.glob\u003Cstring>('..\u002Fcontent\u002F\u003Ctrack>\u002Fmodule-*.md', {\n  eager: true,\n  query: '?raw',\n  import: 'default'\n}) as Record\u003Cstring, string>\n```\n\nThe rest of the module follows the exact same parsing pipeline:\n1. `normalizeLF()` — normalize `\\r\\n` to `\\n`\n2. `parseKeyValueBlock()` — parse `key: value` lines\n3. `parseFrontmatter()` — extract YAML frontmatter and body\n4. `parsePromptBlocks()` — extract `:::prompt` blocks, replace with `:::prompt-placeholder:::`\n5. `parseSteps()` — split on `## step:`, extract titles\n6. `parseModuleMarkdown()` — combine frontmatter + steps into module\n7. `load\u003CTrack>Data()` — cached async loader\n8. `\u003Ctrack>SummaryContent` — workflow, quickReference, troubleshooting, learned objects\n\n**If the track uses meta-prompts** (like Terminal), include the `===` separator parsing in `parsePromptBlocks()`:\n\n```typescript\nconst metaSeparator = '\\n===\\n'\nconst metaSepIndex = codeBlock.indexOf(metaSeparator)\nlet metaPrompt: string | undefined\nif (metaSepIndex !== -1) {\n  metaPrompt = codeBlock.slice(metaSepIndex + metaSeparator.length).trim()\n  codeBlock = codeBlock.slice(0, metaSepIndex)\n}\n```\n\n**If the track uses template variables** (like Foundation), import `resolveContent` from `tutorialContent.ts` or replicate the `applyTemplate()` function.\n\n### Step 4: Create page components\n\n#### 4a. Home page — `src\u002Fpages\u002F\u003CTrack>HomePage.tsx`\n\n```typescript\nimport { Link } from 'react-router-dom'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Badge } from '@\u002Fcomponents\u002Fui\u002Fbadge'\nimport { Button } from '@\u002Fcomponents\u002Fui\u002Fbutton'\nimport { load\u003CTrack>Data, \u003CTrack>Module } from '@\u002Fdata\u002F\u003Ctrack>Content'\nimport { ArrowRight, ArrowLeft } from '@phosphor-icons\u002Freact'\nimport { useEffect, useState } from 'react'\n\nexport function \u003CTrack>HomePage() {\n  const [modules, setModules] = useState\u003C\u003CTrack>Module[]>([])\n  const [isLoading, setIsLoading] = useState(true)\n\n  useEffect(() => {\n    load\u003CTrack>Data().then((data) => {\n      setModules(data)\n      setIsLoading(false)\n    })\n  }, [])\n\n  return (\n    \u003Cdiv className=\"min-h-[calc(100vh-56px)] bg-background\">\n      \u003Cdiv className=\"mx-auto max-w-4xl px-6 py-12 lg:px-12 lg:py-16\">\n        {\u002F* Hero, back link, module cards, summary link, start button *\u002F}\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\nKey patterns:\n- Async data loading with `useState` + `useEffect`\n- Module cards are `\u003CLink>` to `\u002F\u003Ctrack>\u002Fmodule\u002F${module.id}`\n- Summary link points to `\u002F\u003Ctrack>\u002Fsummary`\n- Back link returns to `\u002F` (Foundation) or previous track\n\n#### 4b. Lesson page — `src\u002Fpages\u002F\u003CTrack>LessonPage.tsx`\n\nClone from `AdvancedLessonPage.tsx` and update:\n- Data import: `load\u003CTrack>Data` and `\u003CTrack>Module`\n- Route param: `moduleId` from `useParams()`\n- Step deep-linking via optional `:stepId` param\n- `IntersectionObserver` for tracking visible steps\n- NavigationSidebar with parts\u002Fmodules mapped\n- StepCard rendering with `isAdvanced={true}` (unless the track uses template variables)\n- Progress calculation and previous\u002Fnext navigation\n\n#### 4c. Summary page — `src\u002Fpages\u002F\u003CTrack>SummaryPage.tsx`\n\nClone from `AdvancedSummaryPage.tsx` and update:\n- Import `\u003Ctrack>SummaryContent` from data module\n- Render workflow steps, quick reference, troubleshooting, learned sections\n- Back link to track home\n\n### Step 5: Add routes to App.tsx\n\nAdd lazy imports and routes:\n\n```typescript\n\u002F\u002F In lazy import section:\nconst \u003CTrack>HomePage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>HomePage').then(m => ({ default: m.\u003CTrack>HomePage })))\nconst \u003CTrack>LessonPage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>LessonPage').then(m => ({ default: m.\u003CTrack>LessonPage })))\nconst \u003CTrack>SummaryPage = lazy(() => import('@\u002Fpages\u002F\u003CTrack>SummaryPage').then(m => ({ default: m.\u003CTrack>SummaryPage })))\n\n\u002F\u002F In Routes — use \u002Flearn\u002F:pathId routing pattern:\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\" element={\u003C\u003CTrack>HomePage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002F:moduleId\" element={\u003C\u003CTrack>LessonPage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002F:moduleId\u002F:stepId\" element={\u003C\u003CTrack>LessonPage \u002F>} \u002F>\n\u003CRoute path=\"\u002Flearn\u002F\u003Ctrack>\u002Fsummary\" element={\u003C\u003CTrack>SummaryPage \u002F>} \u002F>\n```\n\n> Register the path in `src\u002Fdata\u002Fpaths.ts` (official) or `src\u002Fcontent\u002Fcommunity\u002F\u003Cid>\u002Fpath.json` (community) so it appears in the catalog.\n\n### Step 6: Add header navigation\n\nIn `src\u002Fcomponents\u002FSiteHeader.tsx`, add a link to the new track in the navigation menu, following the existing pattern for Advanced\u002FTerminal links.\n\n### Step 7: Create instruction file (optional)\n\nIf the track has special content conventions, create `.github\u002Finstructions\u002F\u003Ctrack>-content.instructions.md` with an `applyTo: src\u002Fcontent\u002F\u003Ctrack>\u002F**` pattern.\n\n## Summary Content Template\n\nEvery track needs a summary content object with 4 sections:\n\n```typescript\nexport const \u003Ctrack>SummaryContent = {\n  workflow: {\n    title: 'The \u003CTrack> Workflow',\n    description: \"Here's what you've mastered:\",\n    steps: [\n      'STEP 1 description',\n      'STEP 2 description',\n      \u002F\u002F 5-10 items summarizing the complete workflow\n    ]\n  },\n  quickReference: {\n    title: 'Quick Reference: \u003CTrack> Prompts',\n    items: [\n      { when: 'Activity description', prompts: 'PROMPT I1, I2' },\n      \u002F\u002F One entry per logical activity\n    ]\n  },\n  troubleshooting: {\n    title: '\u003CTrack> Troubleshooting',\n    items: [\n      {\n        problem: 'Problem description',\n        prevention: 'How to prevent it',\n        solution: 'How to fix it'\n      },\n      \u002F\u002F 5-10 common issues\n    ]\n  },\n  learned: {\n    title: \"What You've Mastered\",\n    items: [\n      'Key concept 1',\n      'Key concept 2',\n      \u002F\u002F One item per major learning\n    ],\n    closing: 'Motivational closing paragraph.'\n  }\n}\n```\n\n## Validation\n\n### PowerShell: Verify track wiring\n\n```powershell\nparam(\n  [string]$TrackName = \"cloud\",\n  [string]$TrackPascal = \"Cloud\"\n)\n\nWrite-Host \"`n=== TRACK AUDIT: $TrackPascal ===\" -ForegroundColor Cyan\n\n# 1. Content files\n$contentFiles = Get-ChildItem \"src\u002Fcontent\u002F$TrackName\u002Fmodule-*.md\" -ErrorAction SilentlyContinue\nWrite-Host \"`n[Content Files]\" -ForegroundColor Yellow\nif ($contentFiles) {\n  $contentFiles | ForEach-Object { Write-Host \"  $_\" }\n} else {\n  Write-Host \"  NONE FOUND\" -ForegroundColor Red\n}\n\n# 2. Data module\n$dataFile = \"src\u002Fdata\u002F${TrackName}Content.ts\"\nWrite-Host \"`n[Data Module]\" -ForegroundColor Yellow\nif (Test-Path $dataFile) {\n  Write-Host \"  $dataFile exists\" -ForegroundColor Green\n  $exports = Select-String -Path $dataFile -Pattern \"export (const|interface|function|async)\"\n  $exports | ForEach-Object { Write-Host \"    $($_.Line.Trim())\" }\n} else {\n  Write-Host \"  $dataFile MISSING\" -ForegroundColor Red\n}\n\n# 3. Page components\nWrite-Host \"`n[Page Components]\" -ForegroundColor Yellow\n@(\"HomePage\", \"LessonPage\", \"SummaryPage\") | ForEach-Object {\n  $page = \"src\u002Fpages\u002F${TrackPascal}$_.tsx\"\n  $exists = Test-Path $page\n  $color = if ($exists) { \"Green\" } else { \"Red\" }\n  $status = if ($exists) { \"exists\" } else { \"MISSING\" }\n  Write-Host \"  $page — $status\" -ForegroundColor $color\n}\n\n# 4. Routes\nWrite-Host \"`n[Routes in App.tsx]\" -ForegroundColor Yellow\n$appContent = Get-Content \"src\u002FApp.tsx\" -Raw\n$routePattern = \"\u002F$TrackName\"\nif ($appContent -match [regex]::Escape($routePattern)) {\n  Write-Host \"  Routes for \u002F$TrackName found\" -ForegroundColor Green\n} else {\n  Write-Host \"  Routes for \u002F$TrackName MISSING\" -ForegroundColor Red\n}\n\n# 5. Header navigation\nWrite-Host \"`n[Header Navigation]\" -ForegroundColor Yellow\n$headerContent = Get-Content \"src\u002Fcomponents\u002FSiteHeader.tsx\" -Raw\nif ($headerContent -match [regex]::Escape(\"\u002F$TrackName\")) {\n  Write-Host \"  SiteHeader links to \u002F$TrackName\" -ForegroundColor Green\n} else {\n  Write-Host \"  SiteHeader MISSING link to \u002F$TrackName\" -ForegroundColor Red\n}\n\n# 6. Build\nWrite-Host \"`n[Build Check]\" -ForegroundColor Yellow\nWrite-Host \"  Run: npm run build\"\n\nWrite-Host \"`n=== END AUDIT ===\" -ForegroundColor Cyan\n```\n\n## Checklist\n\nBefore completing a new track:\n\n- [ ] Content markdown files created in `src\u002Fcontent\u002F\u003Ctrack>\u002F`\n- [ ] Each file has valid frontmatter (`id`, `number`, `title`, `subtitle`)\n- [ ] Steps follow `## step:` \u002F `### title:` format\n- [ ] Prompts use letter-prefixed numbers (`I1`, `J1`, etc.)\n- [ ] Data parser module created with proper interfaces\n- [ ] `load\u003CTrack>Data()` exports cached async loader\n- [ ] Summary content object has all 4 sections\n- [ ] Home page shows module list with links\n- [ ] Lesson page renders steps with navigation\n- [ ] Summary page renders all summary sections\n- [ ] All 3 pages are lazy-loaded in `App.tsx`\n- [ ] All 4 routes added (`home`, `module\u002F:id`, `module\u002F:id\u002F:stepId`, `summary`)\n- [ ] Header navigation updated\n- [ ] `npm run build` succeeds\n- [ ] All modules render correctly in the browser\n- [ ] Navigation between modules works\n- [ ] Deep-linking to steps works (`\u002F\u003Ctrack>\u002Fmodule\u002F\u003Cid>\u002F\u003CstepId>`)\n",{"name":5,"description":7},"main","d88d026d964974e431125933a0168778e2023b69",".github\u002Fskills\u002Fcontent-track-scaffolder",6,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev","https:\u002F\u002Fgithub.com\u002Fmicrosoft","https:\u002F\u002Fopensource.microsoft.com","Open source projects and samples from Microsoft","2026-10-22 06:39:53",{"source":8,"skillName":5,"commands":44,"prompt":54,"zipAvailable":55},[45,48,51],{"tool":46,"command":47},"npx","npx skills add microsoft\u002Flearn-ai-native-dev --skill content-track-scaffolder",{"tool":49,"command":50},"bunx","bunx skills add microsoft\u002Flearn-ai-native-dev --skill content-track-scaffolder",{"tool":52,"command":53},"pnpm","pnpm dlx skills add microsoft\u002Flearn-ai-native-dev --skill content-track-scaffolder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcontent-track-scaffolder\u002FSKILL.md",true,[],[58,78,89,99,108,123],{"skillNo":59,"name":60,"nameZh":6,"description":61,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":62,"categories":63,"keywords":69,"publishedAt":29},"01M69BX5QMCFMJCMFPEH5EE7S8","version-checker","Validate that tutorial content references current tool versions, APIs, CLI commands, and features. Use when reviewing content for outdated information, checking deprecations, verifying feature availability, auditing tool references, or updating stale version numbers. Covers GitHub Copilot (VS Code + CLI), Claude Code, VS Code settings, MCP, and Agent Skills standard.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fversion-checker\u002FSKILL.md",[64],{"categoryNo":65,"categoryName":66,"taxonomyType":67,"taxonomyTypeDesc":68},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[70,71,72,73,74,75,76,77],"version checker","github","github copilot","cli","validate","MCP","copilot","code",{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":85,"publishedAt":29},"01M69BX3MH209HKSCNHEMXH47W","tutorial-content-qa","Comprehensive quality assurance for AI-Native development tutorials across all tracks (Foundation, Advanced, Terminal). Use when reviewing content for accuracy, clarity, consistency, and completeness. Use for proofreading, checking errors, auditing content, or running QA checks before publishing.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ftutorial-content-qa\u002FSKILL.md",[84],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[86,87,88,25],"qa","tutorial content qa","development",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":29},"01M69BX1Q0E649ZKXNPWMCP07G","track-generator","Generate new example tracks for the AI-Native tutorial. Use when creating new industry examples, adding a new track, building project templates, or expanding learning paths. Use for questions like \"add a track for healthcare\", \"create new example\", \"new industry template\". Produces consistent ExampleTrack data with all required fields including projectName, requirements, colorCoding, taskExamples, and verification examples matching the TypeScript interface in exampleTracks.ts.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Ftrack-generator\u002FSKILL.md",[],[96,97,28,98],"track generator","generate","typescript",{"skillNo":100,"name":101,"nameZh":6,"description":102,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":103,"categories":104,"keywords":106,"publishedAt":29},"01M69BWZPTT11BSHHQSC29B5M3","exercise-scaffolder","Generate consistent, high-quality coding exercises for AI-Native development tutorials. Use when creating hands-on exercises, coding challenges, practice problems, quizzes, labs, or skill-building activities. Use for questions like \"create an exercise\", \"add practice activity\", \"build a challenge for Part X\". Includes starter templates, solution patterns, hint progressions, and verification criteria.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fexercise-scaffolder\u002FSKILL.md",[105],{"categoryNo":65,"categoryName":66,"taxonomyType":67,"taxonomyTypeDesc":68},[107,28,97,88],"exercise scaffolder",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":114,"publishedAt":29},"01M69BWXNT7D0NMAJAD08VFP19","docs-sync","Diff src\u002F and .github\u002F against docs\u002F to detect drift between code and design spec. Use when auditing the docs folder, after merging structural changes (adding paths\u002Fmodules\u002Fdiagrams\u002Fsyntax\u002Fagents\u002Fskills\u002Fhooks), or before a release. Use for questions like \"is docs in sync?\", \"what changed since the last docs update?\", \"find docs drift\". Produces a structured report with proposed edits — does not modify docs\u002F directly.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fdocs-sync\u002FSKILL.md",[],[115,116,117,118,119,77,120,71,121,122],"docs sync","sync","docs","release","report","update","spec","design",{"skillNo":124,"name":125,"nameZh":6,"description":126,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":29},"01M69BWVBVN45H7VECN89KFTAR","diagram-scaffolder","Generate new interactive diagram components for tutorial content. Use when adding a visual diagram, creating architectural illustrations, or building interactive flow visualizations. Use for questions like \"add a diagram\", \"create diagram component\", \"new visual for module X\". Produces a React component, registers it in the barrel export and StepCard parser, and provides the markdown reference syntax.","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fdiagram-scaffolder\u002FSKILL.md",[],[130,131,26,97,28,132,133],"diagram scaffolder","diagram","component","react"]