skills.rest
zhiwendesign
zhiwendesignCOMMUNITY
Explore all skills by this author →
GitHub

kkstyle-minimal-tech-screenshot

Convert tech notes into a minimal poster HTML with embedded CSS and optional PNG export.

11|1|Updated Mar 30, 2026
Search Tags:#branding#html#poster#claude-code#screenshot#design-template#minimal-tech
One-click install
npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-minimal-tech-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kkstyle-minimal-tech-screenshot
Source: https://github.com/zhiwendesign/kkskills/tree/main/kkstyle-minimal-tech-screenshot
Command: npx skills add https://github.com/zhiwendesign/kkskills --skill kkstyle-minimal-tech-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-chrome, chromium, chromium-browser, chrome, /Applications/Google Chrome.app/Contents/MacOS/Google Chrome, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This skill turns raw product or technology notes into a structured minimal tech poster with a date chip, clean metric card, dual-column storytelling, and fixed QR/IP branding so you avoid handcrafting CSS and layout every time.

Core Features & Use Cases

  • HTML-first poster generation: Deliver a complete HTML page with embedded CSS tailored for the chosen ratio before capturing any screenshots.
  • Fixed brand and contact block: Always include the date label, ${CLAUDE_SKILL_DIR}/assets/contact-code.png QR, and ${CLAUDE_SKILL_DIR}/assets/kk-character.jpeg IP with captions.
  • Screenshot automation: Run scripts/capture_card.sh via available Chrome/Chromium binaries to produce PNG versions at 3:4, 4:3, 1:1, 16:9, or 9:16.

Quick Start

Ask the skill to convert your topic notes into a minimal tech poster with a date chip, metric card, dual-column content, and contact block ready for HTML and optional PNG export.

Frequently Asked Questions about kkstyle-minimal-tech-screenshot

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

FAQPage Schema
How do I convert raw tech notes into a minimal tech poster HTML?▼

Yes, you can automate capturing poster screenshots using available Chrome or Chromium binaries. The skill runs a dedicated capture script to export your HTML layout into standard 3:4, 4:3, 1:1, 16:9, or 9:16 PNG files.

Does this poster generation skill require specific browser dependencies?▼

Yes, automated screenshot capture requires a Chrome or Chromium browser binary installed on your system. The script specifically looks for existing Google Chrome or Chromium installations to process the HTML output into PNG format.

What is the best way to create consistent HTML-first layouts for keynote drafts?▼

The best way to create consistent HTML-first layouts for keynote drafts is using a structured template. This skill enforces consistent design by applying fixed brand placement, dual-column storytelling, and embedded CSS to your product notes before optional screenshot capture.

Can I customize the QR code and IP branding block in the generated poster?▼

No, the brand and contact block is fixed within the generated HTML. The layout always includes a date label, a specific QR code image, and a character IP image with captions from the skill's internal asset directory to ensure consistent branding.

Related Skills

Explore More Design & Creative Skills→
zhiwendesignzhiwendesign
11

kkstyle-poster-comic-screenshot

Transform raw notes into comic poster HTML with QR code and date sticker.

Community
Intermediate
shekerkammashekerkamma

presentation-exporter

Export HTML presentations to PDF, PNG, and markdown speaker notes.

Community
Intermediate
JimLiuJimLiu
629

outliner

Generate 3-5 narrative-driven outline options for tech columns.

Community
Intermediate
hyperbolic-chyperbolic-c
5

pptx-posters

Convert HTML/CSS poster templates into PPTX or PDF posters for academic conferences.

Community
Basic