|
|
@@ -1,6 +1,7 @@
|
|
|
---
|
|
|
name: frontend-slides
|
|
|
description: Create stunning, animation-rich HTML presentations from scratch or by converting PowerPoint files. Use when the user wants to build a presentation, convert a PPT/PPTX to web, or create slides for a talk/pitch. Helps non-designers discover their aesthetic through visual exploration rather than abstract choices.
|
|
|
+allowed-tools: Read, Write, Edit, Bash, AskUserQuestion
|
|
|
---
|
|
|
|
|
|
# Frontend Slides
|
|
|
@@ -122,6 +123,24 @@ If user provides an image folder:
|
|
|
|
|
|
**Logo in previews:** If a usable logo was identified, embed it (base64) into each style preview in Phase 2 — the user sees their brand styled three different ways.
|
|
|
|
|
|
+### Step 1.3: Diagram Detection
|
|
|
+
|
|
|
+After evaluating each image, identify any **relationship diagrams** — images with spatial structure that encodes meaning (arrows, nodes, flows, hierarchies). These require dedicated CSS layouts in Phase 3 to preserve that structure.
|
|
|
+
|
|
|
+Detect and label each diagram image as one of:
|
|
|
+
|
|
|
+| Type | Visual cues | HTML layout |
|
|
|
+|------|-------------|-------------|
|
|
|
+| `cycle-diagram` | Circular arrows, flywheel, recurring loop | Circle of nodes with arc connectors |
|
|
|
+| `pipeline-diagram` | Left→right flow, input/process/output boxes | Horizontal flex with arrow separators |
|
|
|
+| `feedback-diagram` | Main flow + return arrow, system loop | Forward path + curved return path |
|
|
|
+| `hierarchy-diagram` | Org chart, tree, parent→children | CSS grid tree with connecting lines |
|
|
|
+| `hub-diagram` | Central node + spokes to outer nodes | CSS radial positioning |
|
|
|
+
|
|
|
+**If any diagram is detected:** note the type for Phase 3. The corresponding CSS layout patterns are in [html-template.md](html-template.md) under "Diagram Layout Patterns".
|
|
|
+
|
|
|
+**If no diagrams detected:** skip to Phase 2 as normal.
|
|
|
+
|
|
|
---
|
|
|
|
|
|
## Phase 2: Style Discovery
|
MageByte-Zero