CommunityRédaction et éditiongithub.com

markdown-viewer/infocard

Créez des fiches d'information de style éditorial en utilisant HTML/CSS dans Markdown. Idéal pour les résumés de connaissances, les faits marquants, les annonces d'événements et les cartes de contenu à sujet unique avec une typographie de qualité magazine.

Qu'est-ce que infocard ?

Cette compétence vous permet de générer des fiches d'information élégantes et riches visuellement directement dans vos documents Markdown, en combinant HTML et CSS. Elle est particulièrement utile pour produire des résumés de connaissances, des faits marquants, des annonces d'événements ou tout contenu ciblé nécessitant une présentation soignée de type magazine. La compétence s'appuie sur des balises HTML standard (comme `<div>`, `<h1>`, `<p>`, `<img>`) et des styles CSS inline ou intégrés pour créer des cartes responsives et esthétiques. Compatible avec la plupart des visionneuses Markdown et des plateformes supportant le HTML (comme GitHub, VS Code, ou des outils de documentation), elle ne nécessite aucune dépendance externe. L'approche est simple : insérez un bloc HTML dans votre Markdown, personnalisez les styles (couleurs, polices, bordures, ombres) et la carte s'affiche comme un élément graphique distinct, parfait pour attirer l'attention sur des informations clés.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/markdown-viewer/skills/tree/main/skills/infocard

Installed? Explore more Rédaction et édition skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Aperçu

Depuis le README du skill

infocard preview

Documentation

Que fait infocard ?

Créez des fiches d'information de style éditorial en utilisant HTML/CSS dans Markdown. Idéal pour les résumés de connaissances, les faits marquants, les annonces d'événements et les cartes de contenu à sujet unique avec une typographie de qualité magazine.

Aperçu

Cette compétence vous permet d'intégrer des fiches d'information personnalisées directement dans votre contenu Markdown. Les fiches sont construites avec du HTML et du CSS standard, garantissant une compatibilité avec la plupart des plateformes Markdown (GitHub, VS Code, etc.).

Utilisation

Pour créer une fiche d'information, insérez le code HTML suivant dans votre document Markdown :

<div style="border: 1px solid #ccc; padding: 16px; border-radius: 8px; background-color: #f9f9f9;">
  <h2 style="margin-top: 0;">Titre de la fiche</h2>
  <p>Contenu de la fiche. Vous pouvez inclure du texte, des images, des listes, etc.</p>
  <img src="https://exemple.com/image.jpg" alt="Image descriptive" style="max-width: 100%; border-radius: 4px;">
</div>

Personnalisation

Vous pouvez personnaliser l'apparence de la fiche en modifiant les propriétés CSS suivantes :

  • border : Définit la bordure (couleur, épaisseur, style).
  • padding : Espace intérieur de la fiche.
  • border-radius : Arrondi des coins.
  • background-color : Couleur de fond.
  • box-shadow : Ombre portée pour un effet de relief.
  • font-family : Police de caractères (par exemple Georgia, serif ou Arial, sans-serif).

Exemple

<div style="border-left: 4px solid #007bff; padding: 12px; background-color: #e7f1ff; border-radius: 4px;">
  <h3 style="color: #007bff;">📰 Annonce importante</h3>
  <p>Nouvelle fonctionnalité de fiche d'information disponible ! Testez-la dès maintenant.</p>
</div>

Bonnes pratiques

  1. Gardez le contenu concis : Les fiches sont conçues pour des informations clés, pas pour de longs textes.
  2. Utilisez des couleurs cohérentes : Adoptez une palette qui s'harmonise avec votre document.
  3. Optez pour des polices lisibles : Privilégiez les polices standard (sans-serif, serif).
  4. Testez l'affichage : Vérifiez que la fiche s'affiche correctement sur la plateforme cible (elle peut ne pas être supportée partout).

Compatibilité

Cette compétence est compatible avec :

  • GitHub Markdown
  • VS Code (aperçu Markdown)
  • GitLab Markdown
  • La plupart des visionneuses Markdown supportant le HTML
  • Certains générateurs de sites statiques (Jekyll, Hugo) – à vérifier selon la configuration

Limitations

  • Certaines plateformes (comme Discord ou Telegram) n'affichent pas le HTML.
  • Les styles CSS complexes peuvent ne pas être rendus correctement partout.
  • Les images distantes doivent être accessibles publiquement pour s'afficher.

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.

Skills associés

steipete/notion

Notion CLI/API for pages, Markdown content, data sources, files, comments, search, Workers, and raw API calls.

community

langchain-ai/langchain

The agent engineering platform.

community

bytedance/podcast-generation

Use this skill when the user requests to generate, create, or produce podcasts from text content. Converts written content into a two-host conversational podcast audio format with natural dialogue.

community

composiohq/twitter-algorithm-optimizer

Analyze and optimize tweets for maximum reach using Twitter's open-source algorithm insights. Rewrite and edit user tweets to improve engagement and visibility based on how the recommendation system ranks content.

community

composiohq/competitive-ads-extractor

Extracts and analyzes competitors' ads from ad libraries (Facebook, LinkedIn, etc.) to understand what messaging, problems, and creative approaches are working. Helps inspire and improve your own ad campaigns.

community

upstash/context7

Context7 Platform -- Up-to-date code documentation for LLMs and AI code editors

community
← More Rédaction et édition skills