[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71MQQSWTH05CEDGX0AHQHH6":3,"skill-same:01M71MQQSWTH05CEDGX0AHQHH6":71},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M71MQQSWTH05CEDGX0AHQHH6","control-ui",null,"Build or adapt a local browser\u002FCDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots, perf profiles, visual diffs, or reproducing UI bugs.","bbishdotdev\u002Fai-tools","bbishdotdev","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F5323528?v=4","01M71MHYW2Q0DVZA22Q79M8KER","Brenden Bishop","01M71MHYWSMQWFPGA8CBJYQANH",0,"MIT","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Fcontrol-ui\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"control ui","control","ui","bugs","diffs","for","inspect","profiles","local","adapt","visual","cdp","snapshots","use","ide","harness","verification","browser","perf","electron","2026-11-10 10:56:23",false,"---\nname: control-ui\ndescription: Build or adapt a local browser\u002FCDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots, perf profiles, visual diffs, or reproducing UI bugs.\n---\n\n# Control UI\n\nUse local browser automation to verify UI behavior with evidence. First reuse the repo's own Playwright, browser, or Electron harness if it exists; otherwise assemble a temporary local harness around the app's dev server or Chromium debug port.\n\n## What It Is Used For\n\n- Reproducing UI bugs that depend on real browser focus, keyboard input, scrolling, resizing, or rendering.\n- Verifying visual or accessibility changes with screenshots and snapshots.\n- Checking local web, IDE, or Electron behavior before shipping.\n- Capturing console logs, network logs, CPU profiles, traces, or heap snapshots.\n- Creating before\u002Fafter evidence for `verify-this`.\n\n## Setup Pattern\n\n1. Start the app locally using the repo's documented dev command.\n2. Discover existing local harnesses: Playwright tests, Cypress specs, Storybook, browser scripts, Electron launch scripts, or snapshot tools.\n3. For a web app, connect to the local URL with the existing browser tooling.\n4. For Electron\u002FChromium, enable a remote debugging port when supported.\n5. Select the correct page by stable app markers, not by tab order alone.\n6. Prefer accessibility roles, labels, and stable `data-*` selectors over coordinates.\n\n## Generic Web Harness\n\nUse the repo's installed browser tooling when possible. If the repo already has Playwright, a minimal one-off probe looks like:\n\n```javascript\nimport { chromium } from \"playwright\";\n\nconst browser = await chromium.launch();\nconst page = await browser.newPage({ viewport: { width: 1280, height: 800 } });\nawait page.goto(\"http:\u002F\u002F127.0.0.1:\u003Cport>\");\nawait page.getByRole(\"button\", { name: \u002Fsubmit\u002Fi }).click();\nawait page.screenshot({ path: \"\u002Ftmp\u002Fui-harness-after.png\", fullPage: true });\nawait browser.close();\n```\n\nDo not add Playwright as a project dependency just for this probe unless the user asks. Prefer existing dev dependencies or external browser tools already available in the environment.\n\n## Generic CDP Harness\n\nFor Electron or a Chromium app launched with `--remote-debugging-port=\u003Cport>`, connect over CDP:\n\n```javascript\nimport { chromium } from \"playwright\";\n\nconst browser = await chromium.connectOverCDP(\"http:\u002F\u002F127.0.0.1:\u003Cdebug-port>\");\nconst pages = browser.contexts().flatMap((context) => context.pages());\nlet page;\nfor (const candidate of pages) {\n  if (await candidate.locator(\"\u003Capp-root-selector>\").count()) {\n    page = candidate;\n    break;\n  }\n}\n\nif (!page) {\n  console.log(await Promise.all(pages.map(async (p) => ({\n    title: await p.title(),\n    url: p.url(),\n  }))));\n  throw new Error(\"No matching app page found\");\n}\n\nawait page.screenshot({ path: \"\u002Ftmp\u002Fui-harness-cdp.png\", fullPage: true });\nawait browser.close();\n```\n\nReplace `\u003Capp-root-selector>` with a stable marker from the current repo, such as a root app node, landmark, or product-specific `data-*` attribute.\n\n## Interaction Loop\n\n1. Capture a page snapshot or screenshot before acting.\n2. Choose a target from the latest page structure.\n3. Perform exactly one structural action: click, type, keypress, drag, scroll, navigate, or resize.\n4. Capture a fresh snapshot\u002Fscreenshot.\n5. Verify the expected state change.\n6. Save artifacts for before\u002Fafter comparisons when the user asked for proof.\n\n## CDP Capabilities\n\nUse raw CDP only when higher-level browser APIs are insufficient:\n\n- Performance: CPU profiles, traces, paint flashing, FPS meter, layout shift inspection.\n- Memory: heap snapshots and forced GC for leak investigations.\n- Network: request blocking, throttling, cache disablement, request\u002Fresponse logs.\n- Rendering: viewport changes, color scheme emulation, reduced motion, accessibility checks.\n- Debugging: console streaming, exception capture, DOM snapshots.\n\n## Page Selection\n\nWhen multiple app windows\u002Ftabs share a debug port:\n\n- Prefer a positive marker for the surface under test, such as an app root selector.\n- Use a negative marker to avoid the wrong surface when necessary.\n- If no page matches, list available page titles and URLs instead of guessing.\n\n## Guardrails\n\n- Do not rely on stale element references after navigation or structural changes.\n- Avoid coordinate clicks unless a fresh screenshot was captured immediately before the click.\n- Keep test data local and disposable.\n- Do not store screenshots or heap snapshots from privacy-sensitive workspaces unless the user explicitly agrees.\n- Do not hard-code selectors, ports, or script paths from another repository. Discover the current repo's local app markers.\n- Clean up dev servers, debug sessions, and temp profiles when done.\n","# Control UI\n\nUse local browser automation to verify UI behavior with evidence. First reuse the repo's own Playwright, browser, or Electron harness if it exists; otherwise assemble a temporary local harness around the app's dev server or Chromium debug port.\n\n## What It Is Used For\n\n- Reproducing UI bugs that depend on real browser focus, keyboard input, scrolling, resizing, or rendering.\n- Verifying visual or accessibility changes with screenshots and snapshots.\n- Checking local web, IDE, or Electron behavior before shipping.\n- Capturing console logs, network logs, CPU profiles, traces, or heap snapshots.\n- Creating before\u002Fafter evidence for `verify-this`.\n\n## Setup Pattern\n\n1. Start the app locally using the repo's documented dev command.\n2. Discover existing local harnesses: Playwright tests, Cypress specs, Storybook, browser scripts, Electron launch scripts, or snapshot tools.\n3. For a web app, connect to the local URL with the existing browser tooling.\n4. For Electron\u002FChromium, enable a remote debugging port when supported.\n5. Select the correct page by stable app markers, not by tab order alone.\n6. Prefer accessibility roles, labels, and stable `data-*` selectors over coordinates.\n\n## Generic Web Harness\n\nUse the repo's installed browser tooling when possible. If the repo already has Playwright, a minimal one-off probe looks like:\n\n```javascript\nimport { chromium } from \"playwright\";\n\nconst browser = await chromium.launch();\nconst page = await browser.newPage({ viewport: { width: 1280, height: 800 } });\nawait page.goto(\"http:\u002F\u002F127.0.0.1:\u003Cport>\");\nawait page.getByRole(\"button\", { name: \u002Fsubmit\u002Fi }).click();\nawait page.screenshot({ path: \"\u002Ftmp\u002Fui-harness-after.png\", fullPage: true });\nawait browser.close();\n```\n\nDo not add Playwright as a project dependency just for this probe unless the user asks. Prefer existing dev dependencies or external browser tools already available in the environment.\n\n## Generic CDP Harness\n\nFor Electron or a Chromium app launched with `--remote-debugging-port=\u003Cport>`, connect over CDP:\n\n```javascript\nimport { chromium } from \"playwright\";\n\nconst browser = await chromium.connectOverCDP(\"http:\u002F\u002F127.0.0.1:\u003Cdebug-port>\");\nconst pages = browser.contexts().flatMap((context) => context.pages());\nlet page;\nfor (const candidate of pages) {\n  if (await candidate.locator(\"\u003Capp-root-selector>\").count()) {\n    page = candidate;\n    break;\n  }\n}\n\nif (!page) {\n  console.log(await Promise.all(pages.map(async (p) => ({\n    title: await p.title(),\n    url: p.url(),\n  }))));\n  throw new Error(\"No matching app page found\");\n}\n\nawait page.screenshot({ path: \"\u002Ftmp\u002Fui-harness-cdp.png\", fullPage: true });\nawait browser.close();\n```\n\nReplace `\u003Capp-root-selector>` with a stable marker from the current repo, such as a root app node, landmark, or product-specific `data-*` attribute.\n\n## Interaction Loop\n\n1. Capture a page snapshot or screenshot before acting.\n2. Choose a target from the latest page structure.\n3. Perform exactly one structural action: click, type, keypress, drag, scroll, navigate, or resize.\n4. Capture a fresh snapshot\u002Fscreenshot.\n5. Verify the expected state change.\n6. Save artifacts for before\u002Fafter comparisons when the user asked for proof.\n\n## CDP Capabilities\n\nUse raw CDP only when higher-level browser APIs are insufficient:\n\n- Performance: CPU profiles, traces, paint flashing, FPS meter, layout shift inspection.\n- Memory: heap snapshots and forced GC for leak investigations.\n- Network: request blocking, throttling, cache disablement, request\u002Fresponse logs.\n- Rendering: viewport changes, color scheme emulation, reduced motion, accessibility checks.\n- Debugging: console streaming, exception capture, DOM snapshots.\n\n## Page Selection\n\nWhen multiple app windows\u002Ftabs share a debug port:\n\n- Prefer a positive marker for the surface under test, such as an app root selector.\n- Use a negative marker to avoid the wrong surface when necessary.\n- If no page matches, list available page titles and URLs instead of guessing.\n\n## Guardrails\n\n- Do not rely on stale element references after navigation or structural changes.\n- Avoid coordinate clicks unless a fresh screenshot was captured immediately before the click.\n- Keep test data local and disposable.\n- Do not store screenshots or heap snapshots from privacy-sensitive workspaces unless the user explicitly agrees.\n- Do not hard-code selectors, ports, or script paths from another repository. Discover the current repo's local app markers.\n- Clean up dev servers, debug sessions, and temp profiles when done.\n",{"name":5,"description":7},"main","e7c8126d1ad4df934236dba12521dcbe7fcd9d74","bstack\u002Fupstream\u002Fpstack\u002Fskills\u002Fcontrol-ui","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools","https:\u002F\u002Fgithub.com\u002Fbbishdotdev","bbish.dev","Husband | Father | Technologist\r\nEngineering leader helping product and delivery teams use AI to build better systems, habits, and tools.","2026-11-11 11:13:39",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add bbishdotdev\u002Fai-tools --skill control-ui",{"tool":63,"command":64},"bunx","bunx skills add bbishdotdev\u002Fai-tools --skill control-ui",{"tool":66,"command":67},"pnpm","pnpm dlx skills add bbishdotdev\u002Fai-tools --skill control-ui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Fcontrol-ui\u002FSKILL.md",true,[],[72,101,113,128,160,183],{"skillNo":73,"name":74,"nameZh":6,"description":75,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":76,"categories":77,"keywords":81,"publishedAt":44},"01M71MT5NBY3RY660EA06K9CA1","why","Use for 'why does X work this way', 'why we picked Y', design rationale, regressions, postmortems, or data-backed thresholds. Discovers available MCPs and queries each evidence category (source control, issue tracker, long-form docs, real-time chat, infrastructure observability, error tracking, product analytics warehouse) in parallel, then returns a cited read on decisions and tradeoffs. Use how for runtime behavior.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Fwhy\u002FSKILL.md",[78],{"categoryNo":79,"categoryName":80,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000033","数据分析师",[74,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100],"how","parallel","observability","warehouse","returns","infrastructure","source","analytics","data","issue","read","tracker","product","work","design","product analytics","time","error tracking","error",{"skillNo":102,"name":103,"nameZh":6,"description":104,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":105,"categories":106,"keywords":107,"publishedAt":44},"01M71MT4CFF7AK4TRV40P7ZZ30","unslop","Cut AI tells from any writing. Must always apply.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Funslop\u002FSKILL.md",[],[103,108,109,110,111,112],"cut","true","ai tells","apply","writing",{"skillNo":114,"name":115,"nameZh":6,"description":116,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":117,"categories":118,"keywords":119,"publishedAt":44},"01M71MT37W015EGE0EB82JQYAM","typescript-best-practices","TypeScript best practices. Use when reading or editing any .ts or .tsx file.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Ftypescript-best-practices\u002FSKILL.md",[],[120,121,122,37,123,124,125,126,109,127],"typescript","typescript best practices","best practices","tsx","when","editing","file","reading",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":145,"publishedAt":44},"01M71MT1092N34HQMGECW170JP","technical-writing","Layered technical-writing standard: Diátaxis structure, Google developer style sentences, STE instruction rules, Global English syntax. Use for \u002Ftechnical-writing or when writing or reviewing docs, RFCs, readmes, PR descriptions, or commit messages.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Ftechnical-writing\u002FSKILL.md",[134,139,142],{"categoryNo":135,"categoryName":136,"taxonomyType":137,"taxonomyTypeDesc":138},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":140,"categoryName":141,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师",{"categoryNo":143,"categoryName":144,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者",[146,112,147,148,149,150,151,152,153,154,124,155,156,37,109,157,130,29,158,159],"technical","technical writing","commit messages","google","syntax","style","structure","layered","english","commit","Rules","messages","pr","standard",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":169,"publishedAt":44},"01M71MSYRMT7KZPQFY7A2ZHGMB","teach","Explain a body of work plainly so a person actually understands it. Runs the `how` and `why` skills and weaves what they find into one clear explanation. Use for 'teach me this', 'help me really understand X', 'explain this change or subsystem to me'.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Fteach\u002FSKILL.md",[166],{"categoryNo":167,"categoryName":168,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000039","教师与教育",[162,29,82,170,171,172,95,173,174,175,176,177,37,178,179,109,180,181,74,182],"me","explanation","change","help","one","it","explain","body","teach me","understand","clear","person","find",{"skillNo":184,"name":185,"nameZh":6,"description":186,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":187,"categories":188,"keywords":189,"publishedAt":44},"01M71MSWTVAEVMZAG7SMWFE1FE","tdd","Use only when the user explicitly asks for TDD, a failing test, or a regression test, OR when the bug has an obvious cheap local test target. Skip when the test path is unclear, expensive, integration-heavy, or not requested.","https:\u002F\u002Fgithub.com\u002Fbbishdotdev\u002Fai-tools\u002Fblob\u002Fmain\u002Fbstack\u002Fupstream\u002Fpstack\u002Fskills\u002Ftdd\u002FSKILL.md",[],[185,37,190,191,192,124,193,109,32,194,195,196,197,29,198,199],"path","user","regression test","only","failing","bug","integration","regression","target","test"]