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

kkstyle-editorial-screenshot

Convert notes into editorial HTML posters with fixed canvas layouts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-chrome, chromium, chromium-browser, chrome, python3, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

It codifies the process of turning notes into magazine-style HTML posters so titles, leads, columns, date chips, and brand clusters obey the editorial rules before any screenshot is captured.

Core Features & Use Cases

  • Guided workflow: follow the density check, full HTML output, self-review, and optional Chrome/Chromium screenshot steps outlined in SKILL.md and the scripts.
  • Fixed layouts and brand assets: honor the ratio presets, date label conventions, and bundled QR/IP cards so each poster keeps the KKStyle editorial identity.
  • Use Case: convert a viewpoint summary, highlight cards, and structure hints into a strong 3:4 magazine cover or switch to 4:3, 1:1, 16:9, or 9:16 when landscape or social briefs demand it.

Quick Start

Ask the skill to turn my notes, key data, and layout hints into the prescribed editorial poster HTML with the fixed date, QR, and IP cluster.

Frequently Asked Questions about kkstyle-editorial-screenshot

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

FAQPage Schema
How do I convert text notes into editorial HTML posters with fixed canvas sizes?▼

This skill converts notes into editorial HTML posters by aligning titles, leads, columns, and brand metadata for fixed pixel canvases such as 3:4 magazine covers. It embeds CSS directly to maintain precise layout fidelity.

Can I capture screenshots of HTML posters using Chrome or Chromium?▼

Yes, you can capture screenshots of HTML posters using Chrome or Chromium. The skill executes an optional screenshot capture step that renders the fixed-canvas HTML layout into an image file.

What canvas aspect ratios are supported for magazine-style HTML layouts?▼

Supported canvas aspect ratios include 3:4 magazine covers, 4:3 landscape summaries, 1:1 and 16:9 social story visuals, and 9:16 formats. These presets ensure the editorial poster fits specific platform publishing requirements.

Do I need Python 3 installed to generate editorial posters with date labels?▼

Yes, Python 3 is required as a dependency to generate editorial posters with date labels. The skill uses Python scripts to execute the HTML generation workflow and coordinate the Chrome or Chromium screenshot capture.

How do I add branded date chips and QR assets to a social story visual?▼

To add branded date chips and QR assets to social story visuals, the skill applies editorial rules that align brand metadata, date labels, and bundled IP cards within the fixed HTML canvas layout.

Related Skills

Explore More Design & Creative Skills→
dmccrearydmccreary
90

mermaid-generator

Generate interactive Mermaid workflow diagrams as standalone HTML MicroSim packages.

Community
Basic
zhiwendesignzhiwendesign
11

kkstyle-editorial-noline-screenshot

Transforms notes into magazine-style editorial posters with fixed HTML layouts.

Community
Intermediate
EstomEstom

brand-guidelines

Apply Anthropic brand colors, typography, and layout to documents and assets.

Community
Advanced
zhiwendesignzhiwendesign
11

kkstyle-scrapbook-noline-screenshot

Convert raw notes into scrapbook-style HTML posters with date chips and QR assets.

Community
Advanced