HTML PPT · 小红书 图文

html-ppt

xhs-post

When this card is picked

xhs-post

How to author the deck

1. Read the master skill first. All authoring rules live in

   skills/html-ppt/SKILL.md

   — content/audience checklist, token rules, layout reuse, presenter mode, the keyboard runtime, and the "never put presenter-only text on the slide" rule.
2. Start from the matching template folder:

   skills/html-ppt/templates/full-decks/xhs-post/

   — copy

   index.html

   and

   style.css

   into the project, keep the

   .tpl-xhs-post

   body class.
3. Bring the shared runtime with the template. The upstream

   index.html

   links the shared CSS/JS via

   ../../../assets/...

   because it sits three folders deep inside

   skills/html-ppt/templates/full-decks/

   . Once you copy

   index.html

   into the project, those parent-relative URLs no longer resolve and

   base.css

   ,

   animations.css

   , and

   runtime.js

   will 404 — meaning the deck never activates and slide navigation is dead. Pick one of these two recipes per project:
   • Recipe A — copy + rewrite (preferred): copy

     skills/html-ppt/assets/fonts.css

     ,

     skills/html-ppt/assets/base.css

     ,

     skills/html-ppt/assets/animations/animations.css

     , and

     skills/html-ppt/assets/runtime.js

     into a project-local

     assets/

     (with

     assets/animations/animations.css

     ), then rewrite the four

     <link>

     /

     <script>

     tags in

     index.html

     from

     ../../../assets/...

     to the matching project-local paths (

     assets/fonts.css

     ,

     assets/base.css

     ,

     assets/animations/animations.css

     ,

     assets/runtime.js

     ).
   • Recipe B — inline: read the same four files and replace each

     <link rel="stylesheet" href="../../../assets/...">

     with a

     <style>...</style>

     containing the file's contents, and the

     <script src="../../../assets/runtime.js">

     with a

     <script>...</script>

     containing

     runtime.js

     . Yields a single self-contained

     index.html

     . Either way, do not ship the upstream

     ../../../assets/...

     URLs verbatim into a project artifact — they only work in-tree.
4. Pick a theme. Default tokens look fine; if the user wants a different feel, swap in any of the 36 themes from

   skills/html-ppt/assets/themes/*.css

   via

   <link id="theme-link">

   and let

   T

   cycle.
5. Replace demo content, not classes. The

   .tpl-xhs-post

   scoped CSS only recognises the structural classes shipped in the template — keep them.
6. Speaker notes go inside

   <aside class="notes">

   or

   <div class="notes">

   — never as visible text on the slide.

Attribution

lewislulu/html-ppt-skill

skills/html-ppt/LICENSE