skills.rest
guoliang1114-boop
guoliang1114-boopCOMMUNITY
Explore all skills by this author →
GitHub

infocard

Convert input content into editorial HTML/CSS information cards embedded in Markdown.

43|2|Updated Mar 26, 2026
Search Tags:#markdown#html#css#visual hierarchy#editorial design#infocard#tone sensing
One-click install
npx skills add https://github.com/guoliang1114-boop/AriaAI --skill infocard-guoliang1114-boop
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: infocard
Source: https://github.com/guoliang1114-boop/AriaAI/tree/main/skills/infocard
Command: npx skills add https://github.com/guoliang1114-boop/AriaAI --skill infocard-guoliang1114-boop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of turning messy or high-level notes into clean, magazine-quality information cards that people can scan and reuse quickly.

Core Features & Use Cases

  • Editorial HTML/CSS card generation in Markdown: Produces info cards by embedding continuous HTML directly inside Markdown for consistent rendering.
  • Automatic tone sensing for visual palette selection: Chooses an appropriate background and accent scheme based on the topic’s keywords (with safe defaults).
  • Layout and typography rule enforcement: Ensures correct hierarchy (hero/subtitle/body/meta), avoids common AI layout anti-patterns, and keeps spacing mathematically precise.
  • Style families and layout skeleton guidance: Guides you to pick a visual family (e.g., warm editorial, technical blueprint, policy paper) and a layout structure (hero, bento grid, metric board, etc.) suited to your content.

Quick Start

Create an editorial info card from your topic by pasting your source text, choosing a style family (or leaving it blank to use tone sensing), and then asking for an HTML+Markdown card that follows the spacing, typography, and anti-AI rules.

Frequently Asked Questions about infocard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert markdown text into editorial-style HTML info cards?▼

To convert markdown text into editorial-style HTML info cards, use a tool that embeds continuous HTML directly inside Markdown. This enforces strict layout, typography, and visual hierarchy rules to produce magazine-quality, scannable content cards.

What is tone sensing for visual palette selection in HTML card generation?▼

Tone sensing for visual palette selection automatically analyzes your topic's keywords to choose an appropriate background and accent color scheme. It provides a safe default fallback when specific tone keywords are absent from the source text.

How do I avoid common AI layout anti-patterns when generating CSS information cards?▼

To avoid common AI layout anti-patterns when generating CSS information cards, enforce mathematical spacing precision and correct visual hierarchy. Use predefined layout skeletons like hero, bento grid, or metric board to maintain editorial design standards.

Can I generate single-topic content cards without specifying a style family?▼

Yes, you can generate single-topic content cards without specifying a style family. Leave the style family blank to trigger automatic tone sensing, which selects a suitable visual palette like warm editorial, technical blueprint, or policy paper based on your content.

Why use direct non-fenced HTML embedding instead of code blocks for Markdown info cards?▼

Direct non-fenced HTML embedding is used for Markdown info cards to ensure consistent rendering across platforms. Fenced code blocks display raw syntax rather than the rendered visual output, preventing the editorial card layout from displaying correctly.

What are the limitations of using embedded HTML for visual hierarchy in Markdown?▼

Using embedded HTML for visual hierarchy in Markdown requires platforms that support rendering raw, non-fenced HTML tags. Enforcing strict editorial design constraints limits custom layout modifications outside the predefined style families and layout skeletons.

Related Skills

Explore More Content & Communication Skills→
ShubhamsabooShubhamsaboo
131.7k

email-drafter

Draft professional emails with subject/body templates and tone controls.

Community
Basic
aryanshrai03aryanshrai03

infocard

Generate editorial-style HTML information cards embedded directly in Markdown.

Community
Advanced
Higashi-KotaHigashi-Kota

accessibility-review

Audit design system tokens and components for WCAG compliance.

Community
Intermediate
markdown-viewermarkdown-viewer
3.1k

infocard

Create editorial information cards in Markdown with embedded HTML/CSS templates.

Official
Intermediate