Website Preview

Render the Jekyll site locally, take screenshots, and verify design changes visually using ChromeDriver and browser automation.

When to use this skill

Use this skill when:

• Modifying CSS, SCSS, or any styling files

• Editing HTML layouts (_layouts/ ) or includes (_includes/ )

• Making changes that affect visual appearance

• The user asks to see how changes look

• You need to verify a design change worked correctly

• Working on any front-end aspects of the website

Invoke this skill proactively after making visual changes to the site.

How to use this skill

Step 1: Check Prerequisites

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.

Step 2: Take Screenshots

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.

Step 3: View Screenshots

After taking a screenshot, use the Read tool to view it:

Read /tmp/preview.png

Inspecting Elements

Execute JavaScript to query the page:

./browser.sh js "document.querySelector('nav').getBoundingClientRect()"

After Making Changes

After modifying CSS/HTML:

• Jekyll will auto-rebuild (watch for "Regenerating:" in Jekyll output)

• Refresh: ./browser.sh nav http://localhost:4000/

• Take a new screenshot to verify changes

Common Pages to Check

• Homepage: http://localhost:4000/

• Current year index: http://localhost:4000/2026/

• Lecture page: http://localhost:4000/2026/course-shell/

• About page: http://localhost:4000/about/

ChromeDriver Lifecycle

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.

Troubleshooting

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