[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71SF7PAQNAD5G3RE75BS42E":3,"skill-same:01M71SF7PAQNAD5G3RE75BS42E":64},{"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":18,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":6,"ownerHtmlUrl":47,"ownerBlogUrl":6,"ownerDescription":48,"updatedAt":49,"install":50,"resources":63},"01M71SF7PAQNAD5G3RE75BS42E","creating-illustrations",null,"Use when a structure, flow, sequence, state machine, dependency graph, or comparison would be clearer as a diagram than as prose. Produces accurate, readable, text-based diagrams.","Praneeth-Suresh\u002FBeryl","Praneeth-Suresh","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F86470588?v=4","01M71SF2BCZ4JMKKYZR66WNHAF","Praneeth Suresh","01M71SF2C5JMS7B9676HSA2SG6",11,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fcreating-illustrations\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36],"creating illustrations","sequence","graph","when","prose","comparison","state machine","use","flow","machine","dependency","dependency graph","diagram","structure","as","state","diagrams","text","2026-11-10 13:02:02",false,"---\nname: creating-illustrations\ndescription: Use when a structure, flow, sequence, state machine, dependency graph, or comparison would be clearer as a diagram than as prose. Produces accurate, readable, text-based diagrams.\n---\n\n# Creating Illustrations\n\n## Purpose\n\nShow the shape of a system, change, or decision when words alone make the\nreader rebuild it in their head.\n\n## When To Draw\n\nDraw when the reader needs to see relationships: call flows, data flow, module\nboundaries, state transitions, dependency order, timelines, or before\u002Fafter\nstructure. Do not draw a diagram that only repeats a short list.\n\n## Choose The Form\n\n| Content | Form |\n| --- | --- |\n| Steps over time between actors | Mermaid `sequenceDiagram` |\n| Components and their dependencies | Mermaid `flowchart` |\n| States and transitions | Mermaid `stateDiagram-v2` |\n| Data entities and relations | Mermaid `erDiagram` |\n| Ordered work with dependencies | Mermaid `flowchart` or `gantt` |\n| Options compared on several dimensions | Markdown table |\n| Custom layout Mermaid cannot express | Hand-written SVG |\n\nPrefer Mermaid in Markdown. It is text, renders on GitHub, and is reviewable in\na diff. Use SVG only when Mermaid cannot express the layout. Do not use ASCII\nart for anything with more than a few boxes.\n\n## Accuracy\n\n1. Draw only what you verified. Every box and arrow must map to a real file,\n   module, function, service, or decision. Use the names from the code.\n2. Label arrows with what flows or why: a call name, a message, an event.\n3. If part of the diagram is a proposal or a guess, mark it, for example with a\n   dashed edge or a `(proposed)` label, and say so in the text.\n4. Put the source paths for the main nodes in the text below the diagram.\n\n## Readability\n\n- Keep to about 12 nodes. Split a larger picture into an overview plus one\n  diagram per area.\n- Use one direction of flow, such as top to bottom or left to right.\n- Group related nodes with `subgraph` instead of adding colour.\n- Do not rely on colour alone to carry meaning. Use labels or line styles too.\n- Keep labels short. Put detail in the text below.\n- In SVG, include a `\u003Ctitle>` and `\u003Cdesc>`, use readable font sizes, keep\n  contrast high, and do not load external fonts, images, or scripts.\n\n## Output\n\n1. One sentence that says what the diagram shows.\n2. The diagram.\n3. A short key or notes: source paths, anything proposed or uncertain, and\n   anything left out on purpose.\n","# Creating Illustrations\n\n## Purpose\n\nShow the shape of a system, change, or decision when words alone make the\nreader rebuild it in their head.\n\n## When To Draw\n\nDraw when the reader needs to see relationships: call flows, data flow, module\nboundaries, state transitions, dependency order, timelines, or before\u002Fafter\nstructure. Do not draw a diagram that only repeats a short list.\n\n## Choose The Form\n\n| Content | Form |\n| --- | --- |\n| Steps over time between actors | Mermaid `sequenceDiagram` |\n| Components and their dependencies | Mermaid `flowchart` |\n| States and transitions | Mermaid `stateDiagram-v2` |\n| Data entities and relations | Mermaid `erDiagram` |\n| Ordered work with dependencies | Mermaid `flowchart` or `gantt` |\n| Options compared on several dimensions | Markdown table |\n| Custom layout Mermaid cannot express | Hand-written SVG |\n\nPrefer Mermaid in Markdown. It is text, renders on GitHub, and is reviewable in\na diff. Use SVG only when Mermaid cannot express the layout. Do not use ASCII\nart for anything with more than a few boxes.\n\n## Accuracy\n\n1. Draw only what you verified. Every box and arrow must map to a real file,\n   module, function, service, or decision. Use the names from the code.\n2. Label arrows with what flows or why: a call name, a message, an event.\n3. If part of the diagram is a proposal or a guess, mark it, for example with a\n   dashed edge or a `(proposed)` label, and say so in the text.\n4. Put the source paths for the main nodes in the text below the diagram.\n\n## Readability\n\n- Keep to about 12 nodes. Split a larger picture into an overview plus one\n  diagram per area.\n- Use one direction of flow, such as top to bottom or left to right.\n- Group related nodes with `subgraph` instead of adding colour.\n- Do not rely on colour alone to carry meaning. Use labels or line styles too.\n- Keep labels short. Put detail in the text below.\n- In SVG, include a `\u003Ctitle>` and `\u003Cdesc>`, use readable font sizes, keep\n  contrast high, and do not load external fonts, images, or scripts.\n\n## Output\n\n1. One sentence that says what the diagram shows.\n2. The diagram.\n3. A short key or notes: source paths, anything proposed or uncertain, and\n   anything left out on purpose.\n",{"name":5,"description":7},"main","3a5bd7e327cbdad81a70b624ec3fc6e43ec91f12",".beryl\u002Fagent\u002Fskills\u002Fcreating-illustrations",0,"https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh","Just built it.","2026-11-09 18:59:34",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add Praneeth-Suresh\u002FBeryl --skill creating-illustrations",{"tool":56,"command":57},"bunx","bunx skills add Praneeth-Suresh\u002FBeryl --skill creating-illustrations",{"tool":59,"command":60},"pnpm","pnpm dlx skills add Praneeth-Suresh\u002FBeryl --skill creating-illustrations","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fcreating-illustrations\u002FSKILL.md",true,[],[65,88,95,128,153,168],{"skillNo":66,"name":67,"nameZh":6,"description":68,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":69,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":37},"01M71SGEFHAT82F5TQH73XY6H8","verification-before-completion","Use when about to claim work is complete, fixed, or passing, before committing or creating PRs - requires running verification commands and confirming output before making any success claims; evidence before assertions always","MIT","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fverification-before-completion\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fverification-before-completion\u002FSKILL.md",[],[74,75,76,77,78,79,80,81,82,22,83,26,84,85,86,87],"verification","verification before completion","committing","commands","about","work","claims","output","evidence","assertions","claim","prs","complete","running",{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":37},"01M71SGD1DV15B9Z2S5V3M8YPH","using-beryl","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fusing-beryl\u002FSKILL.md",[],[94],"using beryl",{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":99,"categories":100,"keywords":109,"publishedAt":37},"01M71SGAJ7D211GQR4703TTZCW","understand-codebase","Teach a developer how a repository, subsystem, execution path, migration, diff, commit, branch, or pull request works. Use when the user asks to understand, explain, map, walk through, explore, or quiz themselves on code, or asks for an interactive HTML understanding artifact.","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Funderstand-codebase\u002FSKILL.md",[101,106],{"categoryNo":102,"categoryName":103,"taxonomyType":104,"taxonomyTypeDesc":105},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":107,"categoryName":108,"taxonomyType":104,"taxonomyTypeDesc":105},"01JBSEEDCAT000000000000039","教师与教育",[110,111,112,113,114,115,116,117,118,119,26,22,120,121,122,123,124,125,126,127],"understand","codebase","understand codebase","branch","diff","for","explore","execution","quiz","map","code","commit","interactive","explain","artifact","how","pull request","pull",{"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":69,"licenseFileUrl":132,"sourceHtmlUrl":133,"categories":134,"keywords":143,"publishedAt":37},"01M71SG8H7CZGRND4C2BS49RV2","test-driven-development","Use when implementing any feature or bugfix, before writing implementation code","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Ftest-driven-development\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Ftest-driven-development\u002FSKILL.md",[135,140],{"categoryNo":136,"categoryName":137,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":141,"categoryName":142,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000018","写作与文案",[144,145,146,147,148,149,150,26,22,120,151,152],"driven","test","test driven development","development","feature","implementing","writing","bugfix","implementation",{"skillNo":154,"name":155,"nameZh":6,"description":156,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":69,"licenseFileUrl":157,"sourceHtmlUrl":158,"categories":159,"keywords":161,"publishedAt":37},"01M71SG4N855A3ASYXWFX45DH5","systematic-debugging","Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fsystematic-debugging\u002FLICENSE","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fsystematic-debugging\u002FSKILL.md",[160],{"categoryNo":136,"categoryName":137,"taxonomyType":138,"taxonomyTypeDesc":139},[162,163,164,165,26,22,145,166,167],"systematic","debugging","systematic debugging","fixes","behavior","bug",{"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":175,"publishedAt":37},"01M71SG18JMNV8ED6XQ97Z48X0","simplifying-code","Use when code in a specific module or area is hard to understand or change, when the user asks to simplify, refactor, clean up, or improve the design or architecture of some code, or when a maintenance program hands over a refactor slice. Finds unmanaged complexity from evidence and removes it with small, behavior-preserving changes.","https:\u002F\u002Fgithub.com\u002FPraneeth-Suresh\u002FBeryl\u002Fblob\u002Fmain\u002F.beryl\u002Fagent\u002Fskills\u002Fsimplifying-code\u002FSKILL.md",[174],{"categoryNo":102,"categoryName":103,"taxonomyType":104,"taxonomyTypeDesc":105},[176,120,177,178,179,180,181,182,22,26,183,184,185,186,187,188,82,189,190,191],"simplifying code","design","change","with","architecture","program","simplify","module","changes","improve","clean","up","slice","complexity","behavior-preserving","maintenance"]