powerpoint
Handle PowerPoint (.pptx) creation, design, and analysis. Use for pitch decks, status updates, and visual storytelling. Use proactively when precise layout positioning and design principles are needed. Examples: - user: "Create a 10-slide deck for the board meeting" -> use design principles + html2pptx - user: "Convert this report into a presentation" -> extract text and map to template - user: "Audit this deck for layout issues" -> generate thumbnail grid for inspection
Install
npx skills add https://github.com/igorwarzocha/opencode-workflows --skill powerpointSKILL.md
<high_fidelity_creation> The preferred method for precise layout positioning:
- HTML: Create slides (720pt x 405pt). Text MUST be in
<p>,<h1>-<h6>, or<ul>. - Visuals: You MUST rasterize gradients/icons as PNGs using Sharp FIRST. Reference:
references/html2pptx.md. - Execution: Run
html2pptx.jsto generate the presentation. </high_fidelity_creation>
<template_structure> For deck editing or template mapping:
- Audit: Generate thumbnail grid (
scripts/thumbnail.py) to analyze layout. - Duplication: Use
scripts/rearrange.pyto duplicate and reorder slides. - Text Injection: Use
scripts/replace.pywith the JSON inventory to populate content. </template_structure>
<design_quality>
- Fonts: You MUST use web-safe fonts ONLY (Arial, Helvetica, Georgia).
- Colors: You MUST NOT use the
#prefix in PptxGenJS hex codes (causes corruption). - Layout: You SHOULD prefer two-column or full-slide layouts. You MUST NOT stack charts below text.
- Verification: You MUST generate a final thumbnail grid with
--cols 4to inspect for text cutoff or overlap issues. </design_quality>
</powerpoint_professional_suite>
Related skills
frontend-designanthropics932KGuidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.prototypemattpocock852KBuild a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.hyperframes-animationheygen-com569KAll animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreographyhyperframes-creativeheygen-com539KNon-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.