Agent skill

Verify UI

by saberzero1 in saberzero1/quartz-syncer

UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade.

MITAuto-check passedMobile

Install Verify UI

skills CLI
$ npx skills add saberzero1/quartz-syncer --skill verify-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install saberzero1/quartz-syncer verify-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/saberzero1/quartz-syncer.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/verify-ui .claude/skills/verify-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
verify-ui
GitHub stars
140
Token cost
~2.3k tokens
SKILL.md length
543 words
Files
1
Skills in repo
4
Repo updated
First seen
Licence
MIT

At a glance

UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade.

  • Tasks that involve Mobile testing and debugging
  • SKILL.md covers Purpose, Prerequisites, When to Activate and Important: Interaction Patterns, plus 4 more sections
  • Calls npm; reaches github.com

What it does

Verify UI is an agent skill from saberzero1/quartz-syncer. UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Mobile testing and debugging. It works with Obsidian. The repository describes itself as: Manage and publish your notes to Quartz, the fast, batteries-included static-site generator. The licence is MIT.

When your agent uses it

  • Tasks that involve Mobile testing and debugging

Example prompts

  • “/verify-ui”

What it can do on your machine

Read from SKILL.md and the folder at commit 8f04c08. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Verify UI loads about 2.3k tokens when it runs. Until then it costs about 43 tokens; SKILL.md has 543 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~43
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from saberzero1/quartz-syncer at commit 8f04c08, republished under its MIT licence (© saberzero1). 543 words, ~2,278 tokens.

Download SKILL.mdSave it as .claude/skills/verify-ui/SKILL.md (or your agent's skills folder).
name
verify-ui
description
UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade.
triggers
verify ui, check ui, test modal, does it render, publication center, onboarding wizard, quartz hub, settings tab
argument-hint
<modal-name>

Verify UI Skill

Purpose

After modifying view code (PublicationCenter, OnboardingWizard, QuartzHub, DiffModal, StatusBar, settings), verify the UI renders correctly by querying DOM contract selectors, interacting with inputs, and taking screenshots.

Prerequisites

  • Obsidian must be running with the test vault open.
  • Plugin must be built with npm run build:dev (copies to test vault, enables facade via __DEV__ flag).
  • Facade must be available (obsidian eval code="typeof window.__QS__" 2>/dev/null returns => object).
  • Console capture requires obsidian dev:debug on 2>/dev/null (once per session).

When to Activate

Activate when:

  • Changes were made to files in src/views/
  • CSS changes in styles.css that affect plugin UI
  • TreeRenderer, TreeState, or PublicationTree changes
  • Settings tab or declarative settings changes
  • Quartz Hub changes

Important: Interaction Patterns

Suppress CLI noise. Always append 2>/dev/null to every obsidian CLI command.

Async eval pattern. Use IIFE + console.log for async calls:

bash
obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'pub.open'});console.log(JSON.stringify(r))})()" 2>/dev/null

Missing eval output is not failure. obsidian eval only captures what is logged within ~5–15 ms. Modal-opening actions frequently outlast that — pub.open prints {"success":true} on a warm status and prints nothing on a cold tree. The DOM query that follows is the real check, which is why every workflow below pairs an action with a dev:dom assertion.

Setting input values. DOM .value assignment does NOT trigger event listeners. Always dispatch an input event:

bash
obsidian eval code="const el=document.querySelector('[data-qs=\"hub-setup-clone-url\"]');el.value='https://example.com/repo.git';el.dispatchEvent(new Event('input',{bubbles:true}))" 2>/dev/null

Wait after operations. Approximate wait times:

  • Modal open: 2 seconds
  • Button click with async effect: 3-5 seconds
  • Build/install commands: 10-60 seconds
  • Plugin reload: 3 seconds

Verify actions took effect. After triggering an action, always query the DOM to confirm:

bash
obsidian eval code="document.querySelector('[data-qs=\"hub-action\"][data-qs-value=\"build\"]')?.click()" 2>/dev/null
sleep 3 && obsidian dev:dom selector='.qs-terminal-output' total 2>/dev/null

