Kalokoby

Všichni průvodci › Podle použití

Podle použití

Knihovna obrazovek: každá obrazovka každého flow na jednom místě

Nejnovější screenshot každého kroku ze všech vašich flow v jedné galerii. Hledejte podle názvu, textu, adresy nebo id kroku, než začnete navrhovat obrazovku, která už existuje.

Designérka se ptá, jestli už aplikace má prázdný stav košíku. Někdo si vzpomíná, že ho viděl, v nějakém běhu, v nějakém projektu. Knihovna obrazovek odpoví za vteřinu, i se screenshotem a odkazem na krok.

Co nás pálí

Obrazovky se zachytávají v bězích a běhy jsou seřazené podle scénáře a data. Kdo hledá vzor, musí vědět, kde se procházel. Týmy proto znovu kreslí dialogy a prázdné stavy, které už existují, pokaždé trochu jinak.

Co se změní s Kalokem

/<org>/screens na kaloko.app ukáže nejnovější záchyt každého kroku ze všech flow organizace, jednu dlaždici na krok. Vyhledávání prochází názvy kroků a flow, id, cesty, adresy, titulek stránky i nadpis H1 a nevadí mu chybějící diakritika. Filtry zúží výběr na projekt, produkt, modul, jazyk, viewport, zařízení, stav nebo prostředí. Je v každém plánu.

Jak to funguje

  1. Otevřete knihovnu

    Obrazovky v horní navigaci kaloko.app, nebo /<org>/screens.

  2. Hledejte

    napište „prázdný košík“, „kosik“ nebo část adresy; filtrujte podle projektu, jazyka nebo stavu (fail ukáže obrazovky, které jsou rozbité právě teď).

  3. Otevřete krok

    každá dlaždice vede na krok na plachtě jeho běhu, v jazyce a viewportu, které jste vybrali.

  4. Z terminálu

    kaloko screens "prázdný košík" --project shop --locale cs vypíše totéž i s odkazem na plachtu; --designs přidá verze návrhů, --json to předá agentovi. Agenti přes MCP volají search_screens.

Skilly a prompty

Než navrhneš prázdný košík, podívej se do knihovny obrazovek v Kaloku, jaké prázdné stavy už máme, a drž se jejich vzoru.

Očekávaný výsledek: agent spustí kaloko screens "prázdný" --designs, vyjmenuje nalezené obrazovky s odkazy a řekne, kterou se řídí.

Které obrazovky e-shopu jsou teď rozbité?

Očekávaný výsledek: kaloko screens --project shop --status fail s každým krokem a jeho odkazem.

Co dostanete

Otázky

Ukazuje i staré běhy?

Ne. U každého kroku je jeho nejnovější záchyt. Starší záchyty zůstávají v bězích a jejich historii.

Kdo vidí které obrazovky?

Každý vidí obrazovky projektů, které smí otevřít; omezené projekty zůstanou omezené.

Další průvodci

Akceptace tasku s AI agentem přímo v pull requestuRegrese před releasem: porovnání běhu s přijatým referenčním běhemSEO a kontrola landing pages na produkci, jen pro čtení, každý denE‑mailové flow: zachyťte zprávu vedle obrazovky, která ji poslala

Nainstalujte jednou, pak pracujte přes agenta

Kaloko běží tam, kde je váš kód a váš agent. Služba výsledky ukládá a verzuje, zobrazuje plachtu a sbírá schválení.

  1. Přidejte CLI do projektu
    npm install --save-dev kaloko

    Potřebuje Node 20 nebo novější. Aktualizace později přes npm update kaloko.

  2. Vytvořte konfiguraci a nainstalujte skill
    npx kaloko init --agent claude --org <your-org>

    Skill se zkopíruje do .claude/skills/kaloko. npx kaloko doctor ověří Chrome, konfiguraci a token.

  3. Založte organizaci a vytvořte token

    Založte organizaci, stanete se jejím adminem. Úvodní stránka nabídne token s rolí tester jedním kliknutím, později ho najdete v Nastavení → API tokeny. Uložte ho do .env projektu:

    KALOKO_TOKEN=qwk_…
    TYPESAFE_API_KEY=…   # optional: semantic evaluator

Pak už jen zadávejte agentovi

Skill naučí vašeho agenta celou smyčku: z úkolu napíše akceptační plán a scénář, projde obrazovky, vyhodnotí je, nasdílí plachtu, přečte si připomínky a opraví je. Příkazy psát nemusíte, vy jen projdete plachtu.

Co agent spouští (nebo spusťte sami, třeba v CI)

Stejná smyčka ručně:

npx kaloko start --scenario docs/tasks/TASK-123/qa/scenario.yml --env local
npx kaloko walk        # playwright steps; agent/manual steps: kaloko capture
npx kaloko evaluate
npx kaloko share --pr
npx kaloko feedback    # what reviewers said, with ids to answer