Visual Brief

Turn research and browser work into a visual explanation another person can actually follow. Visual Brief captures the decisive sentence, button, setting, or success state, keeps the original source link, and places each image beside the text it supports.

Install

With Node.js/npm available, run this from your project root:

npx skills add joeeeeey/visual-brief --skill visual-brief --agent '*' --yes

Only skills/visual-brief is installed. Reopen the assistant in that project.

Use It

Paste a normal-language request like this:

Using <installation page URL or source material>, create a visual step-by-step guide for installing the app on macOS. Walk through the web flow, screenshot only the important buttons and states, place each image directly after the step it explains, keep the original help links, and end with a visible success check. Prepare a draft only; do not publish or submit anything.

Good Fits

• “Explain in Slack why we cannot use this approach, with the decisive official text highlighted.”
• “Turn this portal workflow into a beginner-friendly guide with one screenshot per useful step.”
• “Create a V2EX, blog, or X draft using real evidence screenshots and clearly labeled explanatory visuals.”

No destination named? The default result is a local HTML preview. Do not send, upload, or publish without approval, and keep browser state and private data out of the repository.

English example · Read the Skill · 中文说明 · MIT