skills.rest
josoroma
josoromaCOMMUNITY
Explore all skills by this author →
GitHub

apploop-presentations

Guides development of AppLoop Marp presentation features including slides lifecycle, preview, and style persistence.

6|Updated Jul 12, 2026
Search Tags:#presentations#markdown#marp#nextjs#slides#iframe#apploop
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill apploop-presentations-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apploop-presentations
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/apploop-presentations
Command: npx skills add https://github.com/josoroma/AppLoop --skill apploop-presentations-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @marp-team/marp-core, @mdxeditor/editor, and includes references (resource) components.

What problem does it solve? Developers working on AppLoop's Marp presentation builder face non-obvious pitfalls like Marpit CSS scoping rules, alt-text directive loss, and client/server boundary violations that silently break slide styling and image sizing. ## Core Features & Use Cases - Architecture Reference: Maps the presentations subsystem across lib/presentations/, components/presentations/, and app/api/presentations/, including the SQLite repository, Marp rendering, and workspace layout. - Pitfall Documentation: Explains Marp CSS scoping (never prefix selectors with section), alt-text directive preservation for image sizing, and the inspect postMessage API between iframe and parent. - Use Case: When fixing a bug where an inserted image jumps back to full size after an alt-text rename, consult this Skill to learn that Marp stores sizing as alt-text tokens and that composeMarpImageAlt must preserve them. ## Quick Start Load this Skill before modifying any file under lib/presentations/, components/presentations/, or app/presentations/ in the AppLoop repository.

Frequently Asked Questions about apploop-presentations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style individual slides in a Marp presentation?▼

Add CSS rules in the deck's front matter `style:` block and assign classes via slide comments like `<!-- _class: slide-bg-1 -->`. Never prefix selectors with `section` because Marpit already scopes styles under the slide section, so `section .foo` never matches.

Why does my Marp image revert to full size after editing alt text?▼

Marp encodes sizing and filters as alt-text tokens like `w:1184 h:474`. A naive alt rewrite drops them. Use `splitMarpImageAltTokens` and `composeMarpImageAlt` to preserve directives when renaming.

How does Marp render presentation previews in AppLoop?▼

AppLoop renders decks with @marp-team/marp-core into HTML served through an iframe at /api/presentations/[id]/preview. There are no separate dev-server ports; the source of truth is the deck.md file in .apploop/presentations/<slug>/.

Can I import marp.ts in a client component?▼

No. lib/presentations/marp.ts imports node:fs/promises, so importing it in a client component breaks the build. Use server actions for any markdown manipulation and client-safe helpers from marp-utils.ts instead.

How do I fit an oversized image to a Marp slide?▼

Read the deck slide size with readPresentationSlideSize (1280x720 for 16:9), then scale with fitImageToSlide using 48px padding per axis. It downscales only and emits Marp alt-text directives like `![alt w:1184 h:474](assets/x.png)`.

Related Skills

Explore More Software Engineering Skills→
curiositechcuriositech
181

drizzle-migrations

Manage Drizzle ORM schema definitions and SQLite database migrations efficiently.

Official
Intermediate
Amar1404Amar1404
1

install-marp

Install Marp CLI globally and verify its version via npm.

Community
Basic
ChatbotXIOChatbotXIO
601

builder-ui-i18n

Build and update ChatbotX builder UI components with localized English and Vietnamese copy.

Official
Intermediate
NITRR-OfficialNITRR-Official
4

marp-slide

Generate Marp presentation slides with pre-designed themes and best practices.

Official
Intermediate