AI experiments
I’ve been tinkering with Claude Code for a few months now. It’s a lot of fun. The frontend optimizations are now very easy to implement. When I was recently redoing the design of this website, my CSS, JS, and layout code became quite messy. I’m not an expert on webperf, so I didn’t want to dive into it myself. But I also didn’t want the performance optimizations to ruin the exact look and feel, UX, and features I had built for the website.
I’ve seen (I bet you have too) many people on X sharing how complex their Claude Code setup is with multiple agents running in parallel, skills, MCPs and so on. So far I’ve been very vanilla. But this time I thought I’d give refinement a try.
So I wrote a prompt – no additional configurations were performed, I just described what I wanted to do in this performance exercise. And to my surprise it just worked.
The prompt
This is what I asked Claude Code:
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
Each highlighted part of this prompt activates a different ability. Let’s see how Claude Code responded to each part one by one.
Take screenshots before making any changes
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
This activates Claude Code’s MCP (Model Context Protocol) integration. If you have Playwright MCP configured, Claude will actually launch a browser, navigate to your pages, and take screenshots.
Claude Code’s output
⏺ mcp_playwright_browser_navigate (MCP)
url: "http://localhost:4000/"
⏺ mcp_playwright_browser_take_screenshot (MCP)
filename: "baseline/homepage-desktop.png"
✓ Saved screenshot to .playwright-mcp/baseline/homepage-desktop.png
⏺ mcp_playwright_browser_resize (MCP)
width: 768, height: 1024
⏺ mcp_playwright_browser_take_screenshot (MCP)
filename: "baseline/homepage-tablet.png"
✓ Saved screenshot to .playwright-mcp/baseline/homepage-tablet.pngWhy this matters: You now have a visual overview of what your site looked like for any changes. This is crucial for the comparison step later.
Perform multiple tasks at the same time
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
This is triggering multi-agent parallelization. Instead of performing tasks sequentially, Claude launches four separate agents that work simultaneously:
- Agent 1: Removes unused fonts, enables minification, optimizes build configuration
- Agent 2: Fixes focus indicators, adds ARIA labels, improves keyboard navigation
- Agent 3: Updates schema markup and fixes sitemap issues
- Agent 4: Removes dead code, updates documentation
Claude Code’s output
⏺ Launching 4 agents in parallel...
⏺ Task (agent)
description: "Performance and build optimization"
↳ Running: Scanning assets/fonts/ for unused font files...
⏺ Task (agent)
description: "Accessibility audit and fixes"
↳ Running: Checking focus indicators and ARIA labels...
⏺ Task (agent)
description: "SEO and structured data"
↳ Running: Validating JSON-LD schema and sitemap...
⏺ Task (agent)
description: "Code quality cleanup"
↳ Running: Searching for test code in production files...Why this is important: Speed. These tasks are not dependent on each other. Font cleanup doesn’t have to wait for ARIA labels. Running them in parallel will complete 4x faster.
Compare before and after to determine regressions
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
This causes a visual regression test loop. Claude will:
- Resize the browser to any breakpoint (1280px, 768px, 375px)
- Take new screenshots
- Compare them to the basic screenshots
- Highlight any visual differences
Claude Code’s output
⏺ Visual Regression Check
Comparing baseline vs current screenshots...
Desktop (1280px)
Homepage: ✓ No changes detected
Blog post: ✓ No changes detected
Notes page: ✓ No changes detected
Tablet (768px)
Homepage: ✓ No changes detected
Blog post: ✓ No changes detected
Mobile (375px)
Homepage: ✓ No changes detected
Blog post: ✓ No changes detected
Result: 0 visual regressions foundWhy this matters: Code changes can have unintended visual side effects. A CSS tweak might look good on desktop, but won’t work on mobile. This identifies these issues before you implement them.
Document changes for future sessions
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
This causes Claude to update the data project documentation. CLAUDE.md is a special file that Claude reads at the beginning of each session. By documenting the changes there, future sessions will know:
- Which fonts are actually used
- What accessibility patterns you should follow
- What has been optimized and why
Claude Code’s output
⏺ Edit (CLAUDE.md)
Adding section: "Site Optimization (January 2026)"
+ ## Site Optimization (January 2026)
+
+ ### Fonts
+ - Only 3 font families in use: Ivar Text, Ivar Headline, Departure Mono
+ - Deleted 48 unused font directories (65MB savings)
+
+ ### Accessibility
+ - Emoji reactions use Why this is important: Continuity between sessions. You (and Claude) won’t accidentally undo optimizations or repeat work.
Create a reusable workflow
Run the audit and fixes in parallel using multiple agents: one for performance/build, one for accessibility, one for SEO, one for code cleanup.
Once all changes are complete, take screenshots on desktop, tablet, and mobile breakpoints and compare them to the baseline to ensure nothing is broken visually.
Update CLAUDE.md with what has changed.
Finally, create a reusable skill so I can perform the same audit workflow in the future.
This triggers Claude to have one skill filea markdown document that teaches Claude a reusable workflow. Once created, you can reactivate the entire optimization workflow in a subsequent session.
Claude Code’s output
⏺ Write (.claude/skills/site-audit.md)
# Site Audit Skill
Run a comprehensive site audit covering performance,
accessibility, SEO, and code quality.
## Workflow
### 1. Capture Baseline Screenshots
Before making any changes, use Playwright MCP to capture
screenshots of homepage, blog post, and notes page at
desktop (1280px), tablet (768px), and mobile (375px).
### 2. Run Parallel Audit Agents
Launch 4 agents simultaneously:
- Agent 1: Performance & Build
- Agent 2: Accessibility (WCAG 2.1 AA)
- Agent 3: SEO & Structured Data
- Agent 4: Code Quality
### 3. Visual Regression Testing
Compare new screenshots with baseline...
✓ Created .claude/skills/site-audit.mdWhy this is important: Automation. Complex, multi-step workflows become single-command operations. The skill file contains all the detailed steps so that your assignment can remain simple.
The results
From this single prompt, Claude:
- Removed 71 MB of unused fonts
- Fixed 6 accessibility violations
- Added the correct JSON-LD schema
- Test code removed from production
- 15 screenshots were taken about breakpoints
- Verified null visual regressions
- Created a reusable skill for future audits
Not bad for a few sentences of questions.
Try it yourself
Here’s a template you can steal:
Take screenshots of the current status before making any changes. Than [describe your task]. After you’re done, compare the screenshots to make sure nothing is broken visually. Document what has changed in CLAUDE.md.
What surprised me most is that Claude Code doesn’t need you to be precise. You can describe what you want in the way you would explain it to a colleague, and he will figure out how to make that happen.
To make the screenshot stuff work you will need Playwright MCP set up. The parallel agents and skill creation work out-of-the-box.
Read more
#Power #prompts #Claude #Code