skills.rest
NealST
NealSTCOMMUNITY
Explore all skills by this author →
GitHub

screenshotting-apps

Generate annotated screenshot documentation for web applications by injecting SVG overlays onto UI elements.

1|Updated Aug 6, 2024
Search Tags:#markdown#screenshots#web-automation#agent-browser#annotate#ui-documentation#visual-docs
One-click install
npx skills add https://github.com/NealST/blog-source --skill screenshotting-apps
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: screenshotting-apps
Source: https://github.com/NealST/blog-source/tree/main/.github/skills/app-screenshots
Command: npx skills add https://github.com/NealST/blog-source --skill screenshotting-apps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Automates the creation of visually annotated documentation for web applications by capturing screenshots and overlaying guidance to illustrate UI elements.

Core Features & Use Cases

  • Auto-discovers site pages and renders a single markdown doc with per-page annotations.
  • Supports local dev servers and live websites, with configurable annotation types (box, click, circle) and color-coding.
  • Generates navigation-friendly visual guides for product docs, onboarding, and feature walkthroughs.

Quick Start

Run the skill to generate a ready-to-share visual guide for a specified site.

Frequently Asked Questions about screenshotting-apps

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

FAQPage Schema
How do I generate annotated screenshot documentation for web applications?▼

Annotated screenshot documentation for web applications is generated by injecting SVG overlays onto UI elements, capturing screenshots of pages like home pages and dashboards, and producing a markdown document with visual guidance.

Can I annotate screenshots of both local dev servers and public URLs?▼

Yes, you can annotate screenshots of both local dev servers and live public URLs. The tool renders pages across various site sections and applies configurable annotation types including boxes, clicks, and circles with color-coding.

Do I need an agent-browser tool to capture web app screenshots with overlays?▼

Yes, you need the agent-browser tool and a compatible environment to render pages, capture web app screenshots, and produce the markdown document with visual overlays.

What is the best way to create visual UI documentation for onboarding walkthroughs?▼

The best way to create visual UI documentation for onboarding walkthroughs is to auto-discover site pages and render a single markdown doc with per-page annotations, generating navigation-friendly visual guides with configurable overlays.

What annotation types are available for web app screenshot documentation?▼

Available annotation types for web app screenshot documentation include box, click, and circle overlays. These are injected as SVGs onto the UI with configurable color-coding to highlight specific features.

Related Skills

Explore More Design & Creative Skills→
marcioaltoemarcioaltoe
14

web-tests

Generate and execute Playwright test scripts for browser UI automation.

Community
Advanced
channgchanng
20

docsify

Generate static documentation websites from markdown files with sidebar navigation.

Community
Basic
AeonDaveAeonDave
15

eyewitness

Capture HTTP, RDP, and VNC screenshots and generate HTML reports.

Community
Intermediate
vrcmsvrcms
1

ui-demo

Automate web app demo videos with Playwright and UI overlays.

Community
Advanced