[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ENDSRWQ1XYJECFESE5R7EH":3,"skill-same:01M6ENDSRWQ1XYJECFESE5R7EH":46},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":19,"linkOnly":20,"markdownContent":21,"markdownBody":22,"frontMatter":23,"refName":24,"commitSha":25,"skillDirectory":26,"forksCount":27,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":30,"updatedAt":31,"install":32,"resources":45},"01M6ENDSRWQ1XYJECFESE5R7EH","svelte5-inspect",null,"dibstern\u002Fconduit","dibstern","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F16970307?v=4","01M6ENBH1PHAQ5RZZTR2TKTRA7","David Stern","01M6ENBH5ZBECS0MFBF0F10V20",15,"MIT","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsvelte5-inspect\u002FSKILL.md",[],[18],"svelte5 inspect","2026-11-10 10:12:30",false,"---\nname: svelte5-inspect\ndescription: Svelte 5 debugging with $inspect(). Use when the user asks about Svelte DevTools, debugging components, or inspecting reactive state. Also use when debugging Svelte 5 issues where static code analysis is insufficient: reactive chains not propagating ($derived → $effect → render but UI not updating), $state values stale or unexpected at runtime, components receiving wrong props, or $effects firing too often or not at all.\n---\n\n# Svelte 5: Debugging with $inspect()\n\nThe Svelte DevTools browser extension does NOT support Svelte 5. Do not recommend installing it.\n\n## $inspect(...values)\n\nBuilt-in Svelte 5 rune that logs reactive values to the console whenever they change. Dev-mode only — automatically stripped from production builds.\n\n```svelte\n\u003Cscript>\n  let count = $state(0);\n  let user = $state({ name: 'Alice' });\n\n  $inspect(count);           \u002F\u002F logs: \"init\" 0, then \"update\" 1, 2...\n  $inspect(user);            \u002F\u002F deep-tracks object mutations\n  $inspect(count, user);     \u002F\u002F multiple values in one call\n\u003C\u002Fscript>\n```\n\n## Custom handling with .with()\n\nReplace the default console.log with any callback:\n\n```svelte\n$inspect(count).with((type, ...values) => {\n  \u002F\u002F type is \"init\" or \"update\"\n  if (type === 'update') debugger;    \u002F\u002F break on change\n});\n```\n\nCommon patterns:\n- `$inspect(val).with(() => { debugger })` — breakpoint on any change\n- `$inspect(val).with(console.trace)` — log with stack trace\n\n## Rules\n\n- Only works inside reactive contexts (component `\u003Cscript>`, `$effect`, `$derived`)\n- Only runs in dev mode — zero cost in production\n- Tracks deeply: mutating a property on a `$state` object triggers it\n- Cannot be used in `.ts` files — Svelte compiler rune only\n\n## When to ask the developer to add $inspect()\n\nYou can read every `.svelte` file, but you cannot see runtime state. When the bug lives in the gap between what the code says and what actually happens in the browser, ask the developer to add `$inspect()` and report back what the console shows.\n\n**Ask when:**\n\n- **Reactive chain not propagating** — you see `$derived` → `$effect` → render but the UI isn't updating. `$inspect()` pinpoints which link in the chain breaks.\n- **Stale or unexpected values** — a `$state` variable should be X but the UI shows Y. Static analysis can't distinguish timing issues, overwrites from elsewhere, or deep reactivity misses.\n- **Component receiving wrong props** — you suspect the parent passes stale data but can't prove it without runtime evidence.\n- **Effect firing too often or not at all** — `$effect` dependencies are implicit in Svelte 5, so you can't always predict the trigger pattern from code alone.\n- **After your first fix attempt didn't work** — if you patched the code and the user says it's still broken, don't guess again. Ask for `$inspect()` output to get evidence.\n\n**How to ask:**\n\nBe specific. Don't say \"add some inspect calls.\" Say exactly what to inspect and where:\n\n> Add `$inspect(messages, isLoading)` inside `ChatPanel.svelte` and tell me what the console shows when you send a message.\n\nThis gives you the runtime evidence to diagnose instead of guess.\n","# Svelte 5: Debugging with $inspect()\n\nThe Svelte DevTools browser extension does NOT support Svelte 5. Do not recommend installing it.\n\n## $inspect(...values)\n\nBuilt-in Svelte 5 rune that logs reactive values to the console whenever they change. Dev-mode only — automatically stripped from production builds.\n\n```svelte\n\u003Cscript>\n  let count = $state(0);\n  let user = $state({ name: 'Alice' });\n\n  $inspect(count);           \u002F\u002F logs: \"init\" 0, then \"update\" 1, 2...\n  $inspect(user);            \u002F\u002F deep-tracks object mutations\n  $inspect(count, user);     \u002F\u002F multiple values in one call\n\u003C\u002Fscript>\n```\n\n## Custom handling with .with()\n\nReplace the default console.log with any callback:\n\n```svelte\n$inspect(count).with((type, ...values) => {\n  \u002F\u002F type is \"init\" or \"update\"\n  if (type === 'update') debugger;    \u002F\u002F break on change\n});\n```\n\nCommon patterns:\n- `$inspect(val).with(() => { debugger })` — breakpoint on any change\n- `$inspect(val).with(console.trace)` — log with stack trace\n\n## Rules\n\n- Only works inside reactive contexts (component `\u003Cscript>`, `$effect`, `$derived`)\n- Only runs in dev mode — zero cost in production\n- Tracks deeply: mutating a property on a `$state` object triggers it\n- Cannot be used in `.ts` files — Svelte compiler rune only\n\n## When to ask the developer to add $inspect()\n\nYou can read every `.svelte` file, but you cannot see runtime state. When the bug lives in the gap between what the code says and what actually happens in the browser, ask the developer to add `$inspect()` and report back what the console shows.\n\n**Ask when:**\n\n- **Reactive chain not propagating** — you see `$derived` → `$effect` → render but the UI isn't updating. `$inspect()` pinpoints which link in the chain breaks.\n- **Stale or unexpected values** — a `$state` variable should be X but the UI shows Y. Static analysis can't distinguish timing issues, overwrites from elsewhere, or deep reactivity misses.\n- **Component receiving wrong props** — you suspect the parent passes stale data but can't prove it without runtime evidence.\n- **Effect firing too often or not at all** — `$effect` dependencies are implicit in Svelte 5, so you can't always predict the trigger pattern from code alone.\n- **After your first fix attempt didn't work** — if you patched the code and the user says it's still broken, don't guess again. Ask for `$inspect()` output to get evidence.\n\n**How to ask:**\n\nBe specific. Don't say \"add some inspect calls.\" Say exactly what to inspect and where:\n\n> Add `$inspect(messages, isLoading)` inside `ChatPanel.svelte` and tell me what the console shows when you send a message.\n\nThis gives you the runtime evidence to diagnose instead of guess.\n",{},"main","2390b741d6daa7385cfb01fe351f64305cda49d5",".opencode\u002Fskills\u002Fsvelte5-inspect",2,"https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit","https:\u002F\u002Fgithub.com\u002Fdibstern","Software Engineer at Renowned, ex-Rome2Rio","2026-10-29 15:51:30",{"source":7,"skillName":5,"commands":33,"prompt":43,"zipAvailable":44},[34,37,40],{"tool":35,"command":36},"npx","npx skills add dibstern\u002Fconduit --skill svelte5-inspect",{"tool":38,"command":39},"bunx","bunx skills add dibstern\u002Fconduit --skill svelte5-inspect",{"tool":41,"command":42},"pnpm","pnpm dlx skills add dibstern\u002Fconduit --skill svelte5-inspect","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsvelte5-inspect\u002FSKILL.md",true,[],[47,62,73,100,122,151],{"skillNo":48,"name":49,"nameZh":6,"description":50,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":51,"categories":52,"keywords":53,"publishedAt":19},"01M6ENE9PDF6ZTQ0HN0M2NY8YN","release-notes","Drafts release notes. Fixture skill for conduit's recorded skill-loads-turn trace.","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002Fclaude-sdk-traces\u002Fskill-loads-turn-skills\u002Frelease-notes\u002FSKILL.md",[],[54,55,56,57,58,59,60,61],"notes","release notes","release","loads","fixture","fixture skill","trace","conduit",{"skillNo":63,"name":64,"nameZh":6,"description":65,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":68,"publishedAt":19},"01M6ENE72EV36TVDA9A00WHZWP","changelog-style","House style for changelog entries. Fixture skill for conduit's recorded skill-loads-turn trace.","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002Ftest\u002Ffixtures\u002Fclaude-sdk-traces\u002Fskill-loads-turn-skills\u002Fchangelog-style\u002FSKILL.md",[],[69,70,71,61,57,58,72,59,60],"changelog","style","changelog style","entries",{"skillNo":74,"name":75,"nameZh":6,"description":76,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":77,"categories":78,"keywords":79,"publishedAt":19},"01M6ENE3R4WX66WR1SNJ98F89W","typescript-advanced-types","Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Ftypescript-advanced-types\u002FSKILL.md",[],[80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99],"types","typescript","typescript advanced types","typescript advanced","utility","type","logic","time","type system","reusable","master","use","template","system","projects","applications","Safety","compile","safe","Type Safety",{"skillNo":101,"name":102,"nameZh":6,"description":103,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":111,"publishedAt":19},"01M6ENDWT23VWB5YJBXZFBRYRZ","sveltekit-svelte5-tailwind-skill","Comprehensive integration skill for building sites with SvelteKit 2, Svelte 5, and Tailwind CSS v4","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fsveltekit-svelte5-tailwind-skill\u002FSKILL.md",[106],{"categoryNo":107,"categoryName":108,"taxonomyType":109,"taxonomyTypeDesc":110},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[112,113,114,115,116,117,118,119,120,121],"Tailwind","sveltekit","sveltekit svelte5 tailwind skill","only","sites","svelte","Tailwind CSS","svelte 5","integration","css",{"skillNo":123,"name":124,"nameZh":6,"description":125,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":126,"categories":127,"keywords":132,"publishedAt":19},"01M6ENDNVCSJ87AD76V5QTKG49","playwright-cli","Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fplaywright-cli\u002FSKILL.md",[128,131],{"categoryNo":129,"categoryName":130,"taxonomyType":109,"taxonomyTypeDesc":110},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":107,"categoryName":108,"taxonomyType":109,"taxonomyTypeDesc":110},[133,134,135,136,137,138,139,91,140,141,95,142,143,144,145,146,147,148,149,150],"cli","playwright","playwright cli","browser","web testing","test web","take","extract","Bash","data","forms","web","test","screenshots","testing","Data Extraction","form","pages",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":155,"categories":156,"keywords":162,"publishedAt":19},"01M6ENDJC6HDRGJXJ3Y5PZPTWM","modern-javascript-patterns","Master ES6+ features including async\u002Fawait, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for writing clean, efficient JavaScript code. Use when refactoring legacy code, implementing modern patterns, or optimizing JavaScript applications.","https:\u002F\u002Fgithub.com\u002Fdibstern\u002Fconduit\u002Fblob\u002Fmain\u002F.opencode\u002Fskills\u002Fmodern-javascript-patterns\u002FSKILL.md",[157],{"categoryNo":158,"categoryName":159,"taxonomyType":160,"taxonomyTypeDesc":161},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[163,164,165,91,166,167,95,168,169,170,171,172,173,174,175,176,177,178,90,179],"javascript","patterns","modern javascript patterns","refactoring legacy code","modules","writing","code","functional programming","programming","refactoring","promises","functional","es6","operators","async","Legacy","clean"]