presentation-inspect-editor

Debug and modify the AppLoop presentation visual inspector for multi-select, drag, resize, and style persistence.

6|Updated Jul 12, 2026
One-click install
npx skills add https://github.com/josoroma/AppLoop --skill presentation-inspect-editor-josoroma
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: presentation-inspect-editor
Source: https://github.com/josoroma/AppLoop/tree/main/.hermes/skills/presentation-inspect-editor
Command: npx skills add https://github.com/josoroma/AppLoop --skill presentation-inspect-editor-josoroma

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building and debugging the AppLoop presentation visual inspector involves subtle failure modes — Marpit CSS scoping that never matches, inline elements ignoring transforms, selection id drift breaking layers-panel parity, and alignment guides measuring the wrong rect — that are hard to rediscover on every change. ## Core Features & Use Cases - Inspector architecture guidance: Documents the iframe/parent postMessage protocol, selection chrome rules (one group box per multi-selection), transform-only movement, and undo/redo stack design. - Pitfall catalog: Covers Marpit CSS scoping, inline-style durability, element identity hashing, client/server boundaries, and inline-element display fixes for drag/resize. - Verification recipes: Reference guides for synthesizing gestures against the preview iframe, verifying bidirectional slide-to-layers-panel selection parity, and fitting inserted images to the slide. - Use Case: When a group drag shows the vertical centering guide but never the horizontal one, use this Skill to identify that guides are measuring a single element instead of the selection union rect and apply the documented fix. ## Quick Start Use the presentation-inspect-editor skill to fix the bug where multi-selecting elements in the presentation builder does not highlight the matching rows in the layers panel.

Frequently Asked Questions about presentation-inspect-editor

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

FAQPage Schema
How do I fix multi-select not syncing between the slide and layers panel?▼

Build a resolved id set with tag+path and tag+text fallbacks instead of strict id equality, since style patches and drags rewrite target ids. Also make the panel send the full selection array through the apploop-presentation-set-selections postMessage so panel clicks drive the slide.

Why does my CSS rule not apply inside a Marp presentation?▼

Marpit scopes front-matter CSS under div.marpit > svg > foreignObject > section, so selectors like section .apploop-el-xxx never match. Use bare class selectors and pair them with inline style attributes on wrapper spans for durability.

Why do drag and resize not work on inline elements like spans or links?▼

Inline elements ignore width, height, and transform as plain inline boxes. Set display: inline-block alongside position absolute for resize or transform for movement so the style patch takes effect.

How do I test inspect-editor gestures that live inside the preview iframe?▼

Synthesize MouseEvent sequences against iframe.contentDocument with view set to the iframe's contentWindow and buttons: 1 for drags. Wait roughly 900ms after clicks and 2500ms after drags before asserting, since selection state arrives via postMessage.

Why does the horizontal alignment guide never appear during a group drag?▼

The guide is measuring one grabbed element instead of the selection union rect, so its center Y rarely matches the slide center. Drive guides from currentSelectionRect and evaluate them once after the whole move loop.

How do I insert an image without overflowing the Marp slide?▼

Measure the image's natural size in the browser, parse the slide size from deck front matter, and emit Marp w:/h: alt directives only when downscaling is needed. Preserve existing alt tokens when renaming so sizing directives are not wiped.