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

verify-form-validation

Check that a form actually rejects bad input: the error message renders, the submit button stays disabled, and no request goes out. Use when validation logic was written but never driven, when a "required" or pattern check looks right on screen but was never proven, or when a bug report says the form submitted invalid data anyway.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md6.1 KB

SKILL.md(原文)

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

A rejected form still looks fine on screen

Validation code is written once, glanced at in the browser with one obviously-bad value, and never driven again. The bug that ships is never the value you tried. It's the one you didn't: a submit button that isn't disabled until the field blurs, a button that's disabled only by CSS and still clickable, or a handler that fires the request before the check finishes.

Reticle can drive the real form and check all three failure points at once. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.

Read this before you start: the browser's own validation can mask the app's

required, pattern, type="email" and friends stop the browser at the constraint-validation bubble before your app's JS ever runs. If you assert on that native tooltip, you've verified the browser, not the code you're supposed to be testing. Confirm the error you're checking is the app's own element (a testid, a role, a rendered string), not a :invalid pseudo-state, before you trust the verdict. If the form relies on native validation alone with no app-level check behind it, that's the finding: say so, don't paper over it with a predicate that happens to pass.

Trigger the rejection

Name the consequence before you act, same as any Reticle drive:

reticle_look({ action: "page", sessionId, mode: "interactive" })   // get refs for the field and submit control

reticle_act_and_wait({ sessionId, ref, action: "fill", args: { value: "<invalid>" }, until: { kind: "allOf", predicates: [
  { kind: "element", query: { testid: "field-error" } },
  { kind: "element", query: { role: "button", name: "Submit" }, state: "disabled" },
]}})

If the check runs on blur rather than on keystroke, move focus to a different control as its own step before asserting: reticle_act({ sessionId, ref: otherRef, action: "focus" }) on the submit button or the next field, since focusing anything else is what fires the blur you need. If it's debounced instead, don't sleep for it. Use reticle_run({ tool: "reticle_clock", args: { sessionId, advanceMs } }) to advance past the debounce window exactly as in test-error-states. A fixed sleep passes on your machine and flakes in CI.

Prove nothing fired

The button looking disabled is not the same claim as the request never leaving. Don't just trust the disabled state you already asserted. Try the submit anyway, so a fake-disabled control (CSS-only, still clickable) gets caught instead of waved through:

reticle_act({ sessionId, ref: submitRef, action: "click" })

Then assert the negative. Checking count: 0 the instant after the click proves nothing on its own: the request may simply not have been sent yet. Give the app a real window to have tried before you trust the absence, settling first and then checking the count, in one call:

reticle_assert({ sessionId, since, timeout_ms: 3000, predicate: { kind: "allOf", predicates: [
  { kind: "settled" },
  { kind: "net", method: "POST", urlContains: "/api/...", count: 0 },
]}})

The timeout_ms is what makes this a wait instead of a snapshot: reticle_assert defaults to timeout_ms: 0, one evaluation at the instant you call it, so without it settled is just checked once right after the click and proves nothing about whether the app was actually idle. With timeout_ms: 3000, the call keeps polling for up to three seconds until the page genuinely goes quiet. Only once it has settled does a count: 0 reading mean anything. Use since from the click's own result, not from the earlier fill, so you're scoped to requests after the submit attempt specifically.

Clear the error

Correct the value and confirm the rejection was conditional, not permanent:

reticle_act_and_wait({ sessionId, ref, action: "fill", args: { value: "<valid>" }, until: { kind: "allOf", predicates: [
  { kind: "element", query: { testid: "field-error" }, absent: true },
  { kind: "element", query: { role: "button", name: "Submit" }, state: "enabled" },
]}})

A form that never re-enables once it has rejected something once is a second bug wearing the first one's clothes.

What to assert

Only verified: "yes" is a pass. "no" is a real finding, "unknown" means Reticle couldn't tell and needs a better capture, and "no-fault" means nothing was disproven but nothing was declared either. None of the three are evidence the form rejects bad input.

  1. The error is the app's own, not the browser's native bubble.
  2. The submit control's disabled state is real, not opacity/cursor styling that only looks inert. This is the same distinction design-system-compliance draws between disabled-looking and disabled.
  3. Zero matching requests fired, counted, not inferred from "no error was thrown."
  4. The rejection is conditional: a valid value clears the error and re-enables submit.

Honesty

A verdict here is about this field and this invalid value, not the whole form. A required-field check tells you nothing about a pattern check on a different field. If you only drove one input, say which one, and say the rest of the form is unverified rather than letting a single pass read as "the form validates."


Capability reference: curl https://docs.reticle.sh/capabilities.md. Everything else: curl https://docs.reticle.sh/llms.txt.

レビュー

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

同じリポジトリのスキル

概要と使いどころ

Test-driven development for behaviour a unit test cannot reach, by writing the expectation against the running app before writing the code. Declare the consequence first, watch it fail, implement, watch it pass. Use when building a user-facing feature, when the user asks for TDD on UI or full-stack work, when a unit test cannot express the outcome that matters, or when you want a red-green loop that runs against the real app instead of mocks.

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

reticlehq/reticle1,2112026年10月12日 更新

Sweep a whole running web app for what is broken, without writing a script or knowing the codebase. Clicks every reachable control and reports dead buttons, console errors, failed requests, and places where the API and the screen disagree. Use on an unfamiliar codebase, before a release, after a big merge or dependency bump, when the user asks for a smoke test or a health check, or when someone says "just check everything still works".

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

reticlehq/reticle1,2112026年10月12日 更新

Find out why something in a running web app does not work, when the console is empty and the code looks correct. Reads the click, the request, the store and the console together and returns the file:line to open. Use when a button does nothing, a form will not submit, data will not load, a page renders blank or stale, a modal will not close, or the user says "it's broken" and the code review says it is fine.

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

reticlehq/reticle1,2112026年10月12日 更新

Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.

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

reticlehq/reticle1,2112026年10月12日 更新

Drive and verify an Electron or Tauri desktop app from the inside, including the main-process and Rust IPC calls a browser tool cannot see. Use when a desktop app needs testing, when a feature works in the browser but not in the packaged app, when an IPC or invoke call needs proving, when a desktop screenshot or visual diff is wanted, or when you need a headless run of a desktop UI in CI.

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

reticlehq/reticle1,2112026年10月12日 更新

Find out why the tests pass but the app is broken. Catches false greens: a green suite over a feature that does not work, a mocked API standing in for a real one, an assertion that holds no matter what the app does, a click handler wired to nothing. Use when the suite is green and the user says it is broken, when a test never fails, when coverage looks fine but bugs still ship, or before trusting a passing run you did not watch.

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

reticlehq/reticle1,2112026年10月12日 更新

reticlehq のスキルをすべて見る

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