[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M69BWVBVN45H7VECN89KFTAR":3,"skill-same:01M69BWVBVN45H7VECN89KFTAR":64},{"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":18,"publishedAt":26,"linkOnly":27,"markdownContent":28,"markdownBody":29,"frontMatter":30,"refName":31,"commitSha":32,"skillDirectory":33,"forksCount":34,"repositoryHtmlUrl":35,"repositoryHomepageUrl":6,"ownerHtmlUrl":36,"ownerBlogUrl":37,"ownerDescription":38,"updatedAt":39,"install":40,"resources":53},"01M69BWVBVN45H7VECN89KFTAR","diagram-scaffolder",null,"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.","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\u002Fdiagram-scaffolder\u002FSKILL.md",[],[19,20,21,22,23,24,25],"diagram","diagram scaffolder","components","react","component","create","generate","2026-11-10 10:12:30",false,"---\nname: diagram-scaffolder\ndescription: 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.\n---\n\n# Diagram Scaffolder\n\nThis skill generates interactive diagram components that integrate with the tutorial's custom markdown rendering pipeline.\n\n## When to Use This Skill\n\n- When adding a new visual diagram to any tutorial content\n- When creating architectural illustrations (e.g., system diagrams, flow charts)\n- When building interactive visualizations with clickable phases or nodes\n- When a `:::diagram \u003Cname>` block needs a backing React component\n\n## Architecture Overview\n\nAdding a diagram requires coordinated changes across 4 files:\n\n```\n1. src\u002Fcomponents\u002Fdiagrams\u002FNewDiagram.tsx    ← React component\n2. src\u002Fcomponents\u002Fdiagrams\u002Findex.ts          ← Barrel export\n3. src\u002Fcomponents\u002FStepCard.tsx               ← Parser case + import\n4. src\u002Fcontent\u002F**\u002Fmodule-*.md                ← Markdown reference\n```\n\n### Data Flow\n\n```\nMarkdown: :::diagram my-diagram :::\n  → StepCard parseContentBlocks() → { type: 'diagram', diagramName: 'my-diagram' }\n    → renderBlock() switch case → \u003CMyDiagram \u002F>\n```\n\n## Existing Diagrams Registry\n\n| Markdown Name | Component | Used In |\n|---|---|---|\n| `file-hierarchy` | `FileHierarchyDiagram` | Part 3 (Foundation) |\n| `mcp-architecture` | `MCPArchitectureDiagram` | Module A (Advanced) |\n| `workflow-comparison` | `WorkflowComparisonDiagram` | Module B (Advanced) |\n| `agent-orchestration` | `AgentOrchestrationDiagram` | Module C (Advanced) |\n| `ai-testing-flow` | `AITestingFlowDiagram` | Module D (Advanced) |\n| `capstone-architecture` | `CapstoneArchitectureDiagram` | Module E (Advanced) |\n| `agentic-loop` | `AgenticLoopDiagram` | Module G (Terminal) |\n| `provider-abstraction` | `ProviderAbstractionDiagram` | Module G (Terminal) |\n| `skill-system-flow` | `SkillSystemFlowDiagram` | Module G (Terminal) |\n| `spec-driven-cycle` | `SpecDrivenCycleDiagram` | Module G (Terminal) |\n\n## Naming Conventions\n\n| Aspect | Convention | Example |\n|---|---|---|\n| Markdown name | `kebab-case` | `data-flow-pipeline` |\n| Component name | `PascalCase` + `Diagram` suffix | `DataFlowPipelineDiagram` |\n| File name | Same as component | `DataFlowPipelineDiagram.tsx` |\n\nThe markdown name and component name must be related by converting kebab-case to PascalCase and appending `Diagram`.\n\n## Component Template\n\n### Basic Static Diagram\n\n```typescript\nimport { cn } from '@\u002Flib\u002Futils'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Info } from '@phosphor-icons\u002Freact'\n\ninterface DiagramNameDiagramProps {\n  className?: string\n}\n\nexport function DiagramNameDiagram({ className }: DiagramNameDiagramProps) {\n  return (\n    \u003Cdiv\n      className={cn('my-6 space-y-4', className)}\n      role=\"figure\"\n      data-diagram=\"diagram-name\"\n      aria-label=\"Description of what this diagram shows.\"\n    >\n      \u003CCard className=\"p-6 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-center gap-2 mb-4 pb-3 border-b border-border\">\n          {\u002F* Icon + Title *\u002F}\n          \u003Cspan className=\"font-heading font-semibold text-sm text-foreground\">\n            Diagram Title\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        {\u002F* Diagram content *\u002F}\n        \u003Cdiv className=\"font-mono text-sm\">\n          {\u002F* Visual elements go here *\u002F}\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Key insight callout *\u002F}\n      \u003Cdiv className=\"flex items-center gap-3 p-4 rounded-lg bg-primary\u002F5 border border-primary\u002F20\">\n        \u003CInfo size={20} className=\"text-primary shrink-0\" \u002F>\n        \u003Cp className=\"text-sm text-foreground\">\n          \u003Cstrong>Key insight.\u003C\u002Fstrong> Brief explanation of what makes this important.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Interactive Diagram (with clickable phases)\n\n```typescript\nimport { useState } from 'react'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Info } from '@phosphor-icons\u002Freact'\n\ntype PhaseId = 'phase-a' | 'phase-b' | 'phase-c'\n\ninterface PhaseInfo {\n  id: PhaseId\n  label: string\n  icon: React.ReactNode\n  color: string\n  bgColor: string\n  description: string\n}\n\nconst phases: PhaseInfo[] = [\n  {\n    id: 'phase-a',\n    label: 'Phase A',\n    icon: \u003Cspan>?\u003C\u002Fspan>,\n    color: 'text-blue-500',\n    bgColor: 'bg-blue-500\u002F10 border-blue-500\u002F30',\n    description: 'Explanation of this phase.'\n  },\n  \u002F\u002F ... more phases\n]\n\nexport function DiagramNameDiagram() {\n  const [activePhase, setActivePhase] = useState\u003CPhaseId>('phase-a')\n  const selected = phases.find(p => p.id === activePhase) || phases[0]\n\n  return (\n    \u003Cdiv\n      className=\"my-6 space-y-4\"\n      role=\"figure\"\n      data-diagram=\"diagram-name\"\n      aria-label=\"Description. Click each phase to learn more.\"\n    >\n      {\u002F* Phase nodes *\u002F}\n      \u003CCard className=\"p-6 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-center gap-2 mb-4 pb-3 border-b border-border\">\n          \u003Cspan className=\"font-heading font-semibold text-sm text-foreground\">\n            Diagram Title\n          \u003C\u002Fspan>\n          \u003Cspan className=\"ml-auto text-xs text-muted-foreground\">\n            Click a phase to explore\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv className=\"flex items-center justify-center gap-2 py-4 overflow-x-auto\">\n          {phases.map(phase => (\n            \u003Cbutton\n              key={phase.id}\n              onClick={() => setActivePhase(phase.id)}\n              className={`flex flex-col items-center gap-1.5 p-3 rounded-xl border-2 transition-all duration-200 min-w-[80px]\n                ${activePhase === phase.id\n                  ? `${phase.bgColor} border-opacity-100 scale-105 shadow-lg`\n                  : 'bg-muted\u002F30 border-border hover:border-muted-foreground\u002F50'\n                }`}\n            >\n              \u003Cdiv className={`p-2 rounded-lg ${phase.bgColor} ${phase.color}`}>\n                {phase.icon}\n              \u003C\u002Fdiv>\n              \u003Cdiv className=\"font-semibold text-xs text-foreground\">{phase.label}\u003C\u002Fdiv>\n            \u003C\u002Fbutton>\n          ))}\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Phase detail *\u002F}\n      \u003CCard className=\"p-4 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-start gap-3\">\n          \u003Cdiv className={`p-2 rounded-lg ${selected.bgColor} ${selected.color} shrink-0`}>\n            {selected.icon}\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Ch4 className=\"font-semibold text-foreground\">{selected.label}\u003C\u002Fh4>\n            \u003Cp className=\"text-sm text-muted-foreground mt-1 leading-relaxed\">\n              {selected.description}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Key insight *\u002F}\n      \u003Cdiv className=\"flex items-center gap-3 p-4 rounded-lg bg-primary\u002F5 border border-primary\u002F20\">\n        \u003CInfo size={20} className=\"text-primary shrink-0\" \u002F>\n        \u003Cp className=\"text-sm text-foreground\">\n          \u003Cstrong>Key insight.\u003C\u002Fstrong> Explanation.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Design Patterns\n\n### Color System\n\nUse Tailwind's color utility classes with opacity modifiers:\n\n```\nPhase backgrounds: bg-{color}-500\u002F10\nPhase borders:     border-{color}-500\u002F30\nPhase text:        text-{color}-500\n```\n\nStandard phase colors across diagrams:\n- Blue (`blue-500`) — input, start, user action\n- Violet (`violet-500`) — thinking, reasoning, AI processing\n- Amber (`amber-500`) — decision points, warnings\n- Emerald (`emerald-500`) — execution, success, output\n- Cyan (`cyan-500`) — data flow, feedback\n- Rose (`rose-500`) — stop, error, terminal state\n\n### Icons\n\nUse Phosphor Icons (`@phosphor-icons\u002Freact`) with `weight=\"duotone\"` and `size={22}` for phase nodes:\n\n```typescript\nimport { Brain, Code, Eye, Wrench, Lightning } from '@phosphor-icons\u002Freact'\n```\n\n### Accessibility\n\nEvery diagram must have:\n- `role=\"figure\"` on the root element\n- `data-diagram=\"kebab-name\"` for testing\n- `aria-label` describing what the diagram shows\n- Keyboard-accessible interactive elements (use `\u003Cbutton>`, not `\u003Cdiv onClick>`)\n\n### Responsive Design\n\n- Use `overflow-x-auto` on horizontal flow layouts\n- Use `flex-wrap` or stack vertically on mobile for dense diagrams\n- `min-w-[80px]` on phase nodes to prevent squishing\n\n## Step-by-Step: Adding a New Diagram\n\n### Step 1: Create the component\n\nCreate `src\u002Fcomponents\u002Fdiagrams\u002FYourDiagram.tsx` using one of the templates above.\n\n### Step 2: Export from barrel file\n\nAdd to `src\u002Fcomponents\u002Fdiagrams\u002Findex.ts`:\n\n```typescript\nexport { YourDiagram } from '.\u002FYourDiagram'\n```\n\n### Step 3: Register in StepCard.tsx\n\n**3a.** Add import at top of `src\u002Fcomponents\u002FStepCard.tsx`:\n\n```typescript\nimport {\n  FileHierarchyDiagram,\n  \u002F\u002F ... existing imports ...\n  YourDiagram\n} from '.\u002Fdiagrams'\n```\n\n**3b.** Add case in the `renderBlock` function's `case 'diagram':` switch:\n\n```typescript\ncase 'diagram':\n  switch (block.diagramName) {\n    \u002F\u002F ... existing cases ...\n    case 'your-diagram':\n      return \u003CYourDiagram key={idx} \u002F>\n    default:\n      return null\n  }\n```\n\n### Step 4: Reference in markdown\n\nIn the tutorial\u002Fadvanced\u002Fterminal content file:\n\n```markdown\n:::diagram your-diagram\n:::\n```\n\n## Validation\n\n### PowerShell: Verify all diagrams are connected\n\n```powershell\n# Find all :::diagram references in content\n$diagramRefs = Select-String -Path \"src\u002Fcontent\u002F**\u002F*.md\" -Pattern \"^:::diagram\\s+(\\S+)\" -AllMatches |\n  ForEach-Object { $_.Matches.Groups[1].Value } | Sort-Object -Unique\n\n# Find all registered cases in StepCard\n$stepCard = Get-Content \"src\u002Fcomponents\u002FStepCard.tsx\" -Raw\n$registeredCases = [regex]::Matches($stepCard, \"case '([^']+)':\") |\n  ForEach-Object { $_.Groups[1].Value } | Sort-Object -Unique\n\n# Find all exports in index.ts\n$indexExports = Select-String -Path \"src\u002Fcomponents\u002Fdiagrams\u002Findex.ts\" -Pattern \"export \\{ (\\w+) \\}\" |\n  ForEach-Object { $_.Matches.Groups[1].Value }\n\nWrite-Host \"`n=== DIAGRAM AUDIT ===\" -ForegroundColor Cyan\nWrite-Host \"`nMarkdown references:\" -ForegroundColor Yellow\n$diagramRefs | ForEach-Object {\n  $inSwitch = $registeredCases -contains $_\n  $status = if ($inSwitch) { \"OK\" } else { \"MISSING CASE\" }\n  $color = if ($inSwitch) { \"Green\" } else { \"Red\" }\n  Write-Host \"  :::diagram $_ — $status\" -ForegroundColor $color\n}\n\nWrite-Host \"`nExported components:\" -ForegroundColor Yellow\n$indexExports | ForEach-Object { Write-Host \"  $_\" }\n\nWrite-Host \"`n=== END AUDIT ===\" -ForegroundColor Cyan\n```\n\n### Build Check\n\n```powershell\nnpm run build\n```\n\nA missing import or unregistered diagram will cause a build error or silently render nothing (`default: return null`). Always verify the diagram renders in the browser after adding it.\n\n## Checklist\n\nBefore completing a new diagram:\n\n- [ ] Component file created in `src\u002Fcomponents\u002Fdiagrams\u002F`\n- [ ] Named export (not default export)\n- [ ] Exported from `src\u002Fcomponents\u002Fdiagrams\u002Findex.ts`\n- [ ] Imported in `src\u002Fcomponents\u002FStepCard.tsx`\n- [ ] Switch case added in `renderBlock` → `case 'diagram':`\n- [ ] `role=\"figure\"`, `data-diagram`, and `aria-label` present\n- [ ] Interactive elements use `\u003Cbutton>` for keyboard access\n- [ ] Horizontal layouts have `overflow-x-auto`\n- [ ] Renders correctly in both light and dark themes\n- [ ] Referenced in markdown with `:::diagram name` \u002F `:::`\n- [ ] `npm run build` succeeds\n","# Diagram Scaffolder\n\nThis skill generates interactive diagram components that integrate with the tutorial's custom markdown rendering pipeline.\n\n## When to Use This Skill\n\n- When adding a new visual diagram to any tutorial content\n- When creating architectural illustrations (e.g., system diagrams, flow charts)\n- When building interactive visualizations with clickable phases or nodes\n- When a `:::diagram \u003Cname>` block needs a backing React component\n\n## Architecture Overview\n\nAdding a diagram requires coordinated changes across 4 files:\n\n```\n1. src\u002Fcomponents\u002Fdiagrams\u002FNewDiagram.tsx    ← React component\n2. src\u002Fcomponents\u002Fdiagrams\u002Findex.ts          ← Barrel export\n3. src\u002Fcomponents\u002FStepCard.tsx               ← Parser case + import\n4. src\u002Fcontent\u002F**\u002Fmodule-*.md                ← Markdown reference\n```\n\n### Data Flow\n\n```\nMarkdown: :::diagram my-diagram :::\n  → StepCard parseContentBlocks() → { type: 'diagram', diagramName: 'my-diagram' }\n    → renderBlock() switch case → \u003CMyDiagram \u002F>\n```\n\n## Existing Diagrams Registry\n\n| Markdown Name | Component | Used In |\n|---|---|---|\n| `file-hierarchy` | `FileHierarchyDiagram` | Part 3 (Foundation) |\n| `mcp-architecture` | `MCPArchitectureDiagram` | Module A (Advanced) |\n| `workflow-comparison` | `WorkflowComparisonDiagram` | Module B (Advanced) |\n| `agent-orchestration` | `AgentOrchestrationDiagram` | Module C (Advanced) |\n| `ai-testing-flow` | `AITestingFlowDiagram` | Module D (Advanced) |\n| `capstone-architecture` | `CapstoneArchitectureDiagram` | Module E (Advanced) |\n| `agentic-loop` | `AgenticLoopDiagram` | Module G (Terminal) |\n| `provider-abstraction` | `ProviderAbstractionDiagram` | Module G (Terminal) |\n| `skill-system-flow` | `SkillSystemFlowDiagram` | Module G (Terminal) |\n| `spec-driven-cycle` | `SpecDrivenCycleDiagram` | Module G (Terminal) |\n\n## Naming Conventions\n\n| Aspect | Convention | Example |\n|---|---|---|\n| Markdown name | `kebab-case` | `data-flow-pipeline` |\n| Component name | `PascalCase` + `Diagram` suffix | `DataFlowPipelineDiagram` |\n| File name | Same as component | `DataFlowPipelineDiagram.tsx` |\n\nThe markdown name and component name must be related by converting kebab-case to PascalCase and appending `Diagram`.\n\n## Component Template\n\n### Basic Static Diagram\n\n```typescript\nimport { cn } from '@\u002Flib\u002Futils'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Info } from '@phosphor-icons\u002Freact'\n\ninterface DiagramNameDiagramProps {\n  className?: string\n}\n\nexport function DiagramNameDiagram({ className }: DiagramNameDiagramProps) {\n  return (\n    \u003Cdiv\n      className={cn('my-6 space-y-4', className)}\n      role=\"figure\"\n      data-diagram=\"diagram-name\"\n      aria-label=\"Description of what this diagram shows.\"\n    >\n      \u003CCard className=\"p-6 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-center gap-2 mb-4 pb-3 border-b border-border\">\n          {\u002F* Icon + Title *\u002F}\n          \u003Cspan className=\"font-heading font-semibold text-sm text-foreground\">\n            Diagram Title\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        {\u002F* Diagram content *\u002F}\n        \u003Cdiv className=\"font-mono text-sm\">\n          {\u002F* Visual elements go here *\u002F}\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Key insight callout *\u002F}\n      \u003Cdiv className=\"flex items-center gap-3 p-4 rounded-lg bg-primary\u002F5 border border-primary\u002F20\">\n        \u003CInfo size={20} className=\"text-primary shrink-0\" \u002F>\n        \u003Cp className=\"text-sm text-foreground\">\n          \u003Cstrong>Key insight.\u003C\u002Fstrong> Brief explanation of what makes this important.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n### Interactive Diagram (with clickable phases)\n\n```typescript\nimport { useState } from 'react'\nimport { Card } from '@\u002Fcomponents\u002Fui\u002Fcard'\nimport { Info } from '@phosphor-icons\u002Freact'\n\ntype PhaseId = 'phase-a' | 'phase-b' | 'phase-c'\n\ninterface PhaseInfo {\n  id: PhaseId\n  label: string\n  icon: React.ReactNode\n  color: string\n  bgColor: string\n  description: string\n}\n\nconst phases: PhaseInfo[] = [\n  {\n    id: 'phase-a',\n    label: 'Phase A',\n    icon: \u003Cspan>?\u003C\u002Fspan>,\n    color: 'text-blue-500',\n    bgColor: 'bg-blue-500\u002F10 border-blue-500\u002F30',\n    description: 'Explanation of this phase.'\n  },\n  \u002F\u002F ... more phases\n]\n\nexport function DiagramNameDiagram() {\n  const [activePhase, setActivePhase] = useState\u003CPhaseId>('phase-a')\n  const selected = phases.find(p => p.id === activePhase) || phases[0]\n\n  return (\n    \u003Cdiv\n      className=\"my-6 space-y-4\"\n      role=\"figure\"\n      data-diagram=\"diagram-name\"\n      aria-label=\"Description. Click each phase to learn more.\"\n    >\n      {\u002F* Phase nodes *\u002F}\n      \u003CCard className=\"p-6 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-center gap-2 mb-4 pb-3 border-b border-border\">\n          \u003Cspan className=\"font-heading font-semibold text-sm text-foreground\">\n            Diagram Title\n          \u003C\u002Fspan>\n          \u003Cspan className=\"ml-auto text-xs text-muted-foreground\">\n            Click a phase to explore\n          \u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cdiv className=\"flex items-center justify-center gap-2 py-4 overflow-x-auto\">\n          {phases.map(phase => (\n            \u003Cbutton\n              key={phase.id}\n              onClick={() => setActivePhase(phase.id)}\n              className={`flex flex-col items-center gap-1.5 p-3 rounded-xl border-2 transition-all duration-200 min-w-[80px]\n                ${activePhase === phase.id\n                  ? `${phase.bgColor} border-opacity-100 scale-105 shadow-lg`\n                  : 'bg-muted\u002F30 border-border hover:border-muted-foreground\u002F50'\n                }`}\n            >\n              \u003Cdiv className={`p-2 rounded-lg ${phase.bgColor} ${phase.color}`}>\n                {phase.icon}\n              \u003C\u002Fdiv>\n              \u003Cdiv className=\"font-semibold text-xs text-foreground\">{phase.label}\u003C\u002Fdiv>\n            \u003C\u002Fbutton>\n          ))}\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Phase detail *\u002F}\n      \u003CCard className=\"p-4 bg-muted\u002F30 border-border\">\n        \u003Cdiv className=\"flex items-start gap-3\">\n          \u003Cdiv className={`p-2 rounded-lg ${selected.bgColor} ${selected.color} shrink-0`}>\n            {selected.icon}\n          \u003C\u002Fdiv>\n          \u003Cdiv>\n            \u003Ch4 className=\"font-semibold text-foreground\">{selected.label}\u003C\u002Fh4>\n            \u003Cp className=\"text-sm text-muted-foreground mt-1 leading-relaxed\">\n              {selected.description}\n            \u003C\u002Fp>\n          \u003C\u002Fdiv>\n        \u003C\u002Fdiv>\n      \u003C\u002FCard>\n\n      {\u002F* Key insight *\u002F}\n      \u003Cdiv className=\"flex items-center gap-3 p-4 rounded-lg bg-primary\u002F5 border border-primary\u002F20\">\n        \u003CInfo size={20} className=\"text-primary shrink-0\" \u002F>\n        \u003Cp className=\"text-sm text-foreground\">\n          \u003Cstrong>Key insight.\u003C\u002Fstrong> Explanation.\n        \u003C\u002Fp>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n```\n\n## Design Patterns\n\n### Color System\n\nUse Tailwind's color utility classes with opacity modifiers:\n\n```\nPhase backgrounds: bg-{color}-500\u002F10\nPhase borders:     border-{color}-500\u002F30\nPhase text:        text-{color}-500\n```\n\nStandard phase colors across diagrams:\n- Blue (`blue-500`) — input, start, user action\n- Violet (`violet-500`) — thinking, reasoning, AI processing\n- Amber (`amber-500`) — decision points, warnings\n- Emerald (`emerald-500`) — execution, success, output\n- Cyan (`cyan-500`) — data flow, feedback\n- Rose (`rose-500`) — stop, error, terminal state\n\n### Icons\n\nUse Phosphor Icons (`@phosphor-icons\u002Freact`) with `weight=\"duotone\"` and `size={22}` for phase nodes:\n\n```typescript\nimport { Brain, Code, Eye, Wrench, Lightning } from '@phosphor-icons\u002Freact'\n```\n\n### Accessibility\n\nEvery diagram must have:\n- `role=\"figure\"` on the root element\n- `data-diagram=\"kebab-name\"` for testing\n- `aria-label` describing what the diagram shows\n- Keyboard-accessible interactive elements (use `\u003Cbutton>`, not `\u003Cdiv onClick>`)\n\n### Responsive Design\n\n- Use `overflow-x-auto` on horizontal flow layouts\n- Use `flex-wrap` or stack vertically on mobile for dense diagrams\n- `min-w-[80px]` on phase nodes to prevent squishing\n\n## Step-by-Step: Adding a New Diagram\n\n### Step 1: Create the component\n\nCreate `src\u002Fcomponents\u002Fdiagrams\u002FYourDiagram.tsx` using one of the templates above.\n\n### Step 2: Export from barrel file\n\nAdd to `src\u002Fcomponents\u002Fdiagrams\u002Findex.ts`:\n\n```typescript\nexport { YourDiagram } from '.\u002FYourDiagram'\n```\n\n### Step 3: Register in StepCard.tsx\n\n**3a.** Add import at top of `src\u002Fcomponents\u002FStepCard.tsx`:\n\n```typescript\nimport {\n  FileHierarchyDiagram,\n  \u002F\u002F ... existing imports ...\n  YourDiagram\n} from '.\u002Fdiagrams'\n```\n\n**3b.** Add case in the `renderBlock` function's `case 'diagram':` switch:\n\n```typescript\ncase 'diagram':\n  switch (block.diagramName) {\n    \u002F\u002F ... existing cases ...\n    case 'your-diagram':\n      return \u003CYourDiagram key={idx} \u002F>\n    default:\n      return null\n  }\n```\n\n### Step 4: Reference in markdown\n\nIn the tutorial\u002Fadvanced\u002Fterminal content file:\n\n```markdown\n:::diagram your-diagram\n:::\n```\n\n## Validation\n\n### PowerShell: Verify all diagrams are connected\n\n```powershell\n# Find all :::diagram references in content\n$diagramRefs = Select-String -Path \"src\u002Fcontent\u002F**\u002F*.md\" -Pattern \"^:::diagram\\s+(\\S+)\" -AllMatches |\n  ForEach-Object { $_.Matches.Groups[1].Value } | Sort-Object -Unique\n\n# Find all registered cases in StepCard\n$stepCard = Get-Content \"src\u002Fcomponents\u002FStepCard.tsx\" -Raw\n$registeredCases = [regex]::Matches($stepCard, \"case '([^']+)':\") |\n  ForEach-Object { $_.Groups[1].Value } | Sort-Object -Unique\n\n# Find all exports in index.ts\n$indexExports = Select-String -Path \"src\u002Fcomponents\u002Fdiagrams\u002Findex.ts\" -Pattern \"export \\{ (\\w+) \\}\" |\n  ForEach-Object { $_.Matches.Groups[1].Value }\n\nWrite-Host \"`n=== DIAGRAM AUDIT ===\" -ForegroundColor Cyan\nWrite-Host \"`nMarkdown references:\" -ForegroundColor Yellow\n$diagramRefs | ForEach-Object {\n  $inSwitch = $registeredCases -contains $_\n  $status = if ($inSwitch) { \"OK\" } else { \"MISSING CASE\" }\n  $color = if ($inSwitch) { \"Green\" } else { \"Red\" }\n  Write-Host \"  :::diagram $_ — $status\" -ForegroundColor $color\n}\n\nWrite-Host \"`nExported components:\" -ForegroundColor Yellow\n$indexExports | ForEach-Object { Write-Host \"  $_\" }\n\nWrite-Host \"`n=== END AUDIT ===\" -ForegroundColor Cyan\n```\n\n### Build Check\n\n```powershell\nnpm run build\n```\n\nA missing import or unregistered diagram will cause a build error or silently render nothing (`default: return null`). Always verify the diagram renders in the browser after adding it.\n\n## Checklist\n\nBefore completing a new diagram:\n\n- [ ] Component file created in `src\u002Fcomponents\u002Fdiagrams\u002F`\n- [ ] Named export (not default export)\n- [ ] Exported from `src\u002Fcomponents\u002Fdiagrams\u002Findex.ts`\n- [ ] Imported in `src\u002Fcomponents\u002FStepCard.tsx`\n- [ ] Switch case added in `renderBlock` → `case 'diagram':`\n- [ ] `role=\"figure\"`, `data-diagram`, and `aria-label` present\n- [ ] Interactive elements use `\u003Cbutton>` for keyboard access\n- [ ] Horizontal layouts have `overflow-x-auto`\n- [ ] Renders correctly in both light and dark themes\n- [ ] Referenced in markdown with `:::diagram name` \u002F `:::`\n- [ ] `npm run build` succeeds\n",{"name":5,"description":7},"main","d88d026d964974e431125933a0168778e2023b69",".github\u002Fskills\u002Fdiagram-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":41,"prompt":51,"zipAvailable":52},[42,45,48],{"tool":43,"command":44},"npx","npx skills add microsoft\u002Flearn-ai-native-dev --skill diagram-scaffolder",{"tool":46,"command":47},"bunx","bunx skills add microsoft\u002Flearn-ai-native-dev --skill diagram-scaffolder",{"tool":49,"command":50},"pnpm","pnpm dlx skills add microsoft\u002Flearn-ai-native-dev --skill diagram-scaffolder","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fdiagram-scaffolder\u002FSKILL.md",true,[54,60],{"path":55,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":58,"sourceHtmlUrl":59},"scripts\u002Fanisotropy_check.py","SCRIPT","脚本",7626,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fembedding-anisotropy-check\u002Fscripts\u002Fanisotropy_check.py",{"path":61,"resourceType":56,"resourceTypeDesc":57,"sizeBytes":62,"sourceHtmlUrl":63},"scripts\u002Fexample_scifact_halves.py",2494,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fawesome-copilot\u002Fblob\u002Fmain\u002Fskills\u002Fembedding-anisotropy-check\u002Fscripts\u002Fexample_scifact_halves.py",[65,85,101,110,119,134],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":76,"publishedAt":26},"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",[71],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[77,78,79,80,81,82,83,84],"version checker","github","github copilot","validate","cli","MCP","copilot","code",{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":96,"publishedAt":26},"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",[91],{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[97,98,99,100],"qa","tutorial content qa","development","terminal",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":26},"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",[],[108,25,24,109],"track generator","typescript",{"skillNo":111,"name":112,"nameZh":6,"description":113,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":117,"publishedAt":26},"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",[116],{"categoryNo":72,"categoryName":73,"taxonomyType":74,"taxonomyTypeDesc":75},[118,25,24,99],"exercise scaffolder",{"skillNo":120,"name":121,"nameZh":6,"description":122,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":123,"categories":124,"keywords":125,"publishedAt":26},"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",[],[126,127,128,129,130,84,131,78,132,133],"docs sync","sync","docs","release","report","update","spec","design",{"skillNo":135,"name":136,"nameZh":6,"description":137,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":138,"categories":139,"keywords":141,"publishedAt":26},"01M69BWRX43VF0KSGZDC2AFXBX","content-track-scaffolder","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\".","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Flearn-ai-native-dev\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcontent-track-scaffolder\u002FSKILL.md",[140],{"categoryNo":92,"categoryName":93,"taxonomyType":94,"taxonomyTypeDesc":95},[142,100,24,143,21],"content track scaffolder","scaffold"]