Create editorial-style information cards using HTML/CSS in Markdown. Best for knowledge summaries, data highlights, event announcements, and single-topic content cards with magazine-quality typography.
The Infocard skill allows users to create editorial-style information cards directly in Markdown using embedded HTML and CSS. It addresses the challenge of presenting structured, visually appealing content within Markdown documents without relying on external tools or image assets. By providing a framework for content analysis and automated styling, it simplifies the process of turning knowledge summaries, event announcements, or single-topic content into magazine-quality cards that are ready for web or documentation use.
Infocard offers a set of critical rules and features to ensure high-quality output. It requires direct HTML embedding without empty lines to prevent parsing errors, enforces content analysis across density, structure, and mood dimensions, and uses automatic tone sensing to select appropriate color palettes based on keywords. The skill also provides guidance on typography hierarchy, layout selection, and editorial handling of titles and subtitles. Users can choose style templates that override tone sensing for more precise visual control.
This skill is particularly useful for content creators, technical writers, educators, and marketing professionals who need to summarize or highlight key information in an engaging, readable format. Use cases include knowledge summaries, data highlights, event announcements, educational cards, or single-topic feature cards. Its structured approach ensures clarity, visual consistency, and accessibility, making it suitable for both individual authors and teams producing content across multiple platforms.
You write the info card directly in HTML embedded in your Markdown file. Do not use code fences; keep the HTML block continuous without empty lines.
Infocard is designed to work with multi-platform Markdown viewers including Chrome, Edge, Firefox, and VS Code with the Markdown Viewer extension installed.
Yes. By default, Infocard auto-selects a color palette based on content tone keywords, but you can override it by explicitly choosing a style template.
Infocard is ideal for single-topic summaries, event announcements, data highlights, and knowledge cards where structured visual presentation improves readability.
Yes. The HTML must be continuous without empty lines, and the skill expects standard HTML/CSS embedding within Markdown. Improper spacing may cause parsing errors.
Quick Setup:
.claude/skills/Repository
markdown-viewer/skills