[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QJ1ECHERKGDFHMQB5DX94H":3,"skill-same:01M6QJ1ECHERKGDFHMQB5DX94H":77},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":22,"publishedAt":43,"linkOnly":44,"markdownContent":45,"markdownBody":46,"frontMatter":47,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":13,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":62,"install":63,"resources":76},"01M6QJ1ECHERKGDFHMQB5DX94H","inspect-state",null,"Master runtime state inspection: how to examine variable values, object state, and data structures during execution. Use when debugging, understanding variable contents, or when code behavior is unexpected. Triggers especially when user says \"inspect variable\", \"check state\", \"what's in this object\", \"variable value\", \"runtime inspection\" or \"debug state\".","ImaginerLabs\u002Fskill-manager","ImaginerLabs","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F214277308?v=4","01M6QGGDPNF15RMMT1RCFDH9FN","01M6QGGDTH5BY64DQ123NR8M33",0,"MIT","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Finspect-state\u002FSKILL.md",[17],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42],"inspect state","state","inspect","master","value","object","how to","triggers","watch","runtime","data structures","debug","use","check","coding","how","execution","data","code","debugging","2026-11-10 10:12:30",false,"---\nname: inspect-state\ndescription: >-\n  Master runtime state inspection: how to examine variable values, object state, and data structures during execution. Use when debugging, understanding variable contents, or when code behavior is unexpected. Triggers especially when user says \"inspect variable\", \"check state\", \"what's in this object\", \"variable value\", \"runtime inspection\" or \"debug state\".\ncategory: coding\npriority: P2\ntrigger_patterns:\n  - \"inspect variable\"\n  - \"check state\"\n  - \"what's in this object\"\n  - \"variable value\"\n  - \"runtime inspection\"\n  - \"debug state\"\n  - \"watch variable\"\n---\n\n# Inspect State — Runtime Variable Analysis Framework\n\n## Overview\n\nInspect-state is a **behavioral specification skill** that encapsulates the methodology for **systematically examining runtime state to understand why code behaves as it does**.\n\nThis skill embodies the discipline of developers who've added 50 console.logs instead of strategically inspecting state and know the difference debugging efficiency makes.\n\n## Core Philosophy\n\n### The State Inspection Principle\n\n> \"Code behavior is determined by state. When behavior is unexpected, the state is wrong somewhere. Your job is to find WHERE the state became wrong, not just WHAT is wrong.\"\n\n### State vs Behavior\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    STATE vs BEHAVIOR                          │\n│                                                               │\n│    BEHAVIOR: What code DOES                                    │\n│    STATE: What code KNOWS                                     │\n│                                                               │\n│    When behavior is wrong...                                  │\n│    → State is wrong somewhere                                 │\n│    → Find WHERE state became wrong                            │\n│    → Fix THAT                                                 │\n│                                                               │\n│    Don't just patch behavior.                                 │\n│    Fix the state.                                             │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Decision Framework\n\n### What to Inspect\n\n| Question | Approach |\n|----------|----------|\n| What's in this variable? | Console.log or debugger |\n| Where did this value come from? | Trace backwards |\n| When did this change? | Watch\u002Fbreakpoint |\n| Why is this undefined? | Inspect caller, check conditions |\n| What changed this object? | Break on modification |\n\n### State Inspection Points\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                  STATE INSPECTION POINTS                     │\n│                                                               │\n│  1. ENTRY: What did I receive?                              │\n│     └─ function(x) → x is what?                             │\n│                                                               │\n│  2. TRANSFORM: What changed?                                │\n│     └─ const y = x + 1 → y is x + 1?                        │\n│                                                               │\n│  3. BRANCH: What triggered this path?                        │\n│     └─ if (condition) → What is condition?                  │\n│                                                               │\n│  4. EXIT: What am I returning?                              │\n│     └─ return result → result is what?                       │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Behavioral Specification\n\n### Phase 1: Basic Inspection\n\n#### 1.1 Console Inspection\n\n```typescript\n\u002F\u002F Quick state dump\nconsole.log('Variable:', variable);\nconsole.log('Object:', JSON.stringify(obj, null, 2));\nconsole.log('Type:', typeof variable);\nconsole.log('Keys:', Object.keys(obj));\n\n\u002F\u002F Structured inspection\nconsole.table([{ name: 'a', value: 1 }, { name: 'b', value: 2 }]);\n\n\u002F\u002F Grouped inspection\nconsole.group('Function X');\nconsole.log('Input:', input);\nconsole.log('Processing...');\nconsole.log('Output:', output);\nconsole.groupEnd();\n```\n\n#### 1.2 Debugger Inspection\n\n```typescript\n\u002F\u002F Breakpoint at critical point\nfunction process(input) {\n  debugger; \u002F\u002F Execution stops here\n\n  \u002F\u002F Then use browser DevTools:\n  \u002F\u002F - Scope panel: see local variables\n  \u002F\u002F - Watch: add specific expressions\n  \u002F\u002F - Console: run expressions\n}\n```\n\n### Phase 2: Strategic Inspection\n\n#### 2.1 Before and After Pattern\n\n```typescript\n\u002F\u002F INSPECT STATE TRANSITION\nfunction transform(data) {\n  console.log('BEFORE:', data); \u002F\u002F What came in?\n\n  const result = doSomething(data);\n\n  console.log('AFTER:', result); \u002F\u002F What came out?\n  \u002F\u002F If before === after but expected different, doSomething didn't work\n  \u002F\u002F If after === unexpected, find what changed in doSomething\n\n  return result;\n}\n```\n\n#### 2.2 Branch Inspection\n\n```typescript\nfunction handleUser(user) {\n  \u002F\u002F INSPECT THE BRANCH CONDITION\n  console.log('user.isAdmin:', user.isAdmin); \u002F\u002F Is this what you think?\n\n  if (user.isAdmin) {\n    \u002F\u002F INSPECT STATE IN BRANCH\n    console.log('Entered admin branch');\n    \u002F\u002F What admin-specific state exists?\n  } else {\n    console.log('Entered regular branch');\n  }\n}\n```\n\n#### 2.3 Object Deep Inspection\n\n```typescript\n\u002F\u002F Inspect nested structure\nconsole.log('user:', user);\nconsole.log('user.profile:', user.profile);\nconsole.log('user.profile.settings:', user.profile?.settings);\n\n\u002F\u002F Or use structured inspect\nconst inspect = (obj, path = '') => {\n  for (const key of Object.keys(obj)) {\n    console.log(`${path}${key}:`, obj[key]);\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      inspect(obj[key], `${path}${key}.`);\n    }\n  }\n};\ninspect(user);\n```\n\n### Phase 3: Tracking State Changes\n\n#### 3.1 Change Detection\n\n```typescript\n\u002F\u002F Before modification\nconsole.log('BEFORE user:', { ...user });\n\n\u002F\u002F Make change\nuser.name = 'New Name';\n\n\u002F\u002F After modification\nconsole.log('AFTER user:', { ...user });\n\n\u002F\u002F Or use Proxy for automatic tracking\nconst tracked = new Proxy(original, {\n  set(target, key, value) {\n    console.log(`Setting ${String(key)} from ${target[key]} to ${value}`);\n    target[key] = value;\n    return true;\n  }\n});\n```\n\n#### 3.2 Break on Modification\n\n```typescript\n\u002F\u002F Using DevTools:\n\u002F\u002F 1. Find the variable in Scope\n\u002F\u002F 2. Right-click → \"Log when value changes\" or \"Break on value change\"\n\n\u002F\u002F Or in code:\n\u002F\u002F For objects, use Proxy\nconst watchObject = (obj, name) => {\n  return new Proxy(obj, {\n    set(target, key, value) {\n      console.log(`[WATCH ${name}] ${String(key)} changed`);\n      target[key] = value;\n      return true;\n    }\n  });\n};\n\nconst watchedUser = watchObject(user, 'user');\nwatchedUser.name = 'Changed'; \u002F\u002F Logs: [WATCH user] name changed\n```\n\n### Phase 4: Common State Issues\n\n#### 4.1 Undefined vs Null\n\n```typescript\n\u002F\u002F Issue: Variable is undefined\n\u002F\u002F Inspect:\n\u002F\u002F 1. Where should it come from?\n\u002F\u002F 2. Did that code run?\n\u002F\u002F 3. Did something reset it?\n\n\u002F\u002F Issue: Variable is null\n\u002F\u002F Inspect:\n\u002F\u002F 1. Explicitly set to null?\n\u002F\u002F 2. Failed API response?\n\u002F\u002F 3. Failed query?\n\n\u002F\u002F Debug\nconsole.log('x is:', x, 'type:', typeof x);\n\u002F\u002F undefined = never assigned\n\u002F\u002F null = explicitly null\n```\n\n#### 4.2 Stale State\n\n```typescript\n\u002F\u002F Issue: State not updating\n\u002F\u002F Symptom: \"I changed X but Y still has old value\"\n\n\u002F\u002F Common causes:\n\u002F\u002F 1. Closure capturing old value\nfor (var i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100); \u002F\u002F All log 3!\n}\n\n\u002F\u002F 2. React state not syncing\n\u002F\u002F Need to check if setState actually ran\n\n\u002F\u002F 3. Cached value not invalidated\n\u002F\u002F console.log('Cache before:', cache.get('key'));\n\u002F\u002F Make change\n\u002F\u002F console.log('Cache after:', cache.get('key'));\n```\n\n#### 4.3 Object Reference Issues\n\n```typescript\n\u002F\u002F Issue: \"I changed obj2 but obj1 changed too!\"\n\u002F\u002F Cause: Both point to same object\n\nconst obj1 = { x: 1 };\nconst obj2 = obj1; \u002F\u002F Same reference!\n\nobj2.x = 2;\nconsole.log(obj1.x); \u002F\u002F 2 - obj1 was modified too!\n\n\u002F\u002F Inspect references\nconsole.log('obj1 === obj2:', obj1 === obj2); \u002F\u002F true = same reference\nconsole.log('obj1:', obj1);\nconsole.log('obj2:', obj2);\n```\n\n## Common Scenarios\n\n### Scenario 1: \"This variable should have a value but it's undefined\"\n\n```typescript\n\u002F\u002F STEP 1: Where should it come from?\nfunction getUser(id) {\n  return db.users.find(id); \u002F\u002F Should return user\n}\n\n\u002F\u002F STEP 2: Inspect at the source\nconst user = getUser(id);\nconsole.log('user from db:', user); \u002F\u002F undefined??\n\n\u002F\u002F STEP 3: Check the input\nconsole.log('id passed:', id); \u002F\u002F Wrong id?\n\n\u002F\u002F STEP 4: Check the query\nconsole.log('db.users:', db.users); \u002F\u002F Empty?\n\n\u002F\u002F Continue until found...\n```\n\n### Scenario 2: \"Object has wrong properties\"\n\n```typescript\n\u002F\u002F Symptom: user.name works but user.email doesn't\n\u002F\u002F Expected: { name: 'John', email: 'john@example.com' }\n\u002F\u002F Actual: { name: 'John' }\n\n\u002F\u002F Inspect the object\nconsole.log('user keys:', Object.keys(user));\nconsole.log('user:', user);\n\n\u002F\u002F Found: email was never set\n\u002F\u002F Look at where user was created\nconst user = { name: 'John' }; \u002F\u002F Missing email!\n```\n\n### Scenario 3: \"Array is empty when it shouldn't be\"\n\n```typescript\n\u002F\u002F STEP 1: Where does array come from?\nconst results = query.filter(item => item.active);\n\n\u002F\u002F STEP 2: Inspect before filter\nconsole.log('Before filter:', query);\nconsole.log('Query length:', query.length);\n\n\u002F\u002F STEP 3: Inspect filter condition\nconsole.log('Item:', item, 'item.active:', item.active);\n\n\u002F\u002F STEP 4: Or use more specific filter\nconst results = query.filter(item => {\n  console.log('Checking:', item);\n  return item.active;\n});\n```\n\n## The State Inspection Checklist\n\n```\nSTATE INSPECTION CHECKLIST\n===========================\n\n□ 1. What should the state be?\n□ 2. What is the actual state?\n□ 3. Where should it come from?\n□ 4. Did that code execute?\n□ 5. Did the value change?\n□ 6. Is there a reference issue?\n□ 7. Is there stale state?\n\nFOR OBJECTS:\n□ Inspect keys: Object.keys(obj)\n□ Inspect values: Object.values(obj)\n□ Inspect entries: Object.entries(obj)\n□ Check for undefined: obj.missingKey\n\nFOR ARRAYS:\n□ Check length: arr.length\n□ Check contents: arr[0], arr[1]\n□ Check for undefined: arr[1000]\n\nFOR REFERENCES:\n□ Check equality: obj1 === obj2\n□ Clone to test: JSON.parse(JSON.stringify(obj))\n```\n\n## Debugging Patterns\n\n### Pattern 1: Log Location Context\n\n```typescript\n\u002F\u002F BAD: Where did this log come from?\nconsole.log('Value:', value);\n\n\u002F\u002F GOOD: Clear source\nconsole.log('[processUser] value:', value);\nconsole.log('[getUserFromDB] value:', value);\nconsole.log('[validateUser] value:', value);\n```\n\n### Pattern 2: Format for Readability\n\n```typescript\n\u002F\u002F BAD: Messy output\nconsole.log('user', user, 'order', order);\n\n\u002F\u002F GOOD: Structured output\nconsole.log({\n  action: 'processOrder',\n  user,\n  order,\n  result,\n});\n```\n\n### Pattern 3: Conditional Logging\n\n```typescript\n\u002F\u002F Only log in debug mode\nconst DEBUG = process.env.DEBUG === 'true';\n\nfunction process(data) {\n  if (DEBUG) console.log('[process] input:', data);\n\n  const result = doWork(data);\n\n  if (DEBUG) console.log('[process] output:', result);\n\n  return result;\n}\n```\n\n## Anti-Patterns\n\n### 1. Log Everything\n\n```typescript\n\u002F\u002F BAD: Noise, not signal\nconsole.log('1');\nconsole.log('2');\nconsole.log('a');\nconsole.log('b');\n\u002F\u002F Now you can't find anything\n\n\u002F\u002F GOOD: Strategic logging\nconsole.log('Before critical operation:', importantState);\n```\n\n### 2. Not Checking the Right Thing\n\n```typescript\n\u002F\u002F BAD: Checked wrong variable\nconsole.log('userId:', userId); \u002F\u002F Correct\n\u002F\u002F But bug is in user.email...\n\n\u002F\u002F GOOD: Check systematically\nconsole.log('user:', user); \u002F\u002F See everything\n```\n\n### 3. Modifying State to Debug\n\n```typescript\n\u002F\u002F BAD: Adding to production code\nif (data.length > 0) {\n  \u002F\u002F Now behavior changed\n}\n\n\u002F\u002F GOOD: Use debugger\ndebugger; \u002F\u002F Read without modifying\n```\n\n## Key Principles\n\n### 1. Inspect Before Assuming\n\nNever assume what state is. Inspect it.\n\n### 2. One Thing at a Time\n\nChange one thing, inspect one thing.\n\n### 3. Track State Backwards\n\nState came from somewhere. Trace backwards to find the source.\n\n### 4. Use the Right Tool\n\nConsole.log for quick checks. Debugger for deep inspection.\n\n### 5. Compare Expected vs Actual\n\nState inspection is always comparing \"what I expected\" to \"what I got\".\n\n## Relationship to Other Skills\n\n- `debug-session` — Uses state inspection during debugging\n- `trace-execution` — Often inspect state at trace points\n- `understand-error` — Errors guide what to inspect\n- `reproduce-bug` — State inspection for isolation\n- `inspect-state` — This IS this skill (self-referential)\n","# Inspect State — Runtime Variable Analysis Framework\n\n## Overview\n\nInspect-state is a **behavioral specification skill** that encapsulates the methodology for **systematically examining runtime state to understand why code behaves as it does**.\n\nThis skill embodies the discipline of developers who've added 50 console.logs instead of strategically inspecting state and know the difference debugging efficiency makes.\n\n## Core Philosophy\n\n### The State Inspection Principle\n\n> \"Code behavior is determined by state. When behavior is unexpected, the state is wrong somewhere. Your job is to find WHERE the state became wrong, not just WHAT is wrong.\"\n\n### State vs Behavior\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                    STATE vs BEHAVIOR                          │\n│                                                               │\n│    BEHAVIOR: What code DOES                                    │\n│    STATE: What code KNOWS                                     │\n│                                                               │\n│    When behavior is wrong...                                  │\n│    → State is wrong somewhere                                 │\n│    → Find WHERE state became wrong                            │\n│    → Fix THAT                                                 │\n│                                                               │\n│    Don't just patch behavior.                                 │\n│    Fix the state.                                             │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Decision Framework\n\n### What to Inspect\n\n| Question | Approach |\n|----------|----------|\n| What's in this variable? | Console.log or debugger |\n| Where did this value come from? | Trace backwards |\n| When did this change? | Watch\u002Fbreakpoint |\n| Why is this undefined? | Inspect caller, check conditions |\n| What changed this object? | Break on modification |\n\n### State Inspection Points\n\n```\n┌─────────────────────────────────────────────────────────────┐\n│                  STATE INSPECTION POINTS                     │\n│                                                               │\n│  1. ENTRY: What did I receive?                              │\n│     └─ function(x) → x is what?                             │\n│                                                               │\n│  2. TRANSFORM: What changed?                                │\n│     └─ const y = x + 1 → y is x + 1?                        │\n│                                                               │\n│  3. BRANCH: What triggered this path?                        │\n│     └─ if (condition) → What is condition?                  │\n│                                                               │\n│  4. EXIT: What am I returning?                              │\n│     └─ return result → result is what?                       │\n└─────────────────────────────────────────────────────────────┘\n```\n\n## Behavioral Specification\n\n### Phase 1: Basic Inspection\n\n#### 1.1 Console Inspection\n\n```typescript\n\u002F\u002F Quick state dump\nconsole.log('Variable:', variable);\nconsole.log('Object:', JSON.stringify(obj, null, 2));\nconsole.log('Type:', typeof variable);\nconsole.log('Keys:', Object.keys(obj));\n\n\u002F\u002F Structured inspection\nconsole.table([{ name: 'a', value: 1 }, { name: 'b', value: 2 }]);\n\n\u002F\u002F Grouped inspection\nconsole.group('Function X');\nconsole.log('Input:', input);\nconsole.log('Processing...');\nconsole.log('Output:', output);\nconsole.groupEnd();\n```\n\n#### 1.2 Debugger Inspection\n\n```typescript\n\u002F\u002F Breakpoint at critical point\nfunction process(input) {\n  debugger; \u002F\u002F Execution stops here\n\n  \u002F\u002F Then use browser DevTools:\n  \u002F\u002F - Scope panel: see local variables\n  \u002F\u002F - Watch: add specific expressions\n  \u002F\u002F - Console: run expressions\n}\n```\n\n### Phase 2: Strategic Inspection\n\n#### 2.1 Before and After Pattern\n\n```typescript\n\u002F\u002F INSPECT STATE TRANSITION\nfunction transform(data) {\n  console.log('BEFORE:', data); \u002F\u002F What came in?\n\n  const result = doSomething(data);\n\n  console.log('AFTER:', result); \u002F\u002F What came out?\n  \u002F\u002F If before === after but expected different, doSomething didn't work\n  \u002F\u002F If after === unexpected, find what changed in doSomething\n\n  return result;\n}\n```\n\n#### 2.2 Branch Inspection\n\n```typescript\nfunction handleUser(user) {\n  \u002F\u002F INSPECT THE BRANCH CONDITION\n  console.log('user.isAdmin:', user.isAdmin); \u002F\u002F Is this what you think?\n\n  if (user.isAdmin) {\n    \u002F\u002F INSPECT STATE IN BRANCH\n    console.log('Entered admin branch');\n    \u002F\u002F What admin-specific state exists?\n  } else {\n    console.log('Entered regular branch');\n  }\n}\n```\n\n#### 2.3 Object Deep Inspection\n\n```typescript\n\u002F\u002F Inspect nested structure\nconsole.log('user:', user);\nconsole.log('user.profile:', user.profile);\nconsole.log('user.profile.settings:', user.profile?.settings);\n\n\u002F\u002F Or use structured inspect\nconst inspect = (obj, path = '') => {\n  for (const key of Object.keys(obj)) {\n    console.log(`${path}${key}:`, obj[key]);\n    if (typeof obj[key] === 'object' && obj[key] !== null) {\n      inspect(obj[key], `${path}${key}.`);\n    }\n  }\n};\ninspect(user);\n```\n\n### Phase 3: Tracking State Changes\n\n#### 3.1 Change Detection\n\n```typescript\n\u002F\u002F Before modification\nconsole.log('BEFORE user:', { ...user });\n\n\u002F\u002F Make change\nuser.name = 'New Name';\n\n\u002F\u002F After modification\nconsole.log('AFTER user:', { ...user });\n\n\u002F\u002F Or use Proxy for automatic tracking\nconst tracked = new Proxy(original, {\n  set(target, key, value) {\n    console.log(`Setting ${String(key)} from ${target[key]} to ${value}`);\n    target[key] = value;\n    return true;\n  }\n});\n```\n\n#### 3.2 Break on Modification\n\n```typescript\n\u002F\u002F Using DevTools:\n\u002F\u002F 1. Find the variable in Scope\n\u002F\u002F 2. Right-click → \"Log when value changes\" or \"Break on value change\"\n\n\u002F\u002F Or in code:\n\u002F\u002F For objects, use Proxy\nconst watchObject = (obj, name) => {\n  return new Proxy(obj, {\n    set(target, key, value) {\n      console.log(`[WATCH ${name}] ${String(key)} changed`);\n      target[key] = value;\n      return true;\n    }\n  });\n};\n\nconst watchedUser = watchObject(user, 'user');\nwatchedUser.name = 'Changed'; \u002F\u002F Logs: [WATCH user] name changed\n```\n\n### Phase 4: Common State Issues\n\n#### 4.1 Undefined vs Null\n\n```typescript\n\u002F\u002F Issue: Variable is undefined\n\u002F\u002F Inspect:\n\u002F\u002F 1. Where should it come from?\n\u002F\u002F 2. Did that code run?\n\u002F\u002F 3. Did something reset it?\n\n\u002F\u002F Issue: Variable is null\n\u002F\u002F Inspect:\n\u002F\u002F 1. Explicitly set to null?\n\u002F\u002F 2. Failed API response?\n\u002F\u002F 3. Failed query?\n\n\u002F\u002F Debug\nconsole.log('x is:', x, 'type:', typeof x);\n\u002F\u002F undefined = never assigned\n\u002F\u002F null = explicitly null\n```\n\n#### 4.2 Stale State\n\n```typescript\n\u002F\u002F Issue: State not updating\n\u002F\u002F Symptom: \"I changed X but Y still has old value\"\n\n\u002F\u002F Common causes:\n\u002F\u002F 1. Closure capturing old value\nfor (var i = 0; i \u003C 3; i++) {\n  setTimeout(() => console.log(i), 100); \u002F\u002F All log 3!\n}\n\n\u002F\u002F 2. React state not syncing\n\u002F\u002F Need to check if setState actually ran\n\n\u002F\u002F 3. Cached value not invalidated\n\u002F\u002F console.log('Cache before:', cache.get('key'));\n\u002F\u002F Make change\n\u002F\u002F console.log('Cache after:', cache.get('key'));\n```\n\n#### 4.3 Object Reference Issues\n\n```typescript\n\u002F\u002F Issue: \"I changed obj2 but obj1 changed too!\"\n\u002F\u002F Cause: Both point to same object\n\nconst obj1 = { x: 1 };\nconst obj2 = obj1; \u002F\u002F Same reference!\n\nobj2.x = 2;\nconsole.log(obj1.x); \u002F\u002F 2 - obj1 was modified too!\n\n\u002F\u002F Inspect references\nconsole.log('obj1 === obj2:', obj1 === obj2); \u002F\u002F true = same reference\nconsole.log('obj1:', obj1);\nconsole.log('obj2:', obj2);\n```\n\n## Common Scenarios\n\n### Scenario 1: \"This variable should have a value but it's undefined\"\n\n```typescript\n\u002F\u002F STEP 1: Where should it come from?\nfunction getUser(id) {\n  return db.users.find(id); \u002F\u002F Should return user\n}\n\n\u002F\u002F STEP 2: Inspect at the source\nconst user = getUser(id);\nconsole.log('user from db:', user); \u002F\u002F undefined??\n\n\u002F\u002F STEP 3: Check the input\nconsole.log('id passed:', id); \u002F\u002F Wrong id?\n\n\u002F\u002F STEP 4: Check the query\nconsole.log('db.users:', db.users); \u002F\u002F Empty?\n\n\u002F\u002F Continue until found...\n```\n\n### Scenario 2: \"Object has wrong properties\"\n\n```typescript\n\u002F\u002F Symptom: user.name works but user.email doesn't\n\u002F\u002F Expected: { name: 'John', email: 'john@example.com' }\n\u002F\u002F Actual: { name: 'John' }\n\n\u002F\u002F Inspect the object\nconsole.log('user keys:', Object.keys(user));\nconsole.log('user:', user);\n\n\u002F\u002F Found: email was never set\n\u002F\u002F Look at where user was created\nconst user = { name: 'John' }; \u002F\u002F Missing email!\n```\n\n### Scenario 3: \"Array is empty when it shouldn't be\"\n\n```typescript\n\u002F\u002F STEP 1: Where does array come from?\nconst results = query.filter(item => item.active);\n\n\u002F\u002F STEP 2: Inspect before filter\nconsole.log('Before filter:', query);\nconsole.log('Query length:', query.length);\n\n\u002F\u002F STEP 3: Inspect filter condition\nconsole.log('Item:', item, 'item.active:', item.active);\n\n\u002F\u002F STEP 4: Or use more specific filter\nconst results = query.filter(item => {\n  console.log('Checking:', item);\n  return item.active;\n});\n```\n\n## The State Inspection Checklist\n\n```\nSTATE INSPECTION CHECKLIST\n===========================\n\n□ 1. What should the state be?\n□ 2. What is the actual state?\n□ 3. Where should it come from?\n□ 4. Did that code execute?\n□ 5. Did the value change?\n□ 6. Is there a reference issue?\n□ 7. Is there stale state?\n\nFOR OBJECTS:\n□ Inspect keys: Object.keys(obj)\n□ Inspect values: Object.values(obj)\n□ Inspect entries: Object.entries(obj)\n□ Check for undefined: obj.missingKey\n\nFOR ARRAYS:\n□ Check length: arr.length\n□ Check contents: arr[0], arr[1]\n□ Check for undefined: arr[1000]\n\nFOR REFERENCES:\n□ Check equality: obj1 === obj2\n□ Clone to test: JSON.parse(JSON.stringify(obj))\n```\n\n## Debugging Patterns\n\n### Pattern 1: Log Location Context\n\n```typescript\n\u002F\u002F BAD: Where did this log come from?\nconsole.log('Value:', value);\n\n\u002F\u002F GOOD: Clear source\nconsole.log('[processUser] value:', value);\nconsole.log('[getUserFromDB] value:', value);\nconsole.log('[validateUser] value:', value);\n```\n\n### Pattern 2: Format for Readability\n\n```typescript\n\u002F\u002F BAD: Messy output\nconsole.log('user', user, 'order', order);\n\n\u002F\u002F GOOD: Structured output\nconsole.log({\n  action: 'processOrder',\n  user,\n  order,\n  result,\n});\n```\n\n### Pattern 3: Conditional Logging\n\n```typescript\n\u002F\u002F Only log in debug mode\nconst DEBUG = process.env.DEBUG === 'true';\n\nfunction process(data) {\n  if (DEBUG) console.log('[process] input:', data);\n\n  const result = doWork(data);\n\n  if (DEBUG) console.log('[process] output:', result);\n\n  return result;\n}\n```\n\n## Anti-Patterns\n\n### 1. Log Everything\n\n```typescript\n\u002F\u002F BAD: Noise, not signal\nconsole.log('1');\nconsole.log('2');\nconsole.log('a');\nconsole.log('b');\n\u002F\u002F Now you can't find anything\n\n\u002F\u002F GOOD: Strategic logging\nconsole.log('Before critical operation:', importantState);\n```\n\n### 2. Not Checking the Right Thing\n\n```typescript\n\u002F\u002F BAD: Checked wrong variable\nconsole.log('userId:', userId); \u002F\u002F Correct\n\u002F\u002F But bug is in user.email...\n\n\u002F\u002F GOOD: Check systematically\nconsole.log('user:', user); \u002F\u002F See everything\n```\n\n### 3. Modifying State to Debug\n\n```typescript\n\u002F\u002F BAD: Adding to production code\nif (data.length > 0) {\n  \u002F\u002F Now behavior changed\n}\n\n\u002F\u002F GOOD: Use debugger\ndebugger; \u002F\u002F Read without modifying\n```\n\n## Key Principles\n\n### 1. Inspect Before Assuming\n\nNever assume what state is. Inspect it.\n\n### 2. One Thing at a Time\n\nChange one thing, inspect one thing.\n\n### 3. Track State Backwards\n\nState came from somewhere. Trace backwards to find the source.\n\n### 4. Use the Right Tool\n\nConsole.log for quick checks. Debugger for deep inspection.\n\n### 5. Compare Expected vs Actual\n\nState inspection is always comparing \"what I expected\" to \"what I got\".\n\n## Relationship to Other Skills\n\n- `debug-session` — Uses state inspection during debugging\n- `trace-execution` — Often inspect state at trace points\n- `understand-error` — Errors guide what to inspect\n- `reproduce-bug` — State inspection for isolation\n- `inspect-state` — This IS this skill (self-referential)\n",{"name":5,"category":37,"priority":48,"description":7,"trigger_patterns":49},"P2",[50,51,52,53,54,55,56],"inspect variable","check state","what's in this object","variable value","runtime inspection","debug state","watch variable","main","b9a52d8e27455bdad953d64928696d028223ea1b","skills\u002Fcoding\u002Finspect-state","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager","https:\u002F\u002Fgithub.com\u002FImaginerLabs","2026-04-18 16:27:13",{"source":8,"skillName":5,"commands":64,"prompt":74,"zipAvailable":75},[65,68,71],{"tool":66,"command":67},"npx","npx skills add ImaginerLabs\u002Fskill-manager --skill inspect-state",{"tool":69,"command":70},"bunx","bunx skills add ImaginerLabs\u002Fskill-manager --skill inspect-state",{"tool":72,"command":73},"pnpm","pnpm dlx skills add ImaginerLabs\u002Fskill-manager --skill inspect-state","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fcoding\u002Finspect-state\u002FSKILL.md",true,[],[78,111,132,160,192,218],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":92,"publishedAt":43},"01M6QJCB2SD5KHC41ZDQC0GA1T","meeting-minutes","Generate concise, actionable meeting minutes for internal meetings. Includes metadata, attendees, agenda, decisions, action items (owner + due date), and follow-up steps.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fmeeting-minutes\u002FSKILL.md",[84,89],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",{"categoryNo":90,"categoryName":91,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000034","行政与办公人员",[93,94,95,96,97,98,99,100,101,102,80,57,103,104,105,106,107,108,109,110],"meeting minutes","meeting","minutes","writing","github","copilot","generate","decisions","meetings","up","agenda","actionable","concise","follow-up","tree","true","action","for",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":117,"publishedAt":43},"01M6QJC71RRGTGNNFEHJG6S20G","documentation-writer","Diátaxis Documentation Expert. An expert technical writer specializing in creating high-quality software documentation, guided by the principles and structure of the Diátaxis technical documentation authoring framework.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fdocumentation-writer\u002FSKILL.md",[],[118,119,120,96,97,98,121,122,123,124,125,126,57,127,128,129,130,107,108,131],"documentation","documentation writer","writer","https","quality","technical","technical writer","expert","documentation expert","structure","authoring","software","principles","high",{"skillNo":133,"name":134,"nameZh":6,"description":135,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":136,"categories":137,"keywords":145,"publishedAt":43},"01M6QJC0V3C7C4R9768J1AJYWY","doc-coauthoring","Guide users through a structured workflow for co-authoring documentation. Use when user wants to write documentation, proposals, technical specs, decision docs, or similar structured content. This workflow helps users efficiently transfer context, refine content through iteration, and verify the doc works for readers. Trigger when user mentions writing docs, creating proposals, drafting specs, or similar documentation tasks.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fwriting\u002Fdoc-coauthoring\u002FSKILL.md",[138,141,142],{"categoryNo":139,"categoryName":140,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":143,"categoryName":144,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000036","内容创作者",[146,147,96,148,149,118,150,151,152,153,154,155,57,156,157,128,158,159,107,110],"doc coauthoring","doc","workflow","official","tasks","decision","write","context","proposals","guide","refine","iteration","trigger","co",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":174,"publishedAt":43},"01M6QJBJ0YPVEWGEXZH3PJRRTT","code-review-workflow","Executes comprehensive 4-phase code review: basic review, quality check, bundle analysis, and test coverage. Should be used when the user mentions comprehensive code review, checking code quality, or reviewing staged changes with multi-phase analysis. This is the comprehensive review workflow, distinct from focused skills like frontend-code-review, staged-code-review, or code-change-test-designer.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002Fcode-review-workflow\u002FSKILL.md",[166,169,172,173],{"categoryNo":167,"categoryName":168,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":170,"categoryName":171,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},[175,176,148,41,177,178,179,180,181,182,183,184,36,185,186,187,188,189,190,191],"code review","review","code review workflow","testing","frontend","test","change","code quality","code-review","analysis","coverage","quality check","basic","multi","comprehensive code review","with","phase",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":207,"publishedAt":43},"01M6QJB7XNHV3VEEQF4W7FMWF6","code-change-test-designer","Analyzes code changes and designs comprehensive test cases. Reads diffs, summarizes capability changes, and designs test cases covering main flows and edge cases. Should be used when the user mentions test coverage, designing tests for code changes, or analyzing diff\u002Fcommit for testing purposes. Distinguished from code-review-workflow which provides comprehensive review, this skill focuses on test case design for code changes.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Ftesting\u002Fcode-change-test-designer\u002FSKILL.md",[198,199,202,203,204],{"categoryNo":170,"categoryName":171,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":200,"categoryName":201,"taxonomyType":87,"taxonomyTypeDesc":88},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":205,"categoryName":206,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000032","设计师",[180,181,41,208,209,178,210,211,148,212,183,213,185,214,57,215,216,217,110,191],"designer","code change test designer","design","diffs","commit","edge","diff","tests","flows","which",{"skillNo":219,"name":220,"nameZh":6,"description":221,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":222,"categories":223,"keywords":225,"publishedAt":43},"01M6QJB195WD7DCJWDMKWKB29S","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002FImaginerLabs\u002Fskill-manager\u002Fblob\u002Fmain\u002Fskills\u002Fmeta-skills\u002Fskill-creator\u002FSKILL.md",[224],{"categoryNo":85,"categoryName":86,"taxonomyType":87,"taxonomyTypeDesc":88},[226,227,228,229,149,230,231,232,233,234,184,235,236,237,57,238,239,107,110,220],"skill creator","creator","performance","run evals","variance analysis","create","run","benchmark","Meta","improve","edit","evals","optimize","existing skill"]