Skill: Taking Clean Screenshots for Documentation

Professional documentation needs clean screenshots without scrollbars. Instead of manually setting up Chrome and running scripts yourself, just ask your AI assistant to do it for you using this skill.

The Problem

When you take a screenshot of a webpage, the browser includes that ugly scrollbar on the right side. It looks unprofessional and distracts from what you’re trying to show in your documentation.

Why this matters: If you’re creating documentation, tutorials, or marketing materials, those scrollbars make your content look amateurish. Clients and users notice these details, and it affects how professional your work appears.

The Solution

Your AI assistant (like Claude in Cursor, ChatGPT, or similar) can automate the entire screenshot process for you. You don’t need to learn any technical commands or scripts. Just tell your AI what you need in plain English.

Simple request example:

“Take a clean screenshot of https://example.com and upload it to my WordPress media library”

That’s it. The AI handles all the technical work behind the scenes and gives you a perfect, scrollbar-free screenshot ready to use.

Why This Works

Your AI assistant uses a combination of tools to make this happen automatically. Here’s what’s happening behind the scenes (you don’t need to do any of this yourself):

Chrome Debug Mode: The AI launches Chrome with special settings that allow external programs to control it
CSS Injection: A script connects to Chrome and injects code that hides scrollbars using CSS
Screenshot Capture: With scrollbars hidden, the script captures a clean screenshot
WordPress Upload: The FluentMCP plugin automatically uploads the image to your media library

The entire process takes just a few seconds, and you get a professional-looking screenshot without any manual work.

When To Use

This skill is perfect for any situation where you need clean, professional screenshots:

Creating documentation: Show your product or features without distracting scrollbars
Building tutorials: Clean screenshots make step-by-step instructions easier to follow
Marketing materials: Professional-looking images for landing pages and promotional content
Knowledge base articles: Like this page you’re reading right now
Client presentations: Impress clients with polished, professional screenshots

What You’ll Need

Prerequisites (one-time setup):

FluentMCP plugin: Installed and activated on your WordPress site
Desktop Commander: MCP server for running local commands (connects your AI to your computer)
Node.js: Free software that runs the screenshot script (download from nodejs.org)
Chrome browser: What we’ll use to capture the screenshots
AI assistant: Claude (in Cursor), ChatGPT, or similar with MCP support

Once these are set up, you can take unlimited clean screenshots just by asking your AI assistant.

How To Ask Your AI

The beauty of this skill is that you can ask in natural language. Here are some examples:

Basic request:

“Take a clean screenshot of https://fluentmcp.com/knowledge-base/ and upload it to WordPress”

More specific request:

“I need a scrollbar-free screenshot of the FluentMCP homepage. Make it 1920×1080 and add it to my media library with the title ‘Homepage Screenshot'”

Multiple screenshots:

“Take clean screenshots of these three pages and upload them: [URL1], [URL2], [URL3]”

The AI understands what you want and executes all the technical steps automatically.

Common Issues

AI says it can’t find Chrome

What this means: The AI doesn’t know where Chrome is installed on your computer.

How to fix: Tell it the location. On Windows, say: “Chrome is at C:\Program Files\Google\Chrome\Application\chrome.exe”

Screenshot still has scrollbars

What this means: The page didn’t have enough time for the CSS to hide the scrollbars before the screenshot was taken.

How to fix: Ask the AI: “Try again but wait longer before taking the screenshot”

Upload fails

What this means: Either FluentMCP isn’t installed, or there’s a connection issue with your WordPress site.

How to fix: Make sure FluentMCP is installed and activated on your WordPress site. Check that your site is accessible.

For AI Assistants: Technical Reference

This section contains compressed instructions optimized for AI assistants. If you’re a human, you can copy this text or share the URL with your AI to help it execute this skill.

SKILL: Clean Screenshot Capture (No Scrollbars) TASK: Capture browser screenshots without visible scrollbars COMPLEXITY: Advanced (4 steps, requires Node.js) TOOLS REQUIRED: – start_process (Desktop Commander) – write_file (Desktop Commander) – upload_media (FluentMCP) PREREQUISITES: – Node.js installed – puppeteer-core OR playwright npm package – Chrome browser WORKFLOW: 1. Launch Chrome with remote debugging Tool: start_process Command: & ‘C:\Program Files\Google\Chrome\Application\chrome.exe’ –remote-debugging-port=9222 –user-data-dir=C:\temp\chrome-debug [URL] Timeout: 5000ms 2. Create Puppeteer script Tool: write_file Path: C:\temp\screenshot-chrome.js Content: Node.js script that connects to Chrome on port 9222, injects CSS to hide scrollbars, captures screenshot to C:\temp\clean-screenshot.png Script template: const puppeteer = require(‘puppeteer-core’); (async () => { const browser = await puppeteer.connect({browserURL: ‘http://localhost:9222’}); const pages = await browser.pages(); const page = pages[0]; await page.addStyleTag({content: ‘html,body{overflow:hidden!important}::-webkit-scrollbar{display:none!important}’}); await new Promise(resolve => setTimeout(resolve, 500)); await page.screenshot({path: ‘C:\\temp\\clean-screenshot.png’, fullPage: false}); await browser.disconnect(); })(); 3. Execute screenshot script Tool: start_process Command: node C:\temp\screenshot-chrome.js Timeout: 10000ms 4. Upload to WordPress Tool: upload_media Path: C:\temp\clean-screenshot.png ALTERNATIVE (SIMPLER): Use browser_take_screenshot if scrollbars acceptable (1 step vs 4) COMMON ISSUES: – Port 9222 in use: Change to different port – Chrome path wrong: Verify installation location – Puppeteer not found: npm install puppeteer-core – Timing issues: Increase setTimeout value in script – waitForTimeout deprecated: Use new Promise(resolve => setTimeout(resolve, ms)) CROSS-PLATFORM NOTES: – Windows: Use backslashes in paths OR forward slashes – Mac/Linux: Adjust Chrome path to /Applications/Google Chrome.app/Contents/MacOS/Google Chrome – Use forward slashes (/) in JavaScript strings for cross-platform compatibility