/how-it-was-built
How this site was built
This site is also a work sample. I built it with Claude Code, using the same agentic workflow I use at work. Here is how it works.
- 01
The goal
A fast, accessible, bilingual site that presents me as a QA engineer, plus a few small working tools. And a repository that shows how I work with AI agents: with clear rules, tests and review, not blind trust.
- 02
Project rules (CLAUDE.md)
A file the agent reads at the start of every session. It describes the architecture, the stack and why it was chosen, and the hard rules: every change ships with a test, every text exists in English and Czech, no new dependency without a reason, accessibility checks must pass, and nothing goes to main without review.
- 03
Two agents, two jobs
An implementer agent builds features and fixes, and must add tests. A separate reviewer agent, which can read but not edit, checks every change against the project rules, analyses risks and reports findings by severity. The author never reviews their own work.
- 04
Skills: repeatable workflows
Slash commands like /new-feature, /fix-bug, /new-tool, /review and /deploy encode the steps for common tasks. A bug fix, for example, always starts with a failing test that reproduces it.
- 05
Hooks: rules that are enforced
Some rules are too important to leave to instructions. Hooks format every edited file, block pushes to main, and run the checks before the agent is allowed to say it’s done.
- 06
Quality gates
Every pull request runs linting, type checks, unit tests (Vitest), a production build, and UI and accessibility tests (Playwright + axe) on desktop and mobile in GitHub Actions. Vercel deploys a preview of every pull request.
Stack
- Astro (static HTML, almost no JavaScript)
- Tailwind CSS
- TypeScript (strict)
- Vitest + Playwright + axe-core
- GitHub Actions + Vercel
- Claude Code