skills.rest
open-fox
open-foxCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

editorial-card-screenshot

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

54|18|Updated Apr 2, 2026
Search Tags:#design#html#layout#editorial#screenshot#card#ratio
One-click install
npx skills add https://github.com/open-fox/agents --skill editorial-card-screenshot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: editorial-card-screenshot
Source: https://github.com/open-fox/agents/tree/main/skills/editorial-card-screenshot
Command: npx skills add https://github.com/open-fox/agents --skill editorial-card-screenshot

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Turn user-provided content into polished HTML information cards that follow editorial design principles and are ready for ratio-specific screenshot rendering.

Core Features & Use Cases

  • Generate ratio-ready HTML cards from user content with a Swiss-international style and editorial hierarchy.
  • Render fixed-canvas screenshots at supported ratios to ensure precise framing for previews or documentation.
  • Use cases include social previews, knowledge summaries, and content briefs that require consistent visual templates.

Quick Start

Run the editorial-card-screenshot workflow to convert your content into a styled HTML card and capture a PNG at the requested ratio.

Frequently Asked Questions about editorial-card-screenshot

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

FAQPage Schema
How do I convert text into an HTML editorial card for a screenshot?▼

To convert text into an HTML editorial card, provide your content to trigger a workflow that applies Swiss-international styling, preserves hierarchy, and outputs a polished HTML card ready for screenshot capture.

Can I render an HTML card screenshot at a specific aspect ratio?▼

Yes, you can capture an HTML card screenshot at a specific aspect ratio. The skill implements a script-driven capture workflow that accepts a target ratio parameter to ensure precise fixed-canvas framing.

What is the best way to format a blog intro for a social preview image?▼

The best way to format a blog intro for a social preview is transforming the text into an editorial HTML card. This applies visual balance and editorial hierarchy before rendering a fixed-canvas PNG capture.

Do I need external dependencies to generate fixed-canvas HTML cards?▼

No external dependencies are required to generate fixed-canvas HTML cards. The skill handles rendering internally and includes Google Fonts with local fallbacks to maintain visual consistency offline.

Does this tool work for creating knowledge summaries as visual templates?▼

Yes, this tool works for creating knowledge summaries as visual templates. It transforms user-provided content into ratio-ready HTML information cards suitable for consistent visual documentation and previews.

Why does my HTML card screenshot lose visual balance on different screens?▼

HTML card screenshots lose visual balance when not using fixed-canvas rendering. This skill enforces a fixed-canvas approach during the capture workflow to guarantee precise framing and layout integrity across any display.

Related Skills

Explore More Design & Creative Skills→
s23hs23h

report-style-guide

Generate self-contained HTML data reports with metrics dashboards and charts.

Community
Intermediate
skycruzerskycruzer

XLSX

Automates Excel spreadsheet creation, editing, and pandas-based analysis with LibreOffice recalculation.

Community
Intermediate
zaiyemeiyou404zaiyemeiyou404

guizang-ppt-skill

Generate horizontal swipe web PPTs with WebGL backgrounds and custom styles.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

social-card-image-led

Generate social media card layouts that prioritize visual content over text overlays.

Community
Intermediate