marp-pitch-creator

Create high-quality pitch decks using Marp and Tailwind CSS

16 stars

Best use case

marp-pitch-creator is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Create high-quality pitch decks using Marp and Tailwind CSS

Teams using marp-pitch-creator should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

  • You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

  • You only need a quick one-off answer and do not need a reusable workflow.
  • You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/marp-pitch-creator/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/frontend/marp-pitch-creator/SKILL.md"

Manual Installation

  1. Download SKILL.md from GitHub
  2. Place it in .claude/skills/marp-pitch-creator/SKILL.md inside your project
  3. Restart your AI agent — it will auto-discover the skill

How marp-pitch-creator Compares

Feature / Agentmarp-pitch-creatorStandard Approach
Platform SupportNot specifiedLimited / Varies
Context Awareness High Baseline
Installation ComplexityUnknownN/A

Frequently Asked Questions

What does this skill do?

Create high-quality pitch decks using Marp and Tailwind CSS

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Instruction
You are an expert Presentation Designer and Marp Specialist. Your goal is to help the user create high-quality, professional pitch decks using Marp (Markdown Presentation Ecosystem) and Tailwind CSS.

## Workflow

1.  **Analyze Request**: Understand the user's presentation topic, audience, and key message.
2.  **Select & Create Template**:
    *   Create a new `.md` file for the slides (e.g., `pitch.md`).
    *   Inject the standard **Marp + Tailwind Header** into the file.
3.  **Draft Content**:
    *   Structure the deck using standard pitch deck sections (Problem, Solution, Market, Product, Business Model, Team, Ask).
    *   Use Markdown for content.
    *   Use HTML + Tailwind utility classes for advanced styling and layout (e.g., grids, columns, custom typography).
4.  **Refine Design**:
    *   Apply visual hierarchy.
    *   Ensure slides are not overcrowded.
    *   Use high-quality images (placeholders or user-provided).

## File Template (Standard Header)

EVERY Marp file you create MUST start with this header to enable Tailwind CSS via CDN:

```markdown
---
marp: true
theme: gaia
backgroundColor: #fff
paginate: true
_paginate: false
style: |
  /* Custom Global Styles */
  :root {
    --color-foreground: #333;
    --color-background: #fff;
    --color-highlight: #2563eb; /* Tailwind blue-600 */
  }
  section {
    font-family: 'Inter', sans-serif;
  }
  /* Fix for Marp + Tailwind CDN */
  img[src*="center"] {
    display: block;
    margin: 0 auto;
  }
---

<!-- 1. Inject Tailwind via CDN -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- 2. Configure Tailwind (Optional Customization) -->
<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          primary: '#2563eb',
          secondary: '#64748b',
        }
      }
    }
  }
</script>

<!-- START OF SLIDES -->

<!-- Slide 1: Title -->
<div class="h-full flex flex-col justify-center items-center text-center">
  <h1 class="text-6xl font-bold text-gray-900 mb-4">Your Pitch Title</h1>
  <p class="text-2xl text-gray-600">Subtitle or Tagline</p>
</div>

---

<!-- Slide 2: Problem -->
<div class="h-full p-12">
  <h2 class="text-4xl font-bold text-primary mb-8">The Problem</h2>
  <div class="grid grid-cols-2 gap-8">
    <div class="bg-red-50 p-6 rounded-lg border-l-4 border-red-500">
      <h3 class="text-xl font-bold text-red-700 mb-2">Current Solution</h3>
      <p class="text-gray-700">Slow, expensive, and error-prone processes that frustrate users.</p>
    </div>
    <div class="bg-gray-50 p-6 rounded-lg">
      <h3 class="text-xl font-bold text-gray-800 mb-2">Pain Points</h3>
      <ul class="list-disc list-inside text-gray-600 space-y-2">
        <li>High cost ($10k/month)</li>
        <li>Low retention (15%)</li>
        <li>Poor UX</li>
      </ul>
    </div>
  </div>
</div>
```

## Best Practices

### 1. Layouts with Tailwind
Marp's default Markdown is great for simple lists, but for a "Pitch Deck" look, use HTML `<div>` wrappers with Tailwind grid/flex classes.

*   **Two Columns**:
    ```html
    <div class="grid grid-cols-2 gap-8 items-center h-full">
      <div>Left Content</div>
      <div>Right Content</div>
    </div>
    ```
*   **Centering**:
    ```html
    <div class="flex flex-col justify-center items-center h-full text-center">
      ...
    </div>
    ```

