Screenshot
nexu-io/open-design
Capture desktop, app windows, or pixel regions across OS platforms.
Present final screenshots or rendered artifacts as an annotated walkthrough when visual evidence is requested.
No licenceAuto-check passed
Install Walkthrough
$ npx skills add udecode/dotai --skill walkthrough -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install udecode/dotai walkthrough --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/walkthrough .claude/skills/walkthrough && rm -rf skills-srcUse ~/.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/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .claude/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/udecode/dotai/tree/main/skills/walkthroughType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add udecode/dotai --skill walkthrough -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install udecode/dotai walkthrough --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/walkthrough .agents/skills/walkthrough && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .agents/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add udecode/dotai --skill walkthrough -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install udecode/dotai walkthrough --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/walkthrough .cursor/skills/walkthrough && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .cursor/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/udecode/dotai.git --path skills/walkthrough--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add udecode/dotai --skill walkthrough -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install udecode/dotai walkthrough --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/walkthrough .gemini/skills/walkthrough && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .gemini/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install udecode/dotai walkthroughInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add udecode/dotai --skill walkthrough -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/walkthrough .github/skills/walkthrough && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .github/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add udecode/dotai --skill walkthrough -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install udecode/dotai walkthrough --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/udecode/dotai.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/walkthrough .opencode/skills/walkthrough && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "walkthrough" agent skill from https://github.com/udecode/dotai/tree/main/skills/walkthrough into .opencode/skills/walkthrough/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "walkthrough", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
walkthrough- GitHub stars
- 1.2k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 839 words
- Files
- 6 (incl. scripts, references)
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- None found
At a glance
Present final screenshots or rendered artifacts as an annotated walkthrough when visual evidence is requested.
- Works in 4 steps: where the user acts; → what changed or became possible; → what consequence appears; → …
- SKILL.md covers Honor The Caller Contract, Read The Minimum Evidence, Pick The Shortest Story and Capture The Real Artifact, plus 4 more sections
- Runs JavaScript scripts from its folder
What it does
Walkthrough is an agent skill from udecode/dotai. Present final screenshots or rendered artifacts as an annotated walkthrough when visual evidence is requested.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts and reference files (for example `agents/openai.yaml`, `references/annotation.md` and `references/baseline.md`).
Example prompts
- “/walkthrough”
Requirements
- Node.js
Workflow steps
4 steps, taken from the first numbered list in SKILL.md.
- where the user acts;
- what changed or became possible;
- what consequence appears;
- what proves the result.
What it can do on your machine
Read from SKILL.md and the folder at commit 7d68fd7. 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
Ships 2 files in scripts/ (JavaScript), which the agent can run.
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
Walkthrough loads about 1.5k tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 31 tokens; SKILL.md has 839 words of instructions outside code blocks.
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); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 839 words (~1,473 tokens).
“Explain a completed change with a few annotated visuals. Run this after final verification. A walkthrough explains proof; it does not replace proof. Reuse the final verified frames. Do not repeat the browser walk or send a message to a…”
- name
- walkthrough
Files
SKILL.md and 5 other files (scripts, references) in skills/walkthrough of udecode/dotai.
- SKILL.md
- agents/openai.yaml
- references/annotation.md
- references/baseline.md
- scripts/diff-baseline.mjs
- scripts/diff-baseline.test.mjs
Open the folder on GitHubat commit 7d68fd7
Compare with similar skills
Walkthrough 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Walkthrough this skilludecode/dotai | 1.2k | — | ~1.5k | Automated safety check: Pass | None | |
| Screenshotnexu-io/open-design | 100k | — | ~291 | Automated safety check: Pass | Apache-2.0 | |
| Presentationsasgeirtj/system_prompts_leaks | 69k | — | ~858 | Automated safety check: Pass | CC0-1.0 | |
| PresentationRightNow-AI/openfang | 18k | — | ~829 | Automated safety check: Pass | Apache-2.0 | |
| Wireframe Annotatednexu-io/open-design | 100k | — | ~960 | Automated safety check: Pass | Apache-2.0 | |
| Tabler Screenshot Makertabler/tabler | 42k | — | ~1.3k | Automated safety check: Pass | MIT |
Similar skills
Presentations
asgeirtj/system_prompts_leaks
Help choose a presentation's audience, story, outline, or use of evidence and visuals.
Presentation
RightNow-AI/openfang
Presentation expert for slide structure, storytelling, visual design, and audience engagement
Wireframe Annotated
nexu-io/open-design
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid with numbered annotation pins (①②③④⑤) in a single accent…
Tabler Screenshot Maker
tabler/tabler
Makes reproducible screenshots of Tabler components and screens for release notes, the website and social posts, using the repository's screenshots app.
- Official
PR Screenshots
github/awesome-copilot
Embed before/after screenshots and annotated images in pull request descriptions.
More from udecode/dotai
Sync Pstack
udecode/dotai
Set up the pstack plugin in a project through an interview, and keep every pstack project on one pinned tag and one shared AGENTS.md overrides block.
Plan Page
udecode/dotai
Write, check, repair and publish a plan page: a project's plans and subject files under its plans directory, rendered by .agents/pstack/plan-page.mjs and rendered as one local HTML page per subject…
Pstack Pulse
udecode/dotai
Show every Claude Code and Codex session on the iPhone lock screen through ActivitySmith and in the Mac menubar, with each plan page's pipeline, and buzz when a session needs you, ships or fails.
Test Audit
udecode/dotai
Audit existing tests for low-value, duplicated or implementation-coupled cases and the test-only code they keep alive, then remove or rewrite them on evidence.
Rca
udecode/dotai
Turn Remote Control on for every non-archived Claude Code session in the Claude desktop app.
Questions about Walkthrough
What does Walkthrough do?
Present final screenshots or rendered artifacts as an annotated walkthrough when visual evidence is requested. Walkthrough is an agent skill from udecode/dotai. Present final screenshots or rendered artifacts as an annotated walkthrough when visual evidence is requested.
How do I install Walkthrough in Claude Code?
Run `npx skills add udecode/dotai --skill walkthrough -a claude-code`. Or copy the skill folder (skills/walkthrough in udecode/dotai) into .claude/skills/walkthrough in your project. Claude Code loads it when a task matches its description.
How do I install Walkthrough in Codex?
Run `npx skills add udecode/dotai --skill walkthrough -a codex`. Or copy the skill folder (skills/walkthrough in udecode/dotai) into .agents/skills/walkthrough in your project. Codex loads it when a task matches its description.
Can I use Walkthrough 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 udecode/dotai --skill walkthrough -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/walkthrough, .gemini/skills/walkthrough, .github/skills/walkthrough and .opencode/skills/walkthrough in your project.
What does Walkthrough need to run?
Going by SKILL.md and its folder, Walkthrough needs JavaScript for the scripts in its folder. Our summary lists: Node.js.
Does Walkthrough 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 Walkthrough 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Walkthrough use?
No licence was found for Walkthrough or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Walkthrough use?
About 1.5k tokens (SKILL.md is roughly 5.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 897 tokens, read only when the agent opens those files.
What are the alternatives to Walkthrough?
Skills that share tags, products or a category with Walkthrough: Screenshot (nexu-io/open-design, 100k stars), Presentations (asgeirtj/system_prompts_leaks, 69k stars), Presentation (RightNow-AI/openfang, 18k stars) and Wireframe Annotated (nexu-io/open-design, 100k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Walkthrough?
udecode (a GitHub organization) maintains it in udecode/dotai, which has 1,158 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 8, 2026.
Source: udecode/dotai on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.