rakovi4/screenshot
.claude/skills/screenshot/SKILL.md
Take screenshots of HTML mockups from any version. Use when user wants to capture mockups as PNG images, regenerate screenshots, or mentions /screenshot command.
$ install --global
skillsauthnpx skillsauth add rakovi4/continue-example screenshotInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 8:59 PM2.1s1 file scanned
SKILL.md
- name:
- screenshot
- description:
- Take screenshots of HTML mockups from any version. Use when user wants to capture mockups as PNG images, regenerate screenshots, or mentions /screenshot command.
Screenshot HTML Mockups
Automate taking screenshots of HTML mockups using Puppeteer from a centralized runner location.
Usage
/screenshot [folder/file]
Mockups Location
Default location: ProductSpecification/stories/*/mockups/
Workflow
Phase 1: Determine Scope
Parse user input to determine target:
Folder/file filtering:
/screenshot— All mockups in default location/screenshot login.html— Single file/screenshot 01_auth— Files matching pattern
Phase 2: Ensure Puppeteer Environment
The centralized Puppeteer runner is in .screenshots-temp/:
- Check if
.screenshots-temp/node_modulesexists:- If not: run
cd .screenshots-temp && npm install
- If not: run
- This only needs to happen once, not per-mockup-directory
Phase 3: Run Screenshot Script
Execute from the centralized location:
cd .screenshots-temp && node take-screenshots.js [target]
Examples:
# All mockups in default directory
cd .screenshots-temp && node take-screenshots.js
# Specific file (relative to repo root)
cd .screenshots-temp && node take-screenshots.js ../ProductSpecification/stories/01-create-task/mockups/desktop/create-task.html
# Directory with HTML files
cd .screenshots-temp && node take-screenshots.js ../ProductSpecification/stories/01-create-task/mockups/desktop/
# Filter by filename pattern
cd .screenshots-temp && node take-screenshots.js ../ProductSpecification/stories/01-create-task/mockups/ mobile
Phase 4: Output Summary
Report to user:
- Number of screenshots taken
- Output location (screenshots saved alongside HTML files or in
screenshots/subfolder) - Any failures encountered
Example Invocations
/screenshot # All mockups
/screenshot login.html # Specific file
/screenshot mobile # Files containing "mobile"
Design Constraints
- Mobile detection: Files in a
mobile/parent directory use mobile viewport (390x844) - Desktop viewport: 1400x900
- Element selector: Crop to
.mockup-cardelement when present - Fallback: Full page screenshot if
.mockup-cardnot found - Format: PNG
- Output:
screenshots/subfolder next to each HTML file (per-directory, not centralized) - Skip:
node_modules/,screenshots/, andscreenshots-live/directories
Notes
- Puppeteer is pre-installed in
.screenshots-temp/ - No npm installation needed in mockup directories
- Screenshots are deterministic for visual regression testing
- Re-running overwrites existing screenshots
Related Skills
rakovi4/test-usecase
testing
VerifiedTrustedCommunity
Run use-case module tests quickly. Use when user wants to run use-case tests or mentions /test-usecase command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-spec
development
VerifiedTrustedCommunity
Generate BDD test specifications for story in 6 categories (API, UI, Load, Infrastructure, Security, Integration). Use when user wants to create test cases or mentions /test-spec command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-review
testing
VerifiedTrustedCommunity
Review tests to replace loose validation (contains, isNotNull, isNotEmpty) with strict validation (isEqualTo on parsed fields). Use when user wants to improve test assertions or mentions /test-review command.
2SKILL.mdUpdated Apr 16, 2026
rakovi4/test-frontend
development
VerifiedTrustedCommunity
Run frontend tests. Use when user wants to run frontend unit tests or mentions /test-frontend command.
2SKILL.mdUpdated Apr 16, 2026