Slide Creation Toolkit Skill

Slide Creation Toolkit

Create professional Marp/Marpit presentations, diagrams, and color systems with a consistent design language.

Core rules

Use bg (background) syntax for all images - Reduces manual resizing with fit modifier
Define one color palette and reuse it in slides and SVGs.
Define one spacing system and reuse it everywhere.
Enforce visual hierarchy with size, weight, and saturation.
Use consistent visual language (fill vs outline, emphasis rules).
Minimize visual noise; keep one primary visual anchor per section.

Quick Start

Two Ways to Start

Option 1: Use scripts (automated):

uv run scripts/init_presentation.py technical-dark my-deck.md "My Title" "Author"

Option 2: Work manually (full control):

Copy a template from assets/templates/ → customize
Design colors following references/color-design/workflow.md
Write slides following references/marpit-authoring/syntax-guide.md
Add diagrams following references/svg-illustration/core-rules.md

Study examples first: Read assets/examples/ to see working presentations before starting.

Script Commands

Browse and generate color palettes:

uv run scripts/generate_palette.py list                    # List all slide palettes
uv run scripts/generate_palette.py show code-blue          # Show palette details
uv run scripts/generate_palette.py brand "#FF6B35" light   # Generate from brand color
uv run scripts/generate_palette.py svg-list                # List SVG quick palettes
uv run scripts/generate_palette.py svg-show default        # Show SVG palette details

Templates (starting points - copy and fill in your content):

assets/templates/minimal.md - Bare minimum structure (5 slides)
assets/templates/technical-dark.md - Dark theme for code/technical content
assets/templates/professional-light.md - Light theme for business presentations
assets/templates/minimal-keynote.md - Minimal design for story-driven talks
assets/templates/with-bg-images.md - Template showcasing bg syntax for images

Examples (learning references - study patterns and copy techniques):

assets/examples/with-bg-syntax.md - Shows all bg syntax patterns (full-page, split, comparison)
assets/examples/with-diagrams.md - Shows inline SVG diagram integration
assets/examples/with-palette.md - Shows custom palette application
assets/examples/full-presentation.md - Shows all features combined (architecture + charts + code)

Common icons (ready to use in slides):

![width:60px](assets/icons/check.svg)    <!-- ✓ checkmark -->
![width:60px](assets/icons/warning.svg)  <!-- ⚠ warning -->
![width:60px](assets/icons/error.svg)    <!-- ✗ error -->
![width:60px](assets/icons/info.svg)     <!-- ℹ info -->

Modules

Module 1: Color design

Design slide color systems (background, text, accents, semantic colors).

Output: color palette specification with hex codes and usage guidelines.

Browse available palettes:

uv run scripts/generate_palette.py list       # All slide palettes
uv run scripts/generate_palette.py svg-list   # SVG quick palettes

Read in order:

references/color-design/workflow.md
references/color-design/strategies.md
references/color-palettes.md (index of palettes; use script to view details)
references/color-design/output-template.md (match the format)

Module 2: Marpit authoring

Write valid Marpit/Marp Markdown slides.

Output: valid Marpit-compatible Markdown (.md).

Rules:

Output directly renderable Marpit Markdown.
Always use bg syntax for images (e.g., ![bg right fit](image.svg))
Avoid HTML; use Marpit directives and Markdown only.
Use HTML only if no Marpit alternative exists.

Read in order:

references/marpit-authoring/syntax-guide.md
references/marpit-authoring/patterns.md
references/marpit-authoring/advanced-layouts.md (use for complex layouts)
references/marpit-authoring/themes.md
references/marpit-authoring/best-practices.md (use for quality checks)

Module 3: SVG illustration

Create SVG diagrams and illustrations for slides.

Output: SVG XML optimized for Marp HTML export.

Rules:

Create clean, editable SVGs with predictable sizing.
Match slide colors and spacing.

Read in order:

references/svg-illustration/core-rules.md
references/svg-illustration/pattern-examples.md
references/svg-illustration/embedding.md
references/svg-illustration/troubleshooting.md

Validate SVGs after creation:

svglint path/to/file.svg

Workflow

Single tasks

Draw a diagram:

Read references/svg-illustration/core-rules.md.
Use references/svg-illustration/pattern-examples.md for layouts.
Choose colors: uv run scripts/generate_palette.py svg-show default

Design slide colors:

Browse palettes: uv run scripts/generate_palette.py list
View details: uv run scripts/generate_palette.py show code-blue
Or generate from brand: uv run scripts/generate_palette.py brand "#BRAND" light
Or follow references/color-design/workflow.md for custom design.

Write slides:

Follow references/marpit-authoring/syntax-guide.md.
Use references/marpit-authoring/patterns.md for layouts.
Apply a palette from the color module.

Full presentation

Establish a palette with the color module.
Outline slides and author in Marpit.
Add diagrams with the SVG module.
Keep palette, spacing, and hierarchy consistent.

Decision guide

See references/decision-guide.md for a flowchart and loading strategy.

Quick rules:

Slides or deck -> Marpit authoring
Slides + colors -> Color design -> Marpit authoring
Slides + diagrams -> Marpit authoring + SVG illustration
Diagram only -> SVG illustration

Scale reference loading:

Simple request -> core rules only
Complex request -> add patterns and best-practices

Output formats

See references/output-examples.md for complete examples with detailed annotations.

Quick reference:

Color design: Strategy + 7-role palette + usage guidelines + validation checklist
Marpit: Frontmatter (marp: true) + slides separated by ---
SVG: <svg viewBox="..." xmlns="..."> with proper sizing and consistent colors

Integration rules

Use palette hex values in SVG fill and stroke.
Keep border radius and stroke widths consistent between Marpit and SVG.
Embed SVGs with Markdown images or file references.

Troubleshooting

Common cross-cutting issues:

Validation

Check SVG syntax and best practices:

svglint diagram.svg

Verify color contrast (WCAG compliance):

uv run scripts/check_contrast.py '#D4D4D4' '#1E1E1E'
# Output: Contrast ratio: 11.25:1 ✅ WCAG AAA

Validate Marpit syntax:

bash scripts/validate_marpit.sh slides.md

Always validate before committing files.

Constraints

Output Marpit Markdown only; do not generate PowerPoint/Keynote files.
Output SVG only; do not generate raster images.
Avoid interactive animations; keep slides static.
Preserve provided brand colors; adapt them into the palette.

Agent Skills: Slide Creation Toolkit

Skill Files