Stacked modals. When a modal opens another (e.g., Hub → Plugin Browser), close in reverse order:

bash
# Close Plugin Browser first (topmost)
obsidian eval code="document.querySelector('.quartz-syncer-plugin-browser .modal-close-button')?.click()" 2>/dev/null
sleep 1
# Then close the Hub
obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'hub.close'});console.log(JSON.stringify(r))})()" 2>/dev/null

TerminalOutputModal. Has no data-qs attributes. Close with:

bash
obsidian eval code="document.querySelector('.qs-terminal-output .qs-terminal-output-actions button:last-child')?.click()" 2>/dev/null
Show full SKILL.md (274 more words)Show less

DOM Contract Reference

All queryable elements use data-qs attributes. Never use raw CSS classes for verification.

SelectorElement
[data-qs="pub-center"]Publication center modal
[data-qs="pub-row"]File row (has data-qs-path)
[data-qs="pub-checkbox"]Checkbox (has data-qs-path or data-qs-category)
[data-qs="pub-category"]Category header (has data-qs-value)
[data-qs="pub-tab"]Tab button (has data-qs-value)
[data-qs="pub-publish-btn"]Publish button
[data-qs="pub-delete-btn"]Delete button
[data-qs="pub-search"]Filter input
[data-qs="pub-progress"]Progress bar
[data-qs="wizard"]Onboarding wizard
[data-qs="wizard-step"]Step indicator (has data-qs-value)
[data-qs="wizard-next"]Next/continue button
[data-qs="wizard-input"]Input field (has data-qs-field)
[data-qs="wizard-error"]Error display
[data-qs="statusbar"]Status bar (has data-qs-state)
[data-qs="diff-view"]Diff viewer
[data-qs="hub"]Quartz Hub modal
[data-qs="hub-tab"]Hub tab button (has data-qs-value)
[data-qs="hub-status"]Hub status panel
[data-qs="hub-action"]Hub action button (has data-qs-value)
[data-qs="hub-setup-link-path"]Hub setup link path input
[data-qs="hub-setup-link"]Hub setup link button
[data-qs="hub-setup-clone-url"]Hub setup clone URL input
[data-qs="hub-setup-clone-dest"]Hub setup clone destination input
[data-qs="hub-setup-clone"]Hub setup clone button

Workflow

Verifying the Publication Center
bash
obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'pub.open'});console.log(JSON.stringify(r))})()" 2>/dev/null
sleep 2

obsidian dev:dom selector='[data-qs="pub-center"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="pub-row"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="pub-category"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="pub-publish-btn"]' text 2>/dev/null
obsidian dev:dom selector='[data-qs="pub-tab"]' total 2>/dev/null

obsidian dev:screenshot path=/tmp/pub-center.png 2>/dev/null

obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'pub.close'});console.log(JSON.stringify(r))})()" 2>/dev/null
Verifying the Quartz Hub
bash
obsidian command id=quartz-syncer:open-hub 2>/dev/null
sleep 2

obsidian dev:dom selector='[data-qs="hub"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="hub-tab"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="hub-status"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="hub-action"]' total 2>/dev/null

obsidian dev:screenshot path=/tmp/hub.png 2>/dev/null

# Switch to Setup tab
obsidian eval code="document.querySelector('[data-qs=\"hub-tab\"][data-qs-value=\"setup\"]')?.click()" 2>/dev/null
sleep 1
obsidian dev:dom selector='[data-qs="hub-setup-link"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="hub-setup-clone"]' total 2>/dev/null

obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'hub.close'});console.log(JSON.stringify(r))})()" 2>/dev/null
bash
obsidian command id=quartz-syncer:open-hub 2>/dev/null
sleep 2
obsidian eval code="document.querySelector('[data-qs=\"hub-tab\"][data-qs-value=\"setup\"]')?.click()" 2>/dev/null
sleep 1

