ckm:slides

Overview

What is ckm:slides?

ckm:slides is an AI skill for designing complete, strategic HTML slide decks. Instead of outputting a loose set of bullet points, it guides the agent to produce a coherent, browser‑ready presentation structure using:

• Chart.js for data visualizations
• Design tokens for consistent visual themes
• Responsive layouts for different devices
• Copywriting formulas for persuasive messaging
• Proven slide strategies for common deck types

The skill is optimized for creating marketing presentations, pitch decks, stakeholder reports, and product demos where both story and structure matter.

Who is ckm:slides for?

ckm:slides is a good fit if you:

• Build slide decks for marketing, sales, fundraising, or reporting
• Prefer HTML/JavaScript presentations over traditional PowerPoint files
• Want reusable layout patterns and templates rather than starting from a blank slide
• Need clear narrative structures (e.g., YC seed deck, sales pitch, QBR) baked into your process

Developers, product marketers, founders, and analytics teams can all use this skill to go from “topic + desired slide count” to a structured HTML presentation plan.

What problems does it solve?

ckm:slides helps you avoid:

• Disorganized decks with no clear story arc
• Inconsistent layouts and typography between slides
• Weak, generic slide copy that doesn’t persuade
• Manual wiring of Chart.js charts into every new presentation

By combining layout patterns, copywriting formulas, and a ready‑to‑use HTML template, the skill gives the agent everything it needs to plan out a strong deck and generate implementation‑ready HTML.

When is ckm:slides not a good fit?

ckm:slides is probably not ideal if you:

• Need native PowerPoint or Keynote files instead of HTML
• Don’t work with front‑end or can’t host HTML/JS assets
• Only need a single one‑off slide rather than a full deck

In those cases, a simpler text‑only slide generator or a tool that exports .pptx might be more appropriate.

How to Use

Installation and setup

To add the slides skill from the nextlevelbuilder/ui-ux-pro-max-skill repository to your agent environment, install it with:

npx skills add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill --skill slides
``

After installation:

1. Open `SKILL.md` under `.claude/skills/slides` to understand the high‑level behavior and arguments.
2. Review the `references/` folder to see the patterns and templates the skill relies on:
   - `references/layout-patterns.md`
   - `references/html-template.md`
   - `references/copywriting-formulas.md`
   - `references/slide-strategies.md`
   - `references/create.md`

No additional build step is required for the skill itself; it runs as part of your existing agent environment. You will, however, need a way to serve or open the generated HTML (for example, saving it to a file and opening it in a browser).

### Basic invocation pattern
The skill expects arguments in the form:

- `[topic] [slide-count]`

and supports a `create` subcommand. A typical call from your agent prompt might look like:

