UI Design
AnastasiyaW/codex-claude-code-config
Unify product UI design, frontend implementation, and verification.
Transform Claude into an expert in evidence-based educational presentation design.
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install guia-matthieu/clawfu-skills educational-presentation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/content/educational-presentation .claude/skills/educational-presentation && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .claude/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install guia-matthieu/clawfu-skills educational-presentation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/content/educational-presentation .agents/skills/educational-presentation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .agents/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install guia-matthieu/clawfu-skills educational-presentation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/content/educational-presentation .cursor/skills/educational-presentation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .cursor/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/guia-matthieu/clawfu-skills.git --path skills/content/educational-presentation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install guia-matthieu/clawfu-skills educational-presentation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/content/educational-presentation .gemini/skills/educational-presentation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .gemini/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install guia-matthieu/clawfu-skills educational-presentationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/content/educational-presentation .github/skills/educational-presentation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .github/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install guia-matthieu/clawfu-skills educational-presentation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/guia-matthieu/clawfu-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/content/educational-presentation .opencode/skills/educational-presentation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "educational-presentation" agent skill from https://github.com/guia-matthieu/clawfu-skills/tree/main/skills/content/educational-presentation into .opencode/skills/educational-presentation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "educational-presentation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
educational-presentationTransform Claude into an expert in evidence-based educational presentation design.
Educational Presentation is an agent skill from guia-matthieu/clawfu-skills. Transform Claude into an expert in evidence-based educational presentation design. Use when designing presentations for teaching, training, or learning contexts where retention and comprehension matter. Applies Cognitive Load Theory, Mayer's 12 Principles of Multimedia Learning, Gagné's 9 Events of Instruction, C.R.A.P. design principles, and WCAG 2.1 AA accessibility standards. Triggers on requests to (1) create educational or training presentations, (2) design slides for teaching or workshops, (3) improve…
Its SKILL.md is about 4.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 5 other files, including reference files (for example `references/before-after.md`, `references/quick-reference.md` and `references/slide-templates.md`).
It sits in Frontend & Design, covering Slides and decks and Accessibility. The repository describes itself as: 172 expert marketing skills for AI agents — ClawFu MCP Server. The licence is MIT.
3 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 4108f5c. It shows what the files ask for, not the result of running them.
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
No scripts in the folder and no shell commands in SKILL.md (its code samples are yaml).
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Educational Presentation loads about 4.3k tokens when it runs, and up to ~35k if it reads all its reference files. Until then it costs about 183 tokens; SKILL.md has 1,820 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
The full file from guia-matthieu/clawfu-skills at commit 4108f5c, republished under its MIT licence (© guia-matthieu). 1,820 words, ~4,296 tokens.
.claude/skills/educational-presentation/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.Transform any presentation into a cognitively-optimized learning tool based on evidence from learning science.
Prime Directive: Every design decision must serve learning by:
Critical Rule: If a design element doesn't directly support learning, remove it.
Rule: Exclude all extraneous material - no decorative clipart, busy backgrounds, or irrelevant details. Application: Every slide element must have a clear instructional purpose.
Rule: Do NOT put paragraphs of text on slides that will be read aloud. Why: Creates "cognitive channel war" - audience can't read and listen simultaneously. Solution:
Rule: Break content into user-paced chunks using progressive disclosure or multiple slides. Application: Never overwhelm with one dense slide - chunk across 3-5 slides instead.
For all 12 Mayer principles with detailed applications, read references/quick-reference.md.
Every educational presentation MUST follow this structure:
For detailed templates for each event, read references/slide-templates.md.
Create visual hierarchy with strong differences:
Reuse same fonts, colors, and layouts:
Nothing is placed arbitrarily:
Group related items close together:
For detailed C.R.A.P. applications, read references/quick-reference.md.
60-30-10 Rule:
Accessibility (WCAG 2.1 AA):
Tools: WebAIM Contrast Checker, Adobe Color, Coolors
Free Legal Resources:
PowerPoint: Animations > Add Animation > Appear > Effect Options: On Click Google Slides: Insert > Animation > Appear/Fade In > On Click
Critical Rules:
PowerPoint: File > Info > Check for Issues > Check Accessibility Google Slides: Grackle Slides add-on
For complete accessibility checklist, read references/validation.md.
Problem: 8+ bullet points with full sentences, presented all at once Fix: Chunk across 3-4 slides, one clear message per slide, use progressive disclosure
Problem: Paragraphs of text on slide while presenter reads aloud Fix: Move ALL paragraph text to speaker notes, leave only keywords/graphics
Problem: Generic clipart that doesn't illustrate the concept Fix: Use high-quality, relevant photographs or professional icons
Problem: Complex flowchart revealed all at once Fix: Build piece-by-piece using progressive disclosure
Problem: All text centered on slide Fix: Left-align all body text, use invisible grid
For detailed before/after transformations, read references/before-after.md.
For comprehensive validation checklist (174 points), read references/validation.md.
Will I read this text aloud?
├─ YES → Move to speaker notes ✅
│ (Use visual + keyword only on slide)
└─ NO → Consider keeping on slide
├─ Is it a keyword/label? → Keep ✅
├─ Is it a technical term that must be referenced? → Keep ✅
└─ Is it a full sentence/paragraph? → Move to notes ✅What's your data story?
├─ Comparing categories → Bar/Column chart
├─ Showing trend over time → Line graph
├─ Part-to-whole relationship → Pie/Donut (max 5 slices)
└─ Correlation between variables → Scatter plotBefore delivering, verify:
This skill includes detailed reference files for specific needs:
references/quick-reference.mdUse when: You need rapid decisions during creation or want a scannable checklist Contains:
references/slide-templates.mdUse when: You want ready-to-use templates for specific slide types Contains:
references/before-after.mdUse when: You want to see concrete transformations or understand common mistakes Contains:
references/validation.mdUse when: You need comprehensive pre-delivery validation Contains:
When creating presentations in PowerPoint or Google Slides:
When Claude needs to create actual .pptx files:
pptx skill provides the technical implementation (html2pptx, python-pptx)Workflow:
Foundational Theories:
Design Principles:
Recommended Books:
New to educational presentations? Follow this path:
references/quick-reference.md (10 minutes)references/slide-templates.md (5 minutes per template)Improving existing presentations? Follow this path:
references/before-after.md to identify common mistakes (30 minutes)references/validation.md (15-30 minutes)Quick reference during creation? Keep references/quick-reference.md open
Remember: Beautiful presentations are cognitively efficient presentations. Every design choice should serve learning, not just aesthetics.
| Claude handles | You provide |
|---|---|
| Applying Gagné's 9 Events structure | Learning objectives and content |
| Enforcing Mayer's 12 Principles | Domain expertise and examples |
| Checking accessibility (WCAG 2.1 AA) | Visual design preferences |
| Suggesting progressive disclosure | Pacing and delivery style |
| Running validation checklist | Final approval and refinement |
| Pass | Focus | Action |
|---|---|---|
| 1st | Structure | Apply Gagné's 9 Events framework |
| 2nd | Cognitive Load | Check Coherence, Redundancy, Segmenting |
| 3rd | Design | Apply C.R.A.P. principles |
| 4th | Accessibility | Run WCAG checklist |
name: educational-presentation
category: content
subcategory: presentations
version: 2.0
author: GUIA
source_expert: Richard Mayer, Robert Gagné, Robin Williams
source_work: Multimedia Learning, Conditions of Learning, The Non-Designer's Design Book
difficulty: intermediate
mode: cyborg
tags: [presentation, education, training, cognitive-load, mayer, gagne, accessibility]
created: 2026-02-03
updated: 2026-02-03© guia-matthieu, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 4 other files (references) in skills/content/educational-presentation of guia-matthieu/clawfu-skills.
Open the folder on GitHubat commit 4108f5c
Educational Presentation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Educational Presentation this skillguia-matthieu/clawfu-skills | 150 | — | ~4.3k | Automated safety check: Pass | MIT | |
| UI DesignAnastasiyaW/codex-claude-code-config | 154 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Openkb HTML CriticVectifyAI/OpenKB | 4.8k | 1 repos | ~1.4k | Automated safety check: Pass | Apache-2.0 | |
| Openkb Deck NeonVectifyAI/OpenKB | 4.8k | 1 repos | ~4.3k | Automated safety check: Pass | Apache-2.0 | |
| Superdesignsuperdesigndev/superdesign-skill | 642 | — | ~4.1k | Automated safety check: Pass | MIT | |
| Visual Stylecalesthio/OpenMontage | 66k | — | ~1.5k | Automated safety check: Pass | AGPL-3.0 |
AnastasiyaW/codex-claude-code-config
Unify product UI design, frontend implementation, and verification.
VectifyAI/OpenKB
A skill your agent uses to review a generated HTML deck or single-page artifact for visual quality and structural correctness.
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
superdesigndev/superdesign-skill
Design or redesign frontend UI, presentations, and graphics on the Superdesign canvas with a choice of leading AI models.
calesthio/OpenMontage
Create, extract, and apply portable visual design systems via visual-style.md files.
DejavuMoe/Smoji
Create polished design artifacts as self-contained HTML: UI mockups, interactive prototypes, wireframes, landing pages, dashboards, app screens, mobile apps, slide decks (a.k.a.
guia-matthieu/clawfu-skills
Calculate A/B test statistical significance. An agent skill from guia-matthieu/clawfu-skills.
guia-matthieu/clawfu-skills
Analyze user retention by cohort. An agent skill from guia-matthieu/clawfu-skills.
guia-matthieu/clawfu-skills
Analyze your competitive landscape using Porter's Five Forces and modern frameworks—understand industry dynamics, identify strategic opportunities, and position your business for sustainable…
guia-matthieu/clawfu-skills
Monitor competitor websites for changes. An agent skill from guia-matthieu/clawfu-skills.
guia-matthieu/clawfu-skills
Transform long-form content into multiple short-form pieces.
guia-matthieu/clawfu-skills
Check email deliverability and DNS configuration. An agent skill from guia-matthieu/clawfu-skills.
Categories
Transform Claude into an expert in evidence-based educational presentation design. Educational Presentation is an agent skill from guia-matthieu/clawfu-skills. Transform Claude into an expert in evidence-based educational presentation design.
Educational Presentation fits situations like: designing presentations for teaching; learning contexts where retention and comprehension matter; create educational; training presentations.
Run `npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a claude-code`. Or copy the skill folder (skills/content/educational-presentation in guia-matthieu/clawfu-skills) into .claude/skills/educational-presentation in your project. Claude Code loads it when a task matches its description.
Run `npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a codex`. Or copy the skill folder (skills/content/educational-presentation in guia-matthieu/clawfu-skills) into .agents/skills/educational-presentation in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add guia-matthieu/clawfu-skills --skill educational-presentation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/educational-presentation, .gemini/skills/educational-presentation, .github/skills/educational-presentation and .opencode/skills/educational-presentation in your project.
SKILL.md names no scripts, command-line tools or credentials: Educational Presentation is instructions for the agent only.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
Educational Presentation is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 4.3k tokens (SKILL.md is roughly 17k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 31k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Educational Presentation: UI Design (AnastasiyaW/codex-claude-code-config, 154 stars), Openkb HTML Critic (VectifyAI/OpenKB, 4.8k stars), Openkb Deck Neon (VectifyAI/OpenKB, 4.8k stars) and Superdesign (superdesigndev/superdesign-skill, 642 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
guia-matthieu (a GitHub user) maintains it in guia-matthieu/clawfu-skills, which has 150 GitHub stars. The repository holds 31 skills in this directory. The repository was last updated on October 1, 2026.
Source: guia-matthieu/clawfu-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.