The Claude Code toolkit
for agent-friendly websites
A guide tells you what to do. This repo does it for you.
CLAUDE.md template, design skill, slash commands and prompt library, public on GitHub.
Not a theory post about prompting. This is the exact tooling we used to build cegtec.net, as a clonable repo, MIT licensed.
A guide isn't enough — you need the tools
Our build guide explains the full workflow: migration, content structure, design, agent readiness, deployment. What it doesn't hand you: the actual files that keep Claude Code consistent and fast at every step.
Without that groundwork, the usual thing happens. Every Claude Code session starts from zero. You explain the brand for the tenth time. Migration runs copy-paste one day and crawling the next, never the same pattern twice. Agent readiness gets "done quickly at the end" and then forgotten.
The fix: a repo that brings the process itself, not just the finished code.
What's in the repo
Five pieces, each small on its own, together the difference between "using Claude Code somehow" and a repeatable process.
The briefing Claude Code reads at every session. Brand, stack, design tokens, agent-readiness requirements — fill it in once, never repeat yourself.
Keeps every page visually consistent with the others — without it, a coding agent reinvents its own layout for every single page.
/migrate-page and /audit-agent-friendly, the two most mechanical jobs in the whole process, defined once instead of re-explained every time.
Copy-paste prompts for every phase, from migration to the deployment check. No guessing how to phrase it.
The pieces in detail
CLAUDE.md, the briefing
A Markdown file at the project root that Claude Code reads at the start of every session. Contains: company name, stack, the design system as a token table, and a list of non-negotiable agent-readiness rules (semantic HTML, one H1 per page, schema markup, a current llms.txt).
The difference from a normal README: a README explains the project to humans. CLAUDE.md instructs the agent working on it, including an explicit "what not to do" section, because that matters as much as the requirements themselves.
The frontend-design skill
A Claude Code skill is a set of instructions the agent loads for a specific kind of task, here: building a new page or component. The skill defines typography, color tokens, motion rules, and concrete component patterns (card radius, button padding, tag styling) in one place.
Without it, a coding agent builds every page with its own interpretation of "looks good" — the tenth landing page stops matching the first. With the skill, every page stays on the same design language, because the rule is written once and referenced afterward instead of reinvented.
Slash commands: /migrate-page & /audit-agent-friendly
/migrate-page <url> crawls one page of your old site via the Playwright MCP server, extracts content and images, decides whether it belongs in a content collection or its own page, and records the old URL for the later redirect. It also asks once: keep the current design exactly, or redesign?
/audit-agent-friendly [path] works through `AGENT_READINESS_CHECKLIST.md` against the actual HTML response (not the rendered browser DOM) and fixes mechanical violations directly — Level 3 (llms.txt, robots.txt) only gets touched after asking, since that affects the whole site.
The prompt library
Not every task deserves its own slash command — for everything else there's `PROMPT_LIBRARY.md`: ready-written prompts for every phase, from "crawl this site and save every page with a `sourceUrl` in the frontmatter" to "compare this page against one that looks right and tell me the actual difference, don't just rebuild it from scratch."
"I want to keep our current visual design, not redesign.
Inspect the actual rendered CSS of [old-site.com] — primary
and accent colors, heading and body fonts, border-radius on
cards/buttons, section spacing — and write them as CSS
variables into src/styles/global.css. Mirror the same values
in CLAUDE.md and the frontend-design skill, so every page you
build afterward matches the existing brand instead of
inventing a new one."How the three guides fit together
The tooling: CLAUDE.md template, design skill, slash commands, prompt library. Clone it and fill in your own brand.
The process: the 6 phases from migration to deployment, with time estimates and the exact sequence. See Build an agent-friendly website with Claude Code.
The why and the standard behind it: semantic HTML, schema markup, llms.txt, MCP, with the data on why it matters for AI visibility. See Agent-Friendly Content.
Suggested order: read the build guide first for the overview, then clone this repo to actually start, and keep the agent-readiness guide open for phase 5.
Frequently asked questions
"Is this a Claude Code plugin I need to install?"
No, it's a plain Git repository. Clone it, open it with Claude Code, and the `.claude/` folder structure (the skill plus slash commands) gets picked up automatically once you're working inside the project.
"Does this work without adopting the Astro starter structure?"
The slash commands and the prompt library are generic enough to copy into an existing project. The Astro starter itself is optional, useful if you're building fresh, not required if you only want the process.
"Do I need to install Playwright separately?"
You need the Playwright MCP server for Claude Code, not Playwright itself as an npm package. One command (`claude mcp add playwright -- npx -y @playwright/mcp@latest`), once, and Claude Code can then open and read pages.
"Is there CegTec branding or credentials in there I need to strip out?"
No. The repo is deliberately neutral: placeholder company, placeholder colors, no real keys or tracking IDs. It's the process, not our branding.
Clone it and go
MIT licensed, working Astro starter included. Fill in CLAUDE.md and start with Phase 1.
Open the repo on GitHubRather have us do it?
We migrate, build and make your website agent-friendly, using exactly this tooling, without you touching a terminal.
Book a free intro call