🖼️

AutomationHTML

Editorial Card Screenshot

Editorial Card Screenshot is an Automation skill for Claude Code, published by shaom in infocard-skills.

501 stars33 forkson shaom/infocard-skillsAdded 2026/08/26Repository updated 2026/06/13

View source on GitHub Download repo ZIP

agent-skillseditorial-designinfocard

Install in seconds

Install Editorial Card Screenshot

Copy Editorial Card Screenshot into your Claude Code skills folder. Run the command in your terminal, or review the source on GitHub before installing.

terminal

npx degit https://github.com/shaom/infocard-skills/tree/main/skills/editorial-card-screenshot ~/.claude/skills/editorial-card-screenshot

Requires Node.js. Downloads this skill only — not the rest of the repository — into your Claude Code skills folder.

Without Node.js

git clone https://github.com/shaom/infocard-skills.git

Clones the whole repository, then copy the skill’s own directory into your skills folder yourself.

In this catalog

Source file: skills/editorial-card-screenshot/SKILL.md in shaom/infocard-skills
Installs to: ~/.claude/skills/editorial-card-screenshot
Collection: The only skill cataloged from this repository
Category: Automation — 1523 skills

What Editorial Card Screenshot does

Editorial Card Screenshot generates compact HTML info cards in an editorial magazine style and renders them as ratio-specific screenshots. Use it when you need both the card markup and a PNG cover from the same content.

Editorial Card Screenshot is cataloged under Automation on DirSkills. Editorial Card Screenshot comes from a repository tagged agent-skills, editorial-design and infocard.

Documentation

README

Excerpt

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:

Write one sentence judging the information density as high, medium, or low.
Output the complete HTML with embedded CSS.
Self-check that body text remains readable on mobile.

Workflow

1. Analyze Content Density

This is the opening of the README. Read the full README on GitHub.

Frequently asked about Editorial Card Screenshot

How does Editorial Card Screenshot compare to other Automation skills?
Editorial Card Screenshot ranks #1350 by stars among the 1523 Automation skills in this catalog. The most-starred ones next to it are Autonomous Loops, Autonomous Agent Harness and Automation Audit Ops. DirSkills ranks by the star count of the repository each skill ships in, so that order reflects how popular those repositories are rather than any review of Editorial Card Screenshot against them. Open each page to compare what they document and how they install.

More Automation skills

Editorial Card Screenshot is one of 1523 Automation skills cataloged on DirSkills, ranked #1350 by stars among them.

Browse all Automation skills →

Autonomous Loops

Autonomous Loops provides patterns and reference implementations for running Claude Code in autonomous loops, from simple sequential pipelines to RFC-driven multi-agent DAG systems. Retained for compatibility; use continuous-agent-loop for new guidance.

Autonomous Agent Harness

Autonomous Agent Harness turns Claude Code into a self-directing agent system with persistent memory, scheduled tasks, computer use, and task queuing. Use it when continuous autonomous operation, scheduled tasks, or self-directing agent loops are needed.

Automation Audit Ops

Automation Audit Ops audits live automations, jobs, hooks, and connectors to identify what is working, broken, redundant, or missing before any fixes are made.