UI Preview Skill

Take screenshots of web UIs to visually verify your work.

When to Use

• After making CSS/HTML changes
• To verify a web UI renders correctly
• To debug layout issues
• Before committing UI changes

Prerequisites

• chromium in PATH (available via nix)
• Server running on a port

Workflow

1. Start the Server

Use tmux to run the server in the background:

tmux new-window -n myserver -d "command-to-start-server --port=PORT"
sleep 2  # Wait for startup

2. Take a Screenshot

chromium --headless --screenshot=_/tmp/ui.png --window-size=1280,800 http://localhost:PORT

Options:

• --window-size=WIDTH,HEIGHT - Set viewport size
• --screenshot=PATH - Output path (use _/tmp/ for temp files)

3. View the Screenshot

read _/tmp/ui.png

The read tool supports images and will display them inline.

4. Iterate

Make changes, rebuild if needed, take another screenshot:

# Rebuild (if compiled)
bild Omni/Path/To/Server.hs

# Server auto-restarts or restart manually
tmux kill-window -t myserver
tmux new-window -n myserver -d "new-binary --port=PORT"
sleep 2

# New screenshot
chromium --headless --screenshot=_/tmp/ui.png --window-size=1280,800 http://localhost:PORT
read _/tmp/ui.png

5. Clean Up

tmux kill-window -t myserver

Example Session

# Start agentd-studio
tmux new-window -n studio -d "_/nix/Omni/Agentd/Studio.hs/agentd-studio/bin/agentd-studio --port=8091"
sleep 2

# Verify it's running
curl http://localhost:8091/health

# Take screenshot
chromium --headless --screenshot=_/tmp/studio.png --window-size=1280,800 http://localhost:8091

# View it
read _/tmp/studio.png

# Clean up
tmux kill-window -t studio

Tips

• Use --window-size=1920,1080 for full HD screenshots
• Use --window-size=375,812 for mobile viewport
• Screenshots go to _/tmp/ which is gitignored
• Multiple screenshots: use different filenames like _/tmp/ui-1.png, _/tmp/ui-2.png

Limitations

• Headless screenshots don’t execute JavaScript that requires user interaction
• For interactive testing (clicking, form filling), use the dev-browser skill (future)
• Some CSS animations may not render correctly in headless mode