infocard-skills
An agent skill that builds a dense, magazine-style information card from text and returns it as HTML and PNG
- 518 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The script launches a headless browser and opens a local HTML file in it to take the screenshot
- By default the page requests fonts from Google Fonts over the network
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/infocard-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The script launches a headless browser and opens a local HTML file in it to take the screenshot
- By default the page requests fonts from Google Fonts over the network
This is third-party code. Review the repository files before installing.
What it does
infocard-skills is a repository with an installable package, editorial-card-screenshot. The skill takes text, notes or an article and builds a dense information card in a magazine, Swiss-international style: a ready HTML page with embedded CSS and, if you want, a PNG. For each of the eight ratios (3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1 and 5:2) the material is composed afresh: the reading path, the hierarchy and the set of blocks change. Before laying anything out the skill estimates the density of the text and picks a skeleton. Sparse material gets a composition with one large thesis, dense material a grid of two or three columns. The default palette is warm and paper-like, with a single accent. Bold makes the card look like a cover, with larger accents and background text. Refined softens the contrast. Hybrid is the default mode: restrained overall, with a few bold accents. The answer follows a fixed order: one sentence on information density, the full HTML and a check that the text stays readable on a phone. The PNG is captured by the capture_card.sh script.
Who it is for. For marketers, writers and designers who need to turn an article or notes into a cover or a social card quickly.
Good fit when
- You need a portrait 3:4 or 9:16 card from an article summary for social media
- You need a wide 3:1, 5:2 or 2.35:1 cover from a short thesis and a few facts
- You need both HTML for a site and a PNG for a post, built from the same material
- A long text has to become one sheet with a hierarchy: the main point, takeaways, boundaries
- You do not need an image, only an HTML page ready for a screenshot
Not a fit when
- You need drawn illustrations or photographs: the skill lays out text cards with HTML and CSS
- You need a ratio outside the list, such as 5:4
- You need a company brand style: the default is a paper magazine palette, so you have to describe your own colors in the request
- The machine has no Chrome or Chromium: you can get the HTML but not the PNG
Example request
Use $editorial-card-screenshot to turn these notes into a 3:4 information card and give me both the HTML and the PNGLimitations
A PNG needs a local Chrome or Chromium: the script takes the path from the CHROME_BIN variable, then tries common program names and the standard Chrome path on macOS. The script itself is written for zsh. By default the page loads its fonts from Google Fonts, so capturing needs a network, and without it fallback fonts take over. Open and inspect the result: the skill's rules require rejecting a card with empty areas, crowded blocks or cropped text and rebuilding the skeleton. The skill adds personal signatures, avatars and handles only when you ask.
How to disable. Delete the editorial-card-screenshot folder from your agent's skills directory. The finished HTML and PNG files stay wherever you saved them.
FAQ
How do I install the editorial-card-screenshot skill?
Copy the whole skills/editorial-card-screenshot folder from the repository into your agent's skills directory. Beside SKILL.md must sit assets, references and scripts, and agents too where the agent supports it.
How can I check that the skill is installed?
Give the agent one of the check phrases, for example "Use $editorial-card-screenshot to turn these notes into an editorial info card". The agent should answer with one sentence about the density of the material and the full HTML.
Which card ratios are supported?
Eight: 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1 and 5:2. If you need another ratio, the skill asks you to pick the nearest one.
How do I capture a PNG from the finished HTML?
Run `./scripts/capture_card.sh input.html output.png 3:4`, with the ratio as the last argument. The script knows the frame size in pixels for each ratio: 3:4, for instance, is captured at 1500 by 2000.
Does the skill change my title?
By default it does not. The title you give becomes the main headline, and the skill puts the framing and summary into the subtitle and the short abstract. It may shorten or rephrase the title only when you ask, or when the ratio cannot hold it even after the layout is rebuilt.
Discussion
No questions or reviews yet.
Related
SkillsAgent skill that builds social card carousels and paired covers from an article, screenshots, notes or video in two visual systems
Skill that finds illustration spots in an article and generates images, diagrams and covers with three engines
Infostyle
infostyle
A Russian copy-editing skill based on Ilyakhov's information style: cuts filler and cliches, adds facts, shows before and after
E-commerce Visual Copywriting
ecommerce-visual-copywriting
A skill that turns product data into a plan for main images, the product page and A+ content, with on-image copy, generation prompts and a claims check
A collection of open Agent Skills by Huashu for content work: slides, design, data processing, video scripts and text proofreading
A WeChat article layout skill: turns Markdown into paste-ready HTML with inlined styles that survives pasting into the official account editor
Comparison with similar tools
Entries that share the main search query, and how they differ.
| Entry | Official | Repository stars | Main difference |
|---|---|---|---|
| infocard-skills (this entry) | no | 518 | |
| Guizang Social Card Skill | no | 7,853 | builds carousels of social cards and paired covers from an article, screenshots, notes or video in two visual systems |
| baoyu-skills | no | 27,059 | a content skill set: article illustrations, covers, infographics, comics, translation and posting to social networks |
README in short
The README is short: what the repository holds, installation, three check phrases and example requests. Next comes an image of layouts for different ratios. A Chinese version and documents on content fit and the prompt sit alongside.
README badge
Original SKILL.md
---
name: editorial-card-screenshot
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."
metadata: {"clawdbot":{"requires":{"bins":["google-chrome","chromium","chrome"]}}}
---
# 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.
Before compressing content, first change the layout skeleton.
- Ratio changes should primarily change reading path, hierarchy, and module arrangement.
- Do not treat ratio changes as a reason to delete content by default.
- Only compress, group, or summarize when the current ratio cannot hold the content clearly after layout has already been restructured.
### 2. Apply the Stored Editorial Rules
Use these defaults unless the user overrides them:
- Import Google Fonts:
```html
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&family=Oswald:wght@500;700&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
```