frontend-slides-editable

Installation
SKILL.md

Create zero-dependency, animation-rich HTML presentations that run entirely in the browser with a built-in editor: move objects, multi-select with Ctrl+click, alignment snapping, simple text formatting with font family + size controls, undo/redo, a Pages sidebar (slide thumbnails, drag to reorder, delete), presentation tools (Laser pointer and Fullscreen), Ctrl+S persistence, and export HTML.

This skill is a copy of the frontend-slides skill extended with the editable deck runtime. For read-only decks without editor weight, use the original frontend-slides skill instead (same skills directory layout).

<preset_fidelity> Parity with parent frontend-slides (style flexibility)

Adding edit mode must not replace preset authoring. The parent skill treats each choice in STYLE_PRESETS.md as a spec: per preset you implement its Layout prose, Signature Elements, typography, and colors — title slides and content slides differ across presets (e.g. Bold Signal’s card + big numerals vs. Notebook Tabs’ paper + edge tabs vs. Swiss Modern’s grid + red bar).

Normative behavior in Phase 3:

  1. Read STYLE_PRESETS for the chosen preset(s) and reflect layout + signatures in HTML/CSS, not only :root colors and fonts.
  2. The editable reference (examples/editable-deck-reference.html) supplies JS/CSS patterns (chrome, sidebar, objects, history) — not a frozen slide layout to paste on every deck. Do not reuse one generic “title + subtitle + corner rounded rectangle” geometry for every style.
  3. examples/generated/presets/*.html are sample decks, not a layout shortcut. The 12 legacy samples are runtime smoke + visual previews; the 34 ported samples are real-template ports from beautiful-html-templates using the shared Swiss/reference runtime plus locked slot editing. For real deliveries, match the chosen preset/template grammar instead of reusing a generic README deck.
  4. Static chrome (decorations that should not be draggable) may live outside .slide-edit-layer (e.g. background pseudo-elements, fixed nav chrome) per preset; movable copy and blocks stay as [data-slide-object] inside the layer.
Installs
462
GitHub Stars
496
First Seen
Apr 14, 2026
frontend-slides-editable — archlizheng/frontend-slides-editable