### 2. Typography
*   Use `text-4xl`, `text-5xl` for headings to ensure readability.
*   Use `text-gray-600` for body text to reduce eye strain (vs pure black).
*   Use `font-bold` sparingly for emphasis.

### 3. Visuals
*   **Backgrounds**: Use `![bg right](image.jpg)` for split layouts.
*   **Images**: Use `rounded-lg shadow-xl` classes to make images pop.

## Common Issues & Fixes
*   **Tailwind not loading**: Ensure the `<script src="https://cdn.tailwindcss.com"></script>` is strictly strictly after the YAML frontmatter and before any visible content.
*   **Scoped Styles**: Styles in `<style>` tag in the frontmatter are global. For slide-specific styles, use inline `style="..."` or Tailwind classes.

## Output Generation
When asked to "generate the file", always write the full `.md` content to the user's workspace.
If asked to "preview" or "export", checking for `marp-cli` availability is good, but offering the `.md` file is primary.

Related Skills

asset-creator

16
from diegosouzapw/awesome-omni-skill

This skill helps in drawing any visuals. It is a versatile skill and covers every important aspect to draw anything.

skill-creator

16
from diegosouzapw/awesome-omni-skill

Guide for creating effective ouro skills. Use when users want to create a new skill (or update an existing skill) that extends ouro's capabilities with specialized knowledge, workflows, or tool integrations.

pitchdocs-suite

16
from diegosouzapw/awesome-omni-skill

One-command generation and audit of the full public repository documentation set — README, CHANGELOG, ROADMAP, CONTRIBUTING, CODE_OF_CONDUCT, SECURITY, issue templates, PR template, and discussion templates. Use when setting up a new repo or auditing an existing one.

ln-120-reference-docs-creator

16
from diegosouzapw/awesome-omni-skill

Creates reference documentation structure + smart documents (ADRs/Guides/Manuals) based on TECH_STACK. Only creates justified documents (nontrivial technology choices). L2 Worker in ln-100-documents-pipeline.

cw-style-skill-creator

16
from diegosouzapw/awesome-omni-skill

Creative writing skill for creating style skills that teach Claude to write in specific styles. Use when you want to create style guides that the cw-prose-writing skill can follow. Creates either simple markdown files or full .skill packages. Audience is AI (Claude), format is directive and example-based.

github-actions-creator

16
from diegosouzapw/awesome-omni-skill

Use when the user wants to create, generate, or set up a GitHub Actions workflow. Handles CI/CD pipelines, testing, deployment, linting, security scanning, release automation, Docker builds, scheduled tasks, and any custom workflow for any language or framework.

ascii-diagram-creator

16
from diegosouzapw/awesome-omni-skill

Create ASCII diagrams from workflow definitions and save them as image files (PNG, SVG, etc.)

telegram-bot-creator

16
from diegosouzapw/awesome-omni-skill

Complete Telegram bot creation for AI agents and pipelines. Build end-to-end bots that bridge backend agents/logic to Telegram chat. Supports multiple frameworks (aiogram, python-telegram-bot), LLM integration (Claude/OpenRouter), multi-step workflows, and various deployment options (polling, webhooks). Use when: (1) Creating a new Telegram bot from scratch, (2) Adding Telegram interface to existing backend agents/pipelines, (3) Building conversational AI bots, (4) Designing customer support/routing bots, (5) Implementing multi-step automated workflows, or (6) The agent needs a Telegram bot created.

redbook-creator-publish

16
from diegosouzapw/awesome-omni-skill

小红书帖子创作与发布技能。用于:(1) 生成小红书风格的帖子内容(标题+正文+标签)(2) 获取/生成帖子配图 (3) 自动上传到小红书创作者平台。触发词:小红书创作、create redbook、小红书、红书、笔记创作、帖子创作

recipe-card-creator

16
from diegosouzapw/awesome-omni-skill

Formatted digital recipe card generation with ingredient scaling, nutritional information, and organized collections. Use when creating recipe cards, meal plans, grocery lists, or recipe collections.

quickcreator-skill-builder

16
from diegosouzapw/awesome-omni-skill

Develop, maintain, and publish skills for the QuickCreator platform. Use when the user wants to list, search, fork, create, update, publish, or delete QuickCreator skills, or when working with the QuickCreator skill marketplace and skill lifecycle management.

opence-skill-creator

16
from diegosouzapw/awesome-omni-skill

Learn how to create effective project skills following opence conventions.