new-slide-deck

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.

インストールへ移動

リポジトリ: crazywoola/dify-x
ソースの最終更新活動: 2026年7月20日 08:19
検出された SKILL.md の言語: 英語
スター: 5
フォーク: 0

インストール方法

デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。

Codex または Claude でインストールこの Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。

直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。

npx skills add https://github.com/crazywoola/dify-x --skill new-slide-deck

コマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。

ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。

ソースファイルを確認

インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。

SKILL.md

ソースの指示 · 読み取り専用プレビュー

検索に戻るインストールに戻る

stripe-billing

Safely look up Stripe Sandbox customers and subscriptions, preview Payment Link creation, and create approved Payment Links with traceable object IDs.

2026-08-11

このリポジトリのすべてを見る

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_DIR`	`acme` (lowercase, kebab-case)
`PILL_LABEL`	`Dify × Acme`
`THEME`	`nordic` · `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.css
Reveal version: 4.5.0
Fonts: Inter + Noto Sans SC + JetBrains Mono (Google Fonts)
Icons: RemixIcon remixicon@3.5.0
Extra: Tailwind CDN for utility classes
<html lang>: zh-CN / en
Default 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: 5
Fonts: Söhne (fallback: Inter) + Noto Sans SC
width × height: 1920 × 1080
Classes available: .grid-2, .callout, .pill, .scribble, .emph, mark, .hl, .centered, section.card, section.accent
Sub-themes:
- theme-swiss.css — minimal, white bg, subtle blue diffusion
- theme-atelier.css — richer gradient, warmer, expressive
- theme-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.css
Reveal version: 4.5.0
Palette: --pop-yellow #FFE900, --pop-red #FF3333, --pop-cyan #00FFFF, --pop-blue #3366FF
Hard shadows: 8px 8px 0 #000 — zero border-radius
Icons: 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 = =>
    
    
    
    


    
        中文
        /
        EN
    
    
        
        {SHORT_LABEL}
    
    
        

            
            
                
                    {ZH_TITLE}
                    {ZH_SUBTITLE}
                    
                    
                        crazywoola（Banana）
                        Developer Relations @ Dify
                        banana@dify.ai
                    
                
                Speaker notes here.

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>

    
        中文
        /
        EN
    
    
    
        
        
        
    
    
        

            
            
                {ZH_TITLE}
                {ZH_SUBTITLE}
                crazywoola（Banana） · Developer Relations @ Dify · banana@dify.ai
                Speaker notes here.

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 = =>
    
    
    
    
    


    
        中文
        /
        EN
    
    
        

            
            
                
                    {PILL_LABEL}
                    {ZH_TITLE}
                    {ZH_SUBTITLE}
                    crazywoola（Banana） · Developer Relations @ Dify
                
                Speaker notes here.

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 =>PointDescription

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><!-- horizontal parent --></section>
    <section><!-- vertical child 1 --></section>
    <section><!-- vertical child 2 --></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.svg`	Dify logo (used in all decks)
`agent-systems/styles.css`	Full Nordic design system (1300+ lines, vars + components)
`milvus/styles/dify-theme.css`	Milvus brand token overrides
`milvus/styles/base.css`	Milvus base typography + layout utilities
`milvus/styles/theme-swiss.css`	Sub-theme: Swiss minimal
`milvus/styles/theme-atelier.css`	Sub-theme: Atelier gradient
`milvus/styles/theme-ukiyo.css`	Sub-theme: Ukiyo washi
`aispeech/styles/nordic.css`	Pop Art base reset
`aispeech/styles/popart.css`	Pop Art component styles

All CSS files are referenced via relative ../ paths from the deck directory — no copying needed.

new-slide-deck

ソース情報

インストール方法

ソースファイルを確認

このリポジトリの他の Skills

このリポジトリの他の Skills

New Slide Deck

Step 1 — Gather info

Step 2 — Choose a theme

Theme A · Nordic (default) — agent-systems / hongkong-oss / pupu

Theme B · Milvus — milvus

Theme C · Pop Art — aispeech

Step 3 — Create the deck files

Nordic HTML skeleton

Milvus HTML skeleton (with theme switcher)

Pop Art HTML skeleton

Step 4 — Common slide patterns

Two-column grid (Nordic / Milvus)

Pill + numbered list (Nordic)

Dark brand slide (Nordic)

Closing slide (Milvus style)

Vertical stack (nested sections)

Step 5 — Register on index pages

Step 6 — Verify

Shared asset reference

New Slide Deck

Step 1 — Gather info

Step 2 — Choose a theme

Theme A · Nordic (default) — agent-systems / hongkong-oss / pupu

Theme B · Milvus — milvus

Theme C · Pop Art — aispeech

Step 3 — Create the deck files

Nordic HTML skeleton

Milvus HTML skeleton (with theme switcher)

Pop Art HTML skeleton

Step 4 — Common slide patterns

Two-column grid (Nordic / Milvus)

Pill + numbered list (Nordic)

Dark brand slide (Nordic)

Closing slide (Milvus style)

Vertical stack (nested sections)

Step 5 — Register on index pages

Step 6 — Verify

Shared asset reference

Theme A · Nordic (default) — `agent-systems` / `hongkong-oss` / `pupu`

Theme B · Milvus — `milvus`

Theme C · Pop Art — `aispeech`

Theme A · Nordic (default) — `agent-systems` / `hongkong-oss` / `pupu`

Theme B · Milvus — `milvus`

Theme C · Pop Art — `aispeech`