Do wdr assets

Skill d-oit/do-web-doc-resolver/.agents/skills/do-wdr-assets

LLM-ready web documentation resolver: Python cascade skill + web + Rust CLI (wdr) with semantic cache, multi-provider routing, and quality synthesis

Install

npx -y skills add d-oit/do-web-doc-resolver --skill do-wdr-assets

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Create screenshots, images, and visual tests for documentation. Use when you need to capture UI screenshots, generate visual assets, create test captures, or update documentation images. Automates browser-based image capture with agent-browser and saves to assets/ folder.

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

4.2 KB, as published. Nobody here has run it

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 <URL>
agent-browser wait --load networkidle
agent-browser screenshot assets/screenshots/<name>.png
agent-browser close

capture-full

Capture full-page screenshot.

agent-browser open <URL>
agent-browser wait --load networkidle
agent-browser screenshot --full assets/screenshots/<name>.png
agent-browser close

capture-flow

Capture a multi-step flow with screenshots.

./scripts/capture-flow.sh <flow-name>

capture-release

Capture all pages for a release.

./scripts/capture-release.sh <version>

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

![Web Doc Resolver UI](./assets/screenshots/homepage.png)

Release Notes

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

![New Feature](./assets/screenshots/release-vX.Y.Z/new-feature.png)

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

Consistent viewport: Use same viewport for comparable screenshots
Wait for load: Always use wait --load networkidle before capture
Version folders: Use release-vX.Y.Z/ for release captures
Naming convention: Use kebab-case for filenames
Full page: Use --full for documentation screenshots
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