🎯

infocard

🎯Skill

from markdown-viewer/skills

VibeIndex|
What it does
|

Generates editorial-style HTML/CSS information cards embedded directly inside Markdown (no code fences, no empty lines in the HTML), with content analysed across density × structure × mood to choose layout and tone-sensed colour palettes (Philosophical, Technical, Literary, Scientific, Business, Creative). Enforces an anti-AI taste checklist — no centred hero, no equal-width tiles, no pure black, max 1 accent under 80% saturation, no purple-blue gradients, no AI phrasing — across 12 ready style templates and several layout skeletons.

📦

Same repository

markdown-viewer/skills(20 items)

infocard

Installation

Vibe Index InstallInstalls to .claude/skills/
npx vibeindex add markdown-viewer/skills --skill infocard
skills.sh Install⚠ Installs to .agents/skills/
npx skills add markdown-viewer/skills --skill infocard
Manual InstallCopy SKILL.md content and save to the path below
~/.claude/skills/infocard/SKILL.md

SKILL.md

2,616Installs
-
AddedApr 13, 2026

More from this repository10

🎯
uml🎯Skill

A skill for creating UML diagrams using drawio XML format, covering Class, Sequence, Activity, State Machine, Component, Use Case, and Deployment diagrams with standard UML shapes and notation.

🎯
architecture🎯Skill

A skill for creating layered architecture diagrams using HTML/CSS templates with color-coded layers and flexible grid layouts (single/double/triple column), ideal for visualizing system layers, microservices, and enterprise application design.

🎯
infographic🎯Skill

Generates visually stunning infographics using pre-designed templates for quick, impactful visual communication of processes, comparisons, and data.

🎯
graphviz🎯Skill

A skill for creating complex directed/undirected graphs with automatic layout using DOT language, best for dependency trees, module relationships, package hierarchies, and call graphs with fine-grained edge routing and hierarchical layouts.

🎯
canvas🎯Skill

Generates spatial node-based diagrams with precise x/y coordinates for mind maps, knowledge graphs, and planning boards using JSON format.

🎯
bpmn🎯Skill

Generates business process and integration diagrams in PlantUML using three stencil families: `mxgraph.bpmn.*` (events, gateways, user/service/script/manual/business-rule tasks, data objects), `mxgraph.eip.*` (channels, routers, splitters, aggregators, translators, wire taps), and `mxgraph.lean_mapping.*` (supplier/customer, manufacturing process, supermarket, FIFO lane, kanban variants, kaizen burst). Supports BPMN pools/lanes via `rectangle "Pool" { ... }`, sequence flows (`-->`), and message flows (`..>`) for order processing, approval workflows, EIP messaging, ETL pipelines, value streams, and event-driven architectures.

🎯
network🎯Skill

A skill for creating network topology diagrams using drawio XML format with industry-standard device icons for LAN/WAN, enterprise networks, cloud infrastructure, and vendor-specific diagrams (Cisco, Arista, Fortinet).

🎯
data-analytics🎯Skill

Builds data-pipeline and analytics architecture diagrams in PlantUML using `mxgraph.aws4.*` stencils for query engines (Athena), ETL (Glue), streaming (Kinesis, MSK), MapReduce (EMR), data warehouse (Redshift), data lakes (Lake Formation, S3), BI (QuickSight), and database stencils (Aurora, RDS, DynamoDB, Neptune, ElastiCache, DocumentDB). Supports left-to-right pipeline layouts, batch (`-->`) vs streaming/CDC (`..>`) flows, and zone grouping for Data Lake, real-time, ETL, log analytics, ML feature store, and CDC architectures.

🎯
archimate🎯Skill

Generates ArchiMate enterprise architecture diagrams using PlantUML's `<archimate/Archimate>` stdlib macros — Business/Application/Technology/Motivation/Strategy/Implementation layer elements, all `Rel_*` relationship macros with `_Up/_Down/_Left/_Right` directional suffixes, and `rectangle "Layer" { ... }` grouping. Best for TOGAF viewpoints, layered EA modeling, motivation analysis, capability maps, and migration planning, always wrapped in a ` ```plantuml ` fence.

🎯
vega🎯Skill

Generates data-driven charts using Vega-Lite and Vega, transforming numeric data arrays into statistical visualizations like bar, line, scatter, and heatmap charts.