skills.rest
smelloscope
smelloscopeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

smello-screenshot-maker

Generate dashboard and Claude Code session screenshots for Smello documentation.

78|Updated Feb 16, 2026
Search Tags:#documentation#png#landing page#puppeteer#demo#screenshot#mockup
One-click install
npx skills add https://github.com/smelloscope/smello --skill smello-screenshot-maker-smelloscope
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: smello-screenshot-maker
Source: https://github.com/smelloscope/smello/tree/main/.claude/skills/smello-screenshot-maker
Command: npx skills add https://github.com/smelloscope/smello --skill smello-screenshot-maker-smelloscope

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, and includes scripts (resource) and assets (resource) components.

What problem does it solve? Keeping landing page and documentation screenshots in sync with UI changes is tedious manual work. This Skill automates regenerating both the Smello dashboard screenshot and the mock Claude Code terminal screenshot whenever the UI or demo content changes. ## Core Features & Use Cases - Dashboard Screenshot Capture: Clears Smello data, runs a demo script, and captures the live frontend with a selected HTTP request using Puppeteer. - Claude Code Session Mockups: Renders a mock Claude Code terminal from a JSON session definition and captures it as a PNG with macOS window chrome, no servers required. - Guide-Specific Screenshots: Supports a two-step workflow for capturing specific requests by ID, with custom output paths, dimensions, and dark mode options. - Use Case: After updating the Smello UI, regenerate the landing page hero screenshot and all integration guide images in one pass so docs never show outdated visuals. ## Quick Start Regenerate the landing page dashboard screenshot by running the demo-mockup script from the scripts directory.

Frequently Asked Questions about smello-screenshot-maker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I regenerate the Smello dashboard screenshot?▼

Run node scripts/demo-mockup.mjs from the scripts directory after npm install. It clears all Smello data, runs the demo script, selects the first POST request, and writes the capture to docs/assets/screenshot.png.

How do I create a mock Claude Code session screenshot?▼

Run node scripts/claude-code-mockup.mjs with the --no-input flag. It renders a mock terminal from a JSON session definition and captures it as a PNG with macOS window chrome, with no running servers needed.

What servers are required for dashboard screenshots?▼

Dashboard captures require smello-server running on port 5110 and the frontend dev server on port 5111. Claude Code session mockups need no servers since they render a static HTML template.

Why does the --url flag not work with demo-mockup.mjs?▼

demo-mockup.mjs always clears data and re-runs the demo, so request IDs change after the clear. For a specific request, use the two-step approach: run the demo manually, find the request ID via the API, then call generateMockup from lib/mockup.mjs directly.

Can I customize the Claude Code session content shown in the screenshot?▼

Yes. Edit the DEFAULT_SESSION messages array in scripts/claude-code-mockup.mjs, or pass a custom JSON file with --session. The format supports user, assistant, tool_call, and end message roles with diffs and collapsed outputs.

Related Skills

Explore More Software Engineering Skills→
hemant0510hemant0510

dev

Start a local development server and verify the app in a browser.

Community
Basic
lee-tolee-to
1.1k

aif-docs

Generate and maintain project documentation with a landing-page README and topic-split docs directory.

Community
Advanced
dSchulenburgdSchulenburg
3

blog-article-workflow

Generate structured blog articles and publish them to WordPress with images.

Community
Advanced
AmitabhainArunachalaAmitabhainArunachala

dharma-browse

Automates browser navigation, state verification, and screenshot capture for web inspection workflows.

Community
Basic