[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SPW101SQMYXXCDF9M4WYW":3,"skill-same:01M71SPW101SQMYXXCDF9M4WYW":80},{"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":28,"publishedAt":49,"linkOnly":50,"markdownContent":51,"markdownBody":52,"frontMatter":53,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":63,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M71SPW101SQMYXXCDF9M4WYW","canvas-design",null,"Apply the 90\u002F10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.","clawic\u002FClawix","clawic","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F260442073?v=4","01M71SK22K8AQ01VDMSY531Y1Y","Clawic","01M71SK23S500EBSASK8CHHVK6",8,"MIT","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fcanvas-design\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48],"design","canvas design","canvas","apply","when","rule","use","social post","poster","single","social","element","card","for","layout","post","Composition","attention","hierarchy","text","2026-11-10 13:02:02",false,"---\nname: canvas-design\ndescription: Apply the 90\u002F10 visual-to-text rule when composing a piece on a canvas (poster, card, social post). Use when the deliverable lives on a single fixed surface where each element competes for attention.\nkeywords: [canvas, layout, poster, card, social, composition, hierarchy]\n---\n\n# canvas-design\n\nA canvas piece (one fixed-aspect surface that the viewer takes in at a glance) succeeds when one element dominates. The 90\u002F10 rule:\n\n- **90% of the canvas is the protagonist**: a strong headline, a single image, a quote. One element only.\n- **10% supports**: attribution, date, logo, CTA, micro-copy.\n\n## Procedure\n\n1. Identify the protagonist. Ask: \"if the viewer reads nothing else, what must they see?\"\n2. Pick a Template whose dominant slot matches that intent:\n   - Poster announcement: `poster.announcement` (heading dominant) or `poster.event` (hero image dominant).\n   - Quote piece: `poster.quote` or `social-post.square-quote`.\n   - Product showcase: `social-post.square-product` or `flyer.event`.\n3. Reduce supporting copy. Use the maxLength of supporting slots aggressively; if your text exceeds, cut.\n4. Pick a Style whose `accent` is bold enough to anchor the protagonist. For dim backgrounds use `midnight` or `signal`; for warm pieces use `warm` or `editorial`.\n5. Render PNG + PDF + SVG to give the user format choices.\n\n## Anti-patterns\n\n- Three competing headlines on one canvas. Pick one.\n- Dense paragraphs of body copy on a poster. If it reads like a paragraph, it belongs in a one-pager or brochure, not a canvas piece.\n- Logo larger than the headline. Logo lives in the 10%.\n- Stock-photo backgrounds with text on top without a scrim. Either use a clean background, or add a `shape` slot behind the text to create contrast.\n\n## Constraints\n\n- Never use more than 2 distinct accent colors in a single canvas.\n- Maintain at least 4.5:1 contrast between text and its immediate background.\n- Respect platform safe zones: for `9:16` story posts, keep critical content inside the middle 80% vertically.\n","# canvas-design\n\nA canvas piece (one fixed-aspect surface that the viewer takes in at a glance) succeeds when one element dominates. The 90\u002F10 rule:\n\n- **90% of the canvas is the protagonist**: a strong headline, a single image, a quote. One element only.\n- **10% supports**: attribution, date, logo, CTA, micro-copy.\n\n## Procedure\n\n1. Identify the protagonist. Ask: \"if the viewer reads nothing else, what must they see?\"\n2. Pick a Template whose dominant slot matches that intent:\n   - Poster announcement: `poster.announcement` (heading dominant) or `poster.event` (hero image dominant).\n   - Quote piece: `poster.quote` or `social-post.square-quote`.\n   - Product showcase: `social-post.square-product` or `flyer.event`.\n3. Reduce supporting copy. Use the maxLength of supporting slots aggressively; if your text exceeds, cut.\n4. Pick a Style whose `accent` is bold enough to anchor the protagonist. For dim backgrounds use `midnight` or `signal`; for warm pieces use `warm` or `editorial`.\n5. Render PNG + PDF + SVG to give the user format choices.\n\n## Anti-patterns\n\n- Three competing headlines on one canvas. Pick one.\n- Dense paragraphs of body copy on a poster. If it reads like a paragraph, it belongs in a one-pager or brochure, not a canvas piece.\n- Logo larger than the headline. Logo lives in the 10%.\n- Stock-photo backgrounds with text on top without a scrim. Either use a clean background, or add a `shape` slot behind the text to create contrast.\n\n## Constraints\n\n- Never use more than 2 distinct accent colors in a single canvas.\n- Maintain at least 4.5:1 contrast between text and its immediate background.\n- Respect platform safe zones: for `9:16` story posts, keep critical content inside the middle 80% vertically.\n",{"name":5,"keywords":54,"description":7},[31,43,37,41,39,55,47],"composition","main","26b22a693141263d55cf916e06cee81026b270ca","skills\u002Fcanvas-design",0,"https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix","https:\u002F\u002Fclawix.com","https:\u002F\u002Fgithub.com\u002Fclawic","https:\u002F\u002Fclawic.com","The open-source interface, framework, and skills for agents","2026-06-06 17:20:04",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add clawic\u002FClawix --skill canvas-design",{"tool":72,"command":73},"bunx","bunx skills add clawic\u002FClawix --skill canvas-design",{"tool":75,"command":76},"pnpm","pnpm dlx skills add clawic\u002FClawix --skill canvas-design","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fcanvas-design\u002FSKILL.md",true,[],[81,101,126,148,170,196],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":49},"01M71SS08XCQF9G9KSNZ75NA0V","visual-regression","Run and interpret Clawix UI geometry, screenshot, protected-surface, and debt-baseline checks without authorizing visual repair.","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-regression\u002FSKILL.md",[],[88,89,90,91,92,93,94,95,96,97,98,99,100],"visual regression","regression","visual","clawix","repair","run","baseline","geometry","debt","screenshot","ui","surface","screenshots",{"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":111,"publishedAt":49},"01M71SRXFKRDB3ZDJYGJVFJ40Q","ui-performance-budget","Capture and compare Clawix UI performance budgets for critical flows before optimizing visible or runtime UI behavior.","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fui-performance-budget\u002FSKILL.md",[107,108],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},{"categoryNo":109,"categoryName":110,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000040","财务",[112,113,114,98,115,91,116,42,117,118,119,120,121,122,123,124,125],"ui performance budget","performance","Budget","budgets","latency","runtime","behavior","flows","hitches","traces","capture","critical","compare","performance budgets",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":133,"publishedAt":49},"01M71SRVPPK31H1RDB0DJ79GYB","ui-implementation","Implement functional Clawix UI wiring while respecting visual mutation boundaries, pattern contracts, protected surfaces, and debt baselines.","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fui-implementation\u002FSKILL.md",[132],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[134,135,98,136,91,137,138,139,140,141,142,96,143,90,144,145,146,147],"ui implementation","implementation","state","functional","baselines","surfaces","validation","pattern","boundaries","mutation","contracts","implement","wiring","functional-ui",{"skillNo":149,"name":150,"nameZh":6,"description":151,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":152,"categories":153,"keywords":155,"publishedAt":49},"01M71SRSJY80G228GG4YEZKVE7","ui-canon-review","Review whether a Clawix UI pattern, visual decision, copy change, or component extraction belongs in canon, debt, exception, or protected-surface scope.","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Fui-canon-review\u002FSKILL.md",[154],{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},[156,157,98,158,91,159,160,161,162,141,163,164,165,96,166,167,99,90,168,169],"canon","ui canon review","review","change","component","scope","decision","interface","ui pattern","registry","copy","component extraction","extraction","approval",{"skillNo":171,"name":172,"nameZh":6,"description":173,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":174,"categories":175,"keywords":177,"publishedAt":49},"01M71SRPKYN0R0CWJ5202MH63R","theme-factory","Produce variants of an existing Style by shifting tone (light\u002Fdark), density (compact\u002Frelaxed), or accent (palette rotation) while preserving the brand identity. Use when the user wants alternate themes derived from one brand.","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Ftheme-factory\u002FSKILL.md",[176],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[178,179,180,181,182,183,184,185,186,187,188,189,35,190,191,33,192,193,194,195],"theme","theme factory","factory","brand identity","palette","brand","style","dark","rotation","variants","produce","themes","Existing","compact","density","one","tone","identity",{"skillNo":197,"name":198,"nameZh":6,"description":199,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":200,"categories":201,"keywords":214,"publishedAt":49},"01M71SRMDBTFB7RYWJYPFSH6VB","template-render","Render a Template + data + Style into a final artifact in one of HTML, PDF, PNG, SVG or PPTX. Use whenever the user asks for a concrete deliverable like \"make me a poster\", \"render a card\", \"give me a one-pager\".","https:\u002F\u002Fgithub.com\u002Fclawic\u002FClawix\u002Fblob\u002Fmain\u002Fskills\u002Ftemplate-render\u002FSKILL.md",[202,205,208,211],{"categoryNo":203,"categoryName":204,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000002","文档处理",{"categoryNo":206,"categoryName":207,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":209,"categoryName":210,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":212,"categoryName":213,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000034","行政与办公人员",[215,216,217,218,219,220,221,222,184,223,42,41,37,224,35,225,193,226,227,228],"template render","template","render","one-pager","me","PDF","artifact","pptx","SVG","data","deliverable","html","user","png"]