本文へ移動
cccskills
無料GitHub で公開

playwright

Look at Kiln's UI in a real browser, and run its end-to-end tests. Use when checking UI you are changing, taking a screenshot of the app, driving the app with playwright-cli, starting the dev sandbox with playwright_server.sh, running or debugging `npm run tests:e2e`, or working with the seeded fixture project that gives the app's screens data to render.

インストール方法を見る

含まれるファイル(6)

  • SKILL.md4.9 KB
  • references/driving_the_ui.md7.5 KB
  • references/e2e_suite.md2.2 KB
  • references/extending_the_fixture.md3.2 KB
  • references/search_tool.md1.9 KB
  • references/seeded_project.md4.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Using Playwright with Kiln

Two separate things share one browser install:

  • playwright-cli — a browser you drive from the shell, for looking at the UI you are changing and taking screenshots of it. This is what you want when building UI.
  • npm run tests:e2e — the end-to-end suite, in app/web_ui/tests/e2e.

If neither works, the install is probably missing: bash .config/utils/setup_env.sh --add-playwright adds the browser and playwright-cli (~800 MB together). See that script's --help for what a cloud environment needs.

Looking at the UI

Start a server, open the app, and land on a page with data in it:

.agents/scripts/playwright_server.sh start     # prints http://localhost:6544

start prints the next three commands with the seeded ids already filled in. Run all three, in that order — the app redirects to a task picker without the localStorage state, whatever URL you ask for:

playwright-cli open http://localhost:6544
playwright-cli localstorage-set ui_state \
  '{"current_project_id":"<id>","current_task_id":"<id>","selected_model":null}'
playwright-cli goto http://localhost:6544

Then goto any deep link you like. Run .agents/scripts/playwright_server.sh status if you are not sure the server is running.

When you are done, close the browser and stop the server:

playwright-cli close
.agents/scripts/playwright_server.sh stop

The sandbox keeps its data in app/web_ui/.agent_dev_home and is seeded from a committed fixture project, so the screens have content instead of an onboarding wizard. It never touches real Kiln projects.

A provider may be connected — spend it carefully

If OPENROUTER_QA_KEY is set in the environment, seeding writes it into the sandbox's settings and the app comes up with OpenRouter connected, so live model calls work. start reports it when it is there — assume nothing is connected until it says so.

When it is connected, it is a real key on a hard, low limit — a runaway loop hits it and the next person gets nothing. Use it when a live call is the only way to check what you are working on, and:

  • Default to GPT-5.6 Luna. The ui_state hint start prints already preselects it in the model dropdown, so running as-is costs you nothing and picks the cheap model. Change it only when the model itself is what you are testing.
  • Keep every run minimal — one sample, one eval row, one query.
  • Never aim a paid test suite at it (pytest --runpaid / --runprerelease read OPENROUTER_API_KEY, which is deliberately a different variable).
  • Treat a 402 or 429 as budget exhausted: stop and report it, don't retry.

references/seeded_project.md has the details.

Three rules that will cost you an afternoon otherwise

Never trust the first frame. A screenshot taken right after open or goto is very often blank white, and nothing says so. snapshot is not a usable gate — the DOM is complete before Chromium paints. Settle the page first:

playwright-cli run-code "async page => await page.waitForLoadState('networkidle')"
playwright-cli screenshot --filename=/tmp/ui.png

Never redirect a playwright-cli failure into /dev/null. It reports failures on stdout and exits 1, so >/dev/null 2>&1 — the thing you add to keep a transcript readable — hides the entire reason a command failed. Discard output if you must, but then test $?.

Never guess a locator's role. Kiln styles links as buttons. Run find first and write the locator from what it reports — and prefer clicking the ref it gives you, which is a single element by construction and cannot go strict-mode ambiguous.

Reference

Load only what the task needs.

FileWhen
references/driving_the_ui.mdThe command surface, and the locator traps in Kiln's UI specifically — duplicate labels, dropdowns, collapsed sections
references/e2e_suite.mdRunning, reading, or debugging npm run tests:e2e
references/seeded_project.mdWhat the fixture contains, screen by screen, and whether a model provider is connected. Check here before concluding a screen is broken because it came up empty
references/search_tool.mdThe Docs & Search / RAG part of the fixture, and what a sandbox with no API key can still do with it
references/extending_the_fixture.mdreset and snapshot — changing what future sessions start from

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Add new AI models to Kiln's ml_model_list.py and produce a Discord announcement. Use when the user wants to add, integrate, or register a new LLM model (e.g. Claude, GPT, DeepSeek, Gemini, Kimi, Qwen, Grok) into the Kiln model list, mentions adding a model to ml_model_list.py, asks to discover/find new models that are available but not yet in Kiln, or wants to add a net-new AI provider to Kiln.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

docs-sync

無料

Find and fix the docs and agent guidance that a branch makes stale - agent skills and their reference files, AGENTS.md and .agents/*.md prompts, READMEs, docs/ folders, and code-adjacent docs that name a changed path, command, symbol, env var, setting, endpoint or behaviour. Use before opening a PR, before pushing new commits to an open PR, and when asked to update docs or skills after a change. The open-pr skill runs it every time.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

When a ticket must go to a human before any reply is sent, and how the first reply should read. Use when drafting a customer reply or setting needs_human_review.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

Check Kiln's model list for deprecated or sunset models across all providers. Use when the user wants to find deprecated models, check model availability, audit the model list for stale entries, or mentions model deprecation/sunset/end-of-life.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

Check Kiln's fine-tunable model list for deprecated or unsupported base models. Use when the user wants to audit fine-tuning support, check if fine-tune base models are still valid, or mentions fine-tune model deprecation.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

Kiln's code conventions and per-area gotchas, plus a diff gate that enforces the mechanical ones. Invoke before writing or changing any Python, TypeScript or Svelte code in the Kiln repo (libs/core, libs/server, app/desktop, app/web_ui), and when reviewing such a change. Covers comments, startup and entry points, globals and module state, config reads, module layering, library-vs-app rules and async I/O.

日本語の概要は準備中です。原文の説明を表示しています。

Kiln-AI/Kiln5,1912026年10月11日 更新

Kiln-AI のスキルをすべて見る

このスキルの問題を報告する