Agent skill guide

baoyu-design: setup & HTML handoff

Create slide decks inside a broader agent workflow for design and prototypes.

Skill by Jim Liu · Baoyu · Guide by SlideBeaverClaude Code · Cursor · CodexUpdated October 6, 2026Source reviewed October 3, 2026

Official GitHub project

Choose the right workflow

This is a broader design skill with a Make a deck workflow. Its deck-stage component handles presentation behavior. Treat the original browser deck and the static HTML handoff as separate deliverables: the latter must contain the final layout and content without requiring the component's runtime.

Design-led presentationsProduct and project walkthroughsDecks alongside prototypes

What to provide

[BRIEF]: Topic, audience, slide count, and narrativeExample: Five slides explaining the new onboarding flow
[MATERIAL]: Source content and permitted design assetsExample: A project brief and three approved screenshots

Output: A design-led HTML deck; a separate static handoff copy is recommended for SlideBeaver.

SlideBeaver handoff request

Use baoyu-design's Make a deck workflow from https://github.com/JimLiu/baoyu-design.
Brief: [BRIEF]
Source material: [MATERIAL]
After reviewing the original deck, provide a separate static HTML handoff copy for SlideBeaver. Replace any deck-stage dependency with ordinary visible 16:9 <section class="slide" data-slide="true"> elements. Inline the final layout CSS, use system fonts or embedded assets, and make the content readable with scripts disabled. Preserve the original deck and its export options. Report anything you could not flatten faithfully.

Replace the bracketed fields with your own brief and source material.

This is our request for a static handoff copy. Install the original Skill from its official project before using it.

Setup and use

01Install for your local agent
Run the official installer in the project where you want to use the skill.
```
npx skills add JimLiu/baoyu-design
```
02Ask for Make a deck
Supply your brief and assets, and explicitly ask baoyu-design to use its Make a deck workflow.
03Keep the original deck
Review the agent's browser result first. The upstream project also offers its own PPTX export workflow; see its README for that route.
04Prepare a SlideBeaver copy
If you want visual editing here, request standalone visible slide sections with all layout CSS inlined. Save the HTML and inspect the import before using it for delivery.

Before you import into SlideBeaver

Source documentation reviewed; this guide does not certify compatibility of baoyu-design outputs with SlideBeaver.
deck-stage can provide layout and controls at runtime. Removing its script alone may lose formatting: request ordinary sections with final inline styles.
SlideBeaver's static PPTX export has different capabilities from the upstream project's own export. Inspect the file produced by the route you choose.

Fix text overflow and image placement Check what stays editable in PPTX

Official source

Skill created by Jim Liu · Baoyu. Installation instructions were checked against the official documentation on October 3, 2026. This is an independent SlideBeaver guide.