Frontend Slides

https://github.com/zarazhangrui/frontend-slides

Admin

A zero-dependency HTML presentation generator with safe presets, bold template-library styles, PPT...

Tokens:481,156

Snippets:4,561

Trust Score:8.9

License:MIT

Update:4 months ago

Show doc for...

Tokens:

Raw

### Deploy Folder Example

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/plugins/frontend-slides/skills/frontend-slides/SKILL.md

Example of deploying a presentation by specifying the folder containing the HTML file and its assets.

```bash
bash scripts/deploy.sh ./my-deck/
```

--------------------------------

### File Structure Examples

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/plugins/frontend-slides/skills/frontend-slides/html-template.md

Examples of file structures for single and multiple presentations within a project.

```text
presentation.html    # Self-contained, all CSS/JS inline
assets/              # Images only, if any
```

```text
[name].html
[name]-assets/
```

--------------------------------

### Python Package Installation

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md

Command to install the python-pptx library.

```bash
pip install python-pptx
```

--------------------------------

### Image Placement Examples

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/html-template.md

Examples of how to embed images using direct file paths in HTML.

```html
<img src="assets/logo_round.png" alt="Logo" class="slide-image logo">
<img src="assets/screenshot.png" alt="Screenshot" class="slide-image screenshot">
```

--------------------------------

### Install Playwright Chromium

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/SKILL.md

Command to manually install the Chromium browser for Playwright if automatic installation fails.

```bash
npx playwright install chromium
```

--------------------------------

### Claude Code Manual Installation

Source: https://github.com/zarazhangrui/frontend-slides/blob/main/README.md

Copy the skill files to your Claude Code skills directory.

```bash
# Create the skill directory
mkdir -p ~/.claude/skills/frontend-slides/scripts

# Copy the user-facing skill files
cp SKILL.md STYLE_PRESETS.md viewport-base.css html-template.md animation-patterns.md ~/.claude/skills/frontend-slides/
cp -R bold-template-pack ~/.claude/skills/frontend-slides/
cp scripts/extract-pptx.py scripts/deploy.sh scripts/export-pdf.sh ~/.claude/skills/frontend-slides/scripts/
```

Tokens:

Raw