Agent skill

Docs Screenshots Review

by vfarcic in vfarcic/dot-agent-deck

Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then…

MITAuto-check passedDevelopment

Install Docs Screenshots Review

skills CLI
$ npx skills add vfarcic/dot-agent-deck --skill docs-screenshots-review -a claude-code

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

GitHub CLI
$ gh skill install vfarcic/dot-agent-deck docs-screenshots-review --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/vfarcic/dot-agent-deck.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/docs-screenshots-review .claude/skills/docs-screenshots-review && 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
docs-screenshots-review
GitHub stars
109
Token cost
~1.9k tokens
SKILL.md length
1,046 words
Files
1
Skills in repo
23
Repo updated
First seen
Licence
MIT

At a glance

Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then…

  • Works in 4 steps: Show and explain both clients, unless… → Decide whether the change warrants a… → If it does, produce it — preferably from… → …
  • Delete any file under docs/ that is NOT under docs/develop/ (the pages published to agent-deck.devopstoolkit.ai)
  • SKILL.md covers 0. Show and explain both…, 1. Decide whether the change…, 2. If it does, produce it —… and 3. If you cannot produce it,…, plus 1 more section
  • Calls cargo

What it does

Docs Screenshots Review is an agent skill from vfarcic/dot-agent-deck. Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then produce it or say exactly which one to capture. Use whenever you create, edit, move or delete any file under docs/ that is NOT under docs/develop/ (the pages published to agent-deck.devopstoolkit.ai), or the home page (site/landing/), in any task, including when the docs edit is a side effect of a code change, a…

Its SKILL.md is about 1.9k 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 Development, covering Changelog and release notes. The repository describes itself as: A rich terminal dashboard for monitoring and controlling multiple AI coding agent sessions. The licence is MIT.

When your agent uses it

  • Delete any file under docs/ that is NOT under docs/develop/ (the pages published to agent-deck.devopstoolkit.ai)
  • The home page (site/landing/)
  • Including when the docs edit is a side effect of a code change
  • A changelog-driven update

Example prompts

  • “/docs-screenshots-review”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Show and explain both clients, unless only one has the feature
  2. Decide whether the change warrants a screenshot
  3. If it does, produce it — preferably from a scenario
  4. If you cannot produce it, say exactly what to capture

What it can do on your machine

Read from SKILL.md and the folder at commit 9cc3e60. 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:

    • cargo

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

  • Network

    No URLs in SKILL.md.

    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

Docs Screenshots Review loads about 1.9k tokens when it runs. Until then it costs about 182 tokens; SKILL.md has 1,046 words of instructions outside code blocks.

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

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 vfarcic/dot-agent-deck at commit 9cc3e60, republished under its MIT licence (© vfarcic). 1,046 words, ~1,874 tokens.