```text
Use the ckm:slides skill to create a "create" deck about "Series A fundraising narrative" with 12 slides.

Internally, routing follows this flow (as defined in SKILL.md):

1. Parse the subcommand from $ARGUMENTS (first word, e.g. create).
2. Load the corresponding reference file (for create, this is references/create.md).
3. Use the remaining arguments (topic and slide count) to generate the deck structure and content.

Recommended workflow for creating a new deck

1. Define the goal and audience

Before invoking ckm:slides, clarify:

• Goal (e.g. raise a seed round, close an enterprise deal, update the board)
• Primary audience (VCs, prospects, leadership, internal teams, conference attendees)
• Approximate slide count

Pass this context in your arguments so the skill can pick the right structure and patterns.

2. Choose or let the skill choose a slide strategy

The references/slide-strategies.md file lists 15 common deck structures such as:

• YC Seed Deck (10–12 slides)
• Sales Pitch (7–10 slides)
• Product Demo (5–8 slides)
• QBR, Board Meeting, Webinar, Workshop, and more

You can either:

• Explicitly request a structure (e.g. “Use a YC seed deck structure”), or
• Let the agent infer the best match based on your goal and audience.

Each strategy includes a slide‑by‑slide outline and an emotion arc (e.g. curiosity → frustration → hope → confidence → trust → urgency) to keep the story coherent.

3. Generate copy using persuasive formulas

The references/copywriting-formulas.md file provides 25 formulas, including:

• PAS (Problem–Agitate–Solution) for problem slides
• AIDA (Attention–Interest–Desire–Action) for hooks and CTAs
• FAB (Features–Advantages–Benefits) for feature and product slides
• Cost of Inaction and Before–After–Bridge for urgency and transformation

The skill uses these formulas to structure headlines, body copy, and CTAs per slide. Encourage it to:

• Map each slide type to an appropriate formula
• Use the provided template language as a starting point
• Calibrate tone to your brand and audience sophistication

4. Apply layout patterns and animations

The references/layout-patterns.md file defines 25 CSS‑based layout patterns such as:

• Title Slide
• Problem Statement
• Solution Overview
• Feature Grid
• Metrics Dashboard
• Comparison Table
• Timeline Flow
• Team Grid
• Pricing Cards
• CTA Closing

Each layout includes:

• A recommended use case
• Example animation classes (animate-fade-up, animate-stagger, animate-scale, etc.)
• Example CSS structures for common slide types

When you ask the agent to generate your deck, include instructions like:

For each slide, assign a layout class from layout-patterns.md and, where relevant, an animation class.

This keeps your deck visually consistent and easy to theme in CSS.

5. Use the HTML slide template

The references/html-template.md file provides a complete HTML structure for the deck, including:

• <head> with Chart.js included via CDN
• A token‑driven theming system using :root CSS variables
• A .slide-deck container and .slide elements sized for a 16:9 aspect ratio
• Base styles for typography and layout

A typical workflow is:

1. Start from the provided HTML template.
2. Insert the generated slides as <section> or <div> elements with the appropriate classes.
3. Paste your design tokens (e.g. from embed-tokens.cjs) into the :root block.
4. Add any Chart.js <canvas> elements and corresponding JavaScript for charts.

The skill can output:

• A draft of the full HTML file, or
• Just the <body> slide structure that you paste into your own shell template.

6. Wire up Chart.js data visualizations

For data‑driven decks (metrics dashboards, traction slides, QBRs, board reports), ckm:slides is designed to work with Chart.js (as shown in html-template.md).

You can guide the agent to:

• Create <canvas> elements for charts within the relevant slide layouts
• Suggest Chart.js config objects (datasets, labels, colors) based on your metrics
• Embed <script> blocks that initialize these charts on page load

You are responsible for supplying the actual data and validating the chart configuration, but the skill provides the structural scaffolding.

7. Export and present

Once the deck HTML is ready:

1. Save it as an .html file in your project.
2. Open it directly in your browser, or serve it via your preferred web server.
3. Use keyboard navigation or custom JS (if you add it) to move between slides.

If you need to share with stakeholders used to PowerPoint, you can screen‑share the browser or export slides as images/PDF via your browser’s print‑to‑PDF feature.

Tips for better results with ckm:slides

• Be explicit about slide count and structure when possible.
• Tell the agent what decision the deck should drive (funding, purchase, alignment, etc.).
• Indicate which slides should include charts and what type (line, bar, pie, etc.).
• Ask for a table listing each slide number, title, goal, layout, and primary copywriting formula so you can review the plan before generating full content.

FAQ

What does ckm:slides generate exactly?

ckm:slides is designed to generate:

• A slide‑by‑slide outline with goals and narrative arc
• Draft copy for each slide, using formulas like PAS, AIDA, and FAB
• Layout suggestions based on the predefined patterns in layout-patterns.md
• HTML/CSS structure for a responsive, token‑based slide deck
• Chart.js scaffolding for data visualization slides

The exact output depends on how you prompt the agent, but the core is strategic HTML slide content rather than a generic text document.

Does ckm:slides create PowerPoint (.pptx) files?

No. ckm:slides focuses on HTML slide decks. It uses HTML, CSS, and Chart.js to create presentations you can open in a browser. If you need .pptx files, you’ll need a separate export or conversion step outside this skill.

Can I customize the design to match my brand?

Yes. The html-template.md file uses design tokens via CSS variables. You can:

• Replace the example :root token values with your brand colors, typography, and spacing
• Extend the CSS classes for custom layouts or animations
• Add your own components (logos, footers, watermark styles)

ckm:slides provides a structured starting point; you bring the brand system.

How does the create subcommand work?

The create subcommand is the main entry point described in references/create.md. When you invoke create with arguments, the skill:

1. Treats <task>$ARGUMENTS</task> as the description of the deck you want.
2. Uses the knowledge base (layout patterns, copywriting formulas, slide strategies, HTML template) to design a persuasive deck aligned with that task.

You typically don’t call create directly as a CLI; instead, you instruct your agent to use the ckm:slides skill with the create subcommand.

What kinds of decks is ckm:slides best at?

Based on the patterns in slide-strategies.md, ckm:slides is especially useful for:

• Fundraising decks (YC Seed Deck, Series A)
• Sales pitches and product demos
• Quarterly business reviews (QBRs) and board updates
• Webinars, workshops, and conference talks
• Case studies and competitive analysis presentations

All of these rely on a clear story, persuasive copy, and often charts—exactly what the skill’s knowledge base is tuned for.

How do I handle navigation and keyboard controls?

The base HTML template focuses on layout and visuals. Navigation (keyboard arrows, click to advance, progress indicators) is not fully defined in the reference snippet and is left to your implementation. You can:

• Add JavaScript to listen for ArrowLeft / ArrowRight keys and change the visible slide
• Use URL hashes or data attributes to track the active slide
• Integrate with an existing HTML slideshow framework if you prefer

ckm:slides helps you design the content and structure; navigation behavior is up to your front‑end setup.

Do I need to understand JavaScript to use ckm:slides?

Basic front‑end familiarity is very helpful, especially if you:

• Want to modify or extend the HTML template
• Need to configure Chart.js charts and interactivity

However, much of the heavy lifting (story structure, layout selection, copywriting patterns) is non‑technical. Non‑developers can still benefit by collaborating with a developer to finalize the HTML and charts.

Where can I see all the available patterns and strategies?

Open the skill’s directory (usually .claude/skills/slides) and review:

• SKILL.md for overall behavior, arguments, and routing
• references/layout-patterns.md for layout and CSS structures
• references/html-template.md for the base HTML slide deck shell
• references/copywriting-formulas.md for persuasive copy frameworks
• references/slide-strategies.md for complete deck structures and emotion arcs

Browsing these files gives you a clear view of what ckm:slides can do and helps you craft more precise prompts when generating decks.