# Set path and trigger validation
obsidian eval code="const el=document.querySelector('[data-qs=\"hub-setup-link-path\"]');el.value='/path/to/quartz';el.dispatchEvent(new Event('input',{bubbles:true}))" 2>/dev/null
sleep 1

obsidian dev:screenshot path=/tmp/hub-link.png 2>/dev/null
# Check validation showed "Quartz repo detected" before clicking Link
obsidian eval code="document.querySelector('[data-qs=\"hub-setup-link\"]')?.click()" 2>/dev/null
bash
obsidian eval code="(async()=>{const r=await window.__QS__.act({name:'hub.setup.clone',params:{url:'https://github.com/user/quartz.git',dest:'/path/to/dest',confirm:true}});console.log(JSON.stringify(r))})()" 2>/dev/null
Verifying the Onboarding Wizard
bash
obsidian command id=quartz-syncer:setup-wizard 2>/dev/null
sleep 2

obsidian dev:dom selector='[data-qs="wizard"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="wizard-step"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="wizard-input"]' total 2>/dev/null
obsidian dev:dom selector='[data-qs="wizard-next"]' text 2>/dev/null
obsidian dev:dom selector='[data-qs="wizard-error"]' total 2>/dev/null

obsidian dev:screenshot path=/tmp/wizard.png 2>/dev/null
Verifying the Status Bar
bash
obsidian dev:dom selector='[data-qs="statusbar"]' attr=data-qs-state 2>/dev/null

MUST DO

  • Always use [data-qs="..."] selectors — never raw CSS classes.
  • Always append 2>/dev/null to all CLI commands.
  • Always wait after opening modals (2s) and clicking buttons (3-5s).
  • Always verify element exists (total) before querying content (text, attr).
  • Always use dispatchEvent after setting input .value.
  • Always take screenshots for visual changes.
  • Always use the IIFE pattern for async eval calls.

MUST NOT DO

  • Do NOT use CSS class selectors for verification — exception: TerminalOutputModal (.qs-terminal-output) which lacks data-qs.
  • Do NOT omit 2>/dev/null — GTK warnings break output parsing.
  • Do NOT use top-level await in eval — use the IIFE pattern.
  • Do NOT set .value without dispatchEvent — event listeners won't fire.
  • Do NOT assume element counts — always query first.

© saberzero1, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/verify-ui of saberzero1/quartz-syncer.

Open the folder on GitHubat commit 8f04c08

Compare with similar skills

Verify UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Verify UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Verify UI this skillsaberzero1/quartz-syncer140—~2.3kAutomated safety check: PassMIT
Phone HarnessShawnPana/phone-harness3.2k—~4.3kAutomated safety check: PassMIT
Maa Issue Log AnalysisMaaAssistantArknights/MaaAssistantArknights24k—~4kAutomated safety check: PassAGPL-3.0
Mobile QAtloncorp/tlon-apps107—~2.4kAutomated safety check: PassMIT
Store Listing Screenshotstherxmv/Telegram-Themer119—~2.5kAutomated safety check: PassNone
Maestro ImproveReinaMacCredy/maestro233—~1.9kAutomated safety check: PassMIT

