[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-microsoft-setup-component-explorer":3,"mdc-z52mp7-key":31,"related-repo-microsoft-setup-component-explorer":2401,"related-org-microsoft-setup-component-explorer":2496},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":20,"repoUrl":21,"updatedAt":22,"license":23,"forks":24,"topics":25,"repo":26,"sourceUrl":29,"mdContent":30},"setup-component-explorer","integrate component explorer into Vite projects","Set up and integrate the Component Explorer into a vite based project.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"microsoft","Microsoft","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fmicrosoft.png",[12,14,17],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"Vite","vite",{"name":18,"slug":19,"type":13},"UI Components","ui-components",25,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode-team-kit","2026-07-07T06:54:17.462421",null,5,[],{"repoUrl":21,"stars":20,"forks":24,"topics":27,"description":28},[],"Plugins the VS Code team uses","https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fvscode-team-kit\u002Ftree\u002FHEAD\u002Fcomponent-explorer\u002Fskills\u002Fsetup-component-explorer","---\nname: setup-component-explorer\ndescription: Set up and integrate the Component Explorer into a vite based project.\n---\n\n# Skill: Setup Component Explorer\n\nWhen the user asks to add, set up, or integrate the component explorer into their project, follow this guide.\n\n## Prerequisites\n\n- The project uses **Vite** as its bundler\n- Node.js >= 22\n\n## Step 1: Install Packages\n\n```bash\nnpm install @vscode\u002Fcomponent-explorer @vscode\u002Fcomponent-explorer-cli @vscode\u002Fcomponent-explorer-vite-plugin\n```\n\nUse the project's package manager (npm, pnpm, yarn). For workspace monorepos, install into the package that owns the Vite config.\n\n## Step 2: Configure Vite Plugin\n\nAdd `componentExplorer()` to `vite.config.ts`:\n\n```ts\nimport { componentExplorer } from '@vscode\u002Fcomponent-explorer-vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    \u002F\u002F ... existing plugins (react, tailwind, etc.)\n    componentExplorer(),\n  ],\n});\n```\n\n### Plugin Options\n\n| Option | Default | Description |\n|--------|---------|-------------|\n| `include` | `'.\u002Fsrc\u002F**\u002F*.fixture.{ts,tsx}'` | Glob pattern for fixture files |\n| `route` | `'\u002F___explorer'` | URL path for the explorer UI |\n| `build` | `'app-only'` | Build mode: `'app-only'`, `'all'`, or `'explorer-only'` |\n| `outFile` | `'___explorer.html'` | Output filename for built explorer |\n| `logLevel` | `'info'` | `'silent'`, `'info'`, `'verbose'`, `'warn'`, `'error'` |\n\nFor projects where fixtures live outside `.\u002F`, set `include` explicitly:\n\n```ts\ncomponentExplorer({\n  include: '.\u002Ftest\u002F**\u002F*.fixture.{ts,tsx,js,jsx}',\n}),\n```\n\n## Step 3: Create `component-explorer.json`\n\nCreate a configuration file for the CLI\u002Fdaemon\u002FMCP features (place next to the Vite config or at the project root):\n\n```json\n{\n  \"$schema\": \".\u002Fnode_modules\u002F@vscode\u002Fcomponent-explorer-cli\u002Fdist\u002Fcomponent-explorer-config.schema.json\",\n  \"screenshotDir\": \".screenshots\",\n  \"viteConfig\": \".\u002Fvite.config.ts\",\n  \n  \u002F\u002F If you need a stable port, configure the redirection server port (required for the launch config in Step 6):\n  \"redirection\": { \"port\": 5331 }\n}\n```\n\n## Step 4: Configure VS Code — MCP Server\n\nCreate or update `.vscode\u002Fmcp.json` to add the component explorer MCP server. This enables AI agents to take screenshots, compare fixtures, and interact with components:\n\n```json\n{\n  \"servers\": {\n    \"component-explorer\": {\n      \"type\": \"stdio\",\n      \"command\": \"npm\",\n      \"args\": [\n        \"exec\",\n        \"component-explorer\",\n        \"--no\",\n        \"--\",\n        \"mcp\",\n        \"-p\",\n        \".\u002Fcomponent-explorer.json\"\n      ]\n    }\n  }\n}\n```\n\nAdjust the `-p` path to point to the `component-explorer.json` location relative to cwd.\n\n## Step 5: Configure VS Code — Component Explorer Server Task\n\nAdd a task to `.vscode\u002Ftasks.json` to start the component explorer server:\n\n```json\n{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"label\": \"Component Explorer Server\",\n      \"type\": \"shell\",\n      \"command\": \".\u002Fnode_modules\u002F.bin\u002Fcomponent-explorer serve -p .\u002Fcomponent-explorer.json --kill-if-running\",\n      \"isBackground\": true,\n      \"problemMatcher\": {\n        \"owner\": \"component-explorer\",\n        \"fileLocation\": \"absolute\",\n        \"pattern\": {\n          \"regexp\": \"^\\\\s*at\\\\s+(.+?):(\\\\d+):(\\\\d+)\\\\s*$\",\n          \"file\": 1,\n          \"line\": 2,\n          \"column\": 3\n        },\n        \"background\": {\n          \"activeOnStart\": true,\n          \"beginsPattern\": \".*Setting up sessions.*\",\n          \"endsPattern\": \"Redirection server listening on.*\"\n        }\n      }\n    }\n  ]\n}\n```\n\nIf other tasks already exist, merge the new task into the existing `tasks` array.\n\n\n## Step 6: Configure VS Code — Launch Configuration (Optional)\n\nTo open the component explorer UI in Chrome, add a launch configuration to `.vscode\u002Flaunch.json`:\n\n```json\n{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Component Explorer (Chrome)\",\n      \"type\": \"chrome\",\n      \"request\": \"launch\",\n      \"url\": \"http:\u002F\u002Flocalhost:5331\u002F___explorer\",\n      \"preLaunchTask\": \"Component Explorer Server\"\n    }\n  ]\n}\n```\n\nThis requires the `redirection` port to be configured in `component-explorer.json` (see Step 3). The `preLaunchTask` starts the daemon automatically before opening the browser.\n\nIf other launch configurations already exist, merge the new configuration into the existing `configurations` array.\n\n\n## Step 7: Create a First Fixture and Verify\n\nUse the **use-component-explorer** skill for guidance on writing fixtures, including project-specific wrapper functions and best practices.\n\nCreate a `.fixture.tsx` (or `.fixture.ts`) file to verify the setup works:\n\n1. Start the dev server: `npx vite` (or `pnpm dev`, etc.)\n2. Open `http:\u002F\u002Flocalhost:5173\u002F___explorer` to see the explorer UI.\n3. Run the \"Component Explorer Server\" VS Code task (or the launch configuration) to start the server.\n4. Verify the MCP server connects (Copilot can now `list_fixtures`, `screenshot`, etc.).\n",{"data":32,"body":33},{"name":4,"description":6},{"type":34,"children":35},"root",[36,45,51,58,80,86,131,136,142,163,341,348,563,583,650,662,667,874,880,893,1232,1251,1257,1270,1946,1958,1964,1976,2257,2283,2294,2300,2312,2333,2395],{"type":37,"tag":38,"props":39,"children":41},"element","h1",{"id":40},"skill-setup-component-explorer",[42],{"type":43,"value":44},"text","Skill: Setup Component Explorer",{"type":37,"tag":46,"props":47,"children":48},"p",{},[49],{"type":43,"value":50},"When the user asks to add, set up, or integrate the component explorer into their project, follow this guide.",{"type":37,"tag":52,"props":53,"children":55},"h2",{"id":54},"prerequisites",[56],{"type":43,"value":57},"Prerequisites",{"type":37,"tag":59,"props":60,"children":61},"ul",{},[62,75],{"type":37,"tag":63,"props":64,"children":65},"li",{},[66,68,73],{"type":43,"value":67},"The project uses ",{"type":37,"tag":69,"props":70,"children":71},"strong",{},[72],{"type":43,"value":15},{"type":43,"value":74}," as its bundler",{"type":37,"tag":63,"props":76,"children":77},{},[78],{"type":43,"value":79},"Node.js >= 22",{"type":37,"tag":52,"props":81,"children":83},{"id":82},"step-1-install-packages",[84],{"type":43,"value":85},"Step 1: Install Packages",{"type":37,"tag":87,"props":88,"children":93},"pre",{"className":89,"code":90,"language":91,"meta":92,"style":92},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @vscode\u002Fcomponent-explorer @vscode\u002Fcomponent-explorer-cli @vscode\u002Fcomponent-explorer-vite-plugin\n","bash","",[94],{"type":37,"tag":95,"props":96,"children":97},"code",{"__ignoreMap":92},[98],{"type":37,"tag":99,"props":100,"children":103},"span",{"class":101,"line":102},"line",1,[104,110,116,121,126],{"type":37,"tag":99,"props":105,"children":107},{"style":106},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[108],{"type":43,"value":109},"npm",{"type":37,"tag":99,"props":111,"children":113},{"style":112},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[114],{"type":43,"value":115}," install",{"type":37,"tag":99,"props":117,"children":118},{"style":112},[119],{"type":43,"value":120}," @vscode\u002Fcomponent-explorer",{"type":37,"tag":99,"props":122,"children":123},{"style":112},[124],{"type":43,"value":125}," @vscode\u002Fcomponent-explorer-cli",{"type":37,"tag":99,"props":127,"children":128},{"style":112},[129],{"type":43,"value":130}," @vscode\u002Fcomponent-explorer-vite-plugin\n",{"type":37,"tag":46,"props":132,"children":133},{},[134],{"type":43,"value":135},"Use the project's package manager (npm, pnpm, yarn). For workspace monorepos, install into the package that owns the Vite config.",{"type":37,"tag":52,"props":137,"children":139},{"id":138},"step-2-configure-vite-plugin",[140],{"type":43,"value":141},"Step 2: Configure Vite Plugin",{"type":37,"tag":46,"props":143,"children":144},{},[145,147,153,155,161],{"type":43,"value":146},"Add ",{"type":37,"tag":95,"props":148,"children":150},{"className":149},[],[151],{"type":43,"value":152},"componentExplorer()",{"type":43,"value":154}," to ",{"type":37,"tag":95,"props":156,"children":158},{"className":157},[],[159],{"type":43,"value":160},"vite.config.ts",{"type":43,"value":162},":",{"type":37,"tag":87,"props":164,"children":168},{"className":165,"code":166,"language":167,"meta":92,"style":92},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { componentExplorer } from '@vscode\u002Fcomponent-explorer-vite-plugin';\n\nexport default defineConfig({\n  plugins: [\n    \u002F\u002F ... existing plugins (react, tailwind, etc.)\n    componentExplorer(),\n  ],\n});\n","ts",[169],{"type":37,"tag":95,"props":170,"children":171},{"__ignoreMap":92},[172,223,233,263,282,291,310,323],{"type":37,"tag":99,"props":173,"children":174},{"class":101,"line":102},[175,181,187,193,198,203,208,213,218],{"type":37,"tag":99,"props":176,"children":178},{"style":177},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[179],{"type":43,"value":180},"import",{"type":37,"tag":99,"props":182,"children":184},{"style":183},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[185],{"type":43,"value":186}," {",{"type":37,"tag":99,"props":188,"children":190},{"style":189},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[191],{"type":43,"value":192}," componentExplorer",{"type":37,"tag":99,"props":194,"children":195},{"style":183},[196],{"type":43,"value":197}," }",{"type":37,"tag":99,"props":199,"children":200},{"style":177},[201],{"type":43,"value":202}," from",{"type":37,"tag":99,"props":204,"children":205},{"style":183},[206],{"type":43,"value":207}," '",{"type":37,"tag":99,"props":209,"children":210},{"style":112},[211],{"type":43,"value":212},"@vscode\u002Fcomponent-explorer-vite-plugin",{"type":37,"tag":99,"props":214,"children":215},{"style":183},[216],{"type":43,"value":217},"'",{"type":37,"tag":99,"props":219,"children":220},{"style":183},[221],{"type":43,"value":222},";\n",{"type":37,"tag":99,"props":224,"children":226},{"class":101,"line":225},2,[227],{"type":37,"tag":99,"props":228,"children":230},{"emptyLinePlaceholder":229},true,[231],{"type":43,"value":232},"\n",{"type":37,"tag":99,"props":234,"children":236},{"class":101,"line":235},3,[237,242,247,253,258],{"type":37,"tag":99,"props":238,"children":239},{"style":177},[240],{"type":43,"value":241},"export",{"type":37,"tag":99,"props":243,"children":244},{"style":177},[245],{"type":43,"value":246}," default",{"type":37,"tag":99,"props":248,"children":250},{"style":249},"--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF",[251],{"type":43,"value":252}," defineConfig",{"type":37,"tag":99,"props":254,"children":255},{"style":189},[256],{"type":43,"value":257},"(",{"type":37,"tag":99,"props":259,"children":260},{"style":183},[261],{"type":43,"value":262},"{\n",{"type":37,"tag":99,"props":264,"children":266},{"class":101,"line":265},4,[267,273,277],{"type":37,"tag":99,"props":268,"children":270},{"style":269},"--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178",[271],{"type":43,"value":272},"  plugins",{"type":37,"tag":99,"props":274,"children":275},{"style":183},[276],{"type":43,"value":162},{"type":37,"tag":99,"props":278,"children":279},{"style":189},[280],{"type":43,"value":281}," [\n",{"type":37,"tag":99,"props":283,"children":284},{"class":101,"line":24},[285],{"type":37,"tag":99,"props":286,"children":288},{"style":287},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[289],{"type":43,"value":290},"    \u002F\u002F ... existing plugins (react, tailwind, etc.)\n",{"type":37,"tag":99,"props":292,"children":294},{"class":101,"line":293},6,[295,300,305],{"type":37,"tag":99,"props":296,"children":297},{"style":249},[298],{"type":43,"value":299},"    componentExplorer",{"type":37,"tag":99,"props":301,"children":302},{"style":189},[303],{"type":43,"value":304},"()",{"type":37,"tag":99,"props":306,"children":307},{"style":183},[308],{"type":43,"value":309},",\n",{"type":37,"tag":99,"props":311,"children":313},{"class":101,"line":312},7,[314,319],{"type":37,"tag":99,"props":315,"children":316},{"style":189},[317],{"type":43,"value":318},"  ]",{"type":37,"tag":99,"props":320,"children":321},{"style":183},[322],{"type":43,"value":309},{"type":37,"tag":99,"props":324,"children":326},{"class":101,"line":325},8,[327,332,337],{"type":37,"tag":99,"props":328,"children":329},{"style":183},[330],{"type":43,"value":331},"}",{"type":37,"tag":99,"props":333,"children":334},{"style":189},[335],{"type":43,"value":336},")",{"type":37,"tag":99,"props":338,"children":339},{"style":183},[340],{"type":43,"value":222},{"type":37,"tag":342,"props":343,"children":345},"h3",{"id":344},"plugin-options",[346],{"type":43,"value":347},"Plugin Options",{"type":37,"tag":349,"props":350,"children":351},"table",{},[352,376],{"type":37,"tag":353,"props":354,"children":355},"thead",{},[356],{"type":37,"tag":357,"props":358,"children":359},"tr",{},[360,366,371],{"type":37,"tag":361,"props":362,"children":363},"th",{},[364],{"type":43,"value":365},"Option",{"type":37,"tag":361,"props":367,"children":368},{},[369],{"type":43,"value":370},"Default",{"type":37,"tag":361,"props":372,"children":373},{},[374],{"type":43,"value":375},"Description",{"type":37,"tag":377,"props":378,"children":379},"tbody",{},[380,407,433,480,506],{"type":37,"tag":357,"props":381,"children":382},{},[383,393,402],{"type":37,"tag":384,"props":385,"children":386},"td",{},[387],{"type":37,"tag":95,"props":388,"children":390},{"className":389},[],[391],{"type":43,"value":392},"include",{"type":37,"tag":384,"props":394,"children":395},{},[396],{"type":37,"tag":95,"props":397,"children":399},{"className":398},[],[400],{"type":43,"value":401},"'.\u002Fsrc\u002F**\u002F*.fixture.{ts,tsx}'",{"type":37,"tag":384,"props":403,"children":404},{},[405],{"type":43,"value":406},"Glob pattern for fixture files",{"type":37,"tag":357,"props":408,"children":409},{},[410,419,428],{"type":37,"tag":384,"props":411,"children":412},{},[413],{"type":37,"tag":95,"props":414,"children":416},{"className":415},[],[417],{"type":43,"value":418},"route",{"type":37,"tag":384,"props":420,"children":421},{},[422],{"type":37,"tag":95,"props":423,"children":425},{"className":424},[],[426],{"type":43,"value":427},"'\u002F___explorer'",{"type":37,"tag":384,"props":429,"children":430},{},[431],{"type":43,"value":432},"URL path for the explorer UI",{"type":37,"tag":357,"props":434,"children":435},{},[436,445,454],{"type":37,"tag":384,"props":437,"children":438},{},[439],{"type":37,"tag":95,"props":440,"children":442},{"className":441},[],[443],{"type":43,"value":444},"build",{"type":37,"tag":384,"props":446,"children":447},{},[448],{"type":37,"tag":95,"props":449,"children":451},{"className":450},[],[452],{"type":43,"value":453},"'app-only'",{"type":37,"tag":384,"props":455,"children":456},{},[457,459,464,466,472,474],{"type":43,"value":458},"Build mode: ",{"type":37,"tag":95,"props":460,"children":462},{"className":461},[],[463],{"type":43,"value":453},{"type":43,"value":465},", ",{"type":37,"tag":95,"props":467,"children":469},{"className":468},[],[470],{"type":43,"value":471},"'all'",{"type":43,"value":473},", or ",{"type":37,"tag":95,"props":475,"children":477},{"className":476},[],[478],{"type":43,"value":479},"'explorer-only'",{"type":37,"tag":357,"props":481,"children":482},{},[483,492,501],{"type":37,"tag":384,"props":484,"children":485},{},[486],{"type":37,"tag":95,"props":487,"children":489},{"className":488},[],[490],{"type":43,"value":491},"outFile",{"type":37,"tag":384,"props":493,"children":494},{},[495],{"type":37,"tag":95,"props":496,"children":498},{"className":497},[],[499],{"type":43,"value":500},"'___explorer.html'",{"type":37,"tag":384,"props":502,"children":503},{},[504],{"type":43,"value":505},"Output filename for built explorer",{"type":37,"tag":357,"props":507,"children":508},{},[509,518,527],{"type":37,"tag":384,"props":510,"children":511},{},[512],{"type":37,"tag":95,"props":513,"children":515},{"className":514},[],[516],{"type":43,"value":517},"logLevel",{"type":37,"tag":384,"props":519,"children":520},{},[521],{"type":37,"tag":95,"props":522,"children":524},{"className":523},[],[525],{"type":43,"value":526},"'info'",{"type":37,"tag":384,"props":528,"children":529},{},[530,536,537,542,543,549,550,556,557],{"type":37,"tag":95,"props":531,"children":533},{"className":532},[],[534],{"type":43,"value":535},"'silent'",{"type":43,"value":465},{"type":37,"tag":95,"props":538,"children":540},{"className":539},[],[541],{"type":43,"value":526},{"type":43,"value":465},{"type":37,"tag":95,"props":544,"children":546},{"className":545},[],[547],{"type":43,"value":548},"'verbose'",{"type":43,"value":465},{"type":37,"tag":95,"props":551,"children":553},{"className":552},[],[554],{"type":43,"value":555},"'warn'",{"type":43,"value":465},{"type":37,"tag":95,"props":558,"children":560},{"className":559},[],[561],{"type":43,"value":562},"'error'",{"type":37,"tag":46,"props":564,"children":565},{},[566,568,574,576,581],{"type":43,"value":567},"For projects where fixtures live outside ",{"type":37,"tag":95,"props":569,"children":571},{"className":570},[],[572],{"type":43,"value":573},".\u002F",{"type":43,"value":575},", set ",{"type":37,"tag":95,"props":577,"children":579},{"className":578},[],[580],{"type":43,"value":392},{"type":43,"value":582}," explicitly:",{"type":37,"tag":87,"props":584,"children":586},{"className":165,"code":585,"language":167,"meta":92,"style":92},"componentExplorer({\n  include: '.\u002Ftest\u002F**\u002F*.fixture.{ts,tsx,js,jsx}',\n}),\n",[587],{"type":37,"tag":95,"props":588,"children":589},{"__ignoreMap":92},[590,606,635],{"type":37,"tag":99,"props":591,"children":592},{"class":101,"line":102},[593,598,602],{"type":37,"tag":99,"props":594,"children":595},{"style":249},[596],{"type":43,"value":597},"componentExplorer",{"type":37,"tag":99,"props":599,"children":600},{"style":189},[601],{"type":43,"value":257},{"type":37,"tag":99,"props":603,"children":604},{"style":183},[605],{"type":43,"value":262},{"type":37,"tag":99,"props":607,"children":608},{"class":101,"line":225},[609,614,618,622,627,631],{"type":37,"tag":99,"props":610,"children":611},{"style":269},[612],{"type":43,"value":613},"  include",{"type":37,"tag":99,"props":615,"children":616},{"style":183},[617],{"type":43,"value":162},{"type":37,"tag":99,"props":619,"children":620},{"style":183},[621],{"type":43,"value":207},{"type":37,"tag":99,"props":623,"children":624},{"style":112},[625],{"type":43,"value":626},".\u002Ftest\u002F**\u002F*.fixture.{ts,tsx,js,jsx}",{"type":37,"tag":99,"props":628,"children":629},{"style":183},[630],{"type":43,"value":217},{"type":37,"tag":99,"props":632,"children":633},{"style":183},[634],{"type":43,"value":309},{"type":37,"tag":99,"props":636,"children":637},{"class":101,"line":235},[638,642,646],{"type":37,"tag":99,"props":639,"children":640},{"style":183},[641],{"type":43,"value":331},{"type":37,"tag":99,"props":643,"children":644},{"style":189},[645],{"type":43,"value":336},{"type":37,"tag":99,"props":647,"children":648},{"style":183},[649],{"type":43,"value":309},{"type":37,"tag":52,"props":651,"children":653},{"id":652},"step-3-create-component-explorerjson",[654,656],{"type":43,"value":655},"Step 3: Create ",{"type":37,"tag":95,"props":657,"children":659},{"className":658},[],[660],{"type":43,"value":661},"component-explorer.json",{"type":37,"tag":46,"props":663,"children":664},{},[665],{"type":43,"value":666},"Create a configuration file for the CLI\u002Fdaemon\u002FMCP features (place next to the Vite config or at the project root):",{"type":37,"tag":87,"props":668,"children":672},{"className":669,"code":670,"language":671,"meta":92,"style":92},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n  \"$schema\": \".\u002Fnode_modules\u002F@vscode\u002Fcomponent-explorer-cli\u002Fdist\u002Fcomponent-explorer-config.schema.json\",\n  \"screenshotDir\": \".screenshots\",\n  \"viteConfig\": \".\u002Fvite.config.ts\",\n  \n  \u002F\u002F If you need a stable port, configure the redirection server port (required for the launch config in Step 6):\n  \"redirection\": { \"port\": 5331 }\n}\n","json",[673],{"type":37,"tag":95,"props":674,"children":675},{"__ignoreMap":92},[676,683,724,761,798,806,814,866],{"type":37,"tag":99,"props":677,"children":678},{"class":101,"line":102},[679],{"type":37,"tag":99,"props":680,"children":681},{"style":183},[682],{"type":43,"value":262},{"type":37,"tag":99,"props":684,"children":685},{"class":101,"line":225},[686,691,697,702,706,711,716,720],{"type":37,"tag":99,"props":687,"children":688},{"style":183},[689],{"type":43,"value":690},"  \"",{"type":37,"tag":99,"props":692,"children":694},{"style":693},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[695],{"type":43,"value":696},"$schema",{"type":37,"tag":99,"props":698,"children":699},{"style":183},[700],{"type":43,"value":701},"\"",{"type":37,"tag":99,"props":703,"children":704},{"style":183},[705],{"type":43,"value":162},{"type":37,"tag":99,"props":707,"children":708},{"style":183},[709],{"type":43,"value":710}," \"",{"type":37,"tag":99,"props":712,"children":713},{"style":112},[714],{"type":43,"value":715},".\u002Fnode_modules\u002F@vscode\u002Fcomponent-explorer-cli\u002Fdist\u002Fcomponent-explorer-config.schema.json",{"type":37,"tag":99,"props":717,"children":718},{"style":183},[719],{"type":43,"value":701},{"type":37,"tag":99,"props":721,"children":722},{"style":183},[723],{"type":43,"value":309},{"type":37,"tag":99,"props":725,"children":726},{"class":101,"line":235},[727,731,736,740,744,748,753,757],{"type":37,"tag":99,"props":728,"children":729},{"style":183},[730],{"type":43,"value":690},{"type":37,"tag":99,"props":732,"children":733},{"style":693},[734],{"type":43,"value":735},"screenshotDir",{"type":37,"tag":99,"props":737,"children":738},{"style":183},[739],{"type":43,"value":701},{"type":37,"tag":99,"props":741,"children":742},{"style":183},[743],{"type":43,"value":162},{"type":37,"tag":99,"props":745,"children":746},{"style":183},[747],{"type":43,"value":710},{"type":37,"tag":99,"props":749,"children":750},{"style":112},[751],{"type":43,"value":752},".screenshots",{"type":37,"tag":99,"props":754,"children":755},{"style":183},[756],{"type":43,"value":701},{"type":37,"tag":99,"props":758,"children":759},{"style":183},[760],{"type":43,"value":309},{"type":37,"tag":99,"props":762,"children":763},{"class":101,"line":265},[764,768,773,777,781,785,790,794],{"type":37,"tag":99,"props":765,"children":766},{"style":183},[767],{"type":43,"value":690},{"type":37,"tag":99,"props":769,"children":770},{"style":693},[771],{"type":43,"value":772},"viteConfig",{"type":37,"tag":99,"props":774,"children":775},{"style":183},[776],{"type":43,"value":701},{"type":37,"tag":99,"props":778,"children":779},{"style":183},[780],{"type":43,"value":162},{"type":37,"tag":99,"props":782,"children":783},{"style":183},[784],{"type":43,"value":710},{"type":37,"tag":99,"props":786,"children":787},{"style":112},[788],{"type":43,"value":789},".\u002Fvite.config.ts",{"type":37,"tag":99,"props":791,"children":792},{"style":183},[793],{"type":43,"value":701},{"type":37,"tag":99,"props":795,"children":796},{"style":183},[797],{"type":43,"value":309},{"type":37,"tag":99,"props":799,"children":800},{"class":101,"line":24},[801],{"type":37,"tag":99,"props":802,"children":803},{"style":189},[804],{"type":43,"value":805},"  \n",{"type":37,"tag":99,"props":807,"children":808},{"class":101,"line":293},[809],{"type":37,"tag":99,"props":810,"children":811},{"style":287},[812],{"type":43,"value":813},"  \u002F\u002F If you need a stable port, configure the redirection server port (required for the launch config in Step 6):\n",{"type":37,"tag":99,"props":815,"children":816},{"class":101,"line":312},[817,821,826,830,834,838,842,847,851,855,861],{"type":37,"tag":99,"props":818,"children":819},{"style":183},[820],{"type":43,"value":690},{"type":37,"tag":99,"props":822,"children":823},{"style":693},[824],{"type":43,"value":825},"redirection",{"type":37,"tag":99,"props":827,"children":828},{"style":183},[829],{"type":43,"value":701},{"type":37,"tag":99,"props":831,"children":832},{"style":183},[833],{"type":43,"value":162},{"type":37,"tag":99,"props":835,"children":836},{"style":183},[837],{"type":43,"value":186},{"type":37,"tag":99,"props":839,"children":840},{"style":183},[841],{"type":43,"value":710},{"type":37,"tag":99,"props":843,"children":844},{"style":106},[845],{"type":43,"value":846},"port",{"type":37,"tag":99,"props":848,"children":849},{"style":183},[850],{"type":43,"value":701},{"type":37,"tag":99,"props":852,"children":853},{"style":183},[854],{"type":43,"value":162},{"type":37,"tag":99,"props":856,"children":858},{"style":857},"--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C",[859],{"type":43,"value":860}," 5331",{"type":37,"tag":99,"props":862,"children":863},{"style":183},[864],{"type":43,"value":865}," }\n",{"type":37,"tag":99,"props":867,"children":868},{"class":101,"line":325},[869],{"type":37,"tag":99,"props":870,"children":871},{"style":183},[872],{"type":43,"value":873},"}\n",{"type":37,"tag":52,"props":875,"children":877},{"id":876},"step-4-configure-vs-code-mcp-server",[878],{"type":43,"value":879},"Step 4: Configure VS Code — MCP Server",{"type":37,"tag":46,"props":881,"children":882},{},[883,885,891],{"type":43,"value":884},"Create or update ",{"type":37,"tag":95,"props":886,"children":888},{"className":887},[],[889],{"type":43,"value":890},".vscode\u002Fmcp.json",{"type":43,"value":892}," to add the component explorer MCP server. This enables AI agents to take screenshots, compare fixtures, and interact with components:",{"type":37,"tag":87,"props":894,"children":896},{"className":669,"code":895,"language":671,"meta":92,"style":92},"{\n  \"servers\": {\n    \"component-explorer\": {\n      \"type\": \"stdio\",\n      \"command\": \"npm\",\n      \"args\": [\n        \"exec\",\n        \"component-explorer\",\n        \"--no\",\n        \"--\",\n        \"mcp\",\n        \"-p\",\n        \".\u002Fcomponent-explorer.json\"\n      ]\n    }\n  }\n}\n",[897],{"type":37,"tag":95,"props":898,"children":899},{"__ignoreMap":92},[900,907,932,957,995,1031,1055,1076,1095,1116,1137,1158,1179,1197,1206,1215,1224],{"type":37,"tag":99,"props":901,"children":902},{"class":101,"line":102},[903],{"type":37,"tag":99,"props":904,"children":905},{"style":183},[906],{"type":43,"value":262},{"type":37,"tag":99,"props":908,"children":909},{"class":101,"line":225},[910,914,919,923,927],{"type":37,"tag":99,"props":911,"children":912},{"style":183},[913],{"type":43,"value":690},{"type":37,"tag":99,"props":915,"children":916},{"style":693},[917],{"type":43,"value":918},"servers",{"type":37,"tag":99,"props":920,"children":921},{"style":183},[922],{"type":43,"value":701},{"type":37,"tag":99,"props":924,"children":925},{"style":183},[926],{"type":43,"value":162},{"type":37,"tag":99,"props":928,"children":929},{"style":183},[930],{"type":43,"value":931}," {\n",{"type":37,"tag":99,"props":933,"children":934},{"class":101,"line":235},[935,940,945,949,953],{"type":37,"tag":99,"props":936,"children":937},{"style":183},[938],{"type":43,"value":939},"    \"",{"type":37,"tag":99,"props":941,"children":942},{"style":106},[943],{"type":43,"value":944},"component-explorer",{"type":37,"tag":99,"props":946,"children":947},{"style":183},[948],{"type":43,"value":701},{"type":37,"tag":99,"props":950,"children":951},{"style":183},[952],{"type":43,"value":162},{"type":37,"tag":99,"props":954,"children":955},{"style":183},[956],{"type":43,"value":931},{"type":37,"tag":99,"props":958,"children":959},{"class":101,"line":265},[960,965,970,974,978,982,987,991],{"type":37,"tag":99,"props":961,"children":962},{"style":183},[963],{"type":43,"value":964},"      \"",{"type":37,"tag":99,"props":966,"children":967},{"style":857},[968],{"type":43,"value":969},"type",{"type":37,"tag":99,"props":971,"children":972},{"style":183},[973],{"type":43,"value":701},{"type":37,"tag":99,"props":975,"children":976},{"style":183},[977],{"type":43,"value":162},{"type":37,"tag":99,"props":979,"children":980},{"style":183},[981],{"type":43,"value":710},{"type":37,"tag":99,"props":983,"children":984},{"style":112},[985],{"type":43,"value":986},"stdio",{"type":37,"tag":99,"props":988,"children":989},{"style":183},[990],{"type":43,"value":701},{"type":37,"tag":99,"props":992,"children":993},{"style":183},[994],{"type":43,"value":309},{"type":37,"tag":99,"props":996,"children":997},{"class":101,"line":24},[998,1002,1007,1011,1015,1019,1023,1027],{"type":37,"tag":99,"props":999,"children":1000},{"style":183},[1001],{"type":43,"value":964},{"type":37,"tag":99,"props":1003,"children":1004},{"style":857},[1005],{"type":43,"value":1006},"command",{"type":37,"tag":99,"props":1008,"children":1009},{"style":183},[1010],{"type":43,"value":701},{"type":37,"tag":99,"props":1012,"children":1013},{"style":183},[1014],{"type":43,"value":162},{"type":37,"tag":99,"props":1016,"children":1017},{"style":183},[1018],{"type":43,"value":710},{"type":37,"tag":99,"props":1020,"children":1021},{"style":112},[1022],{"type":43,"value":109},{"type":37,"tag":99,"props":1024,"children":1025},{"style":183},[1026],{"type":43,"value":701},{"type":37,"tag":99,"props":1028,"children":1029},{"style":183},[1030],{"type":43,"value":309},{"type":37,"tag":99,"props":1032,"children":1033},{"class":101,"line":293},[1034,1038,1043,1047,1051],{"type":37,"tag":99,"props":1035,"children":1036},{"style":183},[1037],{"type":43,"value":964},{"type":37,"tag":99,"props":1039,"children":1040},{"style":857},[1041],{"type":43,"value":1042},"args",{"type":37,"tag":99,"props":1044,"children":1045},{"style":183},[1046],{"type":43,"value":701},{"type":37,"tag":99,"props":1048,"children":1049},{"style":183},[1050],{"type":43,"value":162},{"type":37,"tag":99,"props":1052,"children":1053},{"style":183},[1054],{"type":43,"value":281},{"type":37,"tag":99,"props":1056,"children":1057},{"class":101,"line":312},[1058,1063,1068,1072],{"type":37,"tag":99,"props":1059,"children":1060},{"style":183},[1061],{"type":43,"value":1062},"        \"",{"type":37,"tag":99,"props":1064,"children":1065},{"style":112},[1066],{"type":43,"value":1067},"exec",{"type":37,"tag":99,"props":1069,"children":1070},{"style":183},[1071],{"type":43,"value":701},{"type":37,"tag":99,"props":1073,"children":1074},{"style":183},[1075],{"type":43,"value":309},{"type":37,"tag":99,"props":1077,"children":1078},{"class":101,"line":325},[1079,1083,1087,1091],{"type":37,"tag":99,"props":1080,"children":1081},{"style":183},[1082],{"type":43,"value":1062},{"type":37,"tag":99,"props":1084,"children":1085},{"style":112},[1086],{"type":43,"value":944},{"type":37,"tag":99,"props":1088,"children":1089},{"style":183},[1090],{"type":43,"value":701},{"type":37,"tag":99,"props":1092,"children":1093},{"style":183},[1094],{"type":43,"value":309},{"type":37,"tag":99,"props":1096,"children":1098},{"class":101,"line":1097},9,[1099,1103,1108,1112],{"type":37,"tag":99,"props":1100,"children":1101},{"style":183},[1102],{"type":43,"value":1062},{"type":37,"tag":99,"props":1104,"children":1105},{"style":112},[1106],{"type":43,"value":1107},"--no",{"type":37,"tag":99,"props":1109,"children":1110},{"style":183},[1111],{"type":43,"value":701},{"type":37,"tag":99,"props":1113,"children":1114},{"style":183},[1115],{"type":43,"value":309},{"type":37,"tag":99,"props":1117,"children":1119},{"class":101,"line":1118},10,[1120,1124,1129,1133],{"type":37,"tag":99,"props":1121,"children":1122},{"style":183},[1123],{"type":43,"value":1062},{"type":37,"tag":99,"props":1125,"children":1126},{"style":112},[1127],{"type":43,"value":1128},"--",{"type":37,"tag":99,"props":1130,"children":1131},{"style":183},[1132],{"type":43,"value":701},{"type":37,"tag":99,"props":1134,"children":1135},{"style":183},[1136],{"type":43,"value":309},{"type":37,"tag":99,"props":1138,"children":1140},{"class":101,"line":1139},11,[1141,1145,1150,1154],{"type":37,"tag":99,"props":1142,"children":1143},{"style":183},[1144],{"type":43,"value":1062},{"type":37,"tag":99,"props":1146,"children":1147},{"style":112},[1148],{"type":43,"value":1149},"mcp",{"type":37,"tag":99,"props":1151,"children":1152},{"style":183},[1153],{"type":43,"value":701},{"type":37,"tag":99,"props":1155,"children":1156},{"style":183},[1157],{"type":43,"value":309},{"type":37,"tag":99,"props":1159,"children":1161},{"class":101,"line":1160},12,[1162,1166,1171,1175],{"type":37,"tag":99,"props":1163,"children":1164},{"style":183},[1165],{"type":43,"value":1062},{"type":37,"tag":99,"props":1167,"children":1168},{"style":112},[1169],{"type":43,"value":1170},"-p",{"type":37,"tag":99,"props":1172,"children":1173},{"style":183},[1174],{"type":43,"value":701},{"type":37,"tag":99,"props":1176,"children":1177},{"style":183},[1178],{"type":43,"value":309},{"type":37,"tag":99,"props":1180,"children":1182},{"class":101,"line":1181},13,[1183,1187,1192],{"type":37,"tag":99,"props":1184,"children":1185},{"style":183},[1186],{"type":43,"value":1062},{"type":37,"tag":99,"props":1188,"children":1189},{"style":112},[1190],{"type":43,"value":1191},".\u002Fcomponent-explorer.json",{"type":37,"tag":99,"props":1193,"children":1194},{"style":183},[1195],{"type":43,"value":1196},"\"\n",{"type":37,"tag":99,"props":1198,"children":1200},{"class":101,"line":1199},14,[1201],{"type":37,"tag":99,"props":1202,"children":1203},{"style":183},[1204],{"type":43,"value":1205},"      ]\n",{"type":37,"tag":99,"props":1207,"children":1209},{"class":101,"line":1208},15,[1210],{"type":37,"tag":99,"props":1211,"children":1212},{"style":183},[1213],{"type":43,"value":1214},"    }\n",{"type":37,"tag":99,"props":1216,"children":1218},{"class":101,"line":1217},16,[1219],{"type":37,"tag":99,"props":1220,"children":1221},{"style":183},[1222],{"type":43,"value":1223},"  }\n",{"type":37,"tag":99,"props":1225,"children":1227},{"class":101,"line":1226},17,[1228],{"type":37,"tag":99,"props":1229,"children":1230},{"style":183},[1231],{"type":43,"value":873},{"type":37,"tag":46,"props":1233,"children":1234},{},[1235,1237,1242,1244,1249],{"type":43,"value":1236},"Adjust the ",{"type":37,"tag":95,"props":1238,"children":1240},{"className":1239},[],[1241],{"type":43,"value":1170},{"type":43,"value":1243}," path to point to the ",{"type":37,"tag":95,"props":1245,"children":1247},{"className":1246},[],[1248],{"type":43,"value":661},{"type":43,"value":1250}," location relative to cwd.",{"type":37,"tag":52,"props":1252,"children":1254},{"id":1253},"step-5-configure-vs-code-component-explorer-server-task",[1255],{"type":43,"value":1256},"Step 5: Configure VS Code — Component Explorer Server Task",{"type":37,"tag":46,"props":1258,"children":1259},{},[1260,1262,1268],{"type":43,"value":1261},"Add a task to ",{"type":37,"tag":95,"props":1263,"children":1265},{"className":1264},[],[1266],{"type":43,"value":1267},".vscode\u002Ftasks.json",{"type":43,"value":1269}," to start the component explorer server:",{"type":37,"tag":87,"props":1271,"children":1273},{"className":669,"code":1272,"language":671,"meta":92,"style":92},"{\n  \"version\": \"2.0.0\",\n  \"tasks\": [\n    {\n      \"label\": \"Component Explorer Server\",\n      \"type\": \"shell\",\n      \"command\": \".\u002Fnode_modules\u002F.bin\u002Fcomponent-explorer serve -p .\u002Fcomponent-explorer.json --kill-if-running\",\n      \"isBackground\": true,\n      \"problemMatcher\": {\n        \"owner\": \"component-explorer\",\n        \"fileLocation\": \"absolute\",\n        \"pattern\": {\n          \"regexp\": \"^\\\\s*at\\\\s+(.+?):(\\\\d+):(\\\\d+)\\\\s*$\",\n          \"file\": 1,\n          \"line\": 2,\n          \"column\": 3\n        },\n        \"background\": {\n          \"activeOnStart\": true,\n          \"beginsPattern\": \".*Setting up sessions.*\",\n          \"endsPattern\": \"Redirection server listening on.*\"\n        }\n      }\n    }\n  ]\n}\n",[1274],{"type":37,"tag":95,"props":1275,"children":1276},{"__ignoreMap":92},[1277,1284,1321,1345,1353,1390,1426,1462,1487,1511,1547,1584,1608,1692,1721,1749,1774,1782,1807,1832,1870,1904,1913,1922,1930,1938],{"type":37,"tag":99,"props":1278,"children":1279},{"class":101,"line":102},[1280],{"type":37,"tag":99,"props":1281,"children":1282},{"style":183},[1283],{"type":43,"value":262},{"type":37,"tag":99,"props":1285,"children":1286},{"class":101,"line":225},[1287,1291,1296,1300,1304,1308,1313,1317],{"type":37,"tag":99,"props":1288,"children":1289},{"style":183},[1290],{"type":43,"value":690},{"type":37,"tag":99,"props":1292,"children":1293},{"style":693},[1294],{"type":43,"value":1295},"version",{"type":37,"tag":99,"props":1297,"children":1298},{"style":183},[1299],{"type":43,"value":701},{"type":37,"tag":99,"props":1301,"children":1302},{"style":183},[1303],{"type":43,"value":162},{"type":37,"tag":99,"props":1305,"children":1306},{"style":183},[1307],{"type":43,"value":710},{"type":37,"tag":99,"props":1309,"children":1310},{"style":112},[1311],{"type":43,"value":1312},"2.0.0",{"type":37,"tag":99,"props":1314,"children":1315},{"style":183},[1316],{"type":43,"value":701},{"type":37,"tag":99,"props":1318,"children":1319},{"style":183},[1320],{"type":43,"value":309},{"type":37,"tag":99,"props":1322,"children":1323},{"class":101,"line":235},[1324,1328,1333,1337,1341],{"type":37,"tag":99,"props":1325,"children":1326},{"style":183},[1327],{"type":43,"value":690},{"type":37,"tag":99,"props":1329,"children":1330},{"style":693},[1331],{"type":43,"value":1332},"tasks",{"type":37,"tag":99,"props":1334,"children":1335},{"style":183},[1336],{"type":43,"value":701},{"type":37,"tag":99,"props":1338,"children":1339},{"style":183},[1340],{"type":43,"value":162},{"type":37,"tag":99,"props":1342,"children":1343},{"style":183},[1344],{"type":43,"value":281},{"type":37,"tag":99,"props":1346,"children":1347},{"class":101,"line":265},[1348],{"type":37,"tag":99,"props":1349,"children":1350},{"style":183},[1351],{"type":43,"value":1352},"    {\n",{"type":37,"tag":99,"props":1354,"children":1355},{"class":101,"line":24},[1356,1360,1365,1369,1373,1377,1382,1386],{"type":37,"tag":99,"props":1357,"children":1358},{"style":183},[1359],{"type":43,"value":964},{"type":37,"tag":99,"props":1361,"children":1362},{"style":106},[1363],{"type":43,"value":1364},"label",{"type":37,"tag":99,"props":1366,"children":1367},{"style":183},[1368],{"type":43,"value":701},{"type":37,"tag":99,"props":1370,"children":1371},{"style":183},[1372],{"type":43,"value":162},{"type":37,"tag":99,"props":1374,"children":1375},{"style":183},[1376],{"type":43,"value":710},{"type":37,"tag":99,"props":1378,"children":1379},{"style":112},[1380],{"type":43,"value":1381},"Component Explorer Server",{"type":37,"tag":99,"props":1383,"children":1384},{"style":183},[1385],{"type":43,"value":701},{"type":37,"tag":99,"props":1387,"children":1388},{"style":183},[1389],{"type":43,"value":309},{"type":37,"tag":99,"props":1391,"children":1392},{"class":101,"line":293},[1393,1397,1401,1405,1409,1413,1418,1422],{"type":37,"tag":99,"props":1394,"children":1395},{"style":183},[1396],{"type":43,"value":964},{"type":37,"tag":99,"props":1398,"children":1399},{"style":106},[1400],{"type":43,"value":969},{"type":37,"tag":99,"props":1402,"children":1403},{"style":183},[1404],{"type":43,"value":701},{"type":37,"tag":99,"props":1406,"children":1407},{"style":183},[1408],{"type":43,"value":162},{"type":37,"tag":99,"props":1410,"children":1411},{"style":183},[1412],{"type":43,"value":710},{"type":37,"tag":99,"props":1414,"children":1415},{"style":112},[1416],{"type":43,"value":1417},"shell",{"type":37,"tag":99,"props":1419,"children":1420},{"style":183},[1421],{"type":43,"value":701},{"type":37,"tag":99,"props":1423,"children":1424},{"style":183},[1425],{"type":43,"value":309},{"type":37,"tag":99,"props":1427,"children":1428},{"class":101,"line":312},[1429,1433,1437,1441,1445,1449,1454,1458],{"type":37,"tag":99,"props":1430,"children":1431},{"style":183},[1432],{"type":43,"value":964},{"type":37,"tag":99,"props":1434,"children":1435},{"style":106},[1436],{"type":43,"value":1006},{"type":37,"tag":99,"props":1438,"children":1439},{"style":183},[1440],{"type":43,"value":701},{"type":37,"tag":99,"props":1442,"children":1443},{"style":183},[1444],{"type":43,"value":162},{"type":37,"tag":99,"props":1446,"children":1447},{"style":183},[1448],{"type":43,"value":710},{"type":37,"tag":99,"props":1450,"children":1451},{"style":112},[1452],{"type":43,"value":1453},".\u002Fnode_modules\u002F.bin\u002Fcomponent-explorer serve -p .\u002Fcomponent-explorer.json --kill-if-running",{"type":37,"tag":99,"props":1455,"children":1456},{"style":183},[1457],{"type":43,"value":701},{"type":37,"tag":99,"props":1459,"children":1460},{"style":183},[1461],{"type":43,"value":309},{"type":37,"tag":99,"props":1463,"children":1464},{"class":101,"line":325},[1465,1469,1474,1478,1482],{"type":37,"tag":99,"props":1466,"children":1467},{"style":183},[1468],{"type":43,"value":964},{"type":37,"tag":99,"props":1470,"children":1471},{"style":106},[1472],{"type":43,"value":1473},"isBackground",{"type":37,"tag":99,"props":1475,"children":1476},{"style":183},[1477],{"type":43,"value":701},{"type":37,"tag":99,"props":1479,"children":1480},{"style":183},[1481],{"type":43,"value":162},{"type":37,"tag":99,"props":1483,"children":1484},{"style":183},[1485],{"type":43,"value":1486}," true,\n",{"type":37,"tag":99,"props":1488,"children":1489},{"class":101,"line":1097},[1490,1494,1499,1503,1507],{"type":37,"tag":99,"props":1491,"children":1492},{"style":183},[1493],{"type":43,"value":964},{"type":37,"tag":99,"props":1495,"children":1496},{"style":106},[1497],{"type":43,"value":1498},"problemMatcher",{"type":37,"tag":99,"props":1500,"children":1501},{"style":183},[1502],{"type":43,"value":701},{"type":37,"tag":99,"props":1504,"children":1505},{"style":183},[1506],{"type":43,"value":162},{"type":37,"tag":99,"props":1508,"children":1509},{"style":183},[1510],{"type":43,"value":931},{"type":37,"tag":99,"props":1512,"children":1513},{"class":101,"line":1118},[1514,1518,1523,1527,1531,1535,1539,1543],{"type":37,"tag":99,"props":1515,"children":1516},{"style":183},[1517],{"type":43,"value":1062},{"type":37,"tag":99,"props":1519,"children":1520},{"style":857},[1521],{"type":43,"value":1522},"owner",{"type":37,"tag":99,"props":1524,"children":1525},{"style":183},[1526],{"type":43,"value":701},{"type":37,"tag":99,"props":1528,"children":1529},{"style":183},[1530],{"type":43,"value":162},{"type":37,"tag":99,"props":1532,"children":1533},{"style":183},[1534],{"type":43,"value":710},{"type":37,"tag":99,"props":1536,"children":1537},{"style":112},[1538],{"type":43,"value":944},{"type":37,"tag":99,"props":1540,"children":1541},{"style":183},[1542],{"type":43,"value":701},{"type":37,"tag":99,"props":1544,"children":1545},{"style":183},[1546],{"type":43,"value":309},{"type":37,"tag":99,"props":1548,"children":1549},{"class":101,"line":1139},[1550,1554,1559,1563,1567,1571,1576,1580],{"type":37,"tag":99,"props":1551,"children":1552},{"style":183},[1553],{"type":43,"value":1062},{"type":37,"tag":99,"props":1555,"children":1556},{"style":857},[1557],{"type":43,"value":1558},"fileLocation",{"type":37,"tag":99,"props":1560,"children":1561},{"style":183},[1562],{"type":43,"value":701},{"type":37,"tag":99,"props":1564,"children":1565},{"style":183},[1566],{"type":43,"value":162},{"type":37,"tag":99,"props":1568,"children":1569},{"style":183},[1570],{"type":43,"value":710},{"type":37,"tag":99,"props":1572,"children":1573},{"style":112},[1574],{"type":43,"value":1575},"absolute",{"type":37,"tag":99,"props":1577,"children":1578},{"style":183},[1579],{"type":43,"value":701},{"type":37,"tag":99,"props":1581,"children":1582},{"style":183},[1583],{"type":43,"value":309},{"type":37,"tag":99,"props":1585,"children":1586},{"class":101,"line":1160},[1587,1591,1596,1600,1604],{"type":37,"tag":99,"props":1588,"children":1589},{"style":183},[1590],{"type":43,"value":1062},{"type":37,"tag":99,"props":1592,"children":1593},{"style":857},[1594],{"type":43,"value":1595},"pattern",{"type":37,"tag":99,"props":1597,"children":1598},{"style":183},[1599],{"type":43,"value":701},{"type":37,"tag":99,"props":1601,"children":1602},{"style":183},[1603],{"type":43,"value":162},{"type":37,"tag":99,"props":1605,"children":1606},{"style":183},[1607],{"type":43,"value":931},{"type":37,"tag":99,"props":1609,"children":1610},{"class":101,"line":1181},[1611,1616,1621,1625,1629,1633,1638,1643,1648,1652,1657,1661,1666,1670,1675,1679,1684,1688],{"type":37,"tag":99,"props":1612,"children":1613},{"style":183},[1614],{"type":43,"value":1615},"          \"",{"type":37,"tag":99,"props":1617,"children":1618},{"style":269},[1619],{"type":43,"value":1620},"regexp",{"type":37,"tag":99,"props":1622,"children":1623},{"style":183},[1624],{"type":43,"value":701},{"type":37,"tag":99,"props":1626,"children":1627},{"style":183},[1628],{"type":43,"value":162},{"type":37,"tag":99,"props":1630,"children":1631},{"style":183},[1632],{"type":43,"value":710},{"type":37,"tag":99,"props":1634,"children":1635},{"style":112},[1636],{"type":43,"value":1637},"^",{"type":37,"tag":99,"props":1639,"children":1640},{"style":189},[1641],{"type":43,"value":1642},"\\\\",{"type":37,"tag":99,"props":1644,"children":1645},{"style":112},[1646],{"type":43,"value":1647},"s*at",{"type":37,"tag":99,"props":1649,"children":1650},{"style":189},[1651],{"type":43,"value":1642},{"type":37,"tag":99,"props":1653,"children":1654},{"style":112},[1655],{"type":43,"value":1656},"s+(.+?):(",{"type":37,"tag":99,"props":1658,"children":1659},{"style":189},[1660],{"type":43,"value":1642},{"type":37,"tag":99,"props":1662,"children":1663},{"style":112},[1664],{"type":43,"value":1665},"d+):(",{"type":37,"tag":99,"props":1667,"children":1668},{"style":189},[1669],{"type":43,"value":1642},{"type":37,"tag":99,"props":1671,"children":1672},{"style":112},[1673],{"type":43,"value":1674},"d+)",{"type":37,"tag":99,"props":1676,"children":1677},{"style":189},[1678],{"type":43,"value":1642},{"type":37,"tag":99,"props":1680,"children":1681},{"style":112},[1682],{"type":43,"value":1683},"s*$",{"type":37,"tag":99,"props":1685,"children":1686},{"style":183},[1687],{"type":43,"value":701},{"type":37,"tag":99,"props":1689,"children":1690},{"style":183},[1691],{"type":43,"value":309},{"type":37,"tag":99,"props":1693,"children":1694},{"class":101,"line":1199},[1695,1699,1704,1708,1712,1717],{"type":37,"tag":99,"props":1696,"children":1697},{"style":183},[1698],{"type":43,"value":1615},{"type":37,"tag":99,"props":1700,"children":1701},{"style":269},[1702],{"type":43,"value":1703},"file",{"type":37,"tag":99,"props":1705,"children":1706},{"style":183},[1707],{"type":43,"value":701},{"type":37,"tag":99,"props":1709,"children":1710},{"style":183},[1711],{"type":43,"value":162},{"type":37,"tag":99,"props":1713,"children":1714},{"style":857},[1715],{"type":43,"value":1716}," 1",{"type":37,"tag":99,"props":1718,"children":1719},{"style":183},[1720],{"type":43,"value":309},{"type":37,"tag":99,"props":1722,"children":1723},{"class":101,"line":1208},[1724,1728,1732,1736,1740,1745],{"type":37,"tag":99,"props":1725,"children":1726},{"style":183},[1727],{"type":43,"value":1615},{"type":37,"tag":99,"props":1729,"children":1730},{"style":269},[1731],{"type":43,"value":101},{"type":37,"tag":99,"props":1733,"children":1734},{"style":183},[1735],{"type":43,"value":701},{"type":37,"tag":99,"props":1737,"children":1738},{"style":183},[1739],{"type":43,"value":162},{"type":37,"tag":99,"props":1741,"children":1742},{"style":857},[1743],{"type":43,"value":1744}," 2",{"type":37,"tag":99,"props":1746,"children":1747},{"style":183},[1748],{"type":43,"value":309},{"type":37,"tag":99,"props":1750,"children":1751},{"class":101,"line":1217},[1752,1756,1761,1765,1769],{"type":37,"tag":99,"props":1753,"children":1754},{"style":183},[1755],{"type":43,"value":1615},{"type":37,"tag":99,"props":1757,"children":1758},{"style":269},[1759],{"type":43,"value":1760},"column",{"type":37,"tag":99,"props":1762,"children":1763},{"style":183},[1764],{"type":43,"value":701},{"type":37,"tag":99,"props":1766,"children":1767},{"style":183},[1768],{"type":43,"value":162},{"type":37,"tag":99,"props":1770,"children":1771},{"style":857},[1772],{"type":43,"value":1773}," 3\n",{"type":37,"tag":99,"props":1775,"children":1776},{"class":101,"line":1226},[1777],{"type":37,"tag":99,"props":1778,"children":1779},{"style":183},[1780],{"type":43,"value":1781},"        },\n",{"type":37,"tag":99,"props":1783,"children":1785},{"class":101,"line":1784},18,[1786,1790,1795,1799,1803],{"type":37,"tag":99,"props":1787,"children":1788},{"style":183},[1789],{"type":43,"value":1062},{"type":37,"tag":99,"props":1791,"children":1792},{"style":857},[1793],{"type":43,"value":1794},"background",{"type":37,"tag":99,"props":1796,"children":1797},{"style":183},[1798],{"type":43,"value":701},{"type":37,"tag":99,"props":1800,"children":1801},{"style":183},[1802],{"type":43,"value":162},{"type":37,"tag":99,"props":1804,"children":1805},{"style":183},[1806],{"type":43,"value":931},{"type":37,"tag":99,"props":1808,"children":1810},{"class":101,"line":1809},19,[1811,1815,1820,1824,1828],{"type":37,"tag":99,"props":1812,"children":1813},{"style":183},[1814],{"type":43,"value":1615},{"type":37,"tag":99,"props":1816,"children":1817},{"style":269},[1818],{"type":43,"value":1819},"activeOnStart",{"type":37,"tag":99,"props":1821,"children":1822},{"style":183},[1823],{"type":43,"value":701},{"type":37,"tag":99,"props":1825,"children":1826},{"style":183},[1827],{"type":43,"value":162},{"type":37,"tag":99,"props":1829,"children":1830},{"style":183},[1831],{"type":43,"value":1486},{"type":37,"tag":99,"props":1833,"children":1835},{"class":101,"line":1834},20,[1836,1840,1845,1849,1853,1857,1862,1866],{"type":37,"tag":99,"props":1837,"children":1838},{"style":183},[1839],{"type":43,"value":1615},{"type":37,"tag":99,"props":1841,"children":1842},{"style":269},[1843],{"type":43,"value":1844},"beginsPattern",{"type":37,"tag":99,"props":1846,"children":1847},{"style":183},[1848],{"type":43,"value":701},{"type":37,"tag":99,"props":1850,"children":1851},{"style":183},[1852],{"type":43,"value":162},{"type":37,"tag":99,"props":1854,"children":1855},{"style":183},[1856],{"type":43,"value":710},{"type":37,"tag":99,"props":1858,"children":1859},{"style":112},[1860],{"type":43,"value":1861},".*Setting up sessions.*",{"type":37,"tag":99,"props":1863,"children":1864},{"style":183},[1865],{"type":43,"value":701},{"type":37,"tag":99,"props":1867,"children":1868},{"style":183},[1869],{"type":43,"value":309},{"type":37,"tag":99,"props":1871,"children":1873},{"class":101,"line":1872},21,[1874,1878,1883,1887,1891,1895,1900],{"type":37,"tag":99,"props":1875,"children":1876},{"style":183},[1877],{"type":43,"value":1615},{"type":37,"tag":99,"props":1879,"children":1880},{"style":269},[1881],{"type":43,"value":1882},"endsPattern",{"type":37,"tag":99,"props":1884,"children":1885},{"style":183},[1886],{"type":43,"value":701},{"type":37,"tag":99,"props":1888,"children":1889},{"style":183},[1890],{"type":43,"value":162},{"type":37,"tag":99,"props":1892,"children":1893},{"style":183},[1894],{"type":43,"value":710},{"type":37,"tag":99,"props":1896,"children":1897},{"style":112},[1898],{"type":43,"value":1899},"Redirection server listening on.*",{"type":37,"tag":99,"props":1901,"children":1902},{"style":183},[1903],{"type":43,"value":1196},{"type":37,"tag":99,"props":1905,"children":1907},{"class":101,"line":1906},22,[1908],{"type":37,"tag":99,"props":1909,"children":1910},{"style":183},[1911],{"type":43,"value":1912},"        }\n",{"type":37,"tag":99,"props":1914,"children":1916},{"class":101,"line":1915},23,[1917],{"type":37,"tag":99,"props":1918,"children":1919},{"style":183},[1920],{"type":43,"value":1921},"      }\n",{"type":37,"tag":99,"props":1923,"children":1925},{"class":101,"line":1924},24,[1926],{"type":37,"tag":99,"props":1927,"children":1928},{"style":183},[1929],{"type":43,"value":1214},{"type":37,"tag":99,"props":1931,"children":1932},{"class":101,"line":20},[1933],{"type":37,"tag":99,"props":1934,"children":1935},{"style":183},[1936],{"type":43,"value":1937},"  ]\n",{"type":37,"tag":99,"props":1939,"children":1941},{"class":101,"line":1940},26,[1942],{"type":37,"tag":99,"props":1943,"children":1944},{"style":183},[1945],{"type":43,"value":873},{"type":37,"tag":46,"props":1947,"children":1948},{},[1949,1951,1956],{"type":43,"value":1950},"If other tasks already exist, merge the new task into the existing ",{"type":37,"tag":95,"props":1952,"children":1954},{"className":1953},[],[1955],{"type":43,"value":1332},{"type":43,"value":1957}," array.",{"type":37,"tag":52,"props":1959,"children":1961},{"id":1960},"step-6-configure-vs-code-launch-configuration-optional",[1962],{"type":43,"value":1963},"Step 6: Configure VS Code — Launch Configuration (Optional)",{"type":37,"tag":46,"props":1965,"children":1966},{},[1967,1969,1975],{"type":43,"value":1968},"To open the component explorer UI in Chrome, add a launch configuration to ",{"type":37,"tag":95,"props":1970,"children":1972},{"className":1971},[],[1973],{"type":43,"value":1974},".vscode\u002Flaunch.json",{"type":43,"value":162},{"type":37,"tag":87,"props":1977,"children":1979},{"className":669,"code":1978,"language":671,"meta":92,"style":92},"{\n  \"version\": \"0.2.0\",\n  \"configurations\": [\n    {\n      \"name\": \"Component Explorer (Chrome)\",\n      \"type\": \"chrome\",\n      \"request\": \"launch\",\n      \"url\": \"http:\u002F\u002Flocalhost:5331\u002F___explorer\",\n      \"preLaunchTask\": \"Component Explorer Server\"\n    }\n  ]\n}\n",[1980],{"type":37,"tag":95,"props":1981,"children":1982},{"__ignoreMap":92},[1983,1990,2026,2050,2057,2094,2130,2167,2204,2236,2243,2250],{"type":37,"tag":99,"props":1984,"children":1985},{"class":101,"line":102},[1986],{"type":37,"tag":99,"props":1987,"children":1988},{"style":183},[1989],{"type":43,"value":262},{"type":37,"tag":99,"props":1991,"children":1992},{"class":101,"line":225},[1993,1997,2001,2005,2009,2013,2018,2022],{"type":37,"tag":99,"props":1994,"children":1995},{"style":183},[1996],{"type":43,"value":690},{"type":37,"tag":99,"props":1998,"children":1999},{"style":693},[2000],{"type":43,"value":1295},{"type":37,"tag":99,"props":2002,"children":2003},{"style":183},[2004],{"type":43,"value":701},{"type":37,"tag":99,"props":2006,"children":2007},{"style":183},[2008],{"type":43,"value":162},{"type":37,"tag":99,"props":2010,"children":2011},{"style":183},[2012],{"type":43,"value":710},{"type":37,"tag":99,"props":2014,"children":2015},{"style":112},[2016],{"type":43,"value":2017},"0.2.0",{"type":37,"tag":99,"props":2019,"children":2020},{"style":183},[2021],{"type":43,"value":701},{"type":37,"tag":99,"props":2023,"children":2024},{"style":183},[2025],{"type":43,"value":309},{"type":37,"tag":99,"props":2027,"children":2028},{"class":101,"line":235},[2029,2033,2038,2042,2046],{"type":37,"tag":99,"props":2030,"children":2031},{"style":183},[2032],{"type":43,"value":690},{"type":37,"tag":99,"props":2034,"children":2035},{"style":693},[2036],{"type":43,"value":2037},"configurations",{"type":37,"tag":99,"props":2039,"children":2040},{"style":183},[2041],{"type":43,"value":701},{"type":37,"tag":99,"props":2043,"children":2044},{"style":183},[2045],{"type":43,"value":162},{"type":37,"tag":99,"props":2047,"children":2048},{"style":183},[2049],{"type":43,"value":281},{"type":37,"tag":99,"props":2051,"children":2052},{"class":101,"line":265},[2053],{"type":37,"tag":99,"props":2054,"children":2055},{"style":183},[2056],{"type":43,"value":1352},{"type":37,"tag":99,"props":2058,"children":2059},{"class":101,"line":24},[2060,2064,2069,2073,2077,2081,2086,2090],{"type":37,"tag":99,"props":2061,"children":2062},{"style":183},[2063],{"type":43,"value":964},{"type":37,"tag":99,"props":2065,"children":2066},{"style":106},[2067],{"type":43,"value":2068},"name",{"type":37,"tag":99,"props":2070,"children":2071},{"style":183},[2072],{"type":43,"value":701},{"type":37,"tag":99,"props":2074,"children":2075},{"style":183},[2076],{"type":43,"value":162},{"type":37,"tag":99,"props":2078,"children":2079},{"style":183},[2080],{"type":43,"value":710},{"type":37,"tag":99,"props":2082,"children":2083},{"style":112},[2084],{"type":43,"value":2085},"Component Explorer (Chrome)",{"type":37,"tag":99,"props":2087,"children":2088},{"style":183},[2089],{"type":43,"value":701},{"type":37,"tag":99,"props":2091,"children":2092},{"style":183},[2093],{"type":43,"value":309},{"type":37,"tag":99,"props":2095,"children":2096},{"class":101,"line":293},[2097,2101,2105,2109,2113,2117,2122,2126],{"type":37,"tag":99,"props":2098,"children":2099},{"style":183},[2100],{"type":43,"value":964},{"type":37,"tag":99,"props":2102,"children":2103},{"style":106},[2104],{"type":43,"value":969},{"type":37,"tag":99,"props":2106,"children":2107},{"style":183},[2108],{"type":43,"value":701},{"type":37,"tag":99,"props":2110,"children":2111},{"style":183},[2112],{"type":43,"value":162},{"type":37,"tag":99,"props":2114,"children":2115},{"style":183},[2116],{"type":43,"value":710},{"type":37,"tag":99,"props":2118,"children":2119},{"style":112},[2120],{"type":43,"value":2121},"chrome",{"type":37,"tag":99,"props":2123,"children":2124},{"style":183},[2125],{"type":43,"value":701},{"type":37,"tag":99,"props":2127,"children":2128},{"style":183},[2129],{"type":43,"value":309},{"type":37,"tag":99,"props":2131,"children":2132},{"class":101,"line":312},[2133,2137,2142,2146,2150,2154,2159,2163],{"type":37,"tag":99,"props":2134,"children":2135},{"style":183},[2136],{"type":43,"value":964},{"type":37,"tag":99,"props":2138,"children":2139},{"style":106},[2140],{"type":43,"value":2141},"request",{"type":37,"tag":99,"props":2143,"children":2144},{"style":183},[2145],{"type":43,"value":701},{"type":37,"tag":99,"props":2147,"children":2148},{"style":183},[2149],{"type":43,"value":162},{"type":37,"tag":99,"props":2151,"children":2152},{"style":183},[2153],{"type":43,"value":710},{"type":37,"tag":99,"props":2155,"children":2156},{"style":112},[2157],{"type":43,"value":2158},"launch",{"type":37,"tag":99,"props":2160,"children":2161},{"style":183},[2162],{"type":43,"value":701},{"type":37,"tag":99,"props":2164,"children":2165},{"style":183},[2166],{"type":43,"value":309},{"type":37,"tag":99,"props":2168,"children":2169},{"class":101,"line":325},[2170,2174,2179,2183,2187,2191,2196,2200],{"type":37,"tag":99,"props":2171,"children":2172},{"style":183},[2173],{"type":43,"value":964},{"type":37,"tag":99,"props":2175,"children":2176},{"style":106},[2177],{"type":43,"value":2178},"url",{"type":37,"tag":99,"props":2180,"children":2181},{"style":183},[2182],{"type":43,"value":701},{"type":37,"tag":99,"props":2184,"children":2185},{"style":183},[2186],{"type":43,"value":162},{"type":37,"tag":99,"props":2188,"children":2189},{"style":183},[2190],{"type":43,"value":710},{"type":37,"tag":99,"props":2192,"children":2193},{"style":112},[2194],{"type":43,"value":2195},"http:\u002F\u002Flocalhost:5331\u002F___explorer",{"type":37,"tag":99,"props":2197,"children":2198},{"style":183},[2199],{"type":43,"value":701},{"type":37,"tag":99,"props":2201,"children":2202},{"style":183},[2203],{"type":43,"value":309},{"type":37,"tag":99,"props":2205,"children":2206},{"class":101,"line":1097},[2207,2211,2216,2220,2224,2228,2232],{"type":37,"tag":99,"props":2208,"children":2209},{"style":183},[2210],{"type":43,"value":964},{"type":37,"tag":99,"props":2212,"children":2213},{"style":106},[2214],{"type":43,"value":2215},"preLaunchTask",{"type":37,"tag":99,"props":2217,"children":2218},{"style":183},[2219],{"type":43,"value":701},{"type":37,"tag":99,"props":2221,"children":2222},{"style":183},[2223],{"type":43,"value":162},{"type":37,"tag":99,"props":2225,"children":2226},{"style":183},[2227],{"type":43,"value":710},{"type":37,"tag":99,"props":2229,"children":2230},{"style":112},[2231],{"type":43,"value":1381},{"type":37,"tag":99,"props":2233,"children":2234},{"style":183},[2235],{"type":43,"value":1196},{"type":37,"tag":99,"props":2237,"children":2238},{"class":101,"line":1118},[2239],{"type":37,"tag":99,"props":2240,"children":2241},{"style":183},[2242],{"type":43,"value":1214},{"type":37,"tag":99,"props":2244,"children":2245},{"class":101,"line":1139},[2246],{"type":37,"tag":99,"props":2247,"children":2248},{"style":183},[2249],{"type":43,"value":1937},{"type":37,"tag":99,"props":2251,"children":2252},{"class":101,"line":1160},[2253],{"type":37,"tag":99,"props":2254,"children":2255},{"style":183},[2256],{"type":43,"value":873},{"type":37,"tag":46,"props":2258,"children":2259},{},[2260,2262,2267,2269,2274,2276,2281],{"type":43,"value":2261},"This requires the ",{"type":37,"tag":95,"props":2263,"children":2265},{"className":2264},[],[2266],{"type":43,"value":825},{"type":43,"value":2268}," port to be configured in ",{"type":37,"tag":95,"props":2270,"children":2272},{"className":2271},[],[2273],{"type":43,"value":661},{"type":43,"value":2275}," (see Step 3). The ",{"type":37,"tag":95,"props":2277,"children":2279},{"className":2278},[],[2280],{"type":43,"value":2215},{"type":43,"value":2282}," starts the daemon automatically before opening the browser.",{"type":37,"tag":46,"props":2284,"children":2285},{},[2286,2288,2293],{"type":43,"value":2287},"If other launch configurations already exist, merge the new configuration into the existing ",{"type":37,"tag":95,"props":2289,"children":2291},{"className":2290},[],[2292],{"type":43,"value":2037},{"type":43,"value":1957},{"type":37,"tag":52,"props":2295,"children":2297},{"id":2296},"step-7-create-a-first-fixture-and-verify",[2298],{"type":43,"value":2299},"Step 7: Create a First Fixture and Verify",{"type":37,"tag":46,"props":2301,"children":2302},{},[2303,2305,2310],{"type":43,"value":2304},"Use the ",{"type":37,"tag":69,"props":2306,"children":2307},{},[2308],{"type":43,"value":2309},"use-component-explorer",{"type":43,"value":2311}," skill for guidance on writing fixtures, including project-specific wrapper functions and best practices.",{"type":37,"tag":46,"props":2313,"children":2314},{},[2315,2317,2323,2325,2331],{"type":43,"value":2316},"Create a ",{"type":37,"tag":95,"props":2318,"children":2320},{"className":2319},[],[2321],{"type":43,"value":2322},".fixture.tsx",{"type":43,"value":2324}," (or ",{"type":37,"tag":95,"props":2326,"children":2328},{"className":2327},[],[2329],{"type":43,"value":2330},".fixture.ts",{"type":43,"value":2332},") file to verify the setup works:",{"type":37,"tag":2334,"props":2335,"children":2336},"ol",{},[2337,2357,2370,2375],{"type":37,"tag":63,"props":2338,"children":2339},{},[2340,2342,2348,2349,2355],{"type":43,"value":2341},"Start the dev server: ",{"type":37,"tag":95,"props":2343,"children":2345},{"className":2344},[],[2346],{"type":43,"value":2347},"npx vite",{"type":43,"value":2324},{"type":37,"tag":95,"props":2350,"children":2352},{"className":2351},[],[2353],{"type":43,"value":2354},"pnpm dev",{"type":43,"value":2356},", etc.)",{"type":37,"tag":63,"props":2358,"children":2359},{},[2360,2362,2368],{"type":43,"value":2361},"Open ",{"type":37,"tag":95,"props":2363,"children":2365},{"className":2364},[],[2366],{"type":43,"value":2367},"http:\u002F\u002Flocalhost:5173\u002F___explorer",{"type":43,"value":2369}," to see the explorer UI.",{"type":37,"tag":63,"props":2371,"children":2372},{},[2373],{"type":43,"value":2374},"Run the \"Component Explorer Server\" VS Code task (or the launch configuration) to start the server.",{"type":37,"tag":63,"props":2376,"children":2377},{},[2378,2380,2386,2387,2393],{"type":43,"value":2379},"Verify the MCP server connects (Copilot can now ",{"type":37,"tag":95,"props":2381,"children":2383},{"className":2382},[],[2384],{"type":43,"value":2385},"list_fixtures",{"type":43,"value":465},{"type":37,"tag":95,"props":2388,"children":2390},{"className":2389},[],[2391],{"type":43,"value":2392},"screenshot",{"type":43,"value":2394},", etc.).",{"type":37,"tag":2396,"props":2397,"children":2398},"style",{},[2399],{"type":43,"value":2400},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":2402,"total":1199},[2403,2422,2437,2451,2462,2473,2482],{"slug":2404,"name":2404,"fn":2405,"description":2406,"org":2407,"tags":2408,"stars":20,"repoUrl":21,"updatedAt":2421},"council-plan","perform multi-model council planning","Multi-model council planning for implementation and architecture decisions. Use when the user asks to 'plan with council', 'multi-model plan', 'get different perspectives on approach', 'council plan', or wants multiple models to independently propose plans for the same task. Also use when the user asks to 'debate approaches', 'compare strategies', or 'cross-plan'.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2409,2412,2415,2418],{"name":2410,"slug":2411,"type":13},"Architecture","architecture",{"name":2413,"slug":2414,"type":13},"Engineering","engineering",{"name":2416,"slug":2417,"type":13},"Multi-Agent","multi-agent",{"name":2419,"slug":2420,"type":13},"System Design","system-design","2026-05-13T06:14:08.529779",{"slug":2423,"name":2423,"fn":2424,"description":2425,"org":2426,"tags":2427,"stars":20,"repoUrl":21,"updatedAt":2436},"council-review","perform multi-model council code reviews","Multi-model council review for diffs, pull requests, and risky changes. It is CRITICAL to use this skill after ANY non-trivial development phase — changes are usually not 100% correct. Development CANNOT be called done until the code has been reviewed. Use whenever the user asks for a review, PR feedback, a bug hunt in recent edits, or wants multiple models to inspect the same change independently. Also use when the user asks to 'discuss findings', 'cross-review', or 'debate' review results between models.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2428,2431,2432,2433],{"name":2429,"slug":2430,"type":13},"Code Review","code-review",{"name":2413,"slug":2414,"type":13},{"name":2416,"slug":2417,"type":13},{"name":2434,"slug":2435,"type":13},"Pull Requests","pull-requests","2026-05-13T06:14:07.202801",{"slug":2438,"name":2438,"fn":2439,"description":2440,"org":2441,"tags":2442,"stars":20,"repoUrl":21,"updatedAt":2450},"follow-goal","manage agent goals and stopping conditions","Give the agent a durable objective with a verifiable stopping condition, then keep iterating across turns until that condition is met. Use when the user says 'set a goal', 'follow a goal', '\u002Fgoal …', 'keep working until …', or asks for a long-running task with a clear end state (migrations, large refactors, retry-until-green loops, experiments).",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2443,2446,2447],{"name":2444,"slug":2445,"type":13},"Agents","agents",{"name":9,"slug":8,"type":13},{"name":2448,"slug":2449,"type":13},"Productivity","productivity","2026-07-07T06:54:04.263607",{"slug":2452,"name":2452,"fn":2453,"description":2454,"org":2455,"tags":2456,"stars":20,"repoUrl":21,"updatedAt":2461},"inbox-add-reaction","add reactions to GitHub issues and PRs","Add a reaction to a GitHub issue or pull request",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2457,2460],{"name":2458,"slug":2459,"type":13},"GitHub","github",{"name":2434,"slug":2435,"type":13},"2026-07-07T06:53:33.958298",{"slug":2463,"name":2463,"fn":2464,"description":2465,"org":2466,"tags":2467,"stars":20,"repoUrl":21,"updatedAt":2472},"inbox-install-gh-cli","install GitHub CLI","Install the GitHub CLI (gh) if not already installed",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2468,2471],{"name":2469,"slug":2470,"type":13},"CLI","cli",{"name":2458,"slug":2459,"type":13},"2026-05-13T06:14:05.911879",{"slug":2474,"name":2474,"fn":2475,"description":2476,"org":2477,"tags":2478,"stars":20,"repoUrl":21,"updatedAt":2481},"inbox-mark-all-read","mark GitHub notifications as read","Mark all GitHub notifications as read",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2479,2480],{"name":2458,"slug":2459,"type":13},{"name":2448,"slug":2449,"type":13},"2026-05-13T06:14:02.019522",{"slug":2483,"name":2483,"fn":2484,"description":2485,"org":2486,"tags":2487,"stars":20,"repoUrl":21,"updatedAt":2495},"inbox-memory","manage agent memory and rules","Read and write agent storage — memory and rules with environment-aware fallback",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2488,2489,2492],{"name":2444,"slug":2445,"type":13},{"name":2490,"slug":2491,"type":13},"Configuration","configuration",{"name":2493,"slug":2494,"type":13},"Memory","memory","2026-05-13T06:14:00.740431",{"items":2497,"total":2686},[2498,2518,2537,2558,2573,2590,2601,2614,2629,2642,2661,2674],{"slug":2499,"name":2499,"fn":2500,"description":2501,"org":2502,"tags":2503,"stars":2515,"repoUrl":2516,"updatedAt":2517},"rushstack-best-practices","manage Rush monorepos with best practices","Provides best practices and guidance for working with Rush monorepos. Use when the user is working in a Rush-based repository, asks about Rush commands (install, update, build, rebuild), needs help with project selection, dependency management, build caching, subspace configuration, or troubleshooting Rush-specific issues.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2504,2505,2508,2509,2512],{"name":2413,"slug":2414,"type":13},{"name":2506,"slug":2507,"type":13},"Local Development","local-development",{"name":9,"slug":8,"type":13},{"name":2510,"slug":2511,"type":13},"Project Management","project-management",{"name":2513,"slug":2514,"type":13},"Rush","rush",6484,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Frushstack","2026-04-06T18:34:44.965032",{"slug":2519,"name":2519,"fn":2520,"description":2521,"org":2522,"tags":2523,"stars":2534,"repoUrl":2535,"updatedAt":2536},"azure-ai-agents-persistent-dotnet","build AI agents with Azure .NET SDK","Azure AI Agents Persistent SDK for .NET. Low-level SDK for creating and managing AI agents with threads, messages, runs, and tools. Use for agent CRUD, conversation threads, streaming responses, function calling, file search, and code interpreter. Triggers: \"PersistentAgentsClient\", \"persistent agents\", \"agent threads\", \"agent runs\", \"streaming agents\", \"function calling agents .NET\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2524,2527,2528,2531],{"name":2525,"slug":2526,"type":13},".NET","net",{"name":2444,"slug":2445,"type":13},{"name":2529,"slug":2530,"type":13},"Azure","azure",{"name":2532,"slug":2533,"type":13},"LLM","llm",2804,"https:\u002F\u002Fgithub.com\u002Fmicrosoft\u002Fskills","2026-07-03T16:32:10.297433",{"slug":2538,"name":2538,"fn":2539,"description":2540,"org":2541,"tags":2542,"stars":2534,"repoUrl":2535,"updatedAt":2557},"azure-ai-anomalydetector-java","build anomaly detection applications with Java","Build anomaly detection applications with Azure AI Anomaly Detector SDK for Java. Use when implementing univariate\u002Fmultivariate anomaly detection, time-series analysis, or AI-powered monitoring.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2543,2546,2547,2550,2553,2554],{"name":2544,"slug":2545,"type":13},"Analytics","analytics",{"name":2529,"slug":2530,"type":13},{"name":2548,"slug":2549,"type":13},"Data Analysis","data-analysis",{"name":2551,"slug":2552,"type":13},"Java","java",{"name":9,"slug":8,"type":13},{"name":2555,"slug":2556,"type":13},"Monitoring","monitoring","2026-05-13T06:14:16.261754",{"slug":2559,"name":2559,"fn":2560,"description":2561,"org":2562,"tags":2563,"stars":2534,"repoUrl":2535,"updatedAt":2572},"azure-ai-contentsafety-java","build content moderation applications with Azure AI","Build content moderation applications with Azure AI Content Safety SDK for Java. Use when implementing text\u002Fimage analysis, blocklist management, or harm detection for hate, violence, sexual content, and self-harm.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2564,2567,2568,2569],{"name":2565,"slug":2566,"type":13},"AI Infrastructure","ai-infrastructure",{"name":2529,"slug":2530,"type":13},{"name":2551,"slug":2552,"type":13},{"name":2570,"slug":2571,"type":13},"Security","security","2026-07-07T06:53:31.293235",{"slug":2574,"name":2574,"fn":2575,"description":2576,"org":2577,"tags":2578,"stars":2534,"repoUrl":2535,"updatedAt":2589},"azure-ai-contentsafety-py","detect harmful content with Azure AI Content Safety","Azure AI Content Safety SDK for Python. Use for detecting harmful content in text and images with multi-severity classification.\nTriggers: \"azure-ai-contentsafety\", \"ContentSafetyClient\", \"content moderation\", \"harmful content\", \"text analysis\", \"image analysis\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2579,2580,2583,2584,2585,2588],{"name":2529,"slug":2530,"type":13},{"name":2581,"slug":2582,"type":13},"Compliance","compliance",{"name":2532,"slug":2533,"type":13},{"name":9,"slug":8,"type":13},{"name":2586,"slug":2587,"type":13},"Python","python",{"name":2570,"slug":2571,"type":13},"2026-07-18T05:14:23.017504",{"slug":2591,"name":2591,"fn":2592,"description":2593,"org":2594,"tags":2595,"stars":2534,"repoUrl":2535,"updatedAt":2600},"azure-ai-language-conversations-py","implement conversational language understanding with Python","Implement Conversational Language Understanding (CLU) using the azure-ai-language-conversations Python SDK. Use when working with ConversationAnalysisClient to analyze conversation intent and entities, building NLP features, or integrating language understanding into applications.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2596,2597,2598,2599],{"name":2544,"slug":2545,"type":13},{"name":2529,"slug":2530,"type":13},{"name":2532,"slug":2533,"type":13},{"name":2586,"slug":2587,"type":13},"2026-07-31T05:54:29.068751",{"slug":2602,"name":2602,"fn":2603,"description":2604,"org":2605,"tags":2606,"stars":2534,"repoUrl":2535,"updatedAt":2613},"azure-ai-translation-text-py","translate text using Azure AI services","Azure AI Text Translation SDK for real-time text translation, transliteration, language detection, and dictionary lookup. Use for translating text content in applications.\nTriggers: \"text translation\", \"translator\", \"translate text\", \"transliterate\", \"TextTranslationClient\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2607,2610,2611,2612],{"name":2608,"slug":2609,"type":13},"API Development","api-development",{"name":2529,"slug":2530,"type":13},{"name":9,"slug":8,"type":13},{"name":2586,"slug":2587,"type":13},"2026-07-18T05:14:16.988376",{"slug":2615,"name":2615,"fn":2616,"description":2617,"org":2618,"tags":2619,"stars":2534,"repoUrl":2535,"updatedAt":2628},"azure-ai-vision-imageanalysis-py","analyze images with Azure AI Vision","Azure AI Vision Image Analysis SDK for captions, tags, objects, OCR, people detection, and smart cropping. Use for computer vision and image understanding tasks.\nTriggers: \"image analysis\", \"computer vision\", \"OCR\", \"object detection\", \"ImageAnalysisClient\", \"image caption\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2620,2621,2624,2627],{"name":2529,"slug":2530,"type":13},{"name":2622,"slug":2623,"type":13},"Computer Vision","computer-vision",{"name":2625,"slug":2626,"type":13},"Images","images",{"name":2586,"slug":2587,"type":13},"2026-07-18T05:14:18.007737",{"slug":2630,"name":2630,"fn":2631,"description":2632,"org":2633,"tags":2634,"stars":2534,"repoUrl":2535,"updatedAt":2641},"azure-appconfiguration-java","manage configuration with Azure App Configuration","Azure App Configuration SDK for Java. Centralized application configuration management with key-value settings, feature flags, and snapshots.\nTriggers: \"ConfigurationClient java\", \"app configuration java\", \"feature flag java\", \"configuration setting java\", \"azure config java\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2635,2636,2637,2640],{"name":2529,"slug":2530,"type":13},{"name":2490,"slug":2491,"type":13},{"name":2638,"slug":2639,"type":13},"Feature Flags","feature-flags",{"name":2551,"slug":2552,"type":13},"2026-07-03T16:32:01.278468",{"slug":2643,"name":2643,"fn":2644,"description":2645,"org":2646,"tags":2647,"stars":2534,"repoUrl":2535,"updatedAt":2660},"azure-cosmos-rust","build applications with Azure Cosmos DB","Azure Cosmos DB library for Rust (NoSQL API). Document CRUD, containers, and globally distributed data.\nTriggers: \"cosmos db rust\", \"CosmosClient rust\", \"document crud rust\", \"NoSQL rust\", \"partition key rust\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2648,2651,2654,2657],{"name":2649,"slug":2650,"type":13},"Cosmos DB","cosmos-db",{"name":2652,"slug":2653,"type":13},"Database","database",{"name":2655,"slug":2656,"type":13},"NoSQL","nosql",{"name":2658,"slug":2659,"type":13},"Rust","rust","2026-07-31T05:54:27.021432",{"slug":2662,"name":2662,"fn":2644,"description":2663,"org":2664,"tags":2665,"stars":2534,"repoUrl":2535,"updatedAt":2673},"azure-cosmos-ts","Azure Cosmos DB JavaScript\u002FTypeScript SDK (@azure\u002Fcosmos) for data plane operations. Use for CRUD operations on documents, queries, bulk operations, and container management. Triggers: \"Cosmos DB\", \"@azure\u002Fcosmos\", \"CosmosClient\", \"document CRUD\", \"NoSQL queries\", \"bulk operations\", \"partition key\", \"container.items\".\n",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2666,2667,2668,2669,2670],{"name":2649,"slug":2650,"type":13},{"name":2652,"slug":2653,"type":13},{"name":9,"slug":8,"type":13},{"name":2655,"slug":2656,"type":13},{"name":2671,"slug":2672,"type":13},"TypeScript","typescript","2026-07-03T16:31:19.368382",{"slug":2675,"name":2675,"fn":2676,"description":2677,"org":2678,"tags":2679,"stars":2534,"repoUrl":2535,"updatedAt":2685},"azure-data-tables-java","build table storage applications with Java","Build table storage applications with Azure Tables SDK for Java. Use when working with Azure Table Storage or Cosmos DB Table API for NoSQL key-value data, schemaless storage, or structured data at scale.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[2680,2681,2682,2683,2684],{"name":2529,"slug":2530,"type":13},{"name":2649,"slug":2650,"type":13},{"name":2652,"slug":2653,"type":13},{"name":2551,"slug":2552,"type":13},{"name":2655,"slug":2656,"type":13},"2026-05-13T06:14:17.582229",267]