본문으로 건너뛰기
cccskills
무료GitHub에 공개

playwright

Inspect Kiln’s interface in a real browser, capture screenshots, and run or debug end-to-end tests that check complete user flows. A sandbox with sample project data provides populated screens for checking UI changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

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.

연동 도구Playwright
설치 방법 보기

이럴 때 유용합니다

  • Checking the appearance and behavior of a changed screen
  • Capturing screenshots of Kiln
  • Running or debugging the existing end-to-end test suite
  • Inspecting screens populated with sample project data

포함된 파일(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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Add AI models to Kiln or find available models missing from its list. The skill checks provider model identifiers and capabilities, updates model settings, runs tests against real APIs, and drafts a Discord announcement.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Adding a newly released model to Kiln
  • Finding available models missing from Kiln
  • Checking provider support for recently added models
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

docs-sync

무료

Find documentation and agent instructions made outdated by a branch’s code changes. Update affected paths, commands, settings, and behavior descriptions in place, then commit the documentation fixes alongside the code in the same pull request.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Update documentation before opening a pull request
  • Review documentation before pushing more commits to an open pull request
  • Fix references after renaming scripts or public functions
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

Draft first replies to customers and identify tickets that require human review before sending. The skill defines sensitive cases to escalate and guides replies that explain the next action, name who handles it, and match the customer's tone.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Drafting a first reply to a customer
  • Identifying tickets that need human review
  • Explaining next steps and who handles them
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

Audit Kiln’s model list against provider APIs and catalogs to identify removed models and upcoming retirements. Get findings organized by provider, then mark affected entries as deprecated after reviewing and approving the proposed changes.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Audit Kiln’s model list for retired entries
  • Identify models approaching their retirement dates
  • Check model availability for a single provider
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

Check whether Kiln’s base models still support fine-tuning, the process of adapting a model with additional training. Compare configured identifiers and Fireworks’ allowlist with provider information, then report unsupported entries and recommend specific updates.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Audit support for fine-tuning base models in Kiln
  • Check whether configured fine-tuning identifiers remain valid
  • Find stale entries in the Fireworks allowlist
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

Apply Kiln’s coding rules when editing or reviewing Python, TypeScript, and Svelte. The skill combines area-specific guidance with a script that checks changed lines, plus manual checks for architecture, configuration handling, shared state, and asynchronous operations.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Checking coding rules before changing Kiln
  • Checking uncommitted changes for convention violations
  • Reviewing a branch or pull request against shared rules
Kiln-AI/Kiln5.2천2026년 10월 22일 업데이트

Kiln-AI의 스킬 모두 보기

이 스킬의 문제 신고