本文へ移動
cccskills
無料GitHub で公開

md-slides

Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide for PDF export. Triggers when the markdown-html-orchestrator classifies an input as SLIDES, or when invoked directly via /cs:md-slides. Reuses md-document's markdown parser for slide-body rendering and reads design-system tokens via config_loader.py. Refuses if input has no clear slide boundaries, produces a 1-slide deck, or `--strict-notes` is on with < 50% notes coverage. Use after orchestrator routing.

インストール方法を見る

含まれるファイル(8)

  • SKILL.md6.4 KB
  • assets/md_slides_template.html4.8 KB
  • references/keyboard_nav_patterns.md4.6 KB
  • references/presentation_ux.md5.1 KB
  • references/single_file_deck_conventions.md5.1 KB
  • scripts/deck_html_renderer.py20.4 KB
  • scripts/presenter_notes_parser.py3.9 KB
  • scripts/slide_splitter.py9.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

md-slides — Markdown deck → single-file HTML presentation

The slide-deck converter. Reads a markdown deck (HR or H1 boundaries, optional presenter notes), emits a single-file HTML presentation that runs in any browser with keyboard navigation, presenter mode, and print-to-PDF.

Three stdlib tools pipeline together:

slide_splitter.py  →  presenter_notes_parser.py  →  deck_html_renderer.py
   (md → ordered      (extract <!-- notes:         (slides + design-system
    slides with       --> blocks, attach            tokens → single-file
    titles)           per slide)                    HTML with keyboard nav)

When to invoke

