[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6C7H5RH3DWKYMXVXAPKM9TH":3,"skill-same:01M6C7H5RH3DWKYMXVXAPKM9TH":65},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":30,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":6,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":50,"install":51,"resources":64},"01M6C7H5RH3DWKYMXVXAPKM9TH","ui-design",null,"Pencil MCP reference and canvas conventions for designing kynetic-spec web UI","lepahc\u002Fkynetic-spec","lepahc","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F255431765?v=4","01M6C7E6Z0C8SE1X6PJ2F9Q1CX","01M6C7E744QKNYBVZ7KV7Z69GF",1,"MIT","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fui-design\u002FSKILL.md",[17,22,25],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":26,"categoryName":27,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[31,32,33,34,35,36,37,38],"design","ui","ui design","MCP","spec","canvas","web","reference","2026-11-10 10:12:30",false,"---\nname: ui-design\ndescription: Pencil MCP reference and canvas conventions for designing kynetic-spec web UI\n---\n\u003C!-- kspec-managed -->\n# UI Design\n\nPencil MCP reference and canvas conventions for designing kynetic-spec web UI.\n\nDesign file: `design.pen` (project root)\n\n## Pencil MCP Gotchas\n\n- Variable names must NOT include `$` prefix — Pencil strips it silently\n- Gradients CANNOT bind variable refs — they silently resolve to #000000; use raw values\n- `batch_design` max ~25 operations per call — break larger changes into batches\n- Always `get_screenshot` to validate after significant visual changes\n- Use `find_empty_space_on_canvas` before placing new frames\n- Use `get_guidelines(topic)` for domain-specific rules (topics: web-app, mobile-app, design-system, etc.)\n- Use `get_style_guide_tags` + `get_style_guide` for design inspiration when starting new screens\n\n## Workflow\n\n1. `get_editor_state` — check what's open and selected\n2. `open_document` — open design.pen (or 'new' for fresh file)\n3. `get_guidelines(topic)` — load relevant design rules before starting\n4. `snapshot_layout` — understand existing layout before inserting\n5. `find_empty_space_on_canvas` — find placement for new frames\n6. `batch_design` — create\u002Fupdate nodes\n7. `get_screenshot` — validate visually\n8. Iterate 6–7 until correct\n\n## Canvas Organization\n\n| Frame | Purpose | Location |\n|-------|---------|----------|\n| Design System | Tokens, palette, type scale, spacing | TBD |\n| Components | Reusable component patterns | TBD |\n| Pages | Full page compositions | TBD |\n\nLocations updated as frames are placed.\n\n## Component Inventory\n\n*Populated as components are designed.*\n\n| Component | Node ID | Key Descendants | Notes |\n|-----------|---------|-----------------|-------|\n| — | — | — | — |\n\n## Pages to Design\n\nExisting routes for reference:\n\n- Dashboard (\u002F) — counts, agent status, needs-attention\n- Task list (\u002Ftasks) — filters, status, tags\n- Task board (\u002Ftasks\u002Fboard) — kanban\n- Inbox (\u002Finbox) — triage workflow\n- Specs (\u002Fspecs) — spec listing + detail\n- Reviews (\u002Freviews) — review records\n- Agents (\u002Fagents) — agent status\n- Sessions (\u002Fsessions) — session recordings\n- Settings (\u002Fsettings) — configuration\n","\u003C!-- kspec-managed -->\n# UI Design\n\nPencil MCP reference and canvas conventions for designing kynetic-spec web UI.\n\nDesign file: `design.pen` (project root)\n\n## Pencil MCP Gotchas\n\n- Variable names must NOT include `$` prefix — Pencil strips it silently\n- Gradients CANNOT bind variable refs — they silently resolve to #000000; use raw values\n- `batch_design` max ~25 operations per call — break larger changes into batches\n- Always `get_screenshot` to validate after significant visual changes\n- Use `find_empty_space_on_canvas` before placing new frames\n- Use `get_guidelines(topic)` for domain-specific rules (topics: web-app, mobile-app, design-system, etc.)\n- Use `get_style_guide_tags` + `get_style_guide` for design inspiration when starting new screens\n\n## Workflow\n\n1. `get_editor_state` — check what's open and selected\n2. `open_document` — open design.pen (or 'new' for fresh file)\n3. `get_guidelines(topic)` — load relevant design rules before starting\n4. `snapshot_layout` — understand existing layout before inserting\n5. `find_empty_space_on_canvas` — find placement for new frames\n6. `batch_design` — create\u002Fupdate nodes\n7. `get_screenshot` — validate visually\n8. Iterate 6–7 until correct\n\n## Canvas Organization\n\n| Frame | Purpose | Location |\n|-------|---------|----------|\n| Design System | Tokens, palette, type scale, spacing | TBD |\n| Components | Reusable component patterns | TBD |\n| Pages | Full page compositions | TBD |\n\nLocations updated as frames are placed.\n\n## Component Inventory\n\n*Populated as components are designed.*\n\n| Component | Node ID | Key Descendants | Notes |\n|-----------|---------|-----------------|-------|\n| — | — | — | — |\n\n## Pages to Design\n\nExisting routes for reference:\n\n- Dashboard (\u002F) — counts, agent status, needs-attention\n- Task list (\u002Ftasks) — filters, status, tags\n- Task board (\u002Ftasks\u002Fboard) — kanban\n- Inbox (\u002Finbox) — triage workflow\n- Specs (\u002Fspecs) — spec listing + detail\n- Reviews (\u002Freviews) — review records\n- Agents (\u002Fagents) — agent status\n- Sessions (\u002Fsessions) — session recordings\n- Settings (\u002Fsettings) — configuration\n",{"name":5,"description":7},"main","c4b0de3035f8512bba7eb0a9b4e39ea2fbd3f08e",".claude\u002Fskills\u002Fui-design",2,"https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec","https:\u002F\u002Fgithub.com\u002Flepahc","2026-07-22 18:57:40",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add lepahc\u002Fkynetic-spec --skill ui-design",{"tool":57,"command":58},"bunx","bunx skills add lepahc\u002Fkynetic-spec --skill ui-design",{"tool":60,"command":61},"pnpm","pnpm dlx skills add lepahc\u002Fkynetic-spec --skill ui-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002F.claude\u002Fskills\u002Fui-design\u002FSKILL.md",true,[],[66,80,86,94,103,111],{"skillNo":67,"name":68,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":69,"categories":70,"keywords":77,"publishedAt":39},"01M6C7KCZE43MDZ74FV3A5TDCQ","writing-specs","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Fwriting-specs\u002FSKILL.md",[71,74],{"categoryNo":72,"categoryName":73,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":75,"categoryName":76,"taxonomyType":28,"taxonomyTypeDesc":29},"01JBSEEDCAT000000000000036","内容创作者",[78,79],"writing","writing specs",{"skillNo":81,"name":82,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":39},"01M6C7KAK9CBJ87PX3BCW7B7YG","triage","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Ftriage\u002FSKILL.md",[],[82],{"skillNo":87,"name":88,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":39},"01M6C7K89VN6FJCT8M86K56EE8","triage-inbox","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Ftriage-inbox\u002FSKILL.md",[],[82,92,93],"inbox","triage inbox",{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":100,"publishedAt":39},"01M6C7K6F2342AC1TJCN9PM0ZB","triage-automation","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Ftriage-automation\u002FSKILL.md",[99],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[82,101,102],"automation","triage automation",{"skillNo":104,"name":105,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":39},"01M6C7K3TFQ88QQBW3PXYDHQG2","task-work","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Ftask-work\u002FSKILL.md",[],[109,110],"work","task work",{"skillNo":112,"name":113,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":9,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":114,"categories":115,"keywords":116,"publishedAt":39},"01M6C7K168CH3XJCC3PDGA9H6C","review","https:\u002F\u002Fgithub.com\u002Flepahc\u002Fkynetic-spec\u002Fblob\u002Fmain\u002Ftemplates\u002Fskills\u002Freview\u002FSKILL.md",[],[113]]