[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6FJWXZ05JHSJSQRT8KY4JEY":3,"skill-same:01M6FJWXZ05JHSJSQRT8KY4JEY":56},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":29,"linkOnly":30,"markdownContent":31,"markdownBody":31,"frontMatter":32,"refName":33,"commitSha":34,"skillDirectory":35,"forksCount":36,"repositoryHtmlUrl":37,"repositoryHomepageUrl":38,"ownerHtmlUrl":39,"ownerBlogUrl":6,"ownerDescription":40,"updatedAt":41,"install":42,"resources":55},"01M6FJWXZ05JHSJSQRT8KY4JEY","pixel-art",null,"ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fwanshuiyin\u002FAuto-claude-code-research-in-sleep\u002Fpixel-art\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",[26,27,28],"pixel art","Art","pixel","2026-11-10 10:12:30",false,"# Pixel Art SVG Generator\n\nCreate a pixel art SVG illustration: $ARGUMENTS\n\n## Design Principles\n\n### Pixel Grid\n- Each \"pixel\" is a `\u003Crect>` with width\u002Fheight of 7px\n- Grid spacing: 7px (no gaps between pixels)\n- Characters are typically 8-10 pixels wide, 8-12 pixels tall\n- Use `\u003Cg transform=\"translate(x,y)\">` to position and reuse character groups\n\n### Color Palette\nKeep it simple — 3-5 colors per character:\n- **Skin**: `#FFDAB9` (light), `#E8967A` \u002F `#D4956A` (blush\u002Fshadow)\n- **Eyes**: `#333`\n- **Hair**: `#8B5E3C` (brown), `#2C2C2C` (black), `#FFD700` (blonde), `#C0392B` (red)\n- **Clothes**: use project's brand color (e.g. `#4A9EDA` for blue, `#74AA63` for green)\n- **Shoes\u002Fpants**: `#444`\n- **Accessories**: `#555` (glasses frames), `#FFD700` (crown)\n\n### Character Template (7px grid)\n```\nRow 0 (hair top):     4 pixels centered\nRow 1 (hair):         6 pixels wide\nRow 2 (face top):     6 pixels — all skin\nRow 3 (eyes):         6 pixels — skin, eye, skin, skin, eye, skin\nRow 4 (mouth):        6 pixels — skin, skin, mouth, mouth, skin, skin\nRow 5 (body top):     8 pixels — hand, 6 shirt, hand\nRow 6 (body):         6 pixels — all shirt\nRow 7 (legs):         2+2 pixels — with gap in middle\n```\n\n### Scene Composition\n\n#### Chat Dialogue Layout (like our hero image)\n- Two characters on left\u002Fright sides, vertically centered\n- Chat bubbles between them, alternating left\u002Fright\n- Bubble tails point toward the speaking character\n- Arrows between bubbles show direction of communication\n- Use `orient=\"auto\"` markers for arrow heads\n- Bottom: tagline or decoration\n\n#### Single Character with Label\n- Character centered\n- Label text below\n- Optional: speech bubble above\n\n#### Group Scene\n- Characters spaced evenly\n- Optional: ground line, background elements\n- Keep viewBox tight — no wasted space\n\n### SVG Structure\n```xml\n\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 W H\" font-family=\"monospace\">\n  \u003Cdefs>\n    \u003C!-- Arrow markers if needed -->\n  \u003C\u002Fdefs>\n\n  \u003Crect width=\"W\" height=\"H\" fill=\"#fafbfc\" rx=\"12\"\u002F>  \u003C!-- Background -->\n\n  \u003C!-- Characters via \u003Cg transform=\"translate(...)\"> -->\n  \u003C!-- Dialogue bubbles: \u003Crect> + \u003Cpolygon> tail + \u003Ctext> -->\n  \u003C!-- Arrows: \u003Cline> with marker-end -->\n  \u003C!-- Labels: \u003Ctext> with text-anchor=\"middle\" -->\n\u003C\u002Fsvg>\n```\n\n### Chat Bubble Recipe\n```xml\n\u003C!-- Blue bubble (left character speaks) -->\n\u003Crect x=\"110\" y=\"29\" width=\"280\" height=\"26\" fill=\"#e8f4fd\" stroke=\"#4a9eda\" stroke-width=\"1.5\" rx=\"8\"\u002F>\n\u003C!-- Tail pointing left toward character -->\n\u003Cpolygon points=\"108,41 99,47 108,46\" fill=\"#e8f4fd\" stroke=\"#4a9eda\" stroke-width=\"1.5\"\u002F>\n\u003Crect x=\"107\" y=\"40\" width=\"3\" height=\"7\" fill=\"#e8f4fd\"\u002F>  \u003C!-- covers stroke at junction -->\n\u003Ctext x=\"123\" y=\"46\" font-size=\"13px\">? Message here\u003C\u002Ftext>\n\n\u003C!-- Orange bubble (right character responds) -->\n\u003Crect x=\"490\" y=\"71\" width=\"280\" height=\"26\" fill=\"#fdf2e8\" stroke=\"#da8a4a\" stroke-width=\"1.5\" rx=\"8\"\u002F>\n\u003C!-- Tail pointing right toward character -->\n\u003Cpolygon points=\"772,83 781,89 772,88\" fill=\"#fdf2e8\" stroke=\"#da8a4a\" stroke-width=\"1.5\"\u002F>\n\u003Crect x=\"770\" y=\"82\" width=\"3\" height=\"7\" fill=\"#fdf2e8\"\u002F>\n\u003Ctext x=\"503\" y=\"88\" font-size=\"13px\">? Response here\u003C\u002Ftext>\n```\n\n### Arrow Recipe\n```xml\n\u003Cdefs>\n  \u003Cmarker id=\"ar\" markerWidth=\"8\" markerHeight=\"6\" refX=\"8\" refY=\"3\" orient=\"auto\">\n    \u003Cpolygon points=\"0 0, 8 3, 0 6\" fill=\"#4a9eda\"\u002F>\n  \u003C\u002Fmarker>\n\u003C\u002Fdefs>\n\u003C!-- Right arrow (→): x1 \u003C x2 -->\n\u003Cline x1=\"392\" y1=\"42\" x2=\"465\" y2=\"42\" stroke=\"#4a9eda\" stroke-width=\"2\" marker-end=\"url(#ar)\"\u002F>\n\u003C!-- Left arrow (←): x1 > x2 -->\n\u003Cline x1=\"488\" y1=\"84\" x2=\"420\" y2=\"84\" stroke=\"#da8a4a\" stroke-width=\"2\" marker-end=\"url(#ar-o)\"\u002F>\n```\n\n## Workflow\n\n### Step 1: Understand the Request\n- What characters\u002Fobjects to draw?\n- What's the scene? (dialogue, portrait, group, diagram)\n- What colors\u002Fbrand to match?\n- What size? (compact for badge, wide for README hero)\n\n### Step 2: Generate SVG\n- Write to a temp file or project directory\n- Open with `open \u003Cfile.svg>` for preview\n- Keep viewBox tight — measure actual content bounds\n\n### Step 3: Iterate with User\n- User provides feedback on screenshot\n- Common fixes: overlap, arrow direction, spacing, sizing\n- Use `Edit` for small tweaks, `Write` for major redesigns\n- Typical: 2-4 iterations to get it right\n\n### Step 4: Finalize\n- Ensure no personal info in the SVG\n- Clean up: remove unused defs, tighten viewBox\n- Suggest adding to README: `![Alt text](filename.svg)`\n\n## Common Pitfalls\n- **Arrow direction**: `orient=\"auto\"` follows line direction. Line going right→left = arrowhead points left\n- **Bubble overlap**: keep 38-44px vertical spacing between rows\n- **Text overflow**: monospace 13px ≈ 7.8px\u002Fchar, emoji ≈ 14px. Measure before setting bubble width\n- **Character overlap with bubbles**: keep character x-zone and bubble x-zone separated by ≥10px\n- **viewBox too large**: match viewBox to actual content, add ~10px padding\n- **Tail stroke artifact**: always add a small `\u003Crect>` at the bubble-tail junction to cover the stroke line\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fwanshuiyin\u002FAuto-claude-code-research-in-sleep\u002Fpixel-art",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":7,"skillName":5,"commands":43,"prompt":53,"zipAvailable":54},[44,47,50],{"tool":45,"command":46},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill pixel-art",{"tool":48,"command":49},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill pixel-art",{"tool":51,"command":52},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill pixel-art","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fwanshuiyin\u002FAuto-claude-code-research-in-sleep\u002Fpixel-art\u002FSKILL.md",true,[],[57,69,79,88,94,101],{"skillNo":58,"name":59,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":60,"categories":61,"keywords":65,"publishedAt":29},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[62],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[66,67,68],"model","model hierarchy","model hierarchy skill",{"skillNo":70,"name":71,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":72,"categories":73,"keywords":75,"publishedAt":29},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[74],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},[76,77,78],"MCP","zoom","zoom mcp",{"skillNo":80,"name":81,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":29},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[85,86,87,77],"sdk","zoom apps sdk","apps",{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":29},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[90],{"skillNo":95,"name":96,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":100,"publishedAt":29},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[99],{"categoryNo":63,"categoryName":64,"taxonomyType":20,"taxonomyTypeDesc":21},[96],{"skillNo":102,"name":103,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":11,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":104,"categories":105,"keywords":106,"publishedAt":29},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[103]]