Rewrite all docs copy in Pragmatic Technical Writing style
Applied Hunt/Thomas and Joel Spolsky writing principles: - Concrete before abstract (stories and examples first) - Physical analogies for technical concepts - Conversational voice with "you" and contractions - Removed passive voice and weasel words - Added memorable metaphors and hooks Pages updated: - index.html: New hero, philosophy section with N+1 query story - agents.html: Each agent described with concrete scenarios - commands.html: Action-oriented descriptions - getting-started.html: Direct, conversational guide - skills.html: Clear "when to use this" for each skill - mcp-servers.html: Concrete examples of what each tool does 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Kieran Klaassen
@@ -73,9 +73,7 @@
|
||||
<article class="docs-article">
|
||||
<h1><i class="fa-solid fa-server color-accent"></i> MCP Servers Reference</h1>
|
||||
<p class="lead">
|
||||
Model Context Protocol (MCP) servers extend Claude Code's capabilities with
|
||||
browser automation and framework documentation lookup. The plugin bundles
|
||||
two MCP servers that start automatically when enabled.
|
||||
Think of MCP servers as power tools that plug into Claude Code. Want Claude to actually <em>open a browser</em> and click around your app? That's Playwright. Need the latest Rails docs without leaving your terminal? That's Context7. The plugin bundles both servers—they just work when you install.
|
||||
</p>
|
||||
|
||||
<div class="callout callout-warning">
|
||||
@@ -83,8 +81,7 @@
|
||||
<div class="callout-content">
|
||||
<h4>Known Issue: Auto-Loading</h4>
|
||||
<p>
|
||||
MCP servers may not load automatically when the plugin is installed.
|
||||
See <a href="#manual-config">Manual Configuration</a> for the workaround.
|
||||
Sometimes MCP servers don't wake up automatically. If Claude can't take screenshots or look up docs, you'll need to add them manually. See <a href="#manual-config">Manual Configuration</a> for the fix.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,8 +90,7 @@
|
||||
<section id="playwright">
|
||||
<h2><i class="fa-brands fa-chrome"></i> Playwright</h2>
|
||||
<p>
|
||||
Browser automation via <code>@playwright/mcp</code>. Enables taking screenshots,
|
||||
clicking elements, filling forms, and executing JavaScript in a real browser.
|
||||
You know how you can tell a junior developer "open Chrome and click the login button"? Now you can tell Claude the same thing. Playwright gives Claude hands to control a real browser—clicking buttons, filling forms, taking screenshots, running JavaScript. It's like pair programming with someone who has a browser open next to you.
|
||||
</p>
|
||||
|
||||
<h3>Tools Provided</h3>
|
||||
@@ -108,49 +104,53 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>browser_navigate</code></td>
|
||||
<td>Navigate to a URL in the browser</td>
|
||||
<td>Go to any URL—your localhost dev server, production, staging, that competitor's site you're studying</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>browser_take_screenshot</code></td>
|
||||
<td>Capture a screenshot of the current page or element</td>
|
||||
<td>Capture what you're seeing right now. Perfect for "does this look right?" design reviews</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>browser_click</code></td>
|
||||
<td>Click on an element using CSS selector or text</td>
|
||||
<td>Click buttons, links, whatever. Claude finds it by text or CSS selector, just like you would</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>browser_fill_form</code></td>
|
||||
<td>Fill form fields with values</td>
|
||||
<td>Type into forms faster than you can. Great for testing signup flows without manual clicking</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>browser_snapshot</code></td>
|
||||
<td>Get an accessibility tree snapshot of the page</td>
|
||||
<td>Get the page's accessibility tree—how screen readers see it. Useful for understanding structure without HTML noise</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>browser_evaluate</code></td>
|
||||
<td>Execute JavaScript code in the browser context</td>
|
||||
<td>Run any JavaScript in the page. Check localStorage, trigger functions, read variables—full console access</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Use Cases</h3>
|
||||
<h3>When You'll Use This</h3>
|
||||
<ul>
|
||||
<li><strong>Design Iteration</strong> - Take screenshots for UI comparison</li>
|
||||
<li><strong>Testing</strong> - Automate browser interactions</li>
|
||||
<li><strong>Debugging</strong> - Inspect page state and DOM</li>
|
||||
<li><strong>Data Extraction</strong> - Scrape content from web pages</li>
|
||||
<li><strong>Design reviews without leaving the terminal</strong> - "Take a screenshot of the new navbar on mobile" gets you a PNG in seconds</li>
|
||||
<li><strong>Testing signup flows while you code</strong> - "Fill in the registration form with test@example.com and click submit" runs the test for you</li>
|
||||
<li><strong>Debugging production issues</strong> - "Navigate to the error page and show me what's in localStorage" gives you the state without opening DevTools</li>
|
||||
<li><strong>Competitive research</strong> - "Go to competitor.com and screenshot their pricing page" builds your swipe file automatically</li>
|
||||
</ul>
|
||||
|
||||
<h3>Example Usage</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># The tools are available when the MCP server is running
|
||||
# Claude Code will use them automatically when appropriate
|
||||
<pre><code># Just talk to Claude naturally—it knows when to use Playwright
|
||||
|
||||
# Example: Taking a screenshot for design review
|
||||
# Design review
|
||||
"Take a screenshot of the login page"
|
||||
|
||||
# Example: Testing a form
|
||||
"Navigate to /signup and fill in the email field with test@example.com"</code></pre>
|
||||
# Testing a form
|
||||
"Navigate to /signup and fill in the email field with test@example.com"
|
||||
|
||||
# Debug JavaScript state
|
||||
"Go to localhost:3000 and run console.log(window.currentUser)"
|
||||
|
||||
# The browser runs in the background. You'll get results without switching windows.</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Configuration</h3>
|
||||
@@ -170,8 +170,7 @@
|
||||
<section id="context7">
|
||||
<h2><i class="fa-solid fa-book-open"></i> Context7</h2>
|
||||
<p>
|
||||
Framework documentation lookup via Context7 MCP. Provides access to
|
||||
documentation for more than 100 frameworks and libraries.
|
||||
Ever ask Claude about a framework and get an answer from 2023? Context7 fixes that. It's a documentation service that keeps Claude current with 100+ frameworks—Rails, React, Next.js, Django, whatever you're using. Think of it as having the official docs piped directly into Claude's brain.
|
||||
</p>
|
||||
|
||||
<h3>Tools Provided</h3>
|
||||
@@ -185,17 +184,17 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>resolve-library-id</code></td>
|
||||
<td>Find the library ID for a framework or package</td>
|
||||
<td>Maps "Rails" to the actual library identifier Context7 uses. You don't call this—Claude does it automatically</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>get-library-docs</code></td>
|
||||
<td>Get documentation for a specific library</td>
|
||||
<td>Fetches the actual documentation pages. Ask "How does useEffect work?" and this grabs the latest React docs</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Supported Frameworks</h3>
|
||||
<p>Context7 supports more than 100 frameworks including:</p>
|
||||
<h3>What's Covered</h3>
|
||||
<p>Over 100 frameworks and libraries. Here's a taste of what you can look up:</p>
|
||||
<div class="framework-grid">
|
||||
<div class="framework-category">
|
||||
<h4>Backend</h4>
|
||||
@@ -243,12 +242,15 @@
|
||||
|
||||
<h3>Example Usage</h3>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Claude Code will use Context7 automatically for documentation lookups
|
||||
<pre><code># Just ask about the framework—Claude fetches current docs automatically
|
||||
|
||||
"Look up the Rails ActionCable documentation"
|
||||
|
||||
"How does the useEffect hook work in React?"
|
||||
|
||||
"What are the best practices for PostgreSQL indexes?"</code></pre>
|
||||
"What are the best practices for PostgreSQL indexes?"
|
||||
|
||||
# You get answers based on the latest docs, not Claude's training cutoff</code></pre>
|
||||
</div>
|
||||
|
||||
<h3>Configuration</h3>
|
||||
@@ -266,12 +268,11 @@
|
||||
<section id="manual-config">
|
||||
<h2><i class="fa-solid fa-gear"></i> Manual Configuration</h2>
|
||||
<p>
|
||||
If MCP servers don't auto-load with the plugin, add them manually to your
|
||||
<code>.claude/settings.json</code> file.
|
||||
If the servers don't load automatically (you'll know because Claude can't take screenshots or fetch docs), you need to wire them up yourself. It's a two-minute copy-paste job.
|
||||
</p>
|
||||
|
||||
<h3>Project-Level Configuration</h3>
|
||||
<p>Add to <code>.claude/settings.json</code> in your project:</p>
|
||||
<p>To enable for just this project, add this to <code>.claude/settings.json</code> in your project root:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code>{
|
||||
"mcpServers": {
|
||||
@@ -290,7 +291,7 @@
|
||||
</div>
|
||||
|
||||
<h3>Global Configuration</h3>
|
||||
<p>Add to <code>~/.claude/settings.json</code> to enable for all projects:</p>
|
||||
<p>Or enable everywhere—every project on your machine gets these servers. Add to <code>~/.claude/settings.json</code>:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code>{
|
||||
"mcpServers": {
|
||||
@@ -329,16 +330,18 @@
|
||||
</table>
|
||||
|
||||
<h3>Verifying MCP Servers</h3>
|
||||
<p>After configuration, restart Claude Code and verify the servers are loaded:</p>
|
||||
<p>After you add the config, restart Claude Code. Then test that everything works:</p>
|
||||
<div class="card-code-block">
|
||||
<pre><code># Check if MCP tools are available
|
||||
<pre><code># Ask Claude what it has
|
||||
"What MCP tools do you have access to?"
|
||||
|
||||
# Test Playwright
|
||||
# Test Playwright (should work now)
|
||||
"Take a screenshot of the current directory listing"
|
||||
|
||||
# Test Context7
|
||||
"Look up Rails Active Record documentation"</code></pre>
|
||||
# Test Context7 (should fetch real docs)
|
||||
"Look up Rails Active Record documentation"
|
||||
|
||||
# If either fails, double-check your JSON syntax and file paths</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user