[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6EVFV3MX5ZAKCSHC7XV209R":3,"skill-same:01M6EVFV3MX5ZAKCSHC7XV209R":87},{"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":31,"publishedAt":52,"linkOnly":53,"markdownContent":54,"markdownBody":55,"frontMatter":56,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":63,"ownerHtmlUrl":64,"ownerBlogUrl":6,"ownerDescription":65,"updatedAt":66,"install":67,"resources":80},"01M6EVFV3MX5ZAKCSHC7XV209R","technical-blog-writing",null,"Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tutorial, technical content","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Ftechnical-blog-writing\u002FSKILL.md",[18,23,28],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":29,"categoryName":30,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000036","内容创作者",[32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51],"technical blog writing","blog","technical","writing","tutorial","types","tech","triggers","formatting","article","structure","patterns","use","blog post","coding","Bash","developer","dev","code","documentation","2026-11-10 10:12:30",false,"---\nname: technical-blog-writing\ndescription: \"Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tutorial, technical content\"\nallowed-tools: Bash(infsh *)\n---\n\n# Technical Blog Writing\n\nWrite developer-focused technical blog posts via [inference.sh](https:\u002F\u002Finference.sh) CLI.\n\n## Quick Start\n\n```bash\ncurl -fsSL https:\u002F\u002Fcli.inference.sh | sh && infsh login\n\n# Research topic depth\ninfsh app run exa\u002Fsearch --input '{\n  \"query\": \"building REST API Node.js best practices 2024 tutorial\"\n}'\n\n# Generate header image\ninfsh app run infsh\u002Fhtml-to-image --input '{\n  \"html\": \"\u003Cdiv style=\\\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\\\">\u003Cdiv>\u003Cp style=\\\"font-size:18px;color:#38bdf8;margin:0\\\">\u002F\u002F engineering blog\u003C\u002Fp>\u003Ch1 style=\\\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\\\">How We Reduced API Latency by 90% with Edge Caching\u003C\u002Fh1>\u003Cp style=\\\"font-size:20px;opacity:0.6;font-family:system-ui\\\">A deep dive into our CDN architecture\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\"\n}'\n```\n\n> **Install note:** The [install script](https:\u002F\u002Fcli.inference.sh) only detects your OS\u002Farchitecture, downloads the matching binary from `dist.inference.sh`, and verifies its SHA-256 checksum. No elevated permissions or background processes. [Manual install & verification](https:\u002F\u002Fdist.inference.sh\u002Fcli\u002Fchecksums.txt) available.\n\n## Post Types\n\n### 1. Tutorial \u002F How-To\n\nStep-by-step instruction. The reader should be able to follow along and build something.\n\n```\nStructure:\n1. What we're building (with screenshot\u002Fdemo)\n2. Prerequisites\n3. Step 1: Setup\n4. Step 2: Core implementation\n5. Step 3: ...\n6. Complete code (GitHub link)\n7. Next steps \u002F extensions\n```\n\n| Rule | Why |\n|------|-----|\n| Show the end result first | Reader knows if it's worth continuing |\n| List prerequisites explicitly | Don't waste time of wrong audience |\n| Every code block should be runnable | Copy-paste-run is the test |\n| Explain the \"why\" not just the \"how\" | Tutorials that explain reasoning get shared |\n| Include error handling | Real code has errors |\n| Link to complete code repo | Reference after tutorial |\n\n### 2. Deep Dive \u002F Explainer\n\nExplains a concept, technology, or architecture decision in depth.\n\n```\nStructure:\n1. What is [concept] and why should you care?\n2. How it works (simplified mental model)\n3. How it works (detailed mechanics)\n4. Real-world example\n5. Trade-offs and when NOT to use it\n6. Further reading\n```\n\n### 3. Postmortem \u002F Incident Report\n\nDescribes what went wrong, why, and what was fixed.\n\n```\nStructure:\n1. Summary (what happened, impact, duration)\n2. Timeline of events\n3. Root cause analysis\n4. Fix implemented\n5. What we're doing to prevent recurrence\n6. Lessons learned\n```\n\n### 4. Benchmark \u002F Comparison\n\nData-driven comparison of tools, approaches, or architectures.\n\n```\nStructure:\n1. What we compared and why\n2. Methodology (so results are reproducible)\n3. Results with charts\u002Ftables\n4. Analysis (what the numbers mean)\n5. Recommendation (with caveats)\n6. Raw data \u002F reproducibility instructions\n```\n\n### 5. Architecture \u002F System Design\n\nExplains how a system is built and why decisions were made.\n\n```\nStructure:\n1. Problem we needed to solve\n2. Constraints and requirements\n3. Options considered\n4. Architecture chosen (with diagram)\n5. Trade-offs we accepted\n6. Results and lessons\n```\n\n## Writing Rules for Developers\n\n### Voice and Tone\n\n| Do | Don't |\n|----|-------|\n| Be direct: \"Use connection pooling\" | \"You might want to consider using...\" |\n| Admit trade-offs: \"This adds complexity\" | Pretend your solution is perfect |\n| Use \"we\" for team decisions | \"I single-handedly architected...\" |\n| Specific numbers: \"reduced p99 from 800ms to 90ms\" | \"significantly improved performance\" |\n| Cite sources and benchmarks | Make unsourced claims |\n| Acknowledge alternatives | Pretend yours is the only way |\n\n### What Developers Hate\n\n```\n❌ \"In today's fast-paced world of technology...\" (filler)\n❌ \"As we all know...\" (if we all know, why are you writing it?)\n❌ \"Simply do X\" (nothing is simple if you're reading a tutorial)\n❌ \"It's easy to...\" (dismissive of reader's experience)\n❌ \"Obviously...\" (if it's obvious, don't write it)\n❌ Marketing language in technical content\n❌ Burying the lede under 3 paragraphs of context\n```\n\n### Code Examples\n\n| Rule | Why |\n|------|-----|\n| Every code block must be runnable | Broken examples destroy trust |\n| Show complete, working examples | Snippets without context are useless |\n| Include language identifier in fenced blocks | Syntax highlighting |\n| Show output\u002Fresult after code | Reader verifies understanding |\n| Use realistic variable names | `calculateTotalRevenue` not `foo` |\n| Include error handling in examples | Real code handles errors |\n| Pin dependency versions | \"Works with React 18.2\" not \"React\" |\n\n```\nGood code block format:\n\n```python\n# What this code does (one line)\ndef calculate_retry_delay(attempt: int, base_delay: float = 1.0) -> float:\n    \"\"\"Exponential backoff with jitter.\"\"\"\n    delay = base_delay * (2 ** attempt)\n    jitter = random.uniform(0, delay * 0.1)\n    return delay + jitter\n\n# Usage\ndelay = calculate_retry_delay(attempt=3)  # ~8.0-8.8 seconds\n```\n```\n\n### Explanation Depth\n\n| Audience Signal | Depth |\n|----------------|-------|\n| \"Getting started with X\" | Explain everything, assume no prior knowledge |\n| \"Advanced X patterns\" | Skip basics, go deep on nuances |\n| \"X vs Y\" | Assume familiarity with both, focus on differences |\n| \"How we built X\" | Technical audience, can skip fundamentals |\n\n**State your assumed audience level explicitly** at the start:\n\n```\n\"This post assumes familiarity with Docker and basic Kubernetes concepts.\nIf you're new to containers, start with [our intro post].\"\n```\n\n## Blog Post Structure\n\n### The Ideal Structure\n\n```markdown\n# Title (contains primary keyword, states outcome)\n\n[Hero image or diagram]\n\n**TL;DR:** [2-3 sentence summary with key takeaway]\n\n## The Problem \u002F Why This Matters\n[Set up why the reader should care — specific, not generic]\n\n## The Solution \u002F How We Did It\n[Core content — code, architecture, explanation]\n\n### Step 1: [First thing]\n[Explanation + code + output]\n\n### Step 2: [Second thing]\n[Explanation + code + output]\n\n## Results\n[Numbers, benchmarks, outcomes — be specific]\n\n## Trade-offs and Limitations\n[Honest about downsides — builds trust]\n\n## Conclusion\n[Key takeaway + what to do next]\n\n## Further Reading\n[3-5 relevant links]\n```\n\n### Word Count by Type\n\n| Type | Word Count | Why |\n|------|-----------|-----|\n| Quick tip | 500-800 | One concept, one example |\n| Tutorial | 1,500-3,000 | Step-by-step needs detail |\n| Deep dive | 2,000-4,000 | Thorough exploration |\n| Architecture post | 2,000-3,500 | Diagrams carry some load |\n| Benchmark | 1,500-2,500 | Data and charts do heavy lifting |\n\n## Diagrams and Visuals\n\n### When to Use Diagrams\n\n| Scenario | Diagram Type |\n|----------|-------------|\n| Request flow | Sequence diagram |\n| System architecture | Box-and-arrow diagram |\n| Decision logic | Flowchart |\n| Data model | ER diagram |\n| Performance comparison | Bar\u002Fline chart |\n| Before\u002Fafter | Side-by-side |\n\n```bash\n# Generate architecture diagram\ninfsh app run infsh\u002Fhtml-to-image --input '{\n  \"html\": \"\u003Cdiv style=\\\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\\\">\u003Cdiv style=\\\"display:flex;gap:40px;align-items:center\\\">\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Client\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">React App\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Edge\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">CDN Cache\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">API\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">Node.js\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Database\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">PostgreSQL\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\"\n}'\n\n# Generate benchmark chart\ninfsh app run infsh\u002Fpython-executor --input '{\n  \"code\": \"import matplotlib.pyplot as plt\\nimport matplotlib\\nmatplotlib.use(\\\"Agg\\\")\\n\\nfig, ax = plt.subplots(figsize=(12, 6))\\nfig.patch.set_facecolor(\\\"#0f172a\\\")\\nax.set_facecolor(\\\"#0f172a\\\")\\n\\ntools = [\\\"Express\\\", \\\"Fastify\\\", \\\"Hono\\\", \\\"Elysia\\\"]\\nrps = [15000, 45000, 62000, 78000]\\ncolors = [\\\"#64748b\\\", \\\"#64748b\\\", \\\"#3b82f6\\\", \\\"#64748b\\\"]\\n\\nax.barh(tools, rps, color=colors, height=0.5)\\nfor i, v in enumerate(rps):\\n    ax.text(v + 1000, i, f\\\"{v:,} req\u002Fs\\\", va=\\\"center\\\", color=\\\"white\\\", fontsize=14)\\n\\nax.set_xlabel(\\\"Requests per second\\\", color=\\\"white\\\", fontsize=14)\\nax.set_title(\\\"HTTP Framework Benchmark (Hello World)\\\", color=\\\"white\\\", fontsize=18, fontweight=\\\"bold\\\")\\nax.tick_params(colors=\\\"white\\\", labelsize=12)\\nax.spines[\\\"top\\\"].set_visible(False)\\nax.spines[\\\"right\\\"].set_visible(False)\\nax.spines[\\\"bottom\\\"].set_color(\\\"#334155\\\")\\nax.spines[\\\"left\\\"].set_color(\\\"#334155\\\")\\nplt.tight_layout()\\nplt.savefig(\\\"benchmark.png\\\", dpi=150, facecolor=\\\"#0f172a\\\")\\nprint(\\\"Saved\\\")\"\n}'\n```\n\n## Distribution\n\n### Where Developers Read\n\n| Platform | Format | How to Post |\n|----------|--------|-------------|\n| Your blog | Full article | Primary — own your content |\n| Dev.to | Cross-post (canonical URL back to yours) | Markdown import |\n| Hashnode | Cross-post (canonical URL) | Markdown import |\n| Hacker News | Link submission | Show HN for projects, tell HN for stories |\n| Reddit (r\u002Fprogramming, r\u002Fwebdev, etc.) | Link or discussion | Follow subreddit rules |\n| Twitter\u002FX | Thread summary + link | See twitter-thread-creation skill |\n| LinkedIn | Adapted version + link | See linkedin-content skill |\n\n```bash\n# Cross-post thread to X\ninfsh app run x\u002Fpost-create --input '{\n  \"text\": \"New blog post: How We Reduced API Latency by 90%\\n\\nThe short version:\\n→ Moved computation to edge\\n→ Aggressive cache-control headers\\n→ Eliminated N+1 queries\\n\\np99 went from 800ms to 90ms.\\n\\nFull deep dive with code: [link]\"\n}'\n```\n\n## Common Mistakes\n\n| Mistake | Problem | Fix |\n|---------|---------|-----|\n| No TL;DR | Busy devs leave before getting the point | 2-3 sentence summary at the top |\n| Broken code examples | Destroys all credibility | Test every code block before publishing |\n| No version pinning | Code breaks in 6 months | \"Works with Node 20, React 18.2\" |\n| \"Simply do X\" | Dismissive, condescending | Remove \"simply\", \"just\", \"easily\" |\n| No diagrams for architecture | Walls of text describing systems | One diagram > 500 words of description |\n| Marketing tone | Developers instantly disengage | Direct, technical, honest |\n| No trade-offs section | Reads as biased marketing | Always discuss downsides |\n| Giant introduction before content | Readers bounce | Get to the point in 2-3 paragraphs |\n| Unpinned dependencies | Tutorial breaks for future readers | Pin versions, note date written |\n| No \"Further Reading\" | Dead end, no context | 3-5 links to deepen understanding |\n\n## Related Skills\n\n```bash\nnpx skills add inference-sh\u002Fskills@seo-content-brief\nnpx skills add inference-sh\u002Fskills@content-repurposing\nnpx skills add inference-sh\u002Fskills@og-image-design\n```\n\nBrowse all apps: `infsh app list`\n","# Technical Blog Writing\n\nWrite developer-focused technical blog posts via [inference.sh](https:\u002F\u002Finference.sh) CLI.\n\n## Quick Start\n\n```bash\ncurl -fsSL https:\u002F\u002Fcli.inference.sh | sh && infsh login\n\n# Research topic depth\ninfsh app run exa\u002Fsearch --input '{\n  \"query\": \"building REST API Node.js best practices 2024 tutorial\"\n}'\n\n# Generate header image\ninfsh app run infsh\u002Fhtml-to-image --input '{\n  \"html\": \"\u003Cdiv style=\\\"width:1200px;height:630px;background:linear-gradient(135deg,#0f172a,#1e293b);display:flex;align-items:center;padding:60px;font-family:ui-monospace,monospace;color:white\\\">\u003Cdiv>\u003Cp style=\\\"font-size:18px;color:#38bdf8;margin:0\\\">\u002F\u002F engineering blog\u003C\u002Fp>\u003Ch1 style=\\\"font-size:48px;margin:16px 0;font-weight:800;font-family:system-ui;line-height:1.2\\\">How We Reduced API Latency by 90% with Edge Caching\u003C\u002Fh1>\u003Cp style=\\\"font-size:20px;opacity:0.6;font-family:system-ui\\\">A deep dive into our CDN architecture\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\"\n}'\n```\n\n> **Install note:** The [install script](https:\u002F\u002Fcli.inference.sh) only detects your OS\u002Farchitecture, downloads the matching binary from `dist.inference.sh`, and verifies its SHA-256 checksum. No elevated permissions or background processes. [Manual install & verification](https:\u002F\u002Fdist.inference.sh\u002Fcli\u002Fchecksums.txt) available.\n\n## Post Types\n\n### 1. Tutorial \u002F How-To\n\nStep-by-step instruction. The reader should be able to follow along and build something.\n\n```\nStructure:\n1. What we're building (with screenshot\u002Fdemo)\n2. Prerequisites\n3. Step 1: Setup\n4. Step 2: Core implementation\n5. Step 3: ...\n6. Complete code (GitHub link)\n7. Next steps \u002F extensions\n```\n\n| Rule | Why |\n|------|-----|\n| Show the end result first | Reader knows if it's worth continuing |\n| List prerequisites explicitly | Don't waste time of wrong audience |\n| Every code block should be runnable | Copy-paste-run is the test |\n| Explain the \"why\" not just the \"how\" | Tutorials that explain reasoning get shared |\n| Include error handling | Real code has errors |\n| Link to complete code repo | Reference after tutorial |\n\n### 2. Deep Dive \u002F Explainer\n\nExplains a concept, technology, or architecture decision in depth.\n\n```\nStructure:\n1. What is [concept] and why should you care?\n2. How it works (simplified mental model)\n3. How it works (detailed mechanics)\n4. Real-world example\n5. Trade-offs and when NOT to use it\n6. Further reading\n```\n\n### 3. Postmortem \u002F Incident Report\n\nDescribes what went wrong, why, and what was fixed.\n\n```\nStructure:\n1. Summary (what happened, impact, duration)\n2. Timeline of events\n3. Root cause analysis\n4. Fix implemented\n5. What we're doing to prevent recurrence\n6. Lessons learned\n```\n\n### 4. Benchmark \u002F Comparison\n\nData-driven comparison of tools, approaches, or architectures.\n\n```\nStructure:\n1. What we compared and why\n2. Methodology (so results are reproducible)\n3. Results with charts\u002Ftables\n4. Analysis (what the numbers mean)\n5. Recommendation (with caveats)\n6. Raw data \u002F reproducibility instructions\n```\n\n### 5. Architecture \u002F System Design\n\nExplains how a system is built and why decisions were made.\n\n```\nStructure:\n1. Problem we needed to solve\n2. Constraints and requirements\n3. Options considered\n4. Architecture chosen (with diagram)\n5. Trade-offs we accepted\n6. Results and lessons\n```\n\n## Writing Rules for Developers\n\n### Voice and Tone\n\n| Do | Don't |\n|----|-------|\n| Be direct: \"Use connection pooling\" | \"You might want to consider using...\" |\n| Admit trade-offs: \"This adds complexity\" | Pretend your solution is perfect |\n| Use \"we\" for team decisions | \"I single-handedly architected...\" |\n| Specific numbers: \"reduced p99 from 800ms to 90ms\" | \"significantly improved performance\" |\n| Cite sources and benchmarks | Make unsourced claims |\n| Acknowledge alternatives | Pretend yours is the only way |\n\n### What Developers Hate\n\n```\n❌ \"In today's fast-paced world of technology...\" (filler)\n❌ \"As we all know...\" (if we all know, why are you writing it?)\n❌ \"Simply do X\" (nothing is simple if you're reading a tutorial)\n❌ \"It's easy to...\" (dismissive of reader's experience)\n❌ \"Obviously...\" (if it's obvious, don't write it)\n❌ Marketing language in technical content\n❌ Burying the lede under 3 paragraphs of context\n```\n\n### Code Examples\n\n| Rule | Why |\n|------|-----|\n| Every code block must be runnable | Broken examples destroy trust |\n| Show complete, working examples | Snippets without context are useless |\n| Include language identifier in fenced blocks | Syntax highlighting |\n| Show output\u002Fresult after code | Reader verifies understanding |\n| Use realistic variable names | `calculateTotalRevenue` not `foo` |\n| Include error handling in examples | Real code handles errors |\n| Pin dependency versions | \"Works with React 18.2\" not \"React\" |\n\n```\nGood code block format:\n\n```python\n# What this code does (one line)\ndef calculate_retry_delay(attempt: int, base_delay: float = 1.0) -> float:\n    \"\"\"Exponential backoff with jitter.\"\"\"\n    delay = base_delay * (2 ** attempt)\n    jitter = random.uniform(0, delay * 0.1)\n    return delay + jitter\n\n# Usage\ndelay = calculate_retry_delay(attempt=3)  # ~8.0-8.8 seconds\n```\n```\n\n### Explanation Depth\n\n| Audience Signal | Depth |\n|----------------|-------|\n| \"Getting started with X\" | Explain everything, assume no prior knowledge |\n| \"Advanced X patterns\" | Skip basics, go deep on nuances |\n| \"X vs Y\" | Assume familiarity with both, focus on differences |\n| \"How we built X\" | Technical audience, can skip fundamentals |\n\n**State your assumed audience level explicitly** at the start:\n\n```\n\"This post assumes familiarity with Docker and basic Kubernetes concepts.\nIf you're new to containers, start with [our intro post].\"\n```\n\n## Blog Post Structure\n\n### The Ideal Structure\n\n```markdown\n# Title (contains primary keyword, states outcome)\n\n[Hero image or diagram]\n\n**TL;DR:** [2-3 sentence summary with key takeaway]\n\n## The Problem \u002F Why This Matters\n[Set up why the reader should care — specific, not generic]\n\n## The Solution \u002F How We Did It\n[Core content — code, architecture, explanation]\n\n### Step 1: [First thing]\n[Explanation + code + output]\n\n### Step 2: [Second thing]\n[Explanation + code + output]\n\n## Results\n[Numbers, benchmarks, outcomes — be specific]\n\n## Trade-offs and Limitations\n[Honest about downsides — builds trust]\n\n## Conclusion\n[Key takeaway + what to do next]\n\n## Further Reading\n[3-5 relevant links]\n```\n\n### Word Count by Type\n\n| Type | Word Count | Why |\n|------|-----------|-----|\n| Quick tip | 500-800 | One concept, one example |\n| Tutorial | 1,500-3,000 | Step-by-step needs detail |\n| Deep dive | 2,000-4,000 | Thorough exploration |\n| Architecture post | 2,000-3,500 | Diagrams carry some load |\n| Benchmark | 1,500-2,500 | Data and charts do heavy lifting |\n\n## Diagrams and Visuals\n\n### When to Use Diagrams\n\n| Scenario | Diagram Type |\n|----------|-------------|\n| Request flow | Sequence diagram |\n| System architecture | Box-and-arrow diagram |\n| Decision logic | Flowchart |\n| Data model | ER diagram |\n| Performance comparison | Bar\u002Fline chart |\n| Before\u002Fafter | Side-by-side |\n\n```bash\n# Generate architecture diagram\ninfsh app run infsh\u002Fhtml-to-image --input '{\n  \"html\": \"\u003Cdiv style=\\\"width:1200px;height:600px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:40px;font-family:system-ui;color:white\\\">\u003Cdiv style=\\\"display:flex;gap:40px;align-items:center\\\">\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Client\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">React App\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #3b82f6;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Edge\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">CDN Cache\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">API\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">Node.js\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv style=\\\"color:#64748b;font-size:32px\\\">→\u003C\u002Fdiv>\u003Cdiv style=\\\"background:#1e293b;border:2px solid #334155;border-radius:8px;padding:24px;text-align:center;width:160px\\\">\u003Cp style=\\\"font-size:14px;color:#94a3b8;margin:0\\\">Database\u003C\u002Fp>\u003Cp style=\\\"font-size:18px;font-weight:bold;margin:8px 0 0\\\">PostgreSQL\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\u003C\u002Fdiv>\"\n}'\n\n# Generate benchmark chart\ninfsh app run infsh\u002Fpython-executor --input '{\n  \"code\": \"import matplotlib.pyplot as plt\\nimport matplotlib\\nmatplotlib.use(\\\"Agg\\\")\\n\\nfig, ax = plt.subplots(figsize=(12, 6))\\nfig.patch.set_facecolor(\\\"#0f172a\\\")\\nax.set_facecolor(\\\"#0f172a\\\")\\n\\ntools = [\\\"Express\\\", \\\"Fastify\\\", \\\"Hono\\\", \\\"Elysia\\\"]\\nrps = [15000, 45000, 62000, 78000]\\ncolors = [\\\"#64748b\\\", \\\"#64748b\\\", \\\"#3b82f6\\\", \\\"#64748b\\\"]\\n\\nax.barh(tools, rps, color=colors, height=0.5)\\nfor i, v in enumerate(rps):\\n    ax.text(v + 1000, i, f\\\"{v:,} req\u002Fs\\\", va=\\\"center\\\", color=\\\"white\\\", fontsize=14)\\n\\nax.set_xlabel(\\\"Requests per second\\\", color=\\\"white\\\", fontsize=14)\\nax.set_title(\\\"HTTP Framework Benchmark (Hello World)\\\", color=\\\"white\\\", fontsize=18, fontweight=\\\"bold\\\")\\nax.tick_params(colors=\\\"white\\\", labelsize=12)\\nax.spines[\\\"top\\\"].set_visible(False)\\nax.spines[\\\"right\\\"].set_visible(False)\\nax.spines[\\\"bottom\\\"].set_color(\\\"#334155\\\")\\nax.spines[\\\"left\\\"].set_color(\\\"#334155\\\")\\nplt.tight_layout()\\nplt.savefig(\\\"benchmark.png\\\", dpi=150, facecolor=\\\"#0f172a\\\")\\nprint(\\\"Saved\\\")\"\n}'\n```\n\n## Distribution\n\n### Where Developers Read\n\n| Platform | Format | How to Post |\n|----------|--------|-------------|\n| Your blog | Full article | Primary — own your content |\n| Dev.to | Cross-post (canonical URL back to yours) | Markdown import |\n| Hashnode | Cross-post (canonical URL) | Markdown import |\n| Hacker News | Link submission | Show HN for projects, tell HN for stories |\n| Reddit (r\u002Fprogramming, r\u002Fwebdev, etc.) | Link or discussion | Follow subreddit rules |\n| Twitter\u002FX | Thread summary + link | See twitter-thread-creation skill |\n| LinkedIn | Adapted version + link | See linkedin-content skill |\n\n```bash\n# Cross-post thread to X\ninfsh app run x\u002Fpost-create --input '{\n  \"text\": \"New blog post: How We Reduced API Latency by 90%\\n\\nThe short version:\\n→ Moved computation to edge\\n→ Aggressive cache-control headers\\n→ Eliminated N+1 queries\\n\\np99 went from 800ms to 90ms.\\n\\nFull deep dive with code: [link]\"\n}'\n```\n\n## Common Mistakes\n\n| Mistake | Problem | Fix |\n|---------|---------|-----|\n| No TL;DR | Busy devs leave before getting the point | 2-3 sentence summary at the top |\n| Broken code examples | Destroys all credibility | Test every code block before publishing |\n| No version pinning | Code breaks in 6 months | \"Works with Node 20, React 18.2\" |\n| \"Simply do X\" | Dismissive, condescending | Remove \"simply\", \"just\", \"easily\" |\n| No diagrams for architecture | Walls of text describing systems | One diagram > 500 words of description |\n| Marketing tone | Developers instantly disengage | Direct, technical, honest |\n| No trade-offs section | Reads as biased marketing | Always discuss downsides |\n| Giant introduction before content | Readers bounce | Get to the point in 2-3 paragraphs |\n| Unpinned dependencies | Tutorial breaks for future readers | Pin versions, note date written |\n| No \"Further Reading\" | Dead end, no context | 3-5 links to deepen understanding |\n\n## Related Skills\n\n```bash\nnpx skills add inference-sh\u002Fskills@seo-content-brief\nnpx skills add inference-sh\u002Fskills@content-repurposing\nnpx skills add inference-sh\u002Fskills@og-image-design\n```\n\nBrowse all apps: `infsh app list`\n",{"name":5,"description":7,"allowed-tools":57},"Bash(infsh *)","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Ftechnical-blog-writing",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":8,"skillName":5,"commands":68,"prompt":78,"zipAvailable":79},[69,72,75],{"tool":70,"command":71},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill technical-blog-writing",{"tool":73,"command":74},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill technical-blog-writing",{"tool":76,"command":77},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill technical-blog-writing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Ftechnical-blog-writing\u002FSKILL.md",true,[81],{"path":82,"resourceType":83,"resourceTypeDesc":84,"sizeBytes":85,"sourceHtmlUrl":86},"skill-report.json","REFERENCE","参考文档",13535,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Finference-sh-9\u002Ftechnical-blog-writing\u002Fskill-report.json",[88,100,110,119,125,132],{"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":96,"publishedAt":52},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[93],{"categoryNo":94,"categoryName":95,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[97,98,99],"model","model hierarchy","model hierarchy skill",{"skillNo":101,"name":102,"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":103,"categories":104,"keywords":106,"publishedAt":52},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[105],{"categoryNo":94,"categoryName":95,"taxonomyType":21,"taxonomyTypeDesc":22},[107,108,109],"MCP","zoom","zoom mcp",{"skillNo":111,"name":112,"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":113,"categories":114,"keywords":115,"publishedAt":52},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[116,117,118,108],"sdk","zoom apps sdk","apps",{"skillNo":120,"name":121,"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":122,"categories":123,"keywords":124,"publishedAt":52},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[121],{"skillNo":126,"name":127,"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":128,"categories":129,"keywords":131,"publishedAt":52},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[130],{"categoryNo":94,"categoryName":95,"taxonomyType":21,"taxonomyTypeDesc":22},[127],{"skillNo":133,"name":134,"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":135,"categories":136,"keywords":137,"publishedAt":52},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[134]]