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

kkstyle-retro-pixel-noline-screenshot

Convert notes into branded retro pixel HTML posters with embedded CSS and screenshot automation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) and scripts (resource) components.

What problem does it solve?

Transforms unstructured notes into consistent retro pixel posters so agents no longer juggle styling, branding, or layout decisions while keeping fixed date, QR, and IP areas intact.

Core Features & Use Cases

  • Consistent retro HUD output: Detailed guidance in SKILL.md plus assets provide chunky typography, pixel grids, and a date HUD for tool, course, or project summaries that must feel like a gaming status board.
  • Ratio-aware HTML fallback: references/layout-presets.md defines exact canvases while embedded CSS and templates in assets/retro-pixel-card-template.html ensure the HTML is ready for screenshot capture before any PNG is requested.
  • Screenshot automation: scripts/capture_card.sh finds Chrome/Chromium, enforces supported ratios, and can readlined images via scripts/image_to_data_uri.py so the final marketing-ready poster stays brand-compliant.

Quick Start

Use kkstyle-retro-pixel-noline-screenshot to turn my notes into a branded no-line retro pixel poster with fixed QR/IP branding and deliver the complete HTML.

Frequently Asked Questions about kkstyle-retro-pixel-noline-screenshot

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

FAQPage Schema
How do I convert plain notes into branded retro pixel HTML posters?▼

It applies chunky typography, pixel grids, and a fixed date HUD to your unstructured notes, outputting embedded CSS HTML templates with HUD chips and summary panels ready for screenshot capture.

What aspect ratios are supported for retro pixel poster layout presets?▼

Supported layout presets include 3:4, 4:3, 1:1, 16:9, and 9:16 aspect ratios defined as exact canvases for formatting tool digests, resources, or course summaries.

Does the screenshot automation script require Chrome or Chromium to capture HTML posters?▼

Yes, the screenshot automation script finds Chrome or Chromium to capture HTML posters, enforcing supported ratios and optionally converting images via data URI to maintain brand-compliant PNG output.

Can I keep fixed QR codes and IP branding areas intact across different retro pixel poster layouts?▼

Yes, the Skill ensures consistent placement of contact QR and IP asset areas within the HTML template regardless of the chosen aspect ratio preset, keeping fixed branding areas intact across different retro pixel poster layouts.

What is the best way to automate retro pixel poster generation in agent workflows?▼

The best way is using predefined HTML templates and capture scripts within Claude Code or agent workflows, eliminating manual styling decisions by enforcing consistent retro HUD output and embedded CSS for automated Chrome-based screenshot capture.

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
zhiwendesignzhiwendesign
11

kkstyle-diagram-board-screenshot

Converts textual notes into structured diagram-board posters with inline CSS HTML and optional PNG capture.

Community
Advanced
zhiwendesignzhiwendesign
11

kkstyle-class-notes-noline-screenshot

Convert lecture notes into HTML class-note posters with highlighted sections.

Community
Intermediate
zhiwendesignzhiwendesign
11

kkstyle-retro-pixel-screenshot

Convert notes into retro pixel HTML posters with fixed HUD and QR brand blocks.

Community
Intermediate