magazine-web-ppt

Files (12)

• LICENSE
• README.en.md
• README.md
• README.pt-BR.md
• SKILL.md
• example-slides.html · assets/
• template.html · assets/
• checklist.md · references/
• components.md · references/
• layouts.md · references/
• styles.md · references/
• themes.md · references/

SKILL.md (first lines)

# Magazine Web Ppt

## What this skill does

Generates a **single-file HTML** horizontal-swipe PPT with this visual tone:

- **Electronic magazine + e-ink** hybrid style
- **WebGL fluid / contour / dispersion background** (visible on hero slides)
- **Serif headings (Noto Serif SC + Playfair Display) + sans-serif body text (Noto Sans SC + Inter) + monospace metadata (IBM Plex Mono)**
- **Lucide line icons** (no emoji)
- **Horizontal left/right paging** (keyboard ← →, scroll wheel, touch swipe, bottom dots, ESC index)
- **Smooth theme interpolation**: colors and the shader ease smoothly when paging into a hero slide

The aesthetic of this skill is neither "corporate PPT" nor "consumer internet UI" — it looks like *Monocle* magazine given a coat of code.

## When to use it

**Good fit**:
- In-person talks / internal industry talks / private sharing sessions
- AI product launches / demo days
- Talks with a strong personal style
- Web-based slides you want to build once with no separate paging tool

**Poor fit**:
- Large data tables or overlapping charts (use a regular PPT)
- Training courseware (information density is too low)
- Content that needs multi-person collaborative editing (this is static HTML)

## Workflow

### Step 0 · Pick a direction (Direction · mandatory first step)

**Before asking the 6 clarifying questions, have the user pick one of 5 magazine directions first**. Each direction bundles a theme color, recommended layout, chrome style, and recommended slide count — picking a direction answers half of the clarifying questions up front.

Open `references/styles.md`, **copy the whole section over** to show the user the 1-line summary of the 5 directions, then let them choose:

```
1. Monocle Editorial · international-magazine style ✦ default
2. WIRED Tech · data + engineering
3. Kinfolk Slow · slow living / humanistic
4. Domus Architectural · architecture / spatial feel
5. Lab / Reference · academic + craft manual
```

If the user says "I don't know, you recommend one" — **default to Monocle Editorial**, since it has the lowest failure rate. If the user mentions "AI / benchmark / tech launch" — recommend WIRED; "reading / private circle / social feed" — recommend Kinfolk; "design / architecture / portfolio" — recommend Domus; "research / academia / methodology" — recommend Lab.

After picking a direction, create or update `project-record.md` in the project directory, with the first line stating the direction + theme color + audience + duration (template at the end of `styles.md`). **Never switch direction mid-way** — switching halfway means everything built so far is wasted.

### Step 1 · Requirements clarification (**mandatory before starting work**)

**If the user has already provided a full outline + images**, you can skip straight to Step 2.

**If the user has only given a topic or a vague idea**, align on it using these 6 questions one by one before starting. Don't start writing slides based on guesses — once the structure is wrong, revising later is expensive:

#### 6-question clarification checklist

> Question 5 is already answered during the Step 0 direction pick (direction → theme color). Of the remaining 5 questions below, question 5 can be left blank.

| # | Question | Why it matters |
|---|------|-----------|
| 1 | **Who is the audience? What's the sharing scenario?** (internal industry talk / commercial launch / demo day / private session) | Determines language style and depth |
| 2 | **How long is the talk?** | 15 minutes ≈ 10 slides, 30 minutes ≈ 20 slides, 45 minutes ≈ 25-30 slides (see `styles.md` for the recommended range per direction) |
| 3 | **Is there source material?** (docs / data / an old PPT / article links) | Build on the material if it exists, otherwise help construct it |
| 4 | **Are there images? Where are they?** | See the "image conventions" section below |
| 5 | ~~**Which theme color do you want?**~~ | ✓ Already decided by the direction in Step 0 |
| 6 | **Are there any hard constraints?** (must include XX data / must not mention YY) | Avoids rework |

#### Outline assistance (if the user has no outline)

Use the "narrative arc" template to build the skeleton, then fill in content:

```
Hook           → 1 slide   : open with a contrast / question / hard number that makes people stop
Context         → 1-2 slides : explain the background / who you are / why this talk
Core            → 3-5 slides : the core content, interspersed with Layout 4/5/6/9/10
Shift           → 1 slide   : break expectations / present a new viewpoint
Takeaway        → 1-2 slides : a memorable line / a suspense question / a call to action
```

Align the narrative arc + slide-count plan + theme rhythm table (see `layouts.md`) — **only after all three are aligned** should you move to Step 2.

It's recommended to save the outline as `project-record.md` or `outline-v1.md` for easier iteration later.

#### Image conventions (tell the user)

Before starting work, make clear to the user:

- **Folder location**: under `project/XXX/ppt/images/`, at the same level as `index.html`
- **Naming convention**: `{slide-number}-{semantic-name}.{ext}`, e.g. `01-cover.jpg` / `03-figma.jpg` / `05-dashboard.png`
  - Zero-pad the slide number for easy sorting
  - Use English for the semantic part — short, specific, matching the content
- **Spec recommendations**:
  - A single image should be ≥ 1600px wide (avoid blur on large screens)
  - Use JPG for photos/screenshots, PNG for transparent UI/charts
  - Keep the total size under 10MB (affects paging smoothness)
- **How to replace images**: overwriting with the **same filename** is safest (no need to change paths in the HTML); if a filename changes, remember to globally search `images/old-name` and replace it with the new name
- **What if there are no images**: align with the user — you can generate the structure first with placeholder color blocks and add images later, but let them know that image-heavy layouts like 4/5/10 can't be visually verified without images

### Step 2 · Copy the template

Copy `assets/template.html` to the target location (typically `project/XXX/ppt/index.html`) and create an `images/` folder at the same level to receive images.

```bash
mkdir -p "project/XXX/ppt/images"
cp "<SKILL_ROOT>/assets/template.html" "project/XXX/ppt/index.html"
```

`template.html` is a **fully runnable** file — CSS, the WebGL shader, paging JS, and font/icon CDNs are all preconfigured; only the `<main id="deck">` contains 3 example slides (cover, chapter title card, blank filler slide).

#### 2.1 · Placeholders that must be changed (**easy to miss**)

Right after copying, immediately replace the following placeholders, otherwise the browser tab will show an awkward "[REQUIRED] Replace with PPT title" text:

| Location | Original | Replace with |
|------|------|--------|
| `<title>` | `[REQUIRED] Replace with PPT title · Deck Title` | The actual deck title (e.g. `A New Way of Working · Luke Wroblewski`) |

Every time you copy template.html, the first thing to do is grep for "[REQUIRED]" to confirm every placeholder has been replaced.

From sanghyunna/readable-studio, Apache-2.0.

More from sanghyunna/readable-studio