Agent skill
h5p-patterns
Create interactive H5P content for Moodle and web platforms. Use when building interactive exercises, quizzes, or multimedia learning content.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/h5p-patterns
SKILL.md
H5P Integration Skill
Embed and style H5P interactive content in Cloodle.
Trigger
- H5P content requests
- Interactive element creation
- H5P embedding in Kirby or Moodle
H5P in Moodle
H5P activities are native in Moodle 4+. Key features:
- Interactive Video
- Course Presentation
- Question Sets
- Branching Scenarios
Embedding in Moodle Page
<div class="cloodle-h5p-wrapper">
<iframe src="/mod/h5pactivity/embed.php?id=123"
class="h5p-iframe"
allowfullscreen>
</iframe>
</div>
H5P in Kirby
Use iframe embedding with public H5P URLs:
<?php snippet('h5p-embed', ['id' => $block->h5pId()]) ?>
Snippet Template
<div class="uk-card uk-card-default uk-card-body cloodle-h5p">
<iframe
src="<?= $moodleUrl ?>/mod/h5pactivity/embed.php?id=<?= $id ?>"
class="uk-width-1-1"
style="border: none; min-height: 400px;">
</iframe>
</div>
Styling H5P
.cloodle-h5p-wrapper {
border-radius: $cloodle-border-radius;
overflow: hidden;
box-shadow: $card-box-shadow;
iframe {
width: 100%;
min-height: 500px;
border: none;
}
}
Content Types for Education
| Type | Use Case |
|---|---|
| Interactive Video | Lecture with quizzes |
| Course Presentation | Slide-based learning |
| Question Set | Assessment |
| Dialog Cards | Vocabulary/flashcards |
| Timeline | Historical content |
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?