Agentically with Claude
By Brooke Ryan, co-authored by Claude · last updated May 1, 2026
What "agentically" means
"Agentic" is the term that came into wide use as AI assistants graduated from chat boxes into tools that can take a goal, plan the steps, edit files, run tests, and iterate until they're done or stuck enough to ask. The difference shows up in scope: asking an assistant to draft a paragraph is one thing; asking it to rebuild a table layout, run the accessibility tests, fix what they surface, and hand back a commit ready for review is another. This site is built the second way.
How this site is built
The assistant is Claude, Anthropic's family of AI assistants, working alongside me through Claude Code — the harness that gives Claude the file-editing, shell-running, and test-running tools an agentic workflow needs. I drive the editorial decisions — what goes on each page, the voice, what to disclose, what to keep private. Claude helps me execute: drafting and revising prose, writing HTML and CSS, building the test infrastructure, maintaining schedule data, and keeping documentation in sync as the site evolves.
Branch protection routes every change through a pull request before it merges. I scan the diff — digging in line by line only when something looks high-risk — and lean on the test suite for the rest. Pages that involve personal disclosures or technique guidance get extra scrutiny against the project's internal disclosure policy and conventions before I merge them.
Models used
I don't deliberately pick a model — sessions on this repository run on whatever Claude Code defaults to at the time, with rare exceptions. Models from the Claude 4 family that have shown up across the site's history:
| Model | How it was used on this site |
|---|---|
| Claude Opus 4.6 / 4.7, Sonnet 4.5 / 4.6 | Whatever was the Claude Code default at the time of each session. I don't switch between them deliberately. |
| Claude Haiku 4.5 | The rare exception — used once for a read-only pass to check that the external links on athlete and academic still resolve. Beyond a simple URL swap that I can eyeball, anything that needed an edit was handed off to a larger model. |
The exact model used for any particular commit isn't recorded in the page itself.
The session prompts that drove the work are appended to .claude/prompt-log.md in the repository, which is committed alongside the changes they produced.
What Claude helped with, by page
This is a representative summary, not a per-line accounting. The list below describes the kinds of work Claude has contributed on each page; the underlying editorial choices and the final shape of every page are mine.
| Page | Where Claude helped |
|---|---|
| Home | Jumbotron and section-card layout, navigation scaffolding, dark mode toggle, Schema.org Person structured data, favicons and web manifest. |
| About | Bio prose revisions, structured data kept in sync with the homepage, profile photo handling, cross-link audits against the disclosure policy. |
| Professional | Career narrative editing and the role-history table with mobile column hiding. |
| Academic | Multi-table course history with aligned table-layout: fixed columns, mobile row-expand detail rows, the "Academic History" full-width section. |
| Athlete | Competition tables, photo carousel galleries with placeholder aspect ratios, the slideshow, USFS test-record sub-tables, and the "Competition History" section. |
| Daily Makeup Guide | Step-by-step editorial structure, product tables, the byline pattern this site now uses, and ongoing edits against the makeup conventions rule. |
| FunTimes | The schedule system (data-schedule, data-season-start, data-venue-id), the Caltrain Adventures and trainwatch features, the JSON schedule files in website/data/, the time-travel preview, and the activity-window framing. |
| License | Attribution scaffolding for vendored libraries, the photographer credits table, and the AI-assisted authorship section that links here. |
| Agentically with Claude (this page) | Drafted by Claude at my request, then edited and signed off by me. |
| 404 | Custom error page styling and links back into the main navigation. |
My agentic workspace today
The point of an agentic workflow isn't only what the assistant does — it's where I get to do it from. The pieces I rely on most:
- The Claude Code iOS app — a real native session in my pocket. Most edits that aren't asset imports start there.
- The desktop CLI on my Mac — where I import new photos and videos, run the EXIF and HLS pipelines, and reach for the deploy commands directly when something needs an out-of-band push.
- GitHub's private-repo connector — gives the iOS and browser sessions read/write access to the same private repository the desktop CLI is working in. One source of truth, multiple front doors.
- GitHub branch protection on
main— every change has to go through a pull request with passing checks. There's no path to ship an unreviewed change, even by accident. - GitHub Actions — html-validate, lychee, axe-core, Lighthouse, ESLint, and the prose-wrap and perf-hint linters run on every PR. The screenshots workflow is the one I lean on most: it captures every page at desktop and mobile viewports and attaches the images to the PR, so visual diffs are right there without leaving the browser.
- Feature branches — the back-and-forth happens here. I'll start a change in one place, move to another, push more commits, and the PR keeps catching up. CI re-runs, screenshots refresh, the conversation continues across whatever device I happen to be on.
Editing a page from almost anywhere is a real option, not a hack.
Merging a feature branch into main kicks off the deploy as a GitHub Action, so I don't need to be on the Mac to ship — but the asset pipeline (EXIF, HLS, image resizing) and the manual deploy commands still live there, since they reach for tools and credentials that aren't in the cloud.
Beyond the pages
A lot of Claude's contribution sits in the supporting cast rather than on a page:
- Test infrastructure — Playwright + axe-core accessibility tests, Lighthouse CI, html-validate, lychee link checking, ESLint and Stylelint, performance-hint shell checks, and the screenshot-diff workflow used to catch visual regressions.
- CSS architecture — the
table-layout: fixedcolumn-alignment system, mobile column hiding, focus-visible outlines, and the social-icon hover colours. - JavaScript — the mobile row-expand behaviour, the FunTimes schedule and trainwatch logic, the dark mode toggle.
- Hooks and conventions — the
SessionStartenvironment-detection hook, the prompt-logUserPromptSubmithook, the pre-commit supporting-files check, and the path-scoped rule files in.claude/rules/that document the site's conventions. - Deployment — the GCS deploy workflow and the safety rules around it.
Source of truth
The site lives in a private GitHub repository.
Inside it, every commit records what changed; .claude/prompt-log.md captures the prompts that drove the work; and CLAUDE.md plus the rules under .claude/rules/ document the conventions Claude is asked to follow.
If something on this page raises a question and you'd like to know more, the easiest path is to ask me directly.