skills.rest
yokingma
yokingmaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

editorial-card-screenshot

Generate ratio-specific HTML editorial cards and PNG screenshots from text.

35|5|Updated May 7, 2026
Search Tags:#typography#html#layout#editorial#screenshot#ratio
One-click install
npx skills add https://github.com/yokingma/weclaws --skill editorial-card-screenshot-yokingma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editorial-card-screenshot
Source: https://github.com/yokingma/weclaws/tree/main/resources/skills/managed/editorial-card-screenshot
Command: npx skills add https://github.com/yokingma/weclaws --skill editorial-card-screenshot-yokingma

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill turns raw text into ratio-specific, editorial HTML information cards and captures consistent screenshots for publication, marketing, and documentation.

Core Features & Use Cases

  • Generate ratio-aware HTML editorial cards with structured hierarchy and typography.
  • Render fixed-canvas layouts for ratios like 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, and 5:2 to ensure pixel-perfect screenshots.
  • Integrate editorial rules, Google fonts with local fallbacks, and aesthetic guidelines to maintain consistent visual language.
  • Produce a PNG screenshot via a remote service from the generated HTML for quick previews or assets delivery.

Quick Start

Provide your content and run the workflow to generate a ratio-ready HTML card and a PNG screenshot.

Frequently Asked Questions about editorial-card-screenshot

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

FAQPage Schema
How do I generate editorial HTML cards from plain text for publications?▼

You can generate ratio-ready editorial HTML cards by providing raw text content, which the system transforms into structured layouts with embedded Google fonts and local fallbacks for consistent visual language.

What aspect ratios are supported for fixed-canvas HTML card layouts?▼

Supported aspect ratios for fixed-canvas HTML card layouts include 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, and 5:2, ensuring pixel-perfect screenshots across various publication formats.

Can I produce PNG screenshots directly from generated HTML cards?▼

Yes, the workflow includes a screenshot step that uses a remote service to render the generated fixed-canvas HTML and output a PNG file for quick previews or asset delivery.

Does the editorial card generation work without external font dependencies?▼

It integrates Google Fonts with local fallbacks, ensuring the editorial card typography remains consistent even without active external font dependencies during rendering.

What is the best way to ensure pixel-perfect screenshots for marketing cards?▼

Using fixed-canvas HTML layouts with predefined aspect ratios and embedded editorial rules ensures pixel-perfect screenshots suitable for marketing and documentation assets.

Are there limitations when using remote screenshot services for HTML card rendering?▼

A limitation is that the final PNG output depends on a remote screenshot service, meaning rendering can be affected by network availability and the service's ability to process the fixed-canvas HTML layout.

Related Skills

Explore More Design & Creative Skills→
open-foxopen-fox
54

editorial-card-screenshot

Convert user text into styled HTML cards and capture ratio-specific PNG screenshots.

Community
Advanced
osolmazosolmaz
12

plot-graph

Create multi-panel charts from experiment metrics with matplotlib, plotly, or altair.

Community
Advanced
RoooyHeRoooyHe

makepad-font

Automate Makepad font configuration, Harfbuzz text shaping, and SDF rendering workflows.

Community
Advanced
barkleesandersbarkleesanders
5

gemini-imagegen

Generate and edit images using Google's Gemini 3 Pro model.

Community
Intermediate