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

verify-keyboard-access

Verify that every interactive control on a page can take keyboard focus and that its primary action fires from the keyboard rather than only the mouse, and say plainly that Tab order cannot be verified today. Use when a component was hand-tested with a mouse, a custom dropdown/modal/combobox was added, or an accessibility report flags an unreachable control.

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

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Reachable is not the same as operable

A <div onClick> styled to look like a button can look reachable (plenty of component libraries hand out tabindex="0" for free) and still do nothing when you press Enter on it. Being able to take focus proves a control is reachable, not that it works.

Reticle can drive both halves in the running app. Not installed? RETICLE_INSTALL_SOURCE=npx_skill npx @reticlehq/server@latest init, then the install-and-verify skill.

Read this before you start: Tab order cannot be verified today

press always goes through a synthetic key event, and a synthetic Tab does not move focus. That is true in every mode, including reticle drive: there is no mode in which an agent can prove focus order. Do not go looking for one, and do not report a Tab-order result as passed or failed. Report it as unknown.

What this skill can prove is narrower: that each control can take focus, and that its primary action fires from the keyboard.

Confirm the session is healthy

Confirm a live session exists for the page and can render and observe:

reticle_session({ action: "list" })

In a disconnected, hidden or throttled tab, a key press can be accepted while timers, rendering and later observation do not advance, so nothing you read back is trustworthy. Get a usable context first, for example a leased tab:

reticle_run({ tool: "reticle_lease", args: { action: "acquire", url } })

Pass refuseWhenThrottled: true on the action so a paused tab fails loudly instead of silently doing nothing. If you cannot get a healthy session, report the run as blocked, not passed, and do not keep retrying against it.

List the controls

List every interactive control before touching the keyboard, or you will only test the ones you already knew about:

reticle_look({ sessionId, action: "page", mode: "interactive" })

Check that each control can take focus

For each control from that list, focus it and assert that it took focus:

reticle_act({ sessionId, ref, action: "focus" })
reticle_assert({
  sessionId,
  predicate: { kind: "element", query: { testid: "the-control" }, state: "focused" },
})

That proves the control can take focus. It does not prove the control sits in the Tab order (tabindex="-1" is focusable but skipped by Tab), so report it as focusable, not Tab-reachable. A <div onClick> with no tabindex will not take focus, and that is a real finding.

Prove the primary action, not just the focus

Focus is a precondition, not the check. Name the consequence, then activate with the keyboard:

reticle_act_and_wait({
  sessionId,
  ref,
  action: "press",
  args: { text: "Enter" },
  until: { kind: "element", query: { testid: "expected-result" } },
})

Buttons and links take Enter. Checkboxes and native <select> take Space, plus arrow keys for the options. A synthetic Enter on a form control does submit its form, so Enter-to-submit is checkable here. A custom-styled combobox is the control most likely to fail: it looks identical to the native one and often only listens for click. Press the key. Do not substitute a click and assume the keyboard would behave the same.

An until can already be true before you act, and then already_true proves nothing about your key press. Check the consequence is absent first. If it is not, reset the app state and start again, or report the result as inconclusive. If the requirement is that text becomes visible, use a predicate that requires visibility, since a hidden element still satisfies a presence check. Load the exact fields with reticle_tools({ names: ["reticle_act_and_wait"] }) rather than guessing.

What to assert

  1. Every control from the initial look can take focus, each proven by a focus action and a state: "focused" assert.
  2. The primary action fires from the keyboard, proven by reticle_act_and_wait({ until }) naming a consequence that was not already true.

Tab order and focus traps are not on this list. Neither can be verified today, so report both as unknown, never as passed.

Honesty

Report each result as verified (Reticle returned a positive verdict for the exact condition), failed, blocked (no healthy session) or unknown. A verdict of verified: "unknown" or verified: "no-fault" is not a pass. unknown means Reticle could not tell what happened. Report either as it is, and never weaken a check to make it pass. Observed evidence is not a verified result, already_true is not proof your action caused the consequence, and a key press that was dispatched but never settled is not a completed interaction.

Finish with the controls found, which of them took focus, the key you pressed and the exact consequence you waited for, the verdict Reticle returned, that Tab order is unknown, and any throttling or timeout that limits the result.


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

리뷰

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

댓글

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

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

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

0 / 1,000자

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

같은 저장소의 스킬

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.3천2026년 10월 21일 업데이트

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.3천2026년 10월 21일 업데이트

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.3천2026년 10월 21일 업데이트

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.3천2026년 10월 21일 업데이트

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.3천2026년 10월 21일 업데이트

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.3천2026년 10월 21일 업데이트

reticlehq의 스킬 모두 보기

이 스킬의 문제 신고