1import"./DsnmJJEf.js";import{s as e,o as i,a as p,f as c,$ as d}from"./CfGmn4eF.js";import{h as o}from"./DYlz5kG2.js";const l={title:"My favourite Claude Code skills and MCPs",date:"2026-03-09",slug:"claude-code-skills",tags:["GenAI","AI coding"]},{title:y,date:w,slug:b,tags:k}=l;var u=c(`<p>I use Claude Code a lot for coding and research tasks. 2One of its strengths is that you can extend it with <strong>Skills</strong> and <strong>MCPs</strong> (Model Context Protocol servers).</p> <p>Skills are modular instructions that Claude loads on-demand when relevant. MCPs are small servers/programs that give Claude access to external tools and data. Both are installed via the CLI.</p> <p>I recommend scrolling through the curated list at <a href="https://claude.com/plugins#plugins" rel="nofollow">claude.com/plugins</a> to find what is useful for you.</p> <p><img src="/images/blog/claude_code_plugins_list.png" alt="The Claude Code plugins directory"/></p> <p>Below are my personal recommendations.</p> <h2><a href="https://claude.com/plugins/superpowers" rel="nofollow">Superpowers</a></h2> <p>This is a skill pack that adds structured workflows for brainstorming, debugging, TDD, and code review. It sounds fancy but the practical effect is simple: Claude follows more disciplined processes instead of jumping straight into coding.</p> <p>I find it especially useful for <strong>brainstorming</strong> before implementing a feature, and for the <strong>debugging</strong> workflow which forces Claude to actually investigate before proposing fixes.</p> <!> <p>Some of the <code>/commands</code> it adds:</p> <ul><li><code>/brainstorm</code> â explore requirements and design before writing code</li> <li><code>/debug</code> â systematic root cause analysis instead of guessing</li> <li><code>/tdd</code> â test-driven development workflow</li> <li><code>/review</code> â code review with confidence-based filtering</li> <li><code>/simplify</code> â review changed code for reuse and quality</li></ul> <p>Here is an example of the brainstorming workflow:</p> <p><img src="/images/blog/brainstorm_example.png" alt="Example of the Superpowers brainstorming workflow"/></p> <h2><a href="https://claude.com/plugins/context7" rel="nofollow">Context7</a></h2> <p>An MCP that pulls up-to-date library documentation directly into context. Instead of Claude hallucinating APIs from its training data, it fetches the current docs.</p> <p>Very useful when working with libraries that update frequently.</p> <!> <h2><a href="https://claude.com/plugins/explanatory-output-style" rel="nofollow">Explanatory Output Style</a></h2> <p>A lightweight skill that makes Claude add brief educational insights about your codebase as it works. It highlights implementation patterns and design choices specific to your project.</p> <p>Good for learning a new codebase or when onboarding collaborators.</p> <!> <p>Here is an example of the output style in a rather technical project of mine:</p> <p><img src="/images/blog/insights.png" alt="Example of the Explanatory Output Style in action"/></p> <h2>Where to find more</h2> <p>Browse the curated directory at <a href="https://claude.com/plugins#plugins" rel="nofollow">claude.com/plugins</a> for more skills and MCPs. A few other popular ones worth checking out: <strong>Frontend Design</strong>, <strong>Feature Dev</strong>, and the <strong>GitHub</strong> MCP.</p> <p>For background on how skills work (the three-level loading mechanism is quite elegant), see the <a href="https://platform.claude.com/docs/en/agents-and-tools/agent-skills/overview" rel="nofollow">official docs</a>.</p>`,1);function g(n){var t=u(),s=e(i(t),16);o(s,()=>'<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">claude</span><span style="color:#9ECBFF"> install-skill</span><span style="color:#9ECBFF"> https://claude.com/plugins/superpowers</span></span></code></pre>');var a=e(s,16);o(a,()=>'<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">claude</span><span style="color:#9ECBFF"> mcp</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> context7</span><span style="color:#79B8FF"> --</span><span style="color:#9ECBFF"> npx</span><span style="color:#79B8FF"> -y</span><span style="color:#9ECBFF"> @upstash/context7-mcp@latest</span></span></code></pre>');var r=e(a,8);o(r,()=>'<pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">claude</span><span style="color:#9ECBFF"> install-skill</span><span style="color:#9ECBFF"> https://claude.com/plugins/explanatory-output-style</span></span></code></pre>'),d(10),p(n,t)}const C=Object.freeze(Object.defineProperty({__proto__:null,default:g,metadata:l},Symbol.toStringTag,{value:"Module"}));
2export{C as _};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.