Take screenshots and interact with the rendered Jekyll website
Render the Jekyll site locally, take screenshots, and verify design changes visually using ChromeDriver and browser automation.
Use this skill when:
_layouts/) or includes (_includes/)Invoke this skill proactively after making visual changes to the site.
Before taking screenshots, verify both Jekyll and ChromeDriver are running.
Check Jekyll server:
curl -s -o /dev/null -w "%{http_code}" http://localhost:4000/ 2>/dev/null || echo "not running"
If not running (not 200), start it in background:
bundle exec jekyll serve --host 0.0.0.0 &
Wait a few seconds for it to build.
Check ChromeDriver:
cat /tmp/chromedriver_port 2>/dev/null || echo "not running"
If not running, start it:
./browser.sh chromedriver
This finds Chrome automatically and starts ChromeDriver on a free port.
Use ./browser.sh for browser automation:
./browser.sh start http://localhost:4000/
./browser.sh screenshot /tmp/preview.png
./browser.sh dark
./browser.sh screenshot /tmp/preview-dark.png
./browser.sh mobile
./browser.sh screenshot /tmp/preview-mobile-dark.png
./browser.sh light
./browser.sh screenshot /tmp/preview-mobile-light.png
./browser.sh desktop
./browser.sh nav http://localhost:4000/2026/course-shell/
./browser.sh screenshot /tmp/course-shell.png
./browser.sh stop
Mode commands (dark, light, mobile, desktop) persist until changed.
After taking a screenshot, use the Read tool to view it:
Read /tmp/preview.png
Execute JavaScript to query the page:
./browser.sh js "document.querySelector('nav').getBoundingClientRect()"
After modifying CSS/HTML:
./browser.sh nav http://localhost:4000/http://localhost:4000/http://localhost:4000/2026/http://localhost:4000/2026/course-shell/http://localhost:4000/about/Keep ChromeDriver running across multiple previews during a session. Only kill it when no more browser interactions are expected.
./browser.sh stop - Ends the browser session (optional between screenshots)./browser.sh kill - Stops ChromeDriver entirely (only when done with all design work)You do not need to run ./browser.sh kill after each preview. Start ChromeDriver once at the beginning and leave it running.
Jekyll not rebuilding: Run bundle exec jekyll build manually
ChromeDriver errors: Kill and restart
./browser.sh kill
./browser.sh chromedriver
Session errors: Stop any existing session first
./browser.sh stop