Skills Guide

Générateur de diapositives HTML interactives

VérifiéSûr

Créez des présentations interactives en un seul fichier HTML avec un thème Cyberpunk Professionnel. Idéal pour des slideshows de qualité Keynote.

Télécharger et utiliser
Spar Skills Guide Bot
ContenuIntermédiaire
26/07/2026
Claude CodeCursorCodex
#presentations#slides#html-css#single-file#design-system

Recommandé pour

Claude CodeCursorCodexDesigner UI/UXSEO & contenuProduct manager

Synthèse automatique

Cette skill produit une présentation HTML interactive au format d'un fichier unique, en suivant un système de design sombre « Cyberpunk Professional » avec titres dégradés, effets de verre et mise en page adaptée au mobile.

Points forts

  • Un seul fichier index.html autonome, rangé dans slides/<nom>/dist/index.html, avec CSS et JS intégrés
  • Système de design explicite : palette de couleurs, typographies Google Fonts (Space Grotesk, Inter, JetBrains Mono) et tokens CSS réutilisables
  • Bloc média query mobile fourni tel quel pour le scale-to-fit : sur petit écran, les slides deviennent une liste verticale mise à l'échelle
  • Structure de travail claire en cinq étapes, de l'analyse du contenu à l'enregistrement du fichier

Limites

  • Le thème sombre « Cyberpunk Professional » est imposé : aucun autre style visuel n'est proposé
  • Les polices et icônes viennent de CDN externes (Google Fonts, FontAwesome), ce qui exige une connexion réseau
  • La génération d'images dépend de Nano Banana Pro ou de simples URL Unsplash, donc des placeholders si aucun outil n'est disponible
Quand l'utiliser

À utiliser quand vous voulez une présentation ou un deck technique autonome et soigné, livré sous forme d'un unique fichier HTML plutôt qu'en .pptx.

Quand l'éviter

À éviter si votre charte graphique exige un thème clair ou une identité visuelle propre, ou s'il faut un fichier PowerPoint natif et éditable.

Analyse de sécurité

Sûr
Score qualité78/100

The skill is a pure code-generation/prompt template for producing a single-file HTML slide deck. The only risk surface is runtime network fetches to well-known CDNs and image hosts plus a file write to a subdirectory of the working tree. There is no command execution, secret access, or obfuscation, so listing it poses no meaningful execution risk.

Points d'attention
  • •Relies on third-party CDNs at render time (Google Fonts, cdnjs FontAwesome) and Unsplash image URLs, which means the generated deck phones out to external hosts when opened
  • •References an external image-generation tool ('Nano Banana Pro') without pinning or describing it, so behavior depends on whatever that integration does
  • •Writes output to a fixed repo path (slides/<ppt-name>/dist/index.html); ppt-name is user/LLM-derived and not sanitized, a mild path-handling concern rather than an exploitation vector
  • •No shell execution, no credential/token handling, no obfuscated payloads, no destructive commands, and no instruction to bypass safety controls
Comment cette analyse est faite

Exemples

Technical talk deck
Create a 10-slide HTML presentation about our new event-driven architecture, covering the problem, the design, and the migration plan. Save it to slides/event-driven-arch/dist/index.html.
Product pitch
Turn these product notes into an interactive HTML slide deck in the cyberpunk dark style, with a title slide, 3 feature slides and a pricing slide.
Mobile-friendly deck
Build a single-file HTML slide deck for my conference talk — it must also work well on phones with vertically stacked, scaled-down slides.

name: slides description: Generate high-quality, single-file HTML interactive slide decks. Use this skill when the user asks to create a presentation, slide deck, or PPT. metadata: author: Yuga Sun version: "2026.01.29"

Interactive HTML Slide Generator

Instructions

Act as an expert Frontend Developer and Presentation Designer to generate a "Keynote-quality" single-file HTML presentation.

  1. Analyze Content: Transform user input into a logical slide outline (8-12 slides).
  2. Apply Design: Use the "Cyberpunk Professional" theme defined below.
  3. Visual Assets: If necessary, use Nano Banana Pro to generate high-quality images for slide content.
  4. Generate Code: Output a single index.html file containing all CSS, JS, and HTML.
  5. Save Output: Save the file to slides/<ppt-name>/dist/index.html.

