From 2dbce42413c69490af334bcb658455153e5c8383 Mon Sep 17 00:00:00 2001 From: Aleksandr Shevchuk Date: Fri, 13 Nov 2026 14:59:04 +0200 Subject: [PATCH] The guide and the build page start with installing the skill Until now the site's prompts sent a chat to read the h5p-author skill from /h5p/skill/. That worked only in chats that now take the skill as a zip, so the skill is installed instead, and the prompts name it. - The guide's first step is the install, with a line for Claude, ChatGPT, Grok, Open WebUI and agents with a terminal. Grok took Claude's zip under Skills, then Import, in the owner's test of 2026-11-13, and built from the two downloaded files after its npx timed out. - The build page's three steps are install, ask, play. - No page links to /h5p/skill/: the footer and the home page's skills card go to the install step. The page and its files keep answering, for the copies of the skill already installed and the prompts people copied before. --- README.md | 9 +- src/_data/site.js | 2 +- src/_includes/site-foot.njk | 2 +- src/h5p/build/index.njk | 29 +++---- src/h5p/create-with-ai/index.njk | 143 ++++++++++++++++--------------- src/h5p/skill/index.njk | 8 +- vite.config.ts | 17 ++-- 7 files changed, 114 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index a82997b..558651c 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,17 @@ The site of the [missing-elements](https://github.com/missing-elements) web comp | Path | What it is | Source | | --- | --- | --- | -| `/` | The project list, the tools (the build page, which links the skill's page), and a footer of links | [src/index.njk](src/index.njk); the lists are in [src/_data/site.js](src/_data/site.js) | +| `/` | The project list, the tools (the build page first, with its how-to), and a footer of links | [src/index.njk](src/index.njk); the lists are in [src/_data/site.js](src/_data/site.js) | | `/pdfjs-viewer/` | The docs of ``, with a live preview | [src/pdfjs-viewer/](src/pdfjs-viewer/) | | `/h5p/build/` | The build page, for people: what it makes, a sample that plays, and the build of a chat's source into a `.h5p`, in the visitor's browser | [src/h5p/build/](src/h5p/build/) | -| `/h5p/skill/` | The skill's files, and a page that lists each at its full address, for a chat; and the skill as zips to install: `h5p-author.zip` for Claude, `h5p-author-chatgpt.zip` for ChatGPT's Plugins | [src/h5p/skill/](src/h5p/skill/), copied by [eleventy.config.js](eleventy.config.js); the zips written by [vite.config.ts](vite.config.ts) | +| `/h5p/create-with-ai/` | The how-to, for people: installing the skill, asking a chat, the prompts to start from, the types, and what to do when something goes wrong | [src/h5p/create-with-ai/](src/h5p/create-with-ai/) | +| `/h5p/skill/` | The skill as zips to install: `h5p-author.zip` for Claude and Grok, `h5p-author-chatgpt.zip` for ChatGPT's Plugins; and its files, with a page that lists each at its full address, which no page links to | [src/h5p/skill/](src/h5p/skill/), copied by [eleventy.config.js](eleventy.config.js); the zips written by [vite.config.ts](vite.config.ts) | | `/h5p/bundles/` | The skill's build tool and a library bundle per content type, for a chat that runs Node but cannot reach npm | written by [vite.config.ts](vite.config.ts) | | `/h5p/build/types/` | The skill's type files, which the build page copies for the chat | written by [vite.config.ts](vite.config.ts) | -A chat that cannot install the skill is given `/h5p/skill/`, which lists every address. If it can run Node and fetch a file, it builds from the tool and a bundle in `/h5p/bundles/`. If it cannot, it gives the user a link to `/h5p/build/`, which builds in their browser. +A chat takes the skill installed: from a zip in Claude, ChatGPT and Grok, or with `npx skills add` in an agent with a terminal, as `/h5p/create-with-ai/` says. Where the skill cannot reach npm, it builds from the tool and a bundle in `/h5p/bundles/`, at the addresses `/h5p/skill/` lists, if it can run Node and fetch a file: Grok did, on 2026-11-13. If it cannot, as in ChatGPT, it gives the user a link to `/h5p/build/`, which builds in their browser. + +Until 2026-11-13 the site's prompts sent a chat to read the skill at `/h5p/skill/` instead. That worked only in chats that now take the zip, so the prompts name the installed skill, and no page links to `/h5p/skill/`. Its page and files stay: the copies of the skill already installed name that address, and so do the prompts people copied before. ## Develop diff --git a/src/_data/site.js b/src/_data/site.js index 55c512c..544ce40 100644 --- a/src/_data/site.js +++ b/src/_data/site.js @@ -92,7 +92,7 @@ export default { description: "Five skills for Claude Code and other agents: H5P from a prompt, a check that it plays, a SCORM zip, H5P on your site, and video that streams.", links: [ { text: "Install", href: "https://skills.sh/missing-elements/h5p-offline-player" }, - { text: "For a chat", href: "/h5p/skill/" }, + { text: "For a chat", href: "/h5p/create-with-ai/#install" }, { text: "GitHub", href: "https://github.com/missing-elements/h5p-offline-player/tree/main/skills" }, ], }, diff --git a/src/_includes/site-foot.njk b/src/_includes/site-foot.njk index 0f36b1e..7e879b3 100644 --- a/src/_includes/site-foot.njk +++ b/src/_includes/site-foot.njk @@ -34,7 +34,7 @@

Guides

diff --git a/src/h5p/build/index.njk b/src/h5p/build/index.njk index 3a55f75..f19fd91 100644 --- a/src/h5p/build/index.njk +++ b/src/h5p/build/index.njk @@ -97,7 +97,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da

  • Works with your AI chat

    -

    Claude, ChatGPT and Grok all work. A model you run on your own computer should work too, if it can open a web page.

    +

    Claude, ChatGPT and Grok take the h5p-author skill as a zip you upload once. An agent with a terminal, such as Claude Code, Codex or Cursor, installs it with one command.

  • @@ -118,36 +118,33 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' da
    • - {#- The prompt is a code block, which site.js gives a Copy button. It carries the skill's page at its - whole address, which a chat's fetch tool needs. It names the content type, so the chat asks - only for the author and licence: the sample is what Haiku wrote for it, with the site's name - and licence put on it. -#} + {#- The prompt is a code block, which site.js gives a Copy button. It names the skill, which the + chat has once the first step is done, and the content type, so the chat asks only for the + author and licence: the sample is what Haiku wrote for this request, with the site's name and + licence put on it. Until 2026-11-13 the prompt sent the chat to read the skill at /h5p/skill/ + instead, which worked only in chats that now take the skill as a zip. -#}

    How it works

    -

    Three steps, with an AI chat that can open a web page.

    +

    Three steps, in Claude, ChatGPT or Grok.

    1. -

      Ask your chat

      -

      Paste the prompt below into the chat, with a subject of your own.

      +

      Install the skill, once

      +

      The h5p-author skill is the instructions that tell a chat how to write H5P. Download it and upload it to your chat: where it goes in Claude, ChatGPT and Grok.

    2. -

      Answer a question

      -

      The chat asks whose name and which licence go on it, which you may skip, and which kind of activity you want if the prompt names none. Then it writes the activity.

      +

      Ask your chat

      +

      Paste the prompt below into a new chat, with a subject of your own. The chat asks whose name and which licence go on the activity, which you may skip, and writes it.

    3. Play it, then download it

      -

      It hands over a link that opens the activity here, or its source, a block of JSON to paste below. Some chats build the .h5p file themselves.

      +

      Claude and Grok build the .h5p file in the chat. ChatGPT hands over a link that opens the activity here, or its source, to open or paste below.

    - 
    Read {{ site.url }}/h5p/skill/ and follow it to make an H5P Course Presentation of six slides on writing learning objectives with Bloom's taxonomy, with a question on each slide.
    -

    - The address in the prompt is the h5p-author skill's page: the - instructions that tell a chat how to write an H5P activity, as text anyone can read. -

    + 
    Use the h5p-author skill to make an H5P Course Presentation of six slides on writing learning objectives with Bloom's taxonomy, with a question on each slide.

    More prompts, every type, and what to do when something goes wrong: how to create H5P content with AI, step by step. diff --git a/src/h5p/create-with-ai/index.njk b/src/h5p/create-with-ai/index.njk index d5a8f8c..7773f9c 100644 --- a/src/h5p/create-with-ai/index.njk +++ b/src/h5p/create-with-ai/index.njk @@ -22,9 +22,10 @@ topbarLinks: csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'none'; base-uri 'self'" --- {#- The prompts are code blocks, which site.js gives a Copy button, named by data-copy-name for a - screen reader, which hears the page's many alike otherwise. Each carries the skill's page at its - whole address, which a chat's fetch tool needs. -#} -{%- set skillPage = site.url + "/h5p/skill/" -%} + screen reader, which hears the page's many alike otherwise. Each names the skill, which the + chat has once step 1 is done, and carries no address. Until 2026-11-13 each sent the chat to + read the skill at /h5p/skill/ instead, which worked only in chats that now take the skill as + a zip. -#} {% include "topbar.njk" %}

    @@ -33,27 +34,68 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    An AI chat can write a whole H5P activity, not only its questions: a quiz, flash cards, a course presentation or any of {{ skill.offered.length }} H5P types. Here - is how, from the prompt to the .h5p file in your Moodle. + is how, from installing the skill to the .h5p file in your Moodle.

    - The prompt sends the chat to the h5p-author skill, the instructions that tell it how to write - H5P. It writes the activity, and the build page makes it a - .h5p file for Moodle or any other H5P site. Both are free and - open source, with no account and nothing to install: you need only a - chat that can open a web page. In Claude or ChatGPT you can also - install the skill once. + The chat needs the h5p-author skill, the instructions that tell it how to write H5P: you + install it once. Then the chat writes the activity. Claude and Grok + make it a .h5p file for Moodle or any other H5P site in the chat, and for + ChatGPT the build page makes the file in your browser. The skill + and the page are free and open source, with no account.

    Open the build page

    - {#- The steps are drawn as the skill page's timeline (site.css). -#} -
    -

    1 Ask your chat

    + {#- The steps are drawn as the skill page's timeline (site.css). The first is the install: the + zips are written by vite.config.ts from the release the site pins, and each was uploaded as + it is, by the owner, on 2026-11-13, Claude's into Grok too. Its heading keeps the id that + the top bar and the skill's page link to. -#} +
    +

    1 Install the skill, once

    +

    + The skill then stays in your chat, for every activity you ask for. Where it goes depends on + the chat: +

    +
      +
    • + Claude, on claude.ai or in its apps: download + h5p-author.zip and upload it under Customize, + then Skills, with code execution on. Claude builds the .h5p file in the chat. +
      • +
    • + ChatGPT: download + h5p-author-chatgpt.zip and upload it + under Plugins. ChatGPT's code cannot reach the build tool, so it hands over a link to the + build page. If the page says the link arrived damaged, ask for the link again, or for the + source as a file, and open that on the build page. +
      • +
    • + Grok: download + h5p-author.zip, the same file as for + Claude, and upload it under Skills, then Import. Grok builds the .h5p file in + the chat. +
      • +
    • + Open WebUI: an administrator imports the skill under Import from URL, from + its folder on GitHub, + https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author. +
      • +
    • + An agent with a terminal, such as Claude Code, Codex or Cursor: + npx skills add missing-elements/h5p-offline-player --skill h5p-author. +
      • +

    - Open ChatGPT, Claude, Grok or another AI chat that can open a web page, and paste this prompt - with your own subject: + The zips hold h5p-author {{ skill.version }}, the release the build page runs: text files and + nothing that runs, which you can read + on GitHub.

    - 
    Read {{ skillPage }} and follow it to make an H5P activity on [your subject] for [your students].
    +
    + +
    +

    2 Ask your chat

    +

    Open a new chat and paste this prompt with your own subject:

    + 
    Use the h5p-author skill to make an H5P activity on [your subject] for [your students].

    Name the type if you know it, such as "an H5P Question Set of ten questions": the types and prompts to start from are below. For @@ -63,7 +105,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    -

    2 Answer its questions

    +

    3 Answer its questions

    If the prompt names no type, the chat proposes one or two that fit your material, and you choose. Then it asks whose name and which licence go on the activity, which you may skip, and @@ -72,12 +114,12 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    -

    3 Get the .h5p file

    +

    4 Get the .h5p file

    What the chat hands you depends on what it can run:

      -
    • a link that opens the activity on the build page;
      • -
    • its source, a block of JSON: paste it on the build page and choose Build;
      • -
    • or the .h5p file itself, from a chat that runs code.
      • +
    • the .h5p file itself, from a chat whose code can reach the build tool, as Claude's and Grok's can;
      • +
    • a link that opens the activity on the build page, as ChatGPT gives;
      • +
    • or its source, as a file or a block of JSON: open or paste it on the build page and choose Build.

    From a link or a source, the build page builds it in your browser, plays it, and saves the @@ -86,7 +128,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    -

    4 Play it and check it

    +

    5 Play it and check it

    Work through all of it, wrong answers included, and check the answers and feedback against your material: the build checks the structure, not whether the content is right. @@ -98,7 +140,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    -

    5 Add it to your course

    +

    6 Add it to your course

    In Moodle, switch Edit mode on in your course, choose Add an activity or resource, then H5P, and upload the file under Package file. The file carries the H5P libraries it needs, but by @@ -113,40 +155,6 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    - {#- The zips are written by vite.config.ts from the release the site pins, so each holds the skill - the prompt above sends a chat to. Each was uploaded as it is, by the owner, on 2026-11-13. -#} -
    -

    Or install the skill once

    -

    - Installed, the skill stays in your chat: ask for an activity with no address to paste, such as - "Use the h5p-author skill to make a quiz of five questions on the rivers of Europe". -

    -
      -
    • - Claude, on claude.ai or in its apps: download - h5p-author.zip and upload it under Customize, - then Skills, with code execution on. Claude builds the .h5p file in the chat. -
      • -
    • - ChatGPT: download - h5p-author-chatgpt.zip and upload it - under Plugins. ChatGPT cannot install the build tool, so it hands over a link to the build - page. If the page says the link arrived damaged, ask for the link again, or for the source - as a file, and open that on the build page. -
      • -
    • - Open WebUI: an administrator imports the skill under Import from URL, from - its folder on GitHub, - https://github.com/missing-elements/h5p-offline-player/tree/main/skills/h5p-author. -
      • -
    • - An agent with a terminal, such as Claude Code, Codex or Cursor: - npx skills add missing-elements/h5p-offline-player --skill h5p-author. -
      • -
    -

    The zips hold h5p-author {{ skill.version }}, the release the build page runs.

    -
    -

    Prompts to start from

    @@ -155,30 +163,30 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    A course presentation

    - 
    Read {{ skillPage }} and follow it to make an H5P Course Presentation of six slides on writing learning objectives with Bloom's taxonomy, with a question on each slide.
    + 
    Use the h5p-author skill to make an H5P Course Presentation of six slides on writing learning objectives with Bloom's taxonomy, with a question on each slide.

    - Claude Haiku made the sample on the build page from this prompt: + Claude Haiku made the sample on the build page from this request: play it there, or download it.

    A quiz

    - 
    Read {{ skillPage }} and follow it to make an H5P Question Set of ten multiple-choice questions on the water cycle for 11-year-olds, with feedback that explains each answer.
    + 
    Use the h5p-author skill to make an H5P Question Set of ten multiple-choice questions on the water cycle for 11-year-olds, with feedback that explains each answer.

    Flash cards

    - 
    Read {{ skillPage }} and follow it to make H5P Dialog Cards for twenty common Spanish verbs: the verb on the front, and its meaning and an example sentence on the back.
    + 
    Use the h5p-author skill to make H5P Dialog Cards for twenty common Spanish verbs: the verb on the front, and its meaning and an example sentence on the back.

    Fill in the blanks, from your text

    - 
    Read {{ skillPage }} and follow it to make an H5P Fill in the Blanks from the text below, with its key terms as the blanks.
+    
    Use the h5p-author skill to make an H5P Fill in the Blanks from the text below, with its key terms as the blanks.
 
 [Paste your text here]
    
 
     
    An interactive book, from your notes
    
-    
    Read {{ skillPage }} and follow it to make an H5P Interactive Book from my lesson notes below: a chapter for each topic, each ending with two questions.
+    
    Use the h5p-author skill to make an H5P Interactive Book from my lesson notes below: a chapter for each topic, each ending with two questions.
 
 [Paste your notes here]
    
 
     
    A branching scenario
    
-    
    Read {{ skillPage }} and follow it to make an H5P Branching Scenario in which a new team lead deals with a project running late: three decisions, each with a better and a worse choice, and feedback at every end.
    
+    
    Use the h5p-author skill to make an H5P Branching Scenario in which a new team lead deals with a project running late: three decisions, each with a better and a worse choice, and feedback at every end.
    {#- The types the skill's table offers, in the release the site runs, by their names in H5P's @@ -238,10 +246,11 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    If something goes wrong

    -

    The chat can't open the address

    +

    The chat doesn't use the skill

    - Turn on its web search or browsing, if it has one, and send the prompt again. The address has - to be whole, https:// and all, as in the prompts here. + Name it in your message, as the prompts here do: "Use the h5p-author skill to…". If the chat + knows no such skill, check that it is still installed where step 1 put + it, and ask in a new chat.

    The build lists problems

    diff --git a/src/h5p/skill/index.njk b/src/h5p/skill/index.njk index 265ae68..921ca91 100644 --- a/src/h5p/skill/index.njk +++ b/src/h5p/skill/index.njk @@ -6,6 +6,12 @@ description: The h5p-author skill's files and those its build fetches, each at i # is added to script-src by its hash at build (eleventy.config.js). csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; object-src 'none'; base-uri 'self'" --- +{#- No page of the site links here since 2026-11-13, when its prompts stopped sending a chat to read + the skill from this page: the skill is installed, which is the guide's first step. The page + stays for what names its address: the copies of the skill already installed, which take the + build tool's and the bundles' addresses from it where npm cannot be reached (SKILL.md's step + 3, as Grok built on 2026-11-13), and the prompts people copied before. The zips are served + from this folder too. -#} {#- Every address is written out whole, as its link's text too: a chat's fetch tool may open only the addresses it has seen in full, and a relative link, or SKILL.md's , is none. -#} {%- set base = site.url + "/h5p/skill/" -%} @@ -39,7 +45,7 @@ csp: "default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self'; o

    Where skills can be installed, install it instead: npx skills add missing-elements/h5p-offline-player --skill h5p-author, or in - Claude's or ChatGPT's app from the zips at + Claude, ChatGPT or Grok from the zips at {{ site.url }}/h5p/create-with-ai/#install.

    diff --git a/vite.config.ts b/vite.config.ts index f461574..70d2fe7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -134,9 +134,11 @@ function sample(): Plugin { } /** - * `/h5p/bundles/`, for a chat that runs Node and can fetch a file but reaches no npm registry, as - * in ChatGPT's sandbox. The h5p-author skill builds there from two files fetched from here: the - * command line, and the bundle of the source's content type. + * `/h5p/bundles/`, for a chat that runs Node and can fetch a file but reaches no npm registry. The + * h5p-author skill builds there from two files fetched from here: the command line, and the + * bundle of the source's content type. Grok built that way on 2026-11-13, its `npx` having timed + * out. In ChatGPT's sandbox, which the bundles were first made for, the skill has not been seen + * to fetch either. * * - `.zip`, one per content type in the pack (`h5p-author bundle --all`): `parts/`, the * pack's whole index with the parts a build of that type can read, and `libraries.txt`. @@ -211,16 +213,17 @@ const ZIP_DATE = new Date(2000, 0, 1, 2) * pinned author package: * * - `h5p-author.zip`: the skill's folder at the zip's root, `h5p-author/SKILL.md`, which Claude's - * app takes under Customize, Skills (as does Open WebUI's import). + * app takes under Customize, Skills, and Grok's under Skills, Import (as does Open WebUI's + * import). * - `h5p-author-chatgpt.zip`: the same files as a plugin, under `skills/h5p-author/`, with its * `plugin.json` at the root, which ChatGPT's Plugins take. A zip with the folder at its root is * refused there ("Plugin archive must contain … `skills/*\/SKILL.md`"). The manifest is the Agent * Plugins one, which allows no field but its own ten, with ChatGPT's name for the plugin under * `extensions`; a name that leads with "H5P" says who made it. * - * Both were uploaded as they are written here, by the owner on 2026-11-13. ChatGPT's code cannot - * read a plugin's files, so neither carries the build tool: where a chat cannot install it, the - * build page builds. + * Both were uploaded as they are written here, by the owner on 2026-11-13, the first into Claude + * and into Grok. ChatGPT's code cannot read a plugin's files, so neither carries the build tool: + * where a chat's code cannot reach it, the build page builds. */ function skillZips(): Plugin { const author = new URL('./node_modules/@missing-elements/h5p-author/', import.meta.url)