Community写作与编辑github.com

markdown-viewer/infocard

使用 HTML/CSS 在 Markdown 中创建编辑风格的信息卡片。适用于知识总结、数据高亮、活动公告和单主题内容卡片,具有杂志级排版质量。

infocard 是什么?

该技能允许用户通过嵌入 HTML 和 CSS 代码在 Markdown 文档中生成具有杂志级排版的编辑风格信息卡片。它特别适用于知识摘要、数据亮点、活动公告以及单主题内容展示,能够显著提升文档的视觉吸引力和可读性。该技能兼容多种支持 Markdown 渲染的平台,包括 Claude Code、Cursor 与 Codex 等 AI 代理工具,用户只需在 Markdown 中编写标准 HTML 与内联 CSS 即可。通过提供预定义的卡片样式模板,它简化了复杂排版的设计过程,使开发者无需深入了解前端技术即可快速创建美观的信息卡片。整体上,该技能增强了 Markdown 的表达能力,在技术文档、报告和演示中实现内容与设计的完美结合。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/infocard

Installed? Explore more 写作与编辑 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

infocard 是做什么的?

使用 HTML/CSS 在 Markdown 中创建编辑风格的信息卡片。适用于知识总结、数据高亮、活动公告和单主题内容卡片,具有杂志级排版质量。

Individual skills in this repo

This repo contains 13 individual skills — each has its own dedicated page.

markdown-viewer/archimate

Create ArchiMate enterprise architecture diagrams using PlantUML stdlib macros. Best for TOGAF viewpoints, layered EA modeling (Business/Application/Technology), motivation analysis, and migration planning.

markdown-viewer/architecture

Create layered system architecture diagrams using HTML/CSS templates with color-coded tiers and grid layouts. Best for technology stacks, microservices topology, and multi-tier application design.

markdown-viewer/bpmn

Create business process diagrams using PlantUML syntax with BPMN, EIP, and Lean Mapping stencil icons. Best for workflow automation, approval chains, message-based integration patterns, and value stream mapping.

markdown-viewer/canvas

Create spatial diagrams with free-positioned nodes using JSON format. Best for concept maps, knowledge graphs, and planning boards requiring precise x/y coordinate control.

markdown-viewer/cloud

Create cloud provider architecture diagrams using PlantUML syntax with official AWS, Azure, GCP, and Alibaba Cloud service icons. Best for multi-service cloud topologies and migration blueprints.

markdown-viewer/data-analytics

Create data pipeline and analytics architecture diagrams using PlantUML syntax with database/analytics stencil icons. Best for ETL pipelines, data lakes, real-time streaming, data warehousing, and BI dashboard design.

markdown-viewer/graphviz

Create directed/undirected graphs using DOT language with automatic layout. Best for dependency trees, call graphs, package hierarchies, and module relationships requiring fine-grained edge routing.

markdown-viewer/iot

Create IoT architecture diagrams using PlantUML syntax with device and sensor stencil icons. Best for smart home, industrial IoT (IIoT), fleet management, edge computing, and sensor network layouts.

markdown-viewer/mindmap

Create hierarchical mind maps using PlantUML @startmindmap syntax. Best for brainstorming, topic decomposition, study notes, and decision trees with automatic radial layout, left/right branches, and per-node styling.

markdown-viewer/network

Create network topology diagrams using PlantUML syntax with mxgraph device icons (Cisco, Citrix, etc.). Best for LAN/WAN layouts, datacenter interconnects, and physical/logical network design.

markdown-viewer/security

Create security architecture diagrams using PlantUML syntax with identity, encryption, firewall, and compliance stencil icons. Best for IAM flows, zero-trust models, encryption pipelines, and threat detection architectures.

markdown-viewer/uml

Create UML diagrams using PlantUML syntax. Best for software modeling — Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with concise text-based notation and auto-layout.

markdown-viewer/vega

Create data-driven charts with Vega-Lite (declarative) and Vega (programmatic). Best for statistical visualization of numeric data — bar, line, scatter, heatmap, area, radar charts, and word clouds.

相关技能