hs:show-off

Generate self-contained HTML showcase pages with section screenshots and optional publishing.

Updated Jul 19, 2026
One-click install
npx skills add https://github.com/Dozyboy/VSF --skill hs-show-off-dozyboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hs:show-off
Source: https://github.com/Dozyboy/VSF/tree/main/Day2_VSF/Demo1/harness/plugins/hs/disabled-skills/show-off
Command: npx skills add https://github.com/Dozyboy/VSF --skill hs-show-off-dozyboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, sharp, and includes scripts (resource) and references (resource) components.

What problem does it solve? Creating polished, presentation-ready HTML pages to showcase work requires coordinating content writing, frontend design, screenshot capture, and publishing — this Skill orchestrates that entire workflow from a single request. ## Core Features & Use Cases - Preference-Aware Workflow: Persists user preferences for screenshots, publishing, and bilingual (Vietnamese/English) output, resolving them before each run. - Multi-Ratio Section Capture: Uses a Puppeteer-based script to capture each page section at horizontal (16:9), vertical (9:16), and square (1:1) viewports in parallel, with a readiness chain that waits for fonts, images, and animations. - Optional Publishing: Publishes content and the static site via the agentwiki CLI, with an rws screenshot API fallback when local capture fails. - Use Case: Ask it to showcase a project milestone; it researches supporting evidence, writes cited markdown content, builds a multi-section HTML page with hero and parallax scrolling, captures social-media-ready images, and publishes the result. ## Quick Start Ask the assistant to create a showcase page for your project or article, optionally specifying preferences like no screenshots, local only, or English only.

Frequently Asked Questions about hs:show-off

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

FAQPage Schema
How do I capture screenshots of specific HTML page sections?▼

Use the capture-sections.js script with --url, --output-dir, --sections (comma-separated CSS selectors), and --ratios. It runs Puppeteer to capture each section at horizontal, vertical, and square viewports in parallel after waiting for fonts, images, and animations to settle.

How do I disable screenshots or publishing for showcase pages?▼

Run the preferences.js helper with set --no-screenshots or --no-publish to persist opt-outs at ~/.claude/show-off/preferences.json. Inline phrases like "no screenshots" or "local only" in a request also work, and "for this run only" applies changes without persisting.

Does the capture script work without a local Chrome installation?▼

The script uses Puppeteer, which bundles Chromium, but you can point to a custom binary via --executable-path or the CHROME_EXECUTABLE_PATH environment variable. If local capture fails entirely, the rws screenshot API serves as a fallback when the page is publicly reachable.

Why do my section screenshots show missing images or fonts?▼

Captures taken before assets finish loading produce incomplete images. The script's readiness chain waits for networkidle0, document.fonts.ready, all img elements, CSS background images, and a settle delay, so increase --settle-delay or --render-timeout if animations still appear mid-transition.

Can I generate bilingual Vietnamese and English showcase pages?▼

Yes, the default language preference is ["vi", "en"], producing bilingual content with a toggle. Set --languages en or --languages vi to restrict output to a single language, and the HTML font stack supports Vietnamese text.