[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6CFBEFHMPFRFM9AQAJVVAR0":3,"skill-same:01M6CFBEFHMPFRFM9AQAJVVAR0":83},{"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":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":54,"ownerDescription":55,"updatedAt":56,"install":57,"resources":70},"01M6CFBEFHMPFRFM9AQAJVVAR0","reconstructing-ui-from-screenshots",null,"Use when implementing or correcting an app or web UI from a design image, screenshot, mockup, or reference PNG where accurate size, spacing, color, typography, assets, and alignment matter.","HeathWang\u002Fhw-cc-plugin","HeathWang","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F4961711?v=4","01M6CF9BZ3A0CSSG3QQGGDPFEH","Heath Wang","01M6CF9C3HT4NPM370Z8MYZW4G",1,"MIT","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Freconstructing-ui-from-screenshots\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],"screenshots","ui","reconstructing ui from screenshots","reference","implementing","size","mockup","spacing","web ui","color","app","alignment","design","typography","use","assets","png","screenshot","web","image","2026-11-10 10:12:30",false,"---\nname: reconstructing-ui-from-screenshots\ndescription: Use when implementing or correcting an app or web UI from a design image, screenshot, mockup, or reference PNG where accurate size, spacing, color, typography, assets, and alignment matter.\n---\n\n# Reconstructing UI from Screenshots\n\n## Overview\n\nChoose the shortest evidence path that can produce a correct edit. Measure only values that affect the implementation.\n\n## Workflow\n\n### 1. Define the Change\n\nInspect the reference, target view, and direct dependencies. Record the changed region, unchanged anchors, and material unknowns.\n\nUse the fast path for one component or section in an existing screen. Use the mapping path for a new\u002Ffull screen, coupled regions, unknown crop origin, or absolute screenshot coordinates.\n\n### 2A. Fast Path — Local Change\n\nReuse existing constraints, tokens, components, fonts, and assets. Record three to five inputs: container bounds, inset or gap, alignment, text style, color, or asset behavior.\n\nGlobal viewport and DPR are unnecessary when values come from existing anchors, tokens, or relative relationships. Once these inputs distinguish the implementation, edit immediately. Use the nearest project value for low-impact ambiguity.\n\nDo not run the analyzer merely to satisfy the workflow.\n\n### 2B. Mapping Path — Full Reconstruction\n\nResolve viewport from runtime\u002Fproject configuration, design specifications, or capture metadata. Image dimensions alone never prove viewport or DPR.\n\nRun at most one analyzer command before the first edit:\n\n```bash\npython3 \u003Cskill_path>\u002Fscripts\u002Fanalyze_ui_image.py reference.png \\\n  --viewport 375x812 \\\n  --json reference-report.json --annotated reference-boxes.png\n```\n\nRun `--help` for crops and ROI. Install dependencies only after `ModuleNotFoundError`. Confirmed mapping leads directly to recording major geometry and editing; blocked mapping leads to one focused question. Never replace an inaccurate result with chained ad-hoc Python scans.\n\n### 3. Implement the First Pass\n\nCorrect geometry and assets first, then text, spacing, colors, and effects. Preserve unaffected behavior. Reconsider a settled value only when new evidence contradicts it.\n\n### 4. Precision Pass\n\nFor each visible, code-relevant mismatch, make one targeted measurement or focused `--roi` run, then edit. Do not rescan anti-aliasing noise or infer fonts from text pixels; use project definitions.\n\nStop when no high-impact visible mismatch remains. Do not complete unrelated checklist entries.\n\n### 5. Verify\n\nCheck overflow, clipping, missing assets, and essential interactions. Run formatting, static analysis, and the smallest relevant build. Use image diff only when requested or already available.\n\n## Analysis Budget\n\n| Situation | Evidence before first edit | Analyzer budget |\n|---|---|---|\n| Existing local component | 3–5 relevant inputs | None by default |\n| New or full-screen layout | Mapping plus major regions | One run |\n| Visible mismatch after implementation | One decision-specific measurement | One focused run |\n\nAnalyzer regions and shapes are candidates, not ground truth. Sample solid interiors, not anti-aliased edges. Device DPR remains unconfirmed unless independently sourced. Require confirmed mapping only before converting absolute image pixels to logical layout constants.\n\n## Common Mistakes\n\n- Proving viewport, Safe Area, or system bars for a local component replacement.\n- Writing temporary pixel-scanning scripts instead of making the edit.\n- Measuring the same value repeatedly without contradictory evidence.\n- Treating image scale as DPR or detector candidates as final semantics.\n\n## Output\n\nReport implementation changes, material assumptions, and code-check results.\n","# Reconstructing UI from Screenshots\n\n## Overview\n\nChoose the shortest evidence path that can produce a correct edit. Measure only values that affect the implementation.\n\n## Workflow\n\n### 1. Define the Change\n\nInspect the reference, target view, and direct dependencies. Record the changed region, unchanged anchors, and material unknowns.\n\nUse the fast path for one component or section in an existing screen. Use the mapping path for a new\u002Ffull screen, coupled regions, unknown crop origin, or absolute screenshot coordinates.\n\n### 2A. Fast Path — Local Change\n\nReuse existing constraints, tokens, components, fonts, and assets. Record three to five inputs: container bounds, inset or gap, alignment, text style, color, or asset behavior.\n\nGlobal viewport and DPR are unnecessary when values come from existing anchors, tokens, or relative relationships. Once these inputs distinguish the implementation, edit immediately. Use the nearest project value for low-impact ambiguity.\n\nDo not run the analyzer merely to satisfy the workflow.\n\n### 2B. Mapping Path — Full Reconstruction\n\nResolve viewport from runtime\u002Fproject configuration, design specifications, or capture metadata. Image dimensions alone never prove viewport or DPR.\n\nRun at most one analyzer command before the first edit:\n\n```bash\npython3 \u003Cskill_path>\u002Fscripts\u002Fanalyze_ui_image.py reference.png \\\n  --viewport 375x812 \\\n  --json reference-report.json --annotated reference-boxes.png\n```\n\nRun `--help` for crops and ROI. Install dependencies only after `ModuleNotFoundError`. Confirmed mapping leads directly to recording major geometry and editing; blocked mapping leads to one focused question. Never replace an inaccurate result with chained ad-hoc Python scans.\n\n### 3. Implement the First Pass\n\nCorrect geometry and assets first, then text, spacing, colors, and effects. Preserve unaffected behavior. Reconsider a settled value only when new evidence contradicts it.\n\n### 4. Precision Pass\n\nFor each visible, code-relevant mismatch, make one targeted measurement or focused `--roi` run, then edit. Do not rescan anti-aliasing noise or infer fonts from text pixels; use project definitions.\n\nStop when no high-impact visible mismatch remains. Do not complete unrelated checklist entries.\n\n### 5. Verify\n\nCheck overflow, clipping, missing assets, and essential interactions. Run formatting, static analysis, and the smallest relevant build. Use image diff only when requested or already available.\n\n## Analysis Budget\n\n| Situation | Evidence before first edit | Analyzer budget |\n|---|---|---|\n| Existing local component | 3–5 relevant inputs | None by default |\n| New or full-screen layout | Mapping plus major regions | One run |\n| Visible mismatch after implementation | One decision-specific measurement | One focused run |\n\nAnalyzer regions and shapes are candidates, not ground truth. Sample solid interiors, not anti-aliased edges. Device DPR remains unconfirmed unless independently sourced. Require confirmed mapping only before converting absolute image pixels to logical layout constants.\n\n## Common Mistakes\n\n- Proving viewport, Safe Area, or system bars for a local component replacement.\n- Writing temporary pixel-scanning scripts instead of making the edit.\n- Measuring the same value repeatedly without contradictory evidence.\n- Treating image scale as DPR or detector candidates as final semantics.\n\n## Output\n\nReport implementation changes, material assumptions, and code-check results.\n",{"name":5,"description":7},"master","f542825aef4a5ca7e8c6c69d1f5b32fb325550ad","skills\u002Freconstructing-ui-from-screenshots",0,"https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin","https:\u002F\u002Fgithub.com\u002FHeathWang","iOS \u002F front end \u002F python develper","2026-11-03 17:20:23",{"source":8,"skillName":5,"commands":58,"prompt":68,"zipAvailable":69},[59,62,65],{"tool":60,"command":61},"npx","npx skills add HeathWang\u002Fhw-cc-plugin --skill reconstructing-ui-from-screenshots",{"tool":63,"command":64},"bunx","bunx skills add HeathWang\u002Fhw-cc-plugin --skill reconstructing-ui-from-screenshots",{"tool":66,"command":67},"pnpm","pnpm dlx skills add HeathWang\u002Fhw-cc-plugin --skill reconstructing-ui-from-screenshots","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Freconstructing-ui-from-screenshots\u002FSKILL.md",true,[71,77],{"path":72,"resourceType":73,"resourceTypeDesc":74,"sizeBytes":75,"sourceHtmlUrl":76},"requirements.txt","REFERENCE","参考文档",36,"https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Freconstructing-ui-from-screenshots\u002Frequirements.txt",{"path":78,"resourceType":79,"resourceTypeDesc":80,"sizeBytes":81,"sourceHtmlUrl":82},"scripts\u002Fanalyze_ui_image.py","SCRIPT","脚本",29807,"https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Freconstructing-ui-from-screenshots\u002Fscripts\u002Fanalyze_ui_image.py",[84,105,115,127,145,168],{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":44},"01M6CFBBT8EXTSBHXEFGRWRZ3C","question-answer","Use when the user wants a read-only explanation of existing code behavior, architecture, control flow, data flow, dependencies, or implementation decisions and has not requested project changes.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fquestion-answer\u002FSKILL.md",[],[91,92,93,38,94,95,96,97,98,99,100,101,102,103,104],"question","question answer","only","decisions","code","architecture","webfetch","behavior","read","grep","flow","data","implementation","user",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":111,"publishedAt":44},"01M6CFB60X8Q9479W73SJCDEVJ","java-to-swift","Use when converting Java 1.8 classes to Swift 5.0+ Codable structs - handling type mapping, nullability, inheritance flattening, BaseReq exclusions, and property naming conventions.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fjava-to-swift\u002FSKILL.md",[],[112,113,114,38,99,100],"swift","java","java to swift",{"skillNo":116,"name":117,"nameZh":6,"description":118,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":44},"01M6CFB3DMRW02HSYWMMK3VDPM","java-to-nextjs","Use when converting Java 1.8 classes to Next.js TypeScript interface definitions - handling type mapping, nullability, inheritance, naming conventions, and BaseReq\u002FBaseResponse exclusions.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fjava-to-nextjs\u002FSKILL.md",[],[122,113,123,99,124,100,125,126,38],"java to nextjs","nextjs","typescript","js","Next.js",{"skillNo":128,"name":129,"nameZh":6,"description":130,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":131,"categories":132,"keywords":138,"publishedAt":44},"01M6CFB055EXKR72703ST6H3XW","ios-i18n-workflow","Use when iOS apps using SwiftGen L10n need localization work - adding keys, checking missing translations, or cleaning unused entries. Triggered by hardcoded strings, missing L10n references, incomplete translations across multiple languages, or unused localization cleanup requests.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fios-i18n-workflow\u002FSKILL.md",[133],{"categoryNo":134,"categoryName":135,"taxonomyType":136,"taxonomyTypeDesc":137},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[139,140,141,142,143,38,144],"ios i18n workflow","workflow","ios","cleanup","work","references",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":154,"publishedAt":44},"01M6CFAXJJZ59SWHZ1RAGQ461N","improve-codebase-architecture","Use when the user wants architectural deepening opportunities for a codebase or named files, shown as a visual HTML report, and when they then pick candidates from that report to implement in the code already reviewed.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fimprove-codebase-architecture\u002FSKILL.md",[151],{"categoryNo":152,"categoryName":153,"taxonomyType":136,"taxonomyTypeDesc":137},"01JBSEEDCAT000000000000009","前端开发",[155,96,156,157,158,159,160,161,162,163,164,165,38,166,95,167,104],"codebase","improve","improve codebase architecture","pick","report","html report","html","as","for","true","files","visual","implement",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":174,"publishedAt":44},"01M6CFATZXZK0RNE86AEN4AAH3","handoff","Use when the user asks to create a handoff, session summary, context compact, continuation note, 交接文档, 压缩上下文, or instructions for the next agent to resume work later.","https:\u002F\u002Fgithub.com\u002FHeathWang\u002Fhw-cc-plugin\u002Fblob\u002Fmaster\u002Fskills\u002Fhandoff\u002FSKILL.md",[],[170,175,176,38,177,178,143,179,180,181,182,104,183],"session summary","session","resume","create","later","instructions","文档","压缩","context"]