From environment
Generate PDF with screenshots of all environment web UI pages
How this skill is triggered — by the user, by Claude, or both
Slash command
/environment:screenshotsThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Capture screenshots of all environment web interface pages and combine into a PDF.
Capture screenshots of all environment web interface pages and combine into a PDF.
Read from .claude-plugin/plugin.json:
Before executing commands, determine the plugin installation directory:
~/.claude/plugins/installed_plugins.jsonenvironment@installPath value as PLUGIN_DIR in all commands belowlsof -i :3848 -t 2>/dev/null || echo "not_running"
If "not_running", start the server:
PLUGIN_DIR="<installPath from installed_plugins.json>"
nohup node "$PLUGIN_DIR/server.js" > /dev/null 2>&1 &
sleep 2
Write the following script to /tmp/environment-screenshots.mjs:
import { chromium } from 'playwright';
import { PDFDocument } from 'pdf-lib';
import fs from 'fs/promises';
const PORT = 3848;
const BASE_URL = `http://localhost:${PORT}`;
const OUTPUT_DIR = '/tmp/environment-screens';
const PAGES = [
{ name: 'Dashboard', route: '/' },
{ name: 'Agents', route: '/#/agents' },
{ name: 'Skills', route: '/#/skills' },
{ name: 'Commands', route: '/#/commands' },
{ name: 'Knowledge', route: '/#/knowledge' },
{ name: 'Rules', route: '/#/rules' },
{ name: 'Plugins', route: '/#/plugins' },
{ name: 'MCP-Servers', route: '/#/mcp-servers' },
{ name: 'Memory', route: '/#/memory' },
{ name: 'Settings', route: '/#/settings' }
];
async function captureScreenshots() {
await fs.mkdir(OUTPUT_DIR, { recursive: true });
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
viewport: { width: 1920, height: 1080 }
});
const page = await context.newPage();
const screenshots = [];
for (const { name, route } of PAGES) {
const url = `${BASE_URL}${route}`;
console.log(`Capturing: ${name} (${url})`);
await page.goto(url, { waitUntil: 'networkidle' });
await page.waitForTimeout(500); // Allow animations to settle
const path = `${OUTPUT_DIR}/${name}.png`;
await page.screenshot({ path, fullPage: true });
screenshots.push({ name, path });
}
await browser.close();
return screenshots;
}
async function createPDF(screenshots) {
const pdfDoc = await PDFDocument.create();
for (const { name, path } of screenshots) {
console.log(`Adding to PDF: ${name}`);
const imageBytes = await fs.readFile(path);
const image = await pdfDoc.embedPng(imageBytes);
// Scale to fit page while maintaining aspect ratio
const { width, height } = image;
const pageWidth = 1920;
const pageHeight = Math.max(height, 1080);
const page = pdfDoc.addPage([pageWidth, pageHeight]);
page.drawImage(image, {
x: 0,
y: pageHeight - height,
width,
height
});
}
const pdfBytes = await pdfDoc.save();
// PLUGIN_DIR must be set by the skill caller — no hardcoded fallback to avoid silent failures
// when installed from marketplace (where the path differs from local dev)
const pluginDir = process.env.PLUGIN_DIR;
if (!pluginDir) {
console.error('Error: PLUGIN_DIR environment variable is required');
process.exit(1);
}
const outputPath = pluginDir + '/screenshots/environment-screenshots.pdf';
await fs.mkdir(pluginDir + '/screenshots', { recursive: true });
await fs.writeFile(outputPath, pdfBytes);
console.log('PDF created: ' + outputPath);
}
async function main() {
try {
const screenshots = await captureScreenshots();
await createPDF(screenshots);
// Cleanup screenshots
await fs.rm(OUTPUT_DIR, { recursive: true });
console.log('Done!');
} catch (error) {
console.error('Error:', error.message);
process.exit(1);
}
}
main();
cd /tmp && npm init -y 2>/dev/null
npm install playwright pdf-lib --silent
npx playwright install chromium 2>/dev/null || true
node environment-screenshots.mjs
rm -f /tmp/environment-screenshots.mjs /tmp/package.json /tmp/package-lock.json
The PDF will be saved to the screenshots/ directory within the plugin installation path.
When running the screenshot script, pass the plugin directory as an environment variable:
PLUGIN_DIR="<installPath from installed_plugins.json>" node environment-screenshots.mjs
Report the file location and size to the user when complete.
npx claudepluginhub samgreendev/claude-code-environment --plugin environmentCaptures screenshots of web pages, local files, and Reveal.js presentations using Playwright, enabling visual inspection and iteration for agents that cannot see rendered UI.
Generates marketing-quality screenshots of your app using Playwright at HiDPI resolution. Use for Product Hunt, social media, landing pages, or documentation.
Generates structured user documentation for web apps via browser automation: screenshots pages/routes, step-by-step guides, diagrams, tables. Supports quick-to-exhaustive depths.