Skip to main content Skills Marktplatz Entdecken und erkunden Sie KI-Skills, die von der Community erstellt wurden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Prompt-Details anzeigen Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
npx skills add https://github.com/crazywoola/dify-x --skill new-slide-deckDer Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.
Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.
ZIP herunterladen Herunterladen... Mehr aus diesem Repository
Verwandte Berufe SOC
Basierend auf der SOC-Berufsklassifikation
name new-slide-deck description Create a new reveal.js slide deck for dify-x and register it on the index pages. Use when asked to add a new presentation, create a new deck, or add slides for a new customer/event.
New Slide Deck
Creates a new reveal.js presentation in /Users/minibanana/Program/dify-x/ and wires it into the navigation index.
Step 1 — Gather info
Ask (or infer from context) before writing any files:
Field Example DECK_DIRacme (lowercase, kebab-case)PILL_LABELDify × AcmeTHEMEnordic · milvus · popart (see §Themes) ZH title + one-line description for index.html card EN title + one-line description for index_en.html card Slide content outline titles, bullets, speaker notes per slide
Step 2 — Choose a theme
Theme A · Nordic (default) — agent-systems / hongkong-oss / pupu
Clean, grid-based, Dify Blue on white. Best for technical deep-dives.
CSS : reference ../agent-systems/styles.cssReveal version : 4.5.0Fonts : Inter + Noto Sans SC + JetBrains Mono (Google Fonts)Icons : RemixIcon remixicon@3.5.0Extra : Tailwind CDN for utility classes<html lang>zh-CN / enDefault bg : data-background-color="#fafafa" (light) or "#0033ff" (brand)Cover layout : .slide-hero with .author-block (name / role / email)
Theme B · Milvus — milvus
Three switchable sub-themes (Swiss / Atelier / Ukiyo) via keyboard 1/2/3.
CSS : styles/dify-theme.css + styles/base.css + styles/theme-swiss.css (default)Reveal version : 5Fonts : Söhne (fallback: Inter) + Noto Sans SCwidth × height1920 × 1080Classes available : .grid-2, .callout, .pill, .scribble, .emph, mark, .hl, .centered, section.card, section.accentSub-themes :
theme-swiss.css — minimal, white bg, subtle blue diffusiontheme-atelier.css — richer gradient, warmer, expressivetheme-ukiyo.css — washi paper texture, indigo brush underline on h2
Theme C · Pop Art — aispeech
Bold, comic-strip aesthetics. Best for high-energy keynote-style talks.
CSS : ../aispeech/styles/nordic.css + ../aispeech/styles/popart.cssReveal version : 4.5.0Palette : --pop-yellow #FFE900, --pop-red #FF3333, --pop-cyan #00FFFF, --pop-blue #3366FFHard shadows : 8px 8px 0 #000 — zero border-radiusIcons : Font Awesome @6.5.2
Step 3 — Create the deck files
Nordic HTML skeleton
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reset.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css" id ="theme" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/github.css" >
<link href ="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel ="stylesheet" >
<link
Milvus HTML skeleton (with theme switcher)
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css" id ="reveal-theme" >
<link rel ="stylesheet" href ="../milvus/styles/dify-theme.css" >
<link rel ="stylesheet" href ="../milvus/styles/base.css" >
<link rel ="stylesheet" id ="theme-variant" href ="../milvus/styles/theme-swiss.css" >
</head >
Pop Art HTML skeleton
<!doctype html >
<html lang ="zh-CN" >
<head >
<meta charset ="utf-8" >
<meta name ="viewport" content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<title > {ZH_TITLE} — Dify</title >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reset.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/theme/white.css" id ="theme" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/monokai.css" >
<link rel ="stylesheet" href ="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" >
<link
Mirror the same structure for index_en.html with lang="en" and English content.
Step 4 — Common slide patterns
Two-column grid (Nordic / Milvus)
<section >
<h2 > Section Title</h2 >
<div class ="grid-2" style ="margin-top:1.5rem;" >
<div class ="callout" > <strong > Left point</strong > <br > Detail text here.</div >
<div class ="callout" > <strong > Right point</strong > <br > Detail text here.</div >
</div >
</section >
Pill + numbered list (Nordic)
<section data-background-color ="#fafafa" >
<div class ="slide-label" >
<span class ="pill" > Section Name</span >
</div >
<h2 class ="slide-title" > Slide Title</h2 >
<div class ="step-list" >
<div class ="step-item" > <span class ="step-num" > 01</span > <div class ="step-content" > <strong > Point</strong > <p > Description</p > </div > </div >
<div class ="step-item" > <span class ="step-num" > 02</span > <div Dark brand slide (Nordic)
<section data-background-color ="#0033ff" >
<div class ="slide-hero text-center" >
<h2 style ="color:#fff;font-size:2.2rem;" > Key Message</h2 >
<p style ="color:rgba(255,255,255,0.85);" > Supporting detail</p >
</div >
</section >
Closing slide (Milvus style)
<section >
<div class ="centered" >
<img src ="../assets/logo.svg" class ="logo-large" alt ="Dify" >
<h2 > {ZH_CLOSING_HEADLINE}</h2 >
<p class ="meta" > banana@dify.ai</p >
</div >
</section >
Vertical stack (nested sections)
<section >
<section > </section >
<section > </section >
<section > </section >
</section >
Step 5 — Register on index pages
Append inside <div class="deck-grid"> in both /Users/minibanana/Program/dify-x/index.html and index_en.html:
<a class ="card" href ="{DECK_DIR}/index.html" >
<div class ="pill-wrapper" > <span class ="pill" > {PILL_LABEL}</span > </div >
<h3 > {ZH_TITLE}</h3 >
<p > {ZH_DESCRIPTION}</p >
<div class ="card-footer" > Start Presentation<svg width ="16" height ="16" viewBox ="0 0 24 24" fill ="none" stroke ="currentColor" stroke-width ="2" stroke-linecap ="round" stroke-linejoin ="round" > <line x1 ="5" y1 ="12" x2 ="19" y2 ="12" > </line > <polyline Use {DECK_DIR}/index_en.html + EN text for index_en.html.
Step 6 — Verify
New directory and both HTML files exist.
Both index pages contain the new card.
Remind user to open the deck in a browser to check rendering.
Shared asset reference
Path Contents assets/logo.svgDify logo (used in all decks) agent-systems/styles.cssFull Nordic design system (1300+ lines, vars + components) milvus/styles/dify-theme.cssMilvus brand token overrides milvus/styles/base.cssMilvus base typography + layout utilities milvus/styles/theme-swiss.cssSub-theme: Swiss minimal milvus/styles/theme-atelier.cssSub-theme: Atelier gradient milvus/styles/theme-ukiyo.cssSub-theme: Ukiyo washi aispeech/styles/nordic.cssPop Art base reset aispeech/styles/popart.cssPop Art component styles
All CSS files are referenced via relative ../ paths from the deck directory — no copying needed.
rel
"preconnect"
href
"https://fonts.googleapis.com"
<link rel ="preconnect" href ="https://fonts.gstatic.com" crossorigin >
<link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono&display=swap" rel ="stylesheet" >
<script src ="https://cdn.tailwindcss.com" >
</script >
<link rel ="stylesheet" href ="../agent-systems/styles.css" >
</head >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="nordic-logo" >
<img src ="../assets/logo.svg" alt ="Dify" class ="nordic-logo-img" >
<span class ="nordic-logo-text" >
</span >
</div >
<div class ="reveal" >
<div class ="slides" >
<section data-background-color ="#fafafa" >
<div class ="slide-hero text-center" style ="max-width:860px;" >
<h1 style ="font-size:2.8rem;line-height:1.1;" >
</h1 >
<p class ="slide-subtitle" style ="margin:1.2rem auto 0;max-width:560px;" >
</p >
<div style ="width:48px;height:3px;background:var(--dify-blue);border-radius:2px;margin:2rem 0 1.5rem;" >
</div >
<div class ="author-block" style ="align-items:center;margin-top:0;" >
<div class ="author-name" >
</div >
<div class ="author-meta" >
</div >
<div class ="author-email" >
</div >
</div >
</div >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
transition : 'fade' ,
backgroundTransition : 'fade' ,
plugins : [RevealNotes , RevealHighlight ],
});
</script >
</body >
</html >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="brand" >
<img src ="../assets/logo.svg" alt ="Dify" >
</div >
<div id ="bg-shapes" >
<div class ="shape s1" style ="width:900px;height:700px;top:-10%;left:-8%;" >
</div >
<div class ="shape s2" style ="width:700px;height:600px;top:5%;right:-6%;" >
</div >
<div class ="shape s3" style ="width:600px;height:500px;bottom:-12%;left:30%;" >
</div >
</div >
<div class ="reveal" >
<div class ="slides" >
<section >
<h1 class ="title-big" >
</h1 >
<p class ="subtitle" >
</p >
<p class ="meta" >
</p >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/notes/notes.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
width : 1920 ,
height : 1080 ,
margin : 0.04 ,
controls : true ,
progress : true ,
slideNumber : 'c/t' ,
transition : 'fade' ,
plugins : [RevealNotes ],
});
const themeLink = document .getElementById ('theme-variant' );
const indicator = document .createElement ('div' );
indicator.style .cssText = 'position:fixed;right:20px;top:20px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.5);color:#fff;font:14px/1.2 system-ui;z-index:999;opacity:0;transition:opacity .2s;' ;
document .body .appendChild (indicator);
const showIndicator = (t ) => { indicator.textContent = t; indicator.style .opacity ='1' ; clearTimeout (showIndicator._t ); showIndicator._t =setTimeout (()=> indicator.style .opacity ='0' ,1200 ); };
const setTheme = (n ) => { themeLink.href =`../milvus/styles/${n} .css` ; showIndicator ('Theme: ' +n.replace ('theme-' ,'' )); };
window .addEventListener ('keydown' , (e ) => {
if (e.key ==='1' ) setTheme ('theme-swiss' );
if (e.key ==='2' ) setTheme ('theme-atelier' );
if (e.key ==='3' ) setTheme ('theme-ukiyo' );
});
</script >
</body >
</html >
rel
"preconnect"
href
"https://fonts.googleapis.com"
<link rel ="preconnect" href ="https://fonts.gstatic.com" crossorigin >
<link href ="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;700&family=JetBrains+Mono:wght@500;700&display=swap" rel ="stylesheet" >
<script src ="https://cdn.tailwindcss.com" >
</script >
<link rel ="stylesheet" href ="../aispeech/styles/nordic.css" >
<link rel ="stylesheet" href ="../aispeech/styles/popart.css" >
</head >
<body >
<div class ="lang-switch" >
<a class ="active" href ="index.html" >
</a >
<span >
</span >
<a href ="index_en.html" >
</a >
</div >
<div class ="reveal" >
<div class ="slides" >
<section data-background-color ="#FFE900" >
<div style ="border:3px solid #000;padding:48px;box-shadow:12px 12px 0 #000;max-width:900px;" >
<div style ="font-size:1rem;font-weight:900;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px;" >
</div >
<h1 style ="font-size:3.2rem;font-weight:900;line-height:1.05;color:#000;" >
</h1 >
<p style ="font-size:1.3rem;margin-top:24px;color:#000;" >
</p >
<div style ="margin-top:32px;font-size:0.9rem;font-weight:700;" >
</div >
</div >
<aside class ="notes" >
</aside >
</section >
</div >
</div >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/dist/reveal.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/notes/notes.js" >
</script >
<script src ="https://cdn.jsdelivr.net/npm/reveal.js@4.5.0/plugin/highlight/highlight.js" >
</script >
<script >
Reveal .initialize ({
hash : true ,
transition : 'none' ,
backgroundTransition : 'none' ,
plugins : [RevealNotes , RevealHighlight ],
});
</script >
</body >
</html >
class
"step-content"
<strong >
</strong >
<p >
</p >
</div >
</div >
</div >
</section >
points
"12 5 19 12 12 19"
</polyline >
</svg >
</div >
</a >
