# Editorial Card Screenshot

Generate high-density editorial HTML info cards in a modern magazine and...

- Repository: https://github.com/shaom/infocard-skills (519 stars)
- Category: Design
- License: MIT
- Last updated: 2026-06-13
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add shaom/infocard-skills --skill editorial-card-screenshot -g -a claude-code -y`
Codex: `npx skills add shaom/infocard-skills --skill editorial-card-screenshot -g -a codex -y`
Cursor: `npx skills add shaom/infocard-skills --skill editorial-card-screenshot -g -a cursor -y`
Gemini CLI: `npx skills add shaom/infocard-skills --skill editorial-card-screenshot -g -a gemini-cli -y`

## Description

Generate high-density editorial HTML info cards in a modern magazine and Swiss-international style, then capture them as ratio-specific screenshots. Use when the user provides text or core information and wants: (1) a complete responsive HTML info card, (2) the design to follow the stored editorial prompt, (3) output in fixed visual ratios such as 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, or 5:2, or (4) both HTML and a rendered PNG cover/card from the same content.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Editorial Card Screenshot

## Overview

Turn source text into a compact, high-contrast HTML information card that follows the user's editorial prompt, then render a screenshot in one of the supported aspect ratios.
The goal is not just density but editorial quality: clear hierarchy, strong visual anchors, and screenshot-stable rendering without accidental cropping or dead space.

Always preserve three output stages unless the user explicitly asks to skip one:
1. Write one sentence judging the information density as high, medium, or low.
2. Output the complete HTML with embedded CSS.
3. Self-check that body text remains readable on mobile.

## Workflow

### 1. Analyze Content Density

Read [references/content-fit.md](references/content-fit.md). Inventory semantic units, estimate density, and choose layout strategy from both density and ratio:
- Use "big-character" composition when content is sparse and a single phrase, number, or hook can carry the page.
- Use a two-column or three-column editorial grid when content is dense and needs stronger hierarchy.
- Use oversized numbers, heavy rules, tinted blocks, and pull-quote scale to avoid dead space.
- Do not force dense content into evenly weighted tiles. Build primary blocks, secondary blocks, and lighter supporting blocks.
- Match structure to content type:
  - Ranking / recommendation content: allow asymmetric hero + structured list.
  - Tutorial / analysis / interpretation content: group into overview, core judgment, interpretation, boundary, and conclusion.
- Write a short space-allocation plan before final HTML. Assign approximate area to hero, primary module, support area, and footer.
- Do not use the starter template's current arrangement as evidence that it is the right skeleton.

The rest: https://github.com/shaom/infocard-skills/blob/HEAD/skills/editorial-card-screenshot/SKILL.md