skills.rest
vanities
vanitiesCOMMUNITY
Explore all skills by this author →
Website𝕏@vanitiesGitHub

update-showcase

Capture deterministic screenshots and sync GitHub metadata with the DocVault demo.

10|1|Updated Feb 6, 2026
Search Tags:#automation#documentation#screenshots#update#showcase#github-metadata#demo-stack
One-click install
npx skills add https://github.com/vanities/docvault --skill update-showcase
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: update-showcase
Source: https://github.com/vanities/docvault/tree/main/skills/update-showcase
Command: npx skills add https://github.com/vanities/docvault --skill update-showcase

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright>=1.47, and includes scripts (resource) components.

What problem does it solve?

Keeps README visuals and GitHub metadata aligned with the live DocVault demo by automatically capturing deterministic screenshots and reconciling documentation.

Core Features & Use Cases

  • Boots the local demo stack and captures deterministic screenshots for all documented views.
  • Diffs captured visuals against the README and surfaces alignment improvements; can optionally sync the GitHub repository description and topics.
  • Includes automated safeguards to avoid exposing personal data during the showcase and provides a reproducible workflow for teams.

Quick Start

Run the skill to refresh README images and synchronize GitHub metadata with the current demo.

Frequently Asked Questions about update-showcase

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate README screenshot updates for my project showcase?▼

To automate README screenshot updates, this Skill boots your local demo stack, captures deterministic screenshots for all documented views using Playwright, and diffs them against your existing README visuals to surface alignment improvements.

Do I need a local demo stack to capture deterministic screenshots of my application?▼

Yes, capturing deterministic screenshots requires a local bun-based backend and Vite frontend demo stack, along with the demo-data fixtures and a views.json manifest to drive the visual captures.

Can I sync GitHub repository metadata when refreshing my README visuals?▼

Yes, you can sync GitHub repository metadata. The Skill optionally updates your GitHub repository description and topics while reconciling your README visuals with the current demo.

How does the screenshot diffing process work for documentation alignment?▼

The screenshot diffing process works by booting the demo stack, capturing deterministic screenshots based on the views.json manifest, and comparing them against the images currently embedded in your README to detect visual misalignment.

What safeguards are included when capturing screenshots for a public showcase?▼

The showcase capture process includes automated safeguards designed to prevent exposing personal data during the screenshot generation workflow, ensuring a safe and reproducible documentation update.

Does this screenshot automation tool work with Vite and Bun?▼

Yes, the screenshot automation tool works directly with a Bun-based backend and Vite frontend, utilizing Playwright to capture the documented views and refresh the README visuals.

Related Skills

Explore More Software Engineering Skills→
tbartel74tbartel74
14

react-tailwind-vigil-ui

Build React 18, Vite, and Tailwind CSS v4 frontend interfaces for Vigil Guard configuration.

Community
Advanced
nesihaver-ILnesihaver-IL

update-docs

Update README, API, architecture docs, and changelogs after code changes.

Community
Intermediate
nimadorostkarnimadorostkar
25

visual-qa

Automate visual regression testing and responsive layout verification with Playwright.

Community
Advanced
The13thNodeThe13thNode
3

browse

Launch a real browser to verify application UI and functionality.

Community
Intermediate