Similar skills

  • Phone Harness

    ShawnPana/phone-harness

    Control the user's phone — an iPhone through the Mac's iPhone Mirroring window, an Android over adb, or a rented cloud Android: open apps, tap, type, swipe, read the screen.

    3.2k GitHub stars~4.3k tokensUpdated 10 days ago
    MobileAuto-check passed
  • Maa Issue Log Analysis

    MaaAssistantArknights/MaaAssistantArknights

    分析 MaaAssistantArknights 上游仓库公开 Issue(https://github.com/MaaAssistantArknights/MaaAssistantArknights/issues/...

    24k GitHub stars~4k tokensUpdated today
    MobileAuto-check passed
  • Mobile QA

    tloncorp/tlon-apps

    Run a mobile QA checklist on a physical Android device over adb for tlon-apps, then triage what fails into fixes.

    107 GitHub stars~2.4k tokensUpdated today
    MobileAuto-check passed
  • Store Listing Screenshots

    therxmv/Telegram-Themer

    Generate TelegramThemer's Play Store listing images — capture the 8 required app screenshots on a running emulator/device by driving the real UI with adb, then composite them into the final…

    119 GitHub stars~2.5k tokensUpdated 26 days ago
    MobileAuto-check passed
  • Maestro Improve

    ReinaMacCredy/maestro

    Turn filed lessons into the smallest doctrine edit. An agent skill from ReinaMacCredy/maestro.

    233 GitHub stars~1.9k tokensUpdated 10 days ago
    MobileAuto-check passed
  • Android

    yang1ming/android-harness

    Direct Android device control through ADB. An agent skill from yang1ming/android-harness.

    176 GitHub stars~259 tokensUpdated 2 mo ago
    MobileAuto-check passed

More from saberzero1/quartz-syncer

  • Debug Obsidian

    saberzero1/quartz-syncer

    Debug and investigate plugin issues in a running Obsidian instance — collect diagnostic data, inspect state, trace events, and identify root causes via the operability facade.

    140 GitHub stars~1.9k tokensUpdated 7 days ago
    Auto-check passed
  • Verify Changes

    saberzero1/quartz-syncer

    Post-change verification workflow — build, reload plugin in Obsidian, run health checks, and verify no regressions via the operability facade.

    140 GitHub stars~2.1k tokensUpdated 7 days ago
    Auto-check passed
  • Verify Publish

    saberzero1/quartz-syncer

    End-to-end publish verification — refresh status, publish files, verify the result, and confirm status changes via the operability facade.

    140 GitHub stars~1.6k tokensUpdated 7 days ago
    Auto-check passed

Works with

Categories

Questions about Verify UI

What does Verify UI do?

UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade. Verify UI is an agent skill from saberzero1/quartz-syncer. UI verification workflow — open modals, query DOM contract selectors, interact with inputs, take screenshots, and validate UI rendering via the operability facade.

When should I use Verify UI?

Verify UI fits situations like: tasks that involve Mobile testing and debugging.

How do I install Verify UI in Claude Code?

Run `npx skills add saberzero1/quartz-syncer --skill verify-ui -a claude-code`. Or copy the skill folder (.agents/skills/verify-ui in saberzero1/quartz-syncer) into .claude/skills/verify-ui in your project. Claude Code loads it when a task matches its description.

How do I install Verify UI in Codex?

Run `npx skills add saberzero1/quartz-syncer --skill verify-ui -a codex`. Or copy the skill folder (.agents/skills/verify-ui in saberzero1/quartz-syncer) into .agents/skills/verify-ui in your project. Codex loads it when a task matches its description.

Can I use Verify UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add saberzero1/quartz-syncer --skill verify-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/verify-ui, .gemini/skills/verify-ui, .github/skills/verify-ui and .opencode/skills/verify-ui in your project.

What does Verify UI need to run?

Going by SKILL.md and its folder, Verify UI needs the command-line tools its instructions call (npm).

Does Verify UI access the network?

SKILL.md names 1 domain. In commands or code: github.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Verify UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Verify UI use?

Verify UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Verify UI use?

About 2.3k tokens (SKILL.md is roughly 9.1k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Verify UI?

Skills that share tags, products or a category with Verify UI: Phone Harness (ShawnPana/phone-harness, 3.2k stars), Maa Issue Log Analysis (MaaAssistantArknights/MaaAssistantArknights, 24k stars), Mobile QA (tloncorp/tlon-apps, 107 stars) and Store Listing Screenshots (therxmv/Telegram-Themer, 119 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Verify UI?

saberzero1 (a GitHub user) maintains it in saberzero1/quartz-syncer, which has 140 GitHub stars. The repository holds 4 skills in this directory. The repository was last updated on September 30, 2026.

Source: saberzero1/quartz-syncer on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.