Editorial Card Screenshot
Turns raw text into publication-ready HTML info cards with proper typographic hierarchy, then screenshots them at exact aspect ratios. The workflow is surprisingly thorough: it picks layout skeletons based on content density and ratio, applies Swiss-international style defaults (Noto Sans, Inter, warm paper backgrounds, 18-20px body text), and adapts structure instead of just cropping content when you switch from 4:3 to 3:4. Supports eight fixed ratios including wide cinematic formats. The real value is in the opinionated editorial rules, it knows not to tile everything into equal boxes and actually thinks about visual weight and reading paths. Good for generating social cards, report covers, or any structured content graphic where you want design quality without opening Figma.
- skills.sh installs
- 102
- GitHub stars
- 518
- last updated
- Mar 28, 2026
Install
$ npx -y skills add shaom/infocard-skills --skill editorial-card-screenshot --agent claude-codeInstalls into .claude/skills of the current project.
Files
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/shaom/infocard-skills
- Categories
- Frontend Development, Code Review & Quality, AI & Agent Building, Design & UI/UX
- License
- MIT
- First seen
- Jun 11, 2026
Recommended
More Frontend Development
Plugin Structureanthropics/claude-codeThis skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plu0skills.sh installs
gh-pr-reviewcherryhq/cherry-studioAutomated Cherry Studio code review for local branches, PRs, commits, and files. Use for reviewing code, docs, or pull requests with project-specific checks for0skills.sh installs
artifacts-buildercomposiohq/awesome-claude-pluginsSuite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for0skills.sh installs
web-designcountbot-ai/countbot网页设计与部署。生成精美的单页 HTML 网页（报告、落地页、数据可视化等），支持一键部署到 Cloudflare Pages。使用 Tailwind CSS + Chart.js + Font Awesome 技术栈。当用户要求制作网页、生成报告页面、创建落地页、数据可视化展示、部署网页到线上时使用。0skills.sh installs
plugin-structuredavila7/claude-code-templatesThis skill should be used when the user asks to "create a plugin", "scaffold a plugin", "understand plugin structure", "organize plugin components", "set up plu0skills.sh installs
sap-extension-creatorheshengtao/super-agent-partyCreate Super Agent Party (SAP) extensions. This skill should be used when users want to create, build, or scaffold a new extension for Super Agent Party - inclu0skills.sh installs