Download SKILL.mdSave it as .claude/skills/docs-screenshots-review/SKILL.md (or your agent's skills folder).
name
docs-screenshots-review
description
Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then produce it or say exactly which one to capture. Use whenever you create, edit, move or delete any file under docs/ that is NOT under docs/develop/ (the pages published to agent-deck.devopstoolkit.ai), or the home page (site/landing/), in any task, including when the docs edit is a side effect of a code change, a changelog-driven update or a one-line fix. Also use when a user-visible UI change (TUI or desktop app) makes an existing docs screenshot stale. Invoke it before you report the docs change as done.
user-invocable
true

Both clients, and screenshots, for docs changes

The user docs under docs/ (not docs/develop/, which is never published) and the site's home page describe two clients of one daemon, the TUI and the desktop app. Screenshots are part of those docs, they go stale, and they are generated from code by cargo docs-screenshots so that fixing a stale one is a command, not a manual session. This skill makes sure every docs change covers both clients and gets a deliberate screenshot decision.

0. Show and explain both clients, unless only one has the feature

The rule: every page shows and explains both the TUI and the desktop app, unless the feature works in only one of them. Most features live in the daemon, so both clients have them; they just present them differently (a card or a row, a tab or a group, Ctrl+n or New agent). Name both where they differ, in the prose and in the screenshots. Do not write a page, a paragraph or a caption that describes only the TUI and leaves the desktop app implied, or the other way round.

A feature one client lacks is the exception, and it is stated, not left implicit: say which client has it, so a reader of the other client knows why they do not see it. Known examples when this was last checked: the Schedules manager is TUI-only; voice control and several daemons on one dashboard are desktop-only. Treat that list, and the desktop feature inventory in prds/done/1321-user-docs-both-clients.md, as a starting point that goes stale as features move, not the source of truth: check "both have it" or "only one has it" against the code before writing it (CLAUDE.md rule 17).

How to show both depends on the page. In the docs, a screenshot of a feature both clients have is one image per client, under a **TUI:** and a **Desktop:** label (section 2). On the home page, the reader should not have to choose a client, so both clients' images sit side by side, each labelled (the story rows in site/landing/index.html are the pattern).

1. Decide whether the change warrants a screenshot

Read the diff of the docs pages you touched and answer, for each changed section:

  • Does it describe a screen? A new page, a new section about a surface (a pane, a dialog, a form, a settings panel, a status, a layout), or a changed flow the reader follows with their eyes. Prose about configuration files, CLI output, protocols or concepts usually needs no image.
  • Does an image already cover it, and is it still accurate? Look at every image the section and its page embed (![…](/img/…) or ./img/…) and open the image file. If the change you made — or the code change behind it — alters what that screen shows (a label, a column, a button, a status word), the image is stale.
  • Is it a feature both clients have? Then a screenshot needs one image per client, depicting the same state: one labelled block per client in the docs, side by side on the home page (section 0).

Write the decision down in your report either way — "no screenshot needed: this section is about the TOML schema" is a valid outcome. Do not add images for their own sake.

Show full SKILL.md (500 more words)Show less

2. If it does, produce it — preferably from a scenario

cargo docs-screenshots first. docs/develop/docs-screenshots.md is the reference: prerequisites, the command, the registered scenarios, and how to add one. In short:

bash
cargo docs-screenshots --list                    # what exists
cargo docs-screenshots --scenario <name>         # regenerate one into docs/img/
  • An existing scenario covers the screen: regenerate it and embed /img/<scenario>-<client>.png.
  • None covers it: add or extend a scenario, as that page's "Adding a scenario" section describes — an entry in xtask/screenshots/src/scenarios.rs, its TUI capture in tests/e2e_docs_screenshots.rs, its desktop capture in desktop/screenshots/desktop.shot.ts (with fixture state in desktop/src/data/fixture.ts when it must mirror a TUI scene). A feature both clients have uses one scenario name on both, depicting the same state, so the two images pair up.
  • docs/img is a symlink to site/static/img; the PNGs are committed there. Never commit a screenshot that shows a real home path, host name, token or someone else's project — scenarios run in a sandbox for that reason.

Embed a two-client screenshot as two labelled blocks, TUI first. The published docs are plain Markdown, served as is and printed by dot-agent-deck docs, so there are no tabs or other MDX components:

md
**TUI:**

![What the TUI shows, described](/img/<scenario>-tui.png)

**Desktop:**

![What the desktop app shows, described](/img/<scenario>-desktop.png)

The blank lines around each image are required. Write alt text that says what is in the frame.

Where no scenario can reach the screen, use the run-dot-agent-deck skill to drive the TUI in an isolated sandbox and capture it, and say on the page, in the PRD or in your report that this image is not reproducible from a scenario and why.

That sandbox isolates the capture from your own deck; it redacts nothing. A frame with a real agent in it can show credentials, prompts or someone else's content, so apply the rule for agent-backed scenarios in docs/develop/docs-screenshots.md: redact before the image is written, then inspect the final image yourself for tokens, real home paths, host names, user names, prompts and anyone else's content before committing or publishing it. If it cannot be made clean, do not commit it; tell the user what to capture instead, as section 3 describes.

Then build the site — cargo xtask site <a-new-directory> — which fails on a broken image or link.

3. If you cannot produce it, say exactly what to capture

When producing it is out of reach (no display, the desktop app's Playwright dependencies missing, a screen that needs a real agent or a remote host), do not skip silently. Tell the user, in your final report: the page and section, the client(s), the exact state to show (which screen, which dialog open, what data on screen), the file name it should have (docs/img/<scenario>-<client>.png), and whether a scenario should be added for it.

Why a skill and not a hook

Most tasks never touch docs/ or the home page, so this is a skill rather than a CLAUDE.md rule that every session would load. If agents turn out not to invoke it reliably, the fallback is a hook scoped to edits under docs/** that prompts for this review. That hook is not built; it is the next step only if this skill is observed being skipped (PRD #1321).

© vfarcic, 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 .claude/skills/docs-screenshots-review of vfarcic/dot-agent-deck.

Open the folder on GitHubat commit 9cc3e60

Compare with similar skills

Docs Screenshots Review 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.

Docs Screenshots Review compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Docs Screenshots Review this skillvfarcic/dot-agent-deck109—~1.9kAutomated safety check: PassMIT
Simple Englishmoeru-ai/airi50k2 repos~4.6kAutomated safety check: PassMIT
StarRocks Release NotesStarRocks/starrocks12k—~1.9kAutomated safety check: NotesApache-2.0
Cutting A ReleaseTriliumNext/Trilium38k—~3.2kAutomated safety check: PassAGPL-3.0
Mole CLI Release Flowtw93/Mole70k—~2.6kAutomated safety check: PassGPL-3.0
React Router Release Notes Prepremix-run/react-router57k—~1.1kAutomated safety check: PassMIT

Similar skills

  • Simple English

    moeru-ai/airi

    Write or rewrite technical text with the rules of ASD-STE100 Simplified Technical English so it is clear, unambiguous, and free of AI slop.

    50k GitHub starsUsed in 2 repos~4.6k tokens
    DevelopmentAuto-check passed
  • StarRocks Release Notes

    StarRocks/starrocks

    Drafts English release notes for a StarRocks patch release from the PRs merged into its release branch, then opens a documentation PR and hands translation to /translate.

    12k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check: notes
  • Cutting A Release

    TriliumNext/Trilium

    A skill your agent uses when cutting, preparing, or debugging a Trilium release — bumping the monorepo version, tagging, or diagnosing a failed "Release" workflow run.

    38k GitHub stars~3.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Runbook for assessing and executing a Mole CLI release: distribution channels, pre-flight checks, capital-V tags, build artifacts and the handoff to curated release notes.

    70k GitHub stars~2.6k tokensUpdated today
    DevelopmentAuto-check passed
  • React Router Release Notes Prep

    remix-run/react-router

    Polishes pending React Router change files before the versioning scripts run, and decides whether a long-form What's Changed section is warranted.

    57k GitHub stars~1.1k tokensUpdated today
    DevelopmentAuto-check passed
  • Release

    PrefectHQ/fastmcp

    Cut a FastMCP release end to end. An agent skill from PrefectHQ/fastmcp.

    28k GitHub stars~2.9k tokensUpdated today
    DevelopmentAuto-check passed

More from vfarcic/dot-agent-deck

All 23 skills in this repo
  • Dispatch Shape

    vfarcic/dot-agent-deck

    Choose the shape of a unit you are about to dispatch in this repo — one agent (--single) or a team (--orchestration '<name') — from divisibility criteria instead of asking, and report the shape you…

    109 GitHub stars~2.8k tokensUpdated today
    Auto-check passed
  • Dot AI Request Dot AI Feature

    vfarcic/dot-agent-deck

    Generate a feature request prompt for another dot-ai project.

    109 GitHub stars~679 tokensUpdated today
    Auto-check passed
  • PR Create

    vfarcic/dot-agent-deck

    Take committed work from a branch to a verified pull request — push, open the PR, settle CI and the automated review, answer and resolve every finding, and hand off.

    109 GitHub stars~3.1k tokensUpdated today
    Auto-check passed
  • Publish Docs

    vfarcic/dot-agent-deck

    Publish the docs site to GHCR with a main-<sha tag and bump site/helm/values.yaml so Argo CD picks it up — without cutting a SemVer release.

    109 GitHub stars~1.7k tokensUpdated today
    Auto-check passed
  • Run Dot Agent Deck

    vfarcic/dot-agent-deck

    Run, build, smoke-test, and screenshot the dot-agent-deck binary against an isolated sandbox.

    109 GitHub stars~2.1k tokensUpdated today
    Auto-check passed
  • Demo Reel

    vfarcic/dot-agent-deck

    Stitch a manifest of terminal recordings into one narrated MP4 (title/description card, then clip, repeated) and optionally upload it privately to YouTube.

    109 GitHub stars~5.2k tokensUpdated today
    Auto-check: notes

Categories

Questions about Docs Screenshots Review

What does Docs Screenshots Review do?

Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then…. Docs Screenshots Review is an agent skill from vfarcic/dot-agent-deck. Check that a change to the user-facing docs covers both clients (the TUI and the desktop app) unless the feature exists in only one, and decide whether it needs a new or updated screenshot, then produce it or say exactly which one to capture.

When should I use Docs Screenshots Review?

Docs Screenshots Review fits situations like: delete any file under docs/ that is NOT under docs/develop/ (the pages published to agent-deck.devopstoolkit.ai); the home page (site/landing/); including when the docs edit is a side effect of a code change; A changelog-driven update.

How do I install Docs Screenshots Review in Claude Code?

Run `npx skills add vfarcic/dot-agent-deck --skill docs-screenshots-review -a claude-code`. Or copy the skill folder (.claude/skills/docs-screenshots-review in vfarcic/dot-agent-deck) into .claude/skills/docs-screenshots-review in your project. Claude Code loads it when a task matches its description.

How do I install Docs Screenshots Review in Codex?

Run `npx skills add vfarcic/dot-agent-deck --skill docs-screenshots-review -a codex`. Or copy the skill folder (.claude/skills/docs-screenshots-review in vfarcic/dot-agent-deck) into .agents/skills/docs-screenshots-review in your project. Codex loads it when a task matches its description.

Can I use Docs Screenshots Review 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 vfarcic/dot-agent-deck --skill docs-screenshots-review -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/docs-screenshots-review, .gemini/skills/docs-screenshots-review, .github/skills/docs-screenshots-review and .opencode/skills/docs-screenshots-review in your project.

What does Docs Screenshots Review need to run?

Going by SKILL.md and its folder, Docs Screenshots Review needs the command-line tools its instructions call (cargo).

Does Docs Screenshots Review access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Docs Screenshots Review 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 Docs Screenshots Review use?

Docs Screenshots Review 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 Docs Screenshots Review use?

About 1.9k tokens (SKILL.md is roughly 7.5k 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 Docs Screenshots Review?

Skills that share tags, products or a category with Docs Screenshots Review: Simple English (moeru-ai/airi, 50k stars), StarRocks Release Notes (StarRocks/starrocks, 12k stars), Cutting A Release (TriliumNext/Trilium, 38k stars) and Mole CLI Release Flow (tw93/Mole, 70k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Docs Screenshots Review?

vfarcic (a GitHub user) maintains it in vfarcic/dot-agent-deck, which has 109 GitHub stars. The repository holds 23 skills in this directory. The repository was last updated on October 10, 2026.

Source: vfarcic/dot-agent-deck on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.