[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EETG6YV6THAMD4YN3TMBY0":3,"skill-same:01M6EETG6YV6THAMD4YN3TMBY0":76},{"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},"01M6EETG6YV6THAMD4YN3TMBY0","dev-slides",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\u002FTerminalSkills\u002Fskills\u002Fdev-slides\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000003","演示文稿","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计",[26,27,28],"dev","slides","dev slides","2026-11-10 10:12:30",false,"# Dev Slides\n\n## Overview\n\nCreate developer-friendly presentations using Slidev, a markdown-based slide framework powered by Vue. Supports live code execution, syntax highlighting, Mermaid diagrams, LaTeX math, and speaker notes. Ideal for tech talks, team demos, and conference presentations.\n\n## Instructions\n\nWhen a user asks you to create a presentation or slide deck, follow this process:\n\n### Step 1: Set up the Slidev project\n\nCheck if Slidev is available, and scaffold a project if needed:\n\n```bash\n# Check if slidev is installed\nnpx slidev --version 2>\u002Fdev\u002Fnull || echo \"Will use npx to run slidev\"\n\n# Create a new slidev project directory\nmkdir -p slides-project && cd slides-project\n\n# Initialize with a slides.md file\ntouch slides.md\n```\n\n### Step 2: Gather the presentation requirements\n\nBefore writing slides, determine:\n- **Topic:** What is the presentation about?\n- **Audience:** Developers, managers, mixed?\n- **Length:** How many slides? (Typical: 10-20 for a talk)\n- **Style:** Technical deep-dive, overview, tutorial, demo?\n- **Code focus:** Which languages and frameworks?\n\n### Step 3: Write the slides in Markdown\n\nSlidev uses Markdown with YAML frontmatter and `---` separators between slides.\n\n**Basic structure:**\n\n```markdown\n---\ntheme: default\ntitle: \"Your Presentation Title\"\ninfo: |\n  Presentation description\nclass: text-center\ndrawings:\n  persist: false\ntransition: slide-left\n---\n\n# Your Presentation Title\n\nSubtitle or tagline\n\n---\n\n## Slide Title\n\n- Bullet point one\n- Bullet point two\n- Bullet point three\n\n---\n```\n\n**Code blocks with syntax highlighting:**\n\n```markdown\n---\n\n## API Example\n\n\\`\\`\\`typescript {2-4|6-8} {lines:true}\nasync function fetchUsers() {\n  const response = await fetch('\u002Fapi\u002Fusers');\n  const data = await response.json();\n  return data;\n\n  \u002F\u002F With error handling\n  if (!response.ok) {\n    throw new Error(`HTTP ${response.status}`);\n  }\n}\n\\`\\`\\`\n\n---\n```\n\nThe `{2-4|6-8}` syntax enables click-through line highlighting.\n\n**Mermaid diagrams:**\n\n```markdown\n---\n\n## Architecture\n\n\\`\\`\\`mermaid\ngraph LR\n  A[Client] --> B[API Gateway]\n  B --> C[Auth Service]\n  B --> D[Data Service]\n  D --> E[(Database)]\n\\`\\`\\`\n\n---\n```\n\n**Two-column layouts:**\n\n```markdown\n---\n\n## Comparison\n\n::left::\n\n### Before\n- Manual deploys\n- No tests\n- 2-hour releases\n\n::right::\n\n### After\n- CI\u002FCD pipeline\n- 95% coverage\n- 5-minute releases\n\n---\n```\n\n**Speaker notes:**\n\n```markdown\n---\n\n## Key Metrics\n\n- 99.9% uptime\n- 50ms p99 latency\n\n\u003C!--\nSpeaker notes go here.\nMention that we achieved this after the migration in Q3.\n-->\n\n---\n```\n\n### Step 4: Add theme and configuration\n\nConfigure the frontmatter for styling:\n\n```yaml\n---\ntheme: seriph          # or: default, apple-basic, dracula, etc.\nbackground: \u002Fcover.jpg # optional cover image\nclass: text-center\nhighlighter: shiki\nlineNumbers: true\ndrawings:\n  persist: false\ntransition: slide-left\ncss: unocss\n---\n```\n\n### Step 5: Preview and export\n\n```bash\n# Start the dev server with live preview\nnpx slidev slides.md --open\n\n# Export to PDF\nnpx slidev export slides.md --output presentation.pdf\n\n# Export to PNG images\nnpx slidev export slides.md --format png --output slides-images\u002F\n\n# Build as static SPA\nnpx slidev build slides.md\n```\n\n## Examples\n\n### Example 1: Create a tech talk on API design\n\n**User request:** \"Create slides for a talk on REST API best practices\"\n\n**Output:** Write `slides.md` with approximately 12-15 slides covering:\n1. Title slide with talk info\n2. Agenda \u002F outline\n3. What makes a good API (principles)\n4. Resource naming conventions with examples\n5. HTTP methods and status codes (code table)\n6. Request\u002Fresponse design with code blocks\n7. Pagination patterns with code\n8. Error handling with JSON examples\n9. Versioning strategies\n10. Authentication overview (diagram)\n11. Rate limiting\n12. Documentation tools\n13. Summary and key takeaways\n\nEach slide uses appropriate Slidev features: code blocks for examples, Mermaid for architecture diagrams, two-column layouts for comparisons.\n\n### Example 2: Create an internal team demo\n\n**User request:** \"Make slides for demoing our new auth system to the team\"\n\n**Output:** Write `slides.md` with 8-10 slides:\n1. Title: \"New Auth System Demo\"\n2. Problem statement (what was wrong with the old system)\n3. Architecture diagram (Mermaid flowchart)\n4. Code walkthrough: login flow with highlighted steps\n5. Code walkthrough: token refresh mechanism\n6. Before\u002Fafter metrics comparison (two-column layout)\n7. Migration plan timeline\n8. Q&A slide\n\n### Example 3: Generate slides from an outline\n\n**User request:** \"Turn this outline into slides: Intro to Docker - what it is, images vs containers, Dockerfile basics, docker-compose, best practices\"\n\n**Output:** Convert each outline item into 2-3 slides with:\n- Explanatory text and bullet points\n- Relevant code blocks (Dockerfile syntax, docker-compose.yml)\n- A Mermaid diagram showing the image-to-container lifecycle\n- A best practices checklist slide\n\n## Guidelines\n\n- Keep each slide focused on one idea. If a slide has more than 5 bullet points, split it.\n- Use code blocks liberally for developer audiences. Highlight key lines with the `{lines}` syntax.\n- Add Mermaid diagrams for architecture, flows, and relationships instead of describing them in text.\n- Use speaker notes for context you want to say but not display.\n- Prefer the `seriph` or `default` theme for professional presentations.\n- For live demos, use Slidev's Monaco editor integration for editable code blocks.\n- Always structure slides with a clear narrative: problem, solution, details, summary.\n- Export to PDF before sharing to ensure consistent rendering.\n- Keep total slide count reasonable: 1-2 minutes per slide is typical pacing.\n",{},"main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002FTerminalSkills\u002Fskills\u002Fdev-slides",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 dev-slides",{"tool":48,"command":49},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill dev-slides",{"tool":51,"command":52},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill dev-slides","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002FTerminalSkills\u002Fskills\u002Fdev-slides\u002FSKILL.md",true,[56,62,66,70],{"path":57,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":60,"sourceHtmlUrl":61},"references\u002Fcolors.md","REFERENCE","参考文档",1777,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes_sovereign_data\u002Fskills\u002Fcreative\u002Fexcalidraw\u002Freferences\u002Fcolors.md",{"path":63,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":64,"sourceHtmlUrl":65},"references\u002Fdark-mode.md",2282,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes_sovereign_data\u002Fskills\u002Fcreative\u002Fexcalidraw\u002Freferences\u002Fdark-mode.md",{"path":67,"resourceType":58,"resourceTypeDesc":59,"sizeBytes":68,"sourceHtmlUrl":69},"references\u002Fexamples.md",14226,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes_sovereign_data\u002Fskills\u002Fcreative\u002Fexcalidraw\u002Freferences\u002Fexamples.md",{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"scripts\u002Fupload.py","SCRIPT","脚本",3817,"https:\u002F\u002Fgithub.com\u002Fgjbvsjjvgm-sketch\u002FWORM_V2_SOVEREIGN\u002Fblob\u002Fmain\u002Fcore\u002Fhermes_sovereign_data\u002Fskills\u002Fcreative\u002Fexcalidraw\u002Fscripts\u002Fupload.py",[77,89,99,108,114,121],{"skillNo":78,"name":79,"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":80,"categories":81,"keywords":85,"publishedAt":29},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[86,87,88],"model","model hierarchy","model hierarchy skill",{"skillNo":90,"name":91,"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":92,"categories":93,"keywords":95,"publishedAt":29},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[94],{"categoryNo":83,"categoryName":84,"taxonomyType":20,"taxonomyTypeDesc":21},[96,97,98],"MCP","zoom","zoom mcp",{"skillNo":100,"name":101,"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":102,"categories":103,"keywords":104,"publishedAt":29},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[105,106,107,97],"sdk","zoom apps sdk","apps",{"skillNo":109,"name":110,"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":111,"categories":112,"keywords":113,"publishedAt":29},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[110],{"skillNo":115,"name":116,"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":117,"categories":118,"keywords":120,"publishedAt":29},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[119],{"categoryNo":83,"categoryName":84,"taxonomyType":20,"taxonomyTypeDesc":21},[116],{"skillNo":122,"name":123,"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":124,"categories":125,"keywords":126,"publishedAt":29},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[123]]