SymptomAction
markdown-html-orchestrator routes input as SLIDESInvoke this skill
User runs /cs:md-slides <path>.md directlyInvoke this skill
Input has 3+ --- HR lines OR 5+ H1 headings with short bodiesInvoke this skill
Input is a long-form specRoute to md-document instead
Input is a code reviewRoute to md-review instead
Input has no clear slide boundariesRefuse, route to md-document
Input would produce 1 slideRefuse (it's a poster)

Pipeline

# 1. Split slides on --- or H1 (auto-detect by default)
python3 markdown-html/skills/md-slides/scripts/slide_splitter.py \
    --input <path>.md --output /tmp/slides.json

# 2. Extract <!-- notes: ... --> blocks from each slide
python3 markdown-html/skills/md-slides/scripts/presenter_notes_parser.py \
    --slides /tmp/slides.json --output /tmp/deck.json

# 3. Render single-file HTML deck
python3 markdown-html/skills/md-slides/scripts/deck_html_renderer.py \
    --slides /tmp/deck.json --title "My Talk" --output deck.html

What ships in the HTML

  • All slides as <section class="slide"> — one visible at a time, controlled by JS
  • Keyboard nav — → / Space / PgDn advance; ← / PgUp previous; Home/End jump; P presenter mode; Esc exits presenter
  • URL-hash deep linking — #3 jumps to slide 3; browser back/forward walks slides; share deck.html#5 to send someone directly there
  • Progress bar — 3px at top showing position through the deck
  • Slide counter — bottom-right ("3 / 12")
  • Presenter mode (P key) — splits the window: current slide on left (60% width), panel on right with clock + speaker notes + next-slide preview
  • Print stylesheet — Cmd+P produces a PDF with one slide per page
  • @media (prefers-reduced-motion: reduce) honored
  • 12 brand CSS custom properties from design-system; design_style affects layout density
  • Reuses md-document's markdown parser — slide bodies render with consistent paragraph/list/code/table/callout handling

Hard rules

  1. Refuses input with no clear slide boundaries. Auto mode needs ≥ 3 HR lines or ≥ 5 H1 headings. Otherwise exit 6 — route to md-document.
  2. Refuses 1-slide decks. That's a poster, not a deck. Exit 5.
  3. Refuses input < 100 lines. Same Shihipar threshold as all converters.
  4. Refuses without onboarding. Same gate as every converter.
  5. --strict-notes refuses < 50% notes coverage. A deck where most slides have no notes isn't set up for presenter mode. Exit 7.
  6. Soft-warns slides > 40 source lines. Signal-to-noise; renders anyway but surfaces the count.
  7. Single-file output. All CSS + JS inline. Only external is Google Fonts CSS. Prism.js is opt-in via --syntax.
  8. No JS framework runtime. Vanilla JS + keyboard event handlers, no React/Vue/Svelte.

Forcing-question library (Matt Pocock grill discipline)

  1. Is this actually a deck, or a long document? Recommended: if you can't draw clear slide boundaries, it's not a deck. Canon: Tufte Cognitive Style of PowerPoint.
  2. HR (---) or H1 boundaries? Recommended: HR for typical decks; H1 for outline-driven decks. Canon: Marp / reveal.js / pandoc convergence.
  3. Will it be presented live or distributed for self-paced reading? Recommended: live → need presenter notes; self-paced → notes optional. Canon: Weinschenk 100 Things Every Presenter Needs to Know.
  4. Is there any slide over 40 source lines? Recommended: split it. Canon: NN/g — audience attention drops past ~6 bullets / 200 words.
  5. Is --syntax needed? Recommended: only for decks with substantial code blocks. Default off. Canon: single-file shareability discipline.

Distinct from

  • md-document — that's one continuous document. This is N discrete slides.
  • md-review — that renders diff hunks + annotations. This renders prose slides.
  • marketing/landing/ — that's a landing page, not a deck.
  • Keynote / PowerPoint — those are graphic-design tools. This is for markdown-authored decks projected from a browser.

Output artifact

{default_output_dir}/deck-{slug}.html (path resolved by orchestrator's output_path_resolver.py; collision suffix -2, -3, … by default).

References

  • Shihipar — Claude Code HTML output (Medium, 2026), Tier 3 use case "Slide Decks"
  • Reynolds — Presentation Zen (less is more discipline)
  • Atkinson — Beyond Bullet Points (the bullet-heavy failure mode)
  • Tufte — The Cognitive Style of PowerPoint (the polemic)
  • reveal.js / Big / Marp — convergent markdown-to-deck conventions
  • See references/ for full citations (presentation_ux, keyboard_nav_patterns, single_file_deck_conventions)

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Accessibility audit skill for scanning, fixing, and verifying WCAG 2.2 Level A and AA compliance across React, Next.js, Vue, Angular, Svelte, and plain HTML codebases. Use when auditing accessibility, fixing a11y violations, checking color contrast, generating compliance reports, or integrating accessibility checks into CI/CD pipelines.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

When the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "conversion experiment," "statistical significance," or "test this." For tracking implementation, see analytics-tracking.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

When the user needs to generate, iterate, or scale ad creative for paid advertising. Use when they say 'write ad copy,' 'generate headlines,' 'create ad variations,' 'bulk creative,' 'iterate on ads,' 'ad copy validation,' 'RSA headlines,' 'Meta ad copy,' 'LinkedIn ad,' or 'creative testing.' This is pure creative production — distinct from paid-ads (campaign strategy). Use ad-creative when you need the copy, not the campaign plan.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

Adversarial code review that breaks the self-review monoculture. Use when you want a genuinely critical review of recent changes, before merging a PR, or when you suspect Claude is being too agreeable about code quality. Forces perspective shifts through hostile reviewer personas that catch blind spots the author's mental model shares with the reviewer.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

aeo

無料

Answer Engine Optimization (AEO) skill — optimize content to be cited by AI language models (ChatGPT, Perplexity, Claude, Gemini, Mistral) as authoritative sources. Distinct from SEO — AEO optimizes for citation in LLM-generated responses, not search rankings. Use when planning content for AI-first search audiences, auditing existing content for E-E-A-T signals, tracking which pages get cited by which LLMs, or building a citation-friendly content strategy. Triggers — 'AEO audit', 'optimize for ChatGPT', 'get cited by Perplexity', 'LLM citation strategy', 'answer engine optimization', 'content for AI search', 'E-E-A-T audit'. Output is a markdown audit report (default) or JSON for pipeline integration. Stdlib-only Python tools.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

Mint a tamper-evident, post-quantum-signed receipt for a consequential agent action (deploy, delete, pay, grant-access, model decision) so it can be verified later from the certificate alone. Use when an autonomous agent takes a side-effecting action that may need to be proven later, or when satisfying EU AI Act Article 12 record-keeping. Three decisions: whether an action needs a receipt, minting it, verifying it. Signing is delegated to the open-source OpenAgentOntology package. Not after-the-fact log analysis; not a hosted notary; not a legal opinion.

日本語の概要は準備中です。原文の説明を表示しています。

alirezarezvani/claude-skills2.8万2026年8月30日 更新

alirezarezvani のスキルをすべて見る

このスキルの問題を報告する