Design Philosophy & System

  • Theme: "Cyberpunk Professional" / Dark Tech.
  • Background: Deep dark background (#030712) with subtle animated grid or radial gradients.
  • Glassmorphism: Slides use rgba(17, 24, 39, 0.85) with backdrop-filter: blur(20px) and thin borders.
  • Typography:
    • Headings: 'Space Grotesk' (Google Fonts) - Tech/Modern feel.
    • Body: 'Inter' (Google Fonts) - Clean/Readable.
    • Code: 'JetBrains Mono' (Google Fonts) - Developer focus.
  • Color Palette:
    • Background: #030712 (--bg-color)
    • Primary Accent: Cyan #06b6d4 (--accent-primary)
    • Secondary Accent: Violet #8b5cf6 (--accent-secondary)
    • Warning/Highlight: Amber #f59e0b (--accent-warning)
    • Text: #f8fafc (Main, --text-main), #94a3b8 (Muted, --text-muted)

Technical Requirements

  1. Output Path & Format: Output must be a single index.html file (containing all CSS/JS) located at slides/<ppt-name>/dist/index.html.
  2. External Assets: Use CDNs for Fonts (Google Fonts) and Icons (FontAwesome). Images should be Unsplash URLs or placeholders.
  3. Responsiveness: Implement the "Scale-to-Fit" logic for mobile devices.
    • Desktop: Single slide view, hidden overflow.
    • Mobile (<768px): Vertical scrolling list of slides. Each slide is forced to 1280x720 but scaled down (using transform: scale()) to fit the screen width, with margin adjustments to remove gaps.

Mobile Styling Specification

The generated CSS must include this exact media query block to handle the complex scaling logic:

@media (max-width: 768px) {
    body {
        overflow-y: auto !important;
        height: auto !important;
        display: block !important;
        padding: 20px 0;
        background-attachment: scroll;
    }

    #deck {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        aspect-ratio: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0; 
        padding: 0;
        align-items: center;
        overflow: hidden;
    }

    .slide-container {
        /* Force visible (Override JS) */
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        
        /* Force Desktop Dimensions */
        width: 1280px !important;
        height: 720px !important;
        min-height: 720px !important;
        flex-shrink: 0;
        
        /* Scale using JS-calculated variable */
        transform: scale(var(--scale, 0.3)) !important;
        transform-origin: top center !important;
        
        /* Layout Fix: Close the gap caused by scaling */
        margin-bottom: calc(720px * var(--scale, 0.3) - 720px + 20px) !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        top: auto !important;
        
        border-radius: 24px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    }

    .controls, .progress-bar { 
        display: none !important; 
    }
    
    .animate-in {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

Navigation Strategies

  1. Desktop:
    • Keyboard (Arrow keys, Space).
    • On-screen buttons (Next/Prev).
    • Progress bar at the bottom.
  2. Mobile:
    • Native scroll interaction (Vertical list).
    • Hide controls and progress bar.

Animations

Staggered entry animations (.animate-in, .delay-1, etc.) for elements within a slide.

Slide Templates

1. Structure

All slides live inside a #deck container.

<div class="slide-container" id="slideX">
  <div class="content-area">
    <!-- Content here -->
  </div>
</div>

2. Common Layouts

  • Cover Slide: Large H1 with gradient text, subtitle, and call-to-action pill.
  • Split Layout: .grid-2 (Left Content / Right Image) for defining concepts.
  • Tiled Grid: .grid-tiled (2-4 cards) for features/stat cards.
  • Timeline: .timeline with .timeline-item and .dot for roadmaps.
  • Stats: .stat-grid with .stat-item and .num for data visualization.
  • Comparison Table: .table-container for pros/cons.

Boilerplate Code

Always start with this structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Presentation Title</title>
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        :root {
            --bg-color: #030712;
            --slide-bg: rgba(17, 24, 39, 0.85);
            --accent-primary: #06b6d4;
            --accent-secondary: #8b5cf6;
            --accent-warning: #f59e0b;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --glass-border: rgba(255, 255, 255, 0.08);
            --neon-glow: 0 0 20px rgba(6, 182, 212, 0.15);
        }

        * { box-sizing: border-box; }

        body {
            background-color: var(--bg-color);
            background-image:
                radial-gradient(circle at 15% 50%, rgba(139, 92, 246, 0.08), transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(6, 182, 212, 0.08), transparent 25%);
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            color: var(--text-main);
        }

        #deck {
            width: 1280px;
            height: 720px;
            position: relative;
            transform: scale(var(--scale, 1));
            aspect-ratio: 16/9;
        }

        .slide-container {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-color: var(--slide-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 24px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), var(--neon-glow);
            border: 1px solid var(--glass-border);
            padding: 60px 80px;
            display: flex;
            flex-direction: column;
            opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .slide-container.active {
            opacity: 1;
            transform: scale(1);
            pointer-events: auto;
            z-index: 10;
        }

        /* Typography */
        h1, h2, h3 {
            font-family: 'Space Grotesk', 'Noto Sans SC', sans-serif;
            margin: 0;
            color: var(--text-main);
            letter-spacing: -0.02em;
        }

        h1 {
            font-size: 72px;
            line-height: 1.1;
            font-weight: 700;
            background: linear-gradient(135deg, #fff 30%, var(--accent-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        h2 { font-size: 48px; font-weight: 600; margin-bottom: 2rem; position: relative; }
        h2::after { 
            content: ''; display: block; width: 60px; height: 4px; 
            background: var(--accent-primary); margin-top: 16px; border-radius: 2px;
        }
        
        h3 { font-size: 24px; color: var(--accent-primary); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
        
        p, li { font-size: 20px; line-height: 1.6; color: var(--text-muted); }
        .subtitle { font-size: 24px; font-weight: 300; margin-top: 1.5rem; max-width: 800px; }
        
        .mono-accent { font-family: 'JetBrains Mono', monospace; color: var(--accent-primary); }
        .text-gradient { background: linear-gradient(to right, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        /* Animations */
        .animate-in { opacity: 0; transform: translateY(20px); }
        .active .animate-in { animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
        .delay-1 { animation-delay: 0.1s; }
        .delay-2 { animation-delay: 0.2s; }
        .delay-3 { animation-delay: 0.3s; }
        .delay-4 { animation-delay: 0.4s; }

        @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

        /* Layout Utility Classes */
        .content-area { flex: 1; display: flex; flex-direction: column; justify-content: center; }
        
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; height: 100%; }
        .grid-tiled { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
        
        .card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--glass-border);
            padding: 30px;
            border-radius: 16px;
            transition: transform 0.3s ease, border-color 0.3s ease;
        }
        .card:hover { transform: translateY(-5px); border-color: var(--accent-primary); background: rgba(255, 255, 255, 0.05); }

        .img-box {
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--glass-border);
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }
        .img-box img { width: 100%; height: 100%; object-fit: cover; display: block; }

        /* Specific Components */
        .timeline { display: flex; justify-content: space-between; position: relative; margin-top: 40px; }
        .timeline::before { content: ''; position: absolute; top: 24px; left: 0; width: 100%; height: 2px; background: var(--glass-border); z-index: 0; }
        .timeline-item { position: relative; z-index: 1; text-align: center; flex: 1; }
        .dot { 
            width: 50px; height: 50px; background: rgba(3, 7, 18, 0.9); border: 2px solid var(--accent-primary); 
            border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
            color: var(--accent-primary); font-family: 'Space Grotesk'; font-weight: 700;
            box-shadow: 0 0 15px rgba(6, 182, 212, 0.2);
        }

        .stat-grid { display: flex; justify-content: space-around; gap: 40px; text-align: center; margin-top: 20px; }
        .stat-item .num { 
            font-size: 80px; font-weight: 700; font-family: 'Space Grotesk'; color: transparent;
            -webkit-text-stroke: 2px var(--accent-primary); line-height: 1; margin-bottom: 10px;
            position: relative;
        }
        .stat-item .num::after {
            content: attr(data-val); position: absolute; left: 0; top: 0; width: 100%;
            color: var(--accent-primary); opacity: 0.15; filter: blur(5px);
        }
        
        .table-container { 
            border: 1px solid var(--glass-border); border-radius: 12px; overflow: hidden; 
            background: rgba(255,255,255,0.02);
        }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 20px 30px; text-align: left; border-bottom: 1px solid var(--glass-border); }
        th { color: var(--accent-primary); font-weight: 600; text-transform: uppercase; font-size: 16px; letter-spacing: 1px; }
        tr:last-child td { border-bottom: none; }

        /* UI Controls */
        .progress-bar { position: fixed; bottom: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.1); z-index: 100; }
        .progress-fill { height: 100%; background: var(--accent-primary); width: 0%; transition: width 0.3s; box-shadow: 0 0 10px var(--accent-primary); }
        
        .controls { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; z-index: 100; }
        .btn-nav { 
            width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.05); 
            border: 1px solid var(--glass-border); color: var(--text-main); display: flex; 
            align-items: center; justify-content: center; cursor: pointer; transition: 0.2s;
            font-size: 18px; backdrop-filter: blur(10px);
        }
        .btn-nav:hover { background: var(--accent-primary); color: #000; border-color: var(--accent-primary); box-shadow: 0 0 20px rgba(6,182,212,0.4); }

        /* Helpers */
        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .text-center { text-align: center; }
        .m-auto { margin: auto; }
        .pill { 
            display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; 
            border: 1px solid var(--accent-primary); border-radius: 50px; 
            color: var(--accent-primary); font-family: 'JetBrains Mono'; font-size: 14px; margin-top: 30px;
        }

        /* Responsive Mobile - Vertical Scroll */
        @media (max-width: 768px){
            body{overflow-y:auto!important;height:auto!important;display:block!important;padding:20px 0;background-attachment:scroll}#deck{width:100%!important;height:auto!important;max-width:none!important;max-height:none!important;aspect-ratio:auto!important;display:flex!important;flex-direction:column!important;gap:0;padding:0;align-items:center;overflow:hidden}.slide-container{position:relative!important;opacity:1!important;visibility:visible!important;transform:none!important;width:1280px!important;height:720px!important;flex-shrink:0;transform:scale(var(--scale,0.3))!important;transform-origin:top center!important;margin-bottom:calc(720px * var(--scale,0.3) - 720px + 20px)!important;left:auto!important;top:auto!important}.controls,.progress-bar{display:none!important}.active .animate-in{animation:none!important;opacity:1!important;transform:none!important}.animate-in{opacity:1!important;transform:none!important}
        }
    </style>
</head>
<body>
    <div id="deck">
        <!-- Slides go here -->
    </div>

    <!-- UI -->
    <div class="progress-bar"><div class="progress-fill" id="progressFill"></div></div>
    <div class="controls">
        <div class="btn-nav" onclick="prevSlide()"><i class="fa-solid fa-chevron-left"></i></div>
        <div class="btn-nav" onclick="nextSlide()"><i class="fa-solid fa-chevron-right"></i></div>
    </div>

    <script>
        // Scaling Logic
        function updateMobileScale() {
            if (window.innerWidth <= 1280) {
                const scale = Math.min((window.innerWidth - 40) / 1280, 1);
                document.documentElement.style.setProperty('--scale', scale);
            } else {
                document.documentElement.style.removeProperty('--scale');
            }
        }
        window.addEventListener('resize', updateMobileScale);
        updateMobileScale();

        // Navigation Logic
        let currentSlide = 1;
        const totalSlides = [TOTAL_SLIDES_COUNT];
        
        function updateUI() {
            document.querySelectorAll('.slide-container').forEach(s => s.classList.remove('active'));
            const active = document.getElementById('slide' + currentSlide);
            if(active) {
                active.classList.add('active');
                // Re-trigger animations
                active.querySelectorAll('.animate-in').forEach(el => {
                    el.style.animation = 'none';
                    el.offsetHeight; 
                    el.style.animation = '';
                });
            }
            document.getElementById('progressFill').style.width = ((currentSlide - 1) / (totalSlides - 1)) * 100 + '%';
        }
        
        function nextSlide() { if(currentSlide < totalSlides) { currentSlide++; updateUI(); } }
        function prevSlide() { if(currentSlide > 1) { currentSlide--; updateUI(); } }
        
        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowRight' || e.key === 'Space') nextSlide();
            if (e.key === 'ArrowLeft') prevSlide();
        });
        
        updateUI();
    </script>
</body>
</html>

Instruction

When generating slides:

  1. Analyze Content: Break down the user's topic into logical slides (approx 8-12 slides).
  2. Select Layouts: Choose the most appropriate visual layout for each point (e.g., Timeline for history, Tiles for features).
  3. Refine Copy: Use punchy, high-impact headings. Avoid walls of text. Use span with colors for emphasis.
  4. Final Slide: The last slide MUST use the specific "Q & A" layout with the author's contact info. Use the following HTML structure: 
    <div class="slide-container" id="slide[LAST_INDEX]">
    <div class="content-area" style="align-items: center; text-align: center;">
        <h2 class="animate-in" style="font-size: 60px; margin-bottom: 20px;">Q & A</h2>
        <p class="subtitle animate-in delay-1">Start building with /speckit today.</p>

        <div class="animate-in delay-2"
            style="margin-top: 60px; display: flex; flex-direction: column; gap: 20px; align-items: center;">
            <a href="mailto:yugasun.ai@gmail.com"
                style="text-decoration: none; color: white; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(255,255,255,0.05); border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s;">
                <i class="fa-solid fa-envelope" style="color: var(--accent-primary);"></i> yugasun.ai@gmail.com
            </a>
            <a href="https://github.com/yugasun" target="_blank"
                style="text-decoration: none; color: white; display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: rgba(255,255,255,0.05); border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s;">
                <i class="fa-brands fa-github" style="color: var(--accent-secondary);"></i> github.com/yugasun
            </a>
        </div>
    </div>
</div>
  5. Code It: Output the full HTML code.

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/interactive-html-slide-generator-ms1aw4za/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/interactive-html-slide-generator-ms1aw4za' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/interactive-html-slide-generator-ms1aw4za/download' --output '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md.part' && mv '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md.part' '.skill-downloads/interactive-html-slide-generator-ms1aw4za/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/interactive-html-slide-generator-ms1aw4za/SKILL.md' && test -s '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/slides' && cp -R '.skill-downloads/interactive-html-slide-generator-ms1aw4za' '.claude/skills/slides'

Cursor
test -f '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md' && test -s '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md' && mkdir -p '.cursor/skills' && test ! -e '.cursor/skills/slides' && cp -R '.skill-downloads/interactive-html-slide-generator-ms1aw4za' '.cursor/skills/slides'

Codex
test -f '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md' && test -s '.skill-downloads/interactive-html-slide-generator-ms1aw4za/SKILL.md' && mkdir -p '.agents/skills' && test ! -e '.agents/skills/slides' && cp -R '.skill-downloads/interactive-html-slide-generator-ms1aw4za' '.agents/skills/slides'

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/interactive-html-slide-generator-ms1aw4za'

openskills read 'interactive-html-slide-generator-ms1aw4za'

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/interactive-html-slide-generator-ms1aw4za/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

Fragments d'écriture

Contenu

Extrayez des fragments d'écriture bruts via un entretien intensif, sans imposer de structure. Capturez idées, citations et mots porteurs pour une utilisation ultérieure.

Claude CodebeginnerSûr 240,316
Skills Guide Bot

Rédaction UI et audit

Contenu

Rédigez ou auditez les textes d'interface (boutons, erreurs, états vides, infobulles) dans le monorepo, en suivant la source de vérité du design system.

Claude CodeCursorbeginnerSûr 108,623
Skills Guide Bot

Extraction MIDI/score

Contenu

Extrait le MIDI ou la partition d'une production musicale existante via l'outil MCP CogMusic et confirme la disponibilité du fichier.

Claude CodebeginnerSûr 69,866
Skills Guide Bot