[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6DF36QQ5DYXC9KT6CTFCVP4":3,"skill-same:01M6DF36QQ5DYXC9KT6CTFCVP4":89},{"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":14,"repositoryHtmlUrl":52,"repositoryHomepageUrl":6,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":54,"install":55,"resources":68},"01M6DF36QQ5DYXC9KT6CTFCVP4","visual-explainer",null,"Use when a visual explanation beats prose — diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, dashboards, timelines, or HTML slide decks. Generates one self-contained HTML page (embedded CSS\u002FJS, interactive Mermaid) that explains systems, code changes, plans, data, or technical concepts.","Prekzursil\u002Fagent-skills-toolchain","Prekzursil","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F54636077?v=4","01M6DACZ1PCQHD99SCR1YXG28B","Andrei Mihai Visalon","01M6DACZ670WZF535V3WYYSS4Z",0,"MIT","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"visual","visual explainer","explainer","interactive","systems","plans","project","self","prose","diagrams","diff","use","css","technical","page","plan","data","code","mermaid","architecture","2026-11-10 10:12:30",false,"---\nname: visual-explainer\ndescription: Use when a visual explanation beats prose — diagrams, architecture overviews, diff or plan reviews, project recaps, comparison tables, dashboards, timelines, or HTML slide decks. Generates one self-contained HTML page (embedded CSS\u002FJS, interactive Mermaid) that explains systems, code changes, plans, data, or technical concepts.\n---\n\n\u003C!-- Source: cherry-picked from https:\u002F\u002Fgithub.com\u002Fcoco-research\u002Fcoco (skills\u002Fvisual-explainer, MIT, author nicobailon, v0.8.1) on 27.08.2026 per grill decision G-11\u002F11B. Adapted to house format; coco template\u002Freference files not ported — all invariants needed to build pages from scratch are inlined below. -->\n\n# Visual Explainer\n\nGenerate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually.\n\n## Trigger and delivery rules\n\n- Prefer an HTML page over terminal ASCII when the output is inherently visual.\n- If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary.\n- Write files to the active project's `docs\u002F` or `output\u002F` folder (or an explicitly requested path). Use descriptive filenames.\n- Open generated pages in the browser when running normally.\n- The final page must be a complete self-contained HTML document, including embedded CSS and any needed JS.\n\n## Choose the representation\n\n| Content | Default representation |\n|---|---|\n| Flowchart, pipeline, state machine, decision tree | Mermaid |\n| Sequence, ER\u002Fschema, class, C4, topology-focused architecture | Mermaid |\n| Text-heavy architecture, module internals, implementation plans | CSS grid cards, optionally with a Mermaid overview |\n| 15+ element architecture | Hybrid: small Mermaid overview + CSS detail cards |\n| Comparison\u002Faudit\u002Fstatus matrix | Semantic HTML `\u003Ctable>` |\n| Timeline\u002Froadmap | CSS timeline |\n| Dashboard\u002Fmetrics | CSS grid + charts\u002FKPIs |\n| Slide deck | `100dvh` slides |\n\n## Mermaid invariants\n\n- Use `theme: 'base'` with custom `themeVariables` matching the page palette.\n- For complex diagrams use ELK layout when available.\n- Wrap every diagram in a shell: `.diagram-shell` > `.mermaid-wrap` > `.zoom-controls` + `.mermaid-viewport` > `.mermaid-canvas`.\n- Every Mermaid diagram needs zoom in\u002Fout\u002Freset\u002Fexpand controls, Ctrl\u002FCmd+scroll zoom, drag panning, and click-to-expand.\n- Prefer `flowchart TD` for complex diagrams. Use `LR` only for simple 3–4 node linear flows.\n- Use `\u003Cbr\u002F>` in quoted flowchart labels. Do not use escaped `\\n` labels.\n- Never define page-level `.node`; Mermaid uses it internally. Use namespaced page classes such as `.ve-card`.\n- For 15+ elements, do not cram everything into one Mermaid diagram. Use the hybrid overview + cards pattern.\n\n## Layout and style invariants\n\n- Use semantic HTML where it helps accessibility and copy\u002Fpaste: headings, lists, `\u003Ctable>`, captions.\n- Use CSS custom properties for palette: `--bg`, `--surface`, `--border`, `--text`, `--text-dim`, and 3–5 accents.\n- Pick a clear aesthetic direction before writing: blueprint, editorial, paper\u002Fink, terminal, IDE-inspired, or data-dense.\n- Avoid generic defaults: no body font that is only Inter, Roboto, Arial, Helvetica, or system-ui; no violet\u002Ffuchsia Tailwind-default accents as the main palette (`#8b5cf6`, `#7c3aed`, `#a78bfa`, `#d946ef`); no cyan+magenta+purple neon dashboard; no gradient-mesh blobs.\n- Good font pair families: DM Sans + Fira Code; Instrument Serif + JetBrains Mono; IBM Plex Sans + IBM Plex Mono; Bricolage Grotesque + Fragment Mono; Plus Jakarta Sans + Azeret Mono.\n- Good accent directions: terracotta+sage, teal+slate, rose+cranberry, amber+emerald, deep blue+gold.\n- Prevent overflow: `min-width: 0` on grid\u002Fflex children, `overflow-wrap: break-word` for long text, and scroll containers for wide tables\u002Fcode.\n- Do not set `display: flex` directly on `\u003Cul>`\u002F`\u003Col>` when list markers matter.\n- Use depth sparingly: hero\u002Felevated only for primary sections; flat\u002Frecessed for reference material.\n- Use entrance\u002Fhover animation only when it clarifies hierarchy. Respect `prefers-reduced-motion`. No continuous glow, pulse, or breathing effects on static content.\n- Pages with 4+ major sections get a sticky\u002Fside navigation.\n\n## Slide deck mode\n\nUse slides only when explicitly requested. Slides are a different medium, not a paginated article:\n\n- Each slide is one viewport (`100dvh`) with no page-level scrolling.\n- Larger type, fewer objects per slide, varied compositions, visible navigation.\n- Include slide nav chrome: prev\u002Fnext controls, slide count, keyboard navigation, and carousel dots\u002Findicators.\n- Before writing HTML, inventory the source and map every source item to slides.\n- Do not drop content to fit a fixed slide count. Add slides instead.\n- Slide types to vary between: Title, Section Divider, Content, Split, Diagram, Dashboard, Table, Code, Quote, Full-Bleed.\n\n## Final checklist\n\nBefore delivery, verify:\n\n- complete HTML document, written to the requested path;\n- no console errors when opened; no horizontal overflow at normal desktop width;\n- fonts load with fallbacks; tables preserve rows\u002Fcolumns and wrap long text;\n- Mermaid diagrams use the diagram shell with zoom\u002Fpan\u002Fexpand;\n- slides fit one viewport, include carousel dots, and preserve source coverage;\n- visual hierarchy makes the main idea obvious in the first viewport;\n- styling would still be recognizable if compared against a generic dark\u002Fviolet template.\n","\u003C!-- Source: cherry-picked from https:\u002F\u002Fgithub.com\u002Fcoco-research\u002Fcoco (skills\u002Fvisual-explainer, MIT, author nicobailon, v0.8.1) on 27.08.2026 per grill decision G-11\u002F11B. Adapted to house format; coco template\u002Freference files not ported — all invariants needed to build pages from scratch are inlined below. -->\n\n# Visual Explainer\n\nGenerate self-contained HTML pages that explain systems, code changes, plans, data, and technical concepts visually.\n\n## Trigger and delivery rules\n\n- Prefer an HTML page over terminal ASCII when the output is inherently visual.\n- If a table would have 4+ rows or 3+ columns, render it as HTML and give only a short chat summary.\n- Write files to the active project's `docs\u002F` or `output\u002F` folder (or an explicitly requested path). Use descriptive filenames.\n- Open generated pages in the browser when running normally.\n- The final page must be a complete self-contained HTML document, including embedded CSS and any needed JS.\n\n## Choose the representation\n\n| Content | Default representation |\n|---|---|\n| Flowchart, pipeline, state machine, decision tree | Mermaid |\n| Sequence, ER\u002Fschema, class, C4, topology-focused architecture | Mermaid |\n| Text-heavy architecture, module internals, implementation plans | CSS grid cards, optionally with a Mermaid overview |\n| 15+ element architecture | Hybrid: small Mermaid overview + CSS detail cards |\n| Comparison\u002Faudit\u002Fstatus matrix | Semantic HTML `\u003Ctable>` |\n| Timeline\u002Froadmap | CSS timeline |\n| Dashboard\u002Fmetrics | CSS grid + charts\u002FKPIs |\n| Slide deck | `100dvh` slides |\n\n## Mermaid invariants\n\n- Use `theme: 'base'` with custom `themeVariables` matching the page palette.\n- For complex diagrams use ELK layout when available.\n- Wrap every diagram in a shell: `.diagram-shell` > `.mermaid-wrap` > `.zoom-controls` + `.mermaid-viewport` > `.mermaid-canvas`.\n- Every Mermaid diagram needs zoom in\u002Fout\u002Freset\u002Fexpand controls, Ctrl\u002FCmd+scroll zoom, drag panning, and click-to-expand.\n- Prefer `flowchart TD` for complex diagrams. Use `LR` only for simple 3–4 node linear flows.\n- Use `\u003Cbr\u002F>` in quoted flowchart labels. Do not use escaped `\\n` labels.\n- Never define page-level `.node`; Mermaid uses it internally. Use namespaced page classes such as `.ve-card`.\n- For 15+ elements, do not cram everything into one Mermaid diagram. Use the hybrid overview + cards pattern.\n\n## Layout and style invariants\n\n- Use semantic HTML where it helps accessibility and copy\u002Fpaste: headings, lists, `\u003Ctable>`, captions.\n- Use CSS custom properties for palette: `--bg`, `--surface`, `--border`, `--text`, `--text-dim`, and 3–5 accents.\n- Pick a clear aesthetic direction before writing: blueprint, editorial, paper\u002Fink, terminal, IDE-inspired, or data-dense.\n- Avoid generic defaults: no body font that is only Inter, Roboto, Arial, Helvetica, or system-ui; no violet\u002Ffuchsia Tailwind-default accents as the main palette (`#8b5cf6`, `#7c3aed`, `#a78bfa`, `#d946ef`); no cyan+magenta+purple neon dashboard; no gradient-mesh blobs.\n- Good font pair families: DM Sans + Fira Code; Instrument Serif + JetBrains Mono; IBM Plex Sans + IBM Plex Mono; Bricolage Grotesque + Fragment Mono; Plus Jakarta Sans + Azeret Mono.\n- Good accent directions: terracotta+sage, teal+slate, rose+cranberry, amber+emerald, deep blue+gold.\n- Prevent overflow: `min-width: 0` on grid\u002Fflex children, `overflow-wrap: break-word` for long text, and scroll containers for wide tables\u002Fcode.\n- Do not set `display: flex` directly on `\u003Cul>`\u002F`\u003Col>` when list markers matter.\n- Use depth sparingly: hero\u002Felevated only for primary sections; flat\u002Frecessed for reference material.\n- Use entrance\u002Fhover animation only when it clarifies hierarchy. Respect `prefers-reduced-motion`. No continuous glow, pulse, or breathing effects on static content.\n- Pages with 4+ major sections get a sticky\u002Fside navigation.\n\n## Slide deck mode\n\nUse slides only when explicitly requested. Slides are a different medium, not a paginated article:\n\n- Each slide is one viewport (`100dvh`) with no page-level scrolling.\n- Larger type, fewer objects per slide, varied compositions, visible navigation.\n- Include slide nav chrome: prev\u002Fnext controls, slide count, keyboard navigation, and carousel dots\u002Findicators.\n- Before writing HTML, inventory the source and map every source item to slides.\n- Do not drop content to fit a fixed slide count. Add slides instead.\n- Slide types to vary between: Title, Section Divider, Content, Split, Diagram, Dashboard, Table, Code, Quote, Full-Bleed.\n\n## Final checklist\n\nBefore delivery, verify:\n\n- complete HTML document, written to the requested path;\n- no console errors when opened; no horizontal overflow at normal desktop width;\n- fonts load with fallbacks; tables preserve rows\u002Fcolumns and wrap long text;\n- Mermaid diagrams use the diagram shell with zoom\u002Fpan\u002Fexpand;\n- slides fit one viewport, include carousel dots, and preserve source coverage;\n- visual hierarchy makes the main idea obvious in the first viewport;\n- styling would still be recognizable if compared against a generic dark\u002Fviolet template.\n",{"name":5,"description":7},"main","a298c929b6cbd662e1fce54302ce520d5ceea1a5","skills\u002Fvisual-explainer","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain","https:\u002F\u002Fgithub.com\u002FPrekzursil","2026-11-02 14:30:57",{"source":8,"skillName":5,"commands":56,"prompt":66,"zipAvailable":67},[57,60,63],{"tool":58,"command":59},"npx","npx skills add Prekzursil\u002Fagent-skills-toolchain --skill visual-explainer",{"tool":61,"command":62},"bunx","bunx skills add Prekzursil\u002Fagent-skills-toolchain --skill visual-explainer",{"tool":64,"command":65},"pnpm","pnpm dlx skills add Prekzursil\u002Fagent-skills-toolchain --skill visual-explainer","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Fskills\u002Fvisual-explainer\u002FSKILL.md",true,[69,75,81,85],{"path":70,"resourceType":71,"resourceTypeDesc":72,"sizeBytes":73,"sourceHtmlUrl":74},"LICENSE.txt","LICENSE","许可证",11345,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002FCopia de web-artifacts-builder\u002FLICENSE.txt",{"path":76,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":79,"sourceHtmlUrl":80},"scripts\u002Fbundle-artifact.sh","SCRIPT","脚本",1517,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002FCopia de web-artifacts-builder\u002Fscripts\u002Fbundle-artifact.sh",{"path":82,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":83,"sourceHtmlUrl":84},"scripts\u002Finit-artifact.sh",9924,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002FCopia de web-artifacts-builder\u002Fscripts\u002Finit-artifact.sh",{"path":86,"resourceType":77,"resourceTypeDesc":78,"sizeBytes":87,"sourceHtmlUrl":88},"scripts\u002Fshadcn-components.tar.gz",19967,"https:\u002F\u002Fgithub.com\u002Fagency-black\u002FSkills\u002Fblob\u002Fmain\u002FCopia de web-artifacts-builder\u002Fscripts\u002Fshadcn-components.tar.gz",[90,111,140,166,179,195],{"skillNo":91,"name":92,"nameZh":6,"description":93,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":94,"categories":95,"keywords":96,"publishedAt":44},"01M6DF7D7478R55P46REYH4QAC","clarify-requirements","Resolve genuine pre-execution ambiguity by scanning repo context, generating 1-6 grounded options, and asking 1-3 focused questions via AskUserQuestion. NOT for mid-task use (injection risk); NOT when the goal is already unambiguous; use to disambiguate vague prompts before any file edits.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fworkspace-hooks\u002Fskills\u002Fclarify-requirements\u002FSKILL.md",[],[97,98,99,100,101,102,103,104,105,35,106,107,108,109,110],"clarify requirements","clarify","requirements","risk","options","task","prompts","goal","scanning","context","repo","injection","execution","file",{"skillNo":112,"name":113,"nameZh":6,"description":114,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":115,"categories":116,"keywords":120,"publishedAt":44},"01M6DF79CA4BHJS66J8EZDBPWJ","openmm-md","Run FREE, open-source, Windows-native GPU molecular dynamics via the openmm-md MCP (OpenMM + CUDA on the local NVIDIA GPU). Use for protein \u002F protein-ligand MD when you want a free stack or are on Windows without a Schrodinger license. Covers the full workflow (prepare, solvate, minimize, equilibrate, production, analyze, mmgbsa) AND an honest decision guide vs Schrodinger Desmond, including how to run Desmond legitimately on Linux or a cloud GPU with a real license. This is a deliberately LESSER free alternative and does NOT replace the schrodinger MCP tools. Do NOT use it to pick a free tool when a validated FEP+, WaterMap, IFD-MD, or Prime MM-GBSA result is actually required.","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Fmcp\u002Fopenmm-md-mcp\u002Fskill\u002Fopenmm-md\u002FSKILL.md",[117],{"categoryNo":118,"categoryName":119,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[121,122,123,124,125,126,127,128,129,130,131,132,133,134,35,135,136,137,138,139],"openmm md","how","decision","pick","linux","analyze","tool","stack","open","NVIDIA","gpu","license","workflow","windows","free","molecular dynamics","local","do","MCP",{"skillNo":141,"name":142,"nameZh":6,"description":143,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":144,"categories":145,"keywords":152,"publishedAt":44},"01M6DF76C1MG85VEWP8VZCBNMN","visual-review","Take screenshots of web pages and UI using Playwright for visual review and iteration","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fvisual-review\u002FSKILL.md",[146,149],{"categoryNo":147,"categoryName":148,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":150,"categoryName":151,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",[153,24,154,155,156,157,158,159,160,161,122,162,163,164,165],"review","visual review","pages","web","false","iteration","take","check","slides","ui","screenshot","playwright","screenshots",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":44},"01M6DF73AQVCBZKEN0YXEX9FXP","status","Diagnostic status report — shows metaswarm installation state, project setup, and potential issues","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstatus\u002FSKILL.md",[],[168,173,174,30,175,176,177,178],"setup","report","installation","project setup","issues","state",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":186,"publishedAt":44},"01M6DF6X6C2XB0P6GX76P7TTYV","start","Use when starting work on any task, when the user mentions metaswarm, or when the user wants to begin tracked development work","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fstart\u002FSKILL.md",[185],{"categoryNo":118,"categoryName":119,"taxonomyType":21,"taxonomyTypeDesc":22},[181,187,102,188,189,190,35,191,192,193,194],"start issue","issue","ready","work on issue","user","work","work on","development",{"skillNo":196,"name":173,"nameZh":6,"description":197,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":198,"categories":199,"keywords":200,"publishedAt":44},"01M6DF6QMJ9AJKFKHHKRT005PQ","Interactive project setup — detects your project, configures metaswarm, writes project-local files","https:\u002F\u002Fgithub.com\u002FPrekzursil\u002Fagent-skills-toolchain\u002Fblob\u002Fmain\u002Ftools\u002Feditor\u002Fmetaswarm\u002Fskills\u002Fsetup\u002FSKILL.md",[],[173,30,137,201,176,27],"files"]