Synthèse automatique

Génère une page HTML autonome avec CSS intégré et l'ouvre dans le navigateur pour afficher du contenu trop dense pour le terminal.

Points forts

Fournit un template HTML/CSS complet et prêt à adapter (tableaux, cartes, tags, grille responsive)
Définit des critères explicites de déclenchement : tableaux de 5+ colonnes, listes de 20+ éléments, rapports multi-sections
Le fichier est autonome et écrit dans /tmp, donc sans dépendance ni pollution du projet
Permet de lire la sortie dans une fenêtre pendant que l'utilisateur continue à taper dans le terminal

Limites

Suppose un environnement de type macOS avec la commande `open` et un système de fichiers /tmp
N'améliore pas la qualité du contenu, seulement sa présentation ; aucun tri ni filtrage des données
Aucun mécanisme de nettoyage des fichiers HTML accumulés dans /tmp

Quand l'utiliser

À utiliser lorsqu'une réponse produit un tableau large, une longue liste structurée ou un rapport en plusieurs sections difficile à lire dans le terminal.

Quand l'éviter

À éviter pour les réponses courtes, les extraits de code, les listes simples ou les échanges conversationnels.

Analyse de sécurité

Sûr

Score qualité85/100

The skill only generates a self-contained local HTML file under /tmp and opens it with the macOS `open` command. There is no network access, no secret/token handling, no destructive filesystem operations, and no obfuscated or encoded payloads. The only execution is running the user's default browser on a locally-written file, which is low risk; the sole minor note is that `open` is macOS-specific and the skill implicitly requires Write/bash despite declaring no allowed-tools, but neither introduces a security concern.

Aucun point d'attention détecté

Comment cette analyse est faite

Exemples

Large comparison table

Compare the top 12 Postgres hosting providers across price, region, backups, HA and SLA in a table.

Long audit report

Audit this repo's dependencies and give me a full report of outdated packages, licenses and known CVEs.

Side-by-side architecture options

Lay out the three architecture options for our event pipeline side by side with pros, cons and costs.

name: html-view description: Render complex content as a styled HTML page and open in browser user_invocable: true

HTML View Skill

Name: Affichage HTML
Author: Skills Guide Bot

Render complex, large, or visually dense content as a beautiful HTML page and open it in the browser. Terminal is great for short answers - but for big tables, long lists, reports, and structured data, a browser page is much better.

Why This Exists

Claude Code often responds with long reports (20+ items). Reading them in terminal means scrolling up - but any keystroke snaps the view back to the bottom. You can't read and type at the same time. This skill renders the output in a browser window so you can read in one window and type in another.

When to Use

Use this skill proactively when content would be hard to read in terminal:

Large tables (5+ columns or 10+ rows)
Long structured lists (20+ items)
Reports with multiple sections
Side-by-side comparisons
Timelines, dashboards, status overviews
Any output where formatting matters for comprehension

Do NOT use for:

Short answers (< 20 lines)
Simple lists
Code snippets
Conversational responses

How It Works

Generate a self-contained HTML file with inline CSS
Save to /tmp/claude-view-{timestamp}.html
Open in default browser via open command
Tell the user what was rendered

HTML Template

