/how-it-was-built
Jak vznikl tento web
Tento web je zároveň ukázkou práce. Postavil jsem ho v Claude Code stejným agentním workflow, jaké používám v práci. Takhle to funguje.
- 01
Cíl
Rychlý, přístupný, dvojjazyčný web, který mě představí jako QA engineera, plus pár malých funkčních nástrojů. A repozitář, který ukazuje, jak pracuji s AI agenty: s jasnými pravidly, testy a review, ne se slepou důvěrou.
- 02
Pravidla projektu (CLAUDE.md)
Soubor, který si agent přečte na začátku každé session. Popisuje architekturu, zvolené technologie i důvody jejich volby a pevná pravidla: každá změna má test, každý text existuje anglicky i česky, žádná nová závislost bez důvodu, kontroly přístupnosti musí projít a nic nejde do main bez review.
- 03
Dva agenti, dvě role
Agent pro implementaci staví funkce a opravy a musí k nim přidat testy. Samostatný agent pro review, který smí číst, ale ne upravovat, kontroluje každou změnu proti pravidlům projektu, analyzuje rizika a hlásí nálezy podle závažnosti. Autor nikdy nereviewuje vlastní práci.
- 04
Skills: opakovatelné postupy
Příkazy jako /new-feature, /fix-bug, /new-tool, /review a /deploy popisují kroky běžných úkolů. Oprava chyby například vždy začíná padajícím testem, který chybu reprodukuje.
- 05
Hooks: vynucená pravidla
Některá pravidla jsou příliš důležitá na to, aby zůstala jen v instrukcích. Hooky naformátují každý upravený soubor, zablokují push do main a spustí kontroly dřív, než agent smí říct, že je hotovo.
- 06
Kontroly kvality
Každý pull request v GitHub Actions spustí linting, kontrolu typů, unit testy (Vitest), produkční build a UI testy včetně přístupnosti (Playwright + axe) na desktopu i mobilu. Vercel nasadí náhled každého pull requestu.
Technologie
- Astro (statické HTML, téměř bez JavaScriptu)
- Tailwind CSS
- TypeScript (strict)
- Vitest + Playwright + axe-core
- GitHub Actions + Vercel
- Claude Code