Do Wdr Assets

WDR Assets Skill

Automated screenshot and visual asset generation for documentation.

When to use this skill

Activate this skill when you need to:

• Capture UI screenshots for documentation
• Generate visual assets for README.md
• Create test captures for release notes
• Update documentation images
• Take before/after screenshots for changes
• Generate visual regression test baselines

Asset Structure

assets/
├── screenshots/
│   ├── homepage.png          # Main UI screenshot
│   ├── help-page.png         # Help page screenshot
│   ├── resolve-flow.png      # Resolution flow demo
│   ├── providers.png         # Provider list screenshot
│   └── release-vX.Y.Z/      # Version-specific captures
│       ├── homepage.png
│       └── new-feature.png
└── README.md                 # Asset documentation

Quick Start

Capture Homepage

# Open production site and capture
agent-browser open "https://web-eight-ivory-29.vercel.app"
agent-browser wait --load networkidle
agent-browser screenshot --full assets/screenshots/homepage.png
agent-browser close

Capture with Annotations

agent-browser open "https://web-eight-ivory-29.vercel.app"
agent-browser wait --load networkidle
agent-browser screenshot --annotate assets/screenshots/homepage-annotated.png
agent-browser close

Release Capture Workflow

# Create release folder
mkdir -p assets/screenshots/release-v$VERSION

# Capture all pages
./scripts/capture-release.sh $VERSION

Commands

capture

Capture a single page screenshot.

agent-browser open 
agent-browser wait --load networkidle
agent-browser screenshot assets/screenshots/.png
agent-browser close

capture-full

Capture full-page screenshot.

agent-browser open 
agent-browser wait --load networkidle
agent-browser screenshot --full assets/screenshots/.png
agent-browser close

capture-flow

Capture a multi-step flow with screenshots.

./scripts/capture-flow.sh 

capture-release

Capture all pages for a release.

./scripts/capture-release.sh 

Configuration

Viewport Settings

Default: 1280x720

agent-browser set viewport 1920 1080    # Desktop HD
agent-browser set viewport 375 812      # iPhone
agent-browser set viewport 1440 900    # Laptop

Screenshot Quality

agent-browser screenshot --screenshot-format jpeg --screenshot-quality 90

Integration with Docs

README.md Image References

Release Notes

## What's New in vX.Y.Z

Automation

Pre-commit Hook

Add to .git/hooks/pre-commit:

# Capture screenshots if UI files changed
if git diff --cached --name-only | grep -q "web/"; then
    ./scripts/capture-release.sh "pre-commit"
fi

CI/CD Pipeline

- name: Capture screenshots
  run: |
    npm run build
    npm run dev &
    ./scripts/capture-release.sh "ci-${{ github.sha }}"

Best Practices

1. Consistent viewport: Use same viewport for comparable screenshots
2. Wait for load: Always use wait --load networkidle before capture
3. Version folders: Use release-vX.Y.Z/ for release captures
4. Naming convention: Use kebab-case for filenames
5. Full page: Use --full for documentation screenshots
6. Annotated: Use --annotate for UI documentation

Related Skills

• agent-browser: Browser automation
• do-wdr-cli: Rust CLI for web resolution
• do-web-doc-resolver: Python resolver

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: d-oit
• Source: d-oit/do-web-doc-resolver
• License: MIT
• Homepage: https://web-eight-ivory-29.vercel.app/

Install and usage instructions live in the source repository linked above.