Use this base structure. Adapt layout/components to the content type.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{TITLE}</title>
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
    background: #fafafa;
    color: #1a1a1a;
    line-height: 1.6;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }

  h1 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: #111;
  }

  .subtitle {
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 2rem;
  }

  h2 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: #333;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
  }

  th {
    text-align: left;
    padding: 0.6rem 0.8rem;
    border-bottom: 2px solid #e0e0e0;
    font-weight: 600;
    color: #555;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  td {
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid #f0f0f0;
  }

  tr:hover { background: #f8f8f8; }

  .card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 1.25rem;
    margin: 0.75rem 0;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
  }

  .tag {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
  }

  .tag-green  { background: #e6f9e6; color: #1a7a1a; }
  .tag-yellow { background: #fff8e0; color: #8a6d00; }
  .tag-red    { background: #fde8e8; color: #b91c1c; }
  .tag-blue   { background: #e8f0fe; color: #1a56db; }
  .tag-gray   { background: #f0f0f0; color: #666; }

  ul, ol { padding-left: 1.5rem; margin: 0.5rem 0; }
  li { margin: 0.3rem 0; }

  .muted { color: #999; }
  .bold { font-weight: 600; }
  .mono { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85em; }

  @media (max-width: 768px) {
    body { padding: 1rem; }
    .card-grid { grid-template-columns: 1fr; }
    table { font-size: 0.8rem; }
  }
</style>
</head>
<body>
  <h1>{TITLE}</h1>
  <div class="subtitle">Generated by Claude Code</div>

  {CONTENT}

</body>
</html>

Content Patterns

Table

<table>
  <thead><tr><th>Column</th><th>Column</th></tr></thead>
  <tbody><tr><td>Value</td><td>Value</td></tr></tbody>
</table>

Card Grid

<div class="card-grid">
  <div class="card">
    <div class="bold">Title</div>
    <div class="muted">Description</div>
    <span class="tag tag-green">Status</span>
  </div>
</div>

Instructions

Determine the best layout for the content (table, cards, list, mixed)
Generate complete self-contained HTML (all CSS inline in <style>)
No external dependencies - everything must work offline

Write file:

FILE="/tmp/claude-view-$(date +%s).html"

Use the Write tool to create the HTML file
Open in browser:
```
open "$FILE"
```
Briefly confirm what was rendered

Style Guide

Clean, minimal Apple-inspired aesthetic
No heavy colors or gradients
Use tags/badges for status indicators
Generous whitespace
Readable font sizes

Du fichier au premier essai

Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.

Consulter la source et ses fichiers annexes

Ce téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.

1. Télécharger le fichier

Télécharger SKILL.md

Depuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/html-view-mryiqhcj/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.

Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.

mkdir -p '.skill-downloads/html-view-mryiqhcj' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/html-view-mryiqhcj/download' --output '.skill-downloads/html-view-mryiqhcj/SKILL.md.part' && mv '.skill-downloads/html-view-mryiqhcj/SKILL.md.part' '.skill-downloads/html-view-mryiqhcj/SKILL.md'

2. Vérifier les prérequis

Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.

Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.

Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.

3. Charger la skill

Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.

Claude Code

test -f '.skill-downloads/html-view-mryiqhcj/SKILL.md' && test -s '.skill-downloads/html-view-mryiqhcj/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/html-view' && cp -R '.skill-downloads/html-view-mryiqhcj' '.claude/skills/html-view'

OpenSkills

OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.

Installation officielle d’OpenSkills

openskills install './.skill-downloads/html-view-mryiqhcj'

openskills read 'html-view-mryiqhcj'

La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.

Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.

openskills sync

Mode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.

4. Faire un premier essai

Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :

Lis .skill-downloads/html-view-mryiqhcj/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.

Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.

Skills similaires

Lecteur PDF

Productivite

Lit et extrait le texte de fichiers PDF (rapports, contrats, tableurs). Gère les fichiers locaux, les URL et les pièces jointes WhatsApp. Utilisez-le dès qu'un contenu PDF est nécessaire, même sans demande explicite.

Claude CodeCursorCodexbeginnerSûr 20,122

Skills Guide Bot

Workflows de messagerie Discord

Productivite

Utilisez l'outil message pour envoyer, modifier et modérer des messages Discord avec des composants interactifs.

Claude CodeintermediateSûr 388,021

Skills Guide Bot

Aperçu interactif des verdicts

Productivite

Générer un aperçu HTML interactif des verdicts (garder/supprimer) pour la revue par le mainteneur, puis traiter le JSON de retour.

Claude CodeintermediateSûr 316,798

Skills Guide Bot

Affichage HTML

Recommandé pour

Synthèse automatique

Points forts

Limites

Analyse de sécurité

Exemples

name: html-view description: Render complex content as a styled HTML page and open in browser user_invocable: true

HTML View Skill

Why This Exists

When to Use

How It Works

HTML Template

Content Patterns

Table

Card Grid

Instructions

Style Guide

Du fichier au premier essai

1. Télécharger le fichier

2. Vérifier les prérequis

3. Charger la skill

4. Faire un premier essai

Lecteur PDF

Workflows de messagerie Discord

Aperçu interactif des verdicts