Documentation screenshots inevitably rot as UI changes. Manually updating them for a VitePress site involves repetitive steps: navigating, logging in, taking screenshots, and rebuilding. For projects with dozens of images, this tedious process means screenshots often go stale, misleading users.

Heroshot solves this by letting you define screenshot targets once and regenerate them with a single command. You use an interactive picker to select elements by CSS selector, which creates a config file. A Vite plugin and a `<Heroshot>` component then handle image selection, light/dark mode, and responsive variants automatically.

The workflow is straightforward: install heroshot, run `npx heroshot config` to define your targets, add the Vite plugin, and register the component in your theme. When your UI changes, run `npx heroshot` to update all screenshots. This can be automated in CI/CD, ensuring your docs always show the current interface without manual upkeep.