Agent Skills para Presentación HTML
Las skills de presentaciones HTML ayudan a un AI agent a producir una presentación que se ejecuta en un navegador. Cubren todo el entregable: la historia y el argumento antes de cualquier marcado, las diapositivas como vistas individuales incluso cuando se construyen con DIVs, tipografía y diseño que resisten en un proyector, interacción en vivo para el ponente, exportación y uso compartido para que otra persona pueda abrir el archivo o la URL después, y acceso desde un navegador, un PDF y un lector de pantalla. Usa la lista clasificada empezando por el subtema que coincida con tu cuello de botella inmediato —historia, diapositivas, visuales, interacción, exportación o acceso— y luego elige la skill cuya descripción aborde ese paso. Una presentación HTML sigue siendo una presentación, así que pondera la historia y las diapositivas antes que los trucos de navegador.
8 para empezar31 mejores opciones
Empieza por estos.
An HTML deck is still a presentation: story, slides, visuals — with extra constraints of the browser, not PowerPoint.
Estos son los resultados más relevantes. Abre un Skill, lee sus instrucciones y decide si encaja.
- Puesto 01Ver Agent SkillDirecta
slides
Crea presentaciones HTML estratégicas con Chart.js, design tokens, layouts responsivos, fórmulas de copywriting y estrategias contextuales de diapositivas.
32.022 · popularidad - Puesto 02Ver Agent SkillDirecta
lark-slides
Destacado飞书幻灯片：创建和编辑幻灯片。创建演示文稿、读取幻灯片内容、管理幻灯片页面（创建、删除、读取、局部替换）。当用户需要创建或编辑幻灯片、读取或修改单个页面时使用。当用户给出 doubao.com 的 /slides/ URL/token 时，也应直接使用本 skill，不要因为域名不是飞书而回退到 WebFetch；路由依据是 URL 路径模式和 token，而不是域名。不负责：云文档内容编辑（走 lark-doc）、云文档里的独立画板对象（走 lark-whiteboard）、上传或下载普通文件（走 lark-drive）。
748.180 · popularidad - Puesto 03Ver Agent SkillDirecta
slideshow
Crea presentaciones de diapositivas HyperFrames — presentaciones, pitch decks y decks interactivos con diapositivas discretas, revelación de fragmentos, ramificación, navegación por puntos de acceso y modo presentador.
299.839 · popularidad - Puesto 04Ver Agent SkillDirecta
slide-dsl
DestacadoEl manual completo del DSL de diapositivas: el lienzo y su fondo, los diez tipos de elementos campo por campo con unidades, valores predeterminados y valores legales, dónde guarda cada tipo sus palabras, qué campo pinta realmente el renderizador cuando dos discrepan, exactamente qué le ocurre al HTML que pones en `content`, y el esquema de estructura contra el que ahora se comprueba TODO lo que se escribe. Nada filtra tu marcado y nada normaliza tus valores, así que este manual es todo lo que hace que una página se renderice correctamente. Cárgalo antes de parchear un campo que no hayas parcheado antes, cuando un parche vuelva rechazado, cuando un
- Puesto 05Ver Agent SkillDirecta
slide-craft
DestacadoLa ley de diseño de una página de diapositiva: geometría del lienzo, tabla de alturas de texto, escala tipográfica, pares de contraste, ritmo de espaciado y qué tipo de elemento porta cada contenido. Cárgala al parchear elementos de diapositiva uno a uno, cuando un arreglo trata sobre color o contraste, cuando el texto debe crecer o encogerse dentro de una caja, cuando una página se siente saturada o vacía, o cuando el contenido de reemplazo necesita estructura real de texto enriquecido. Es el estándar contra el que editan `page-clone` y `pro-editing`, no un procedimiento propio: esos dos deciden qué páginas tocar y en qué orden, este decide cómo se ve una buena página cuando
- Puesto 06Ver Agent SkillDirecta
theme-factory
OficialKit de herramientas para dar estilo a artefactos con un tema. Estos artefactos pueden ser diapositivas, documentos, informes, landing pages HTML, etc. Hay 10 temas predefinidos con colores/tipografías que puedes aplicar a cualquier artefacto creado, o puedes generar un tema nuevo sobre la marcha.
- Puesto 07Ver Agent SkillDirecta
answer-me-with-html
DestacadoConvierte una respuesta en un explicador visual HTML de una página: el modelo escribe un breve borrador en Markdown y el CLI incluido construye una página. Úsalo de forma proactiva y generosa, sin que te lo pidan, siempre que una página ayude más al lector que el texto plano, aunque el texto plano también sirviera: cualquier explicación de cómo funciona algo o de cómo se relacionan las partes (flujo, ruta de una petición, arquitectura, estructura de código o carpetas, máquina de estados, ciclo de vida, historial); cualquier comparación, disyuntiva o decisión con pros y contras; cualquier diagnóstico, revisión o investigación, sobre todo con varias causas o hallazgos que ordenar; cualquier respuesta con una tabla, una lista numerada o clasificada, pasos, ramificaciones o varias secciones; o cuando el usuario diga "I don't get it / draw it / explain visually / 讲讲原理 / 没看懂 / 画个图". En caso de duda, úsalo: una página es rápida y barata de hacer. También para vídeos explicativos ("make a video", "做个视频") y para cambiar su configuración. Omítelo solo para charla trivial, una respuesta trivial de una línea o cuando el usuario pida texto plano.
- Puesto 08Ver Agent SkillDirecta
archify
Crea diagramas pulidos y validados de arquitectura, flujos de trabajo, secuencia y flujo de datos como HTML independiente explorable con SVG inline, temas y exportación.
140.157 · popularidad
Explorar 23 Agent Skills más
- Puesto 09Ver Agent SkillDirecta
gws-slides
Skill de CLI de Google Slides para leer y escribir presentaciones vía gws, cubriendo create, get, batchUpdate y operaciones de página.
40.203 · popularidad - Puesto 10Ver Agent SkillDirecta
recipe-create-presentation
Receta para crear una nueva presentación de Google Slides y añadir diapositivas iniciales, y luego compartirla con un equipo mediante gws CLI.
31.379 · popularidad - Puesto 11Ver Agent SkillPosible
lark-apps
Destacado妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。
659.164 · popularidad - Puesto 12Ver Agent SkillPosible
pptx
OficialUsa esta habilidad siempre que haya un archivo .pptx o .potx de por medio, ya sea como entrada, salida o ambos. Esto incluye: crear presentaciones, pitch decks o diapositivas; leer, analizar o extraer texto de cualquier archivo .pptx o .potx (incluso si el contenido extraído se usará en otro lugar, como un correo o un resumen); editar, modificar o actualizar presentaciones existentes; combinar o dividir archivos de diapositivas; trabajar con plantillas (.potx), diseños, notas del orador o comentarios. Actívala siempre que el usuario mencione \"deck\", \"slides\", \"presentación\" o haga referencia a un nombre de archivo .pptx o .potx, sin importar lo que piense hacer después con el contenido. Si hay que abrir, crear o tocar un archivo .pptx o .potx, usa esta habilidad.
- Puesto 13Ver Agent SkillPosible
frontend-design
OficialGuía para un diseño visual distintivo e intencional al construir una nueva UI o remodelar una existente. Ayuda con la dirección estética, la tipografía y a tomar decisiones que no se lean como valores predeterminados de plantilla.
765.703 · popularidad - Puesto 14Ver Agent SkillPosible
design
Skill integral de diseño que abarca identidad de marca, tokens de diseño, estilos de UI, generación de logotipos, mockups de CIP, presentaciones HTML con Chart.js, banners e iconos.
33.989 · popularidad - Puesto 15Ver Agent SkillPosible
imagegen
OficialGenera o edita imágenes raster cuando la tarea se beneficie de visuales bitmap creados por IA, como fotos, ilustraciones, texturas, sprites, mockups o recortes con fondo transparente. Úsalo cuando Codex deba crear una imagen totalmente nueva, transformar una imagen existente o derivar variantes visuales a partir de referencias, y la salida deba ser un recurso bitmap en lugar de código nativo del repositorio o vector. No lo uses cuando la tarea se maneje mejor editando recursos SVG/vectoriales/código nativo existentes, ampliando un sistema establecido de iconos o logos, o construyendo el visual directamente en HTML/CSS/canvas.
- Puesto 16Ver Agent SkillPosible
canvas-design
OficialCrea arte visual atractivo en documentos .png y .pdf usando filosofía de diseño. Debes usar esta skill cuando el usuario pida crear un póster, una obra de arte, un diseño u otra pieza estática. Crea diseños visuales originales, sin copiar nunca el trabajo de artistas existentes para evitar violaciones de derechos de autor.
- Puesto 17Ver Agent SkillPosible
brand-guidelines
OficialAplica los colores de marca y la tipografía oficiales de Anthropic a cualquier tipo de artefacto que pueda beneficiarse de tener el look-and-feel de Anthropic. Úsalo cuando apliquen colores de marca o guías de estilo, formato visual o estándares de diseño de la empresa.
- Puesto 18Ver Agent SkillPosible
playwright-interactive
OficialInteracción persistente con el navegador y Electron mediante `js_repl` para una depuración de UI iterativa y rápida.
- Puesto 19Ver Agent SkillPosible
hyperframes-registry
Busca, instala y conecta bloques y componentes del registro (gráficos, efectos, transiciones) en composiciones HTML de HyperFrames.
751.896 · popularidad - Puesto 20Ver Agent SkillPosible
hyperframes-creative
Dirección creativa no animada para videos de HyperFrames que abarca especificaciones de diseño, paletas, tipografía, narración, planificación de ritmo y patrones de composición.
682.929 · popularidad - Puesto 21Ver Agent SkillPosible
media-use
Resuelve, genera y opera sobre medios (BGM, SFX, imágenes, íconos, logos, voz, color grades) para proyectos de HyperFrames mediante un único verbo resolve.
746.494 · popularidad - Puesto 22Ver Agent SkillPosible
ai-image-generation
Genera imágenes con IA usando más de 50 modelos (GPT-Image-2, FLUX, Gemini, Seedream) mediante el CLI inference.sh para arte, mockups y visuales de marketing.
696.871 · popularidad - Puesto 23Ver Agent SkillPosible
high-end-visual-design
Enseña diseño web de agencia de alto nivel con fuentes, espaciado, sombras, estructuras de tarjetas y animaciones específicas, bloqueando los valores predeterminados genéricos de la IA.
420.662 · popularidad - Puesto 24Ver Agent SkillPosible
image-to-code
Skill de diseño-a-código de sitios web con enfoque en imágenes que genera imágenes de diseño, las analiza y luego implementa el frontend correspondiente para landing pages y sitios de marketing.
350.805 · popularidad - Puesto 25Ver Agent SkillPosible
impeccable
Habilidad de diseño de interfaces frontend que cubre rediseño, crítica, pulido, tipografía, maquetación, color, movimiento y sistemas de diseño para UI web.
Necesita (declarado): Node.js
319.215 · popularidad - Puesto 26Ver Agent SkillPosible
brandkit
Genera imágenes premium de kits de marca, incluidos paneles de directrices de marca, sistemas de logotipos, presentaciones de identidad y presentaciones de universo visual.
353.383 · popularidad - Puesto 27Ver Agent SkillPosible
copywriting
Escribe y mejora textos de marketing para páginas, titulares, CTAs y propuestas de valor, enfocándose en claridad, beneficios y conversión.
218.410 · popularidad - Puesto 28Ver Agent SkillPosible
prototype
Construye varias versiones genuinamente distintas de una pieza de UI descrita tras un selector visual para compararlas en vivo y promover una ganadora.
133.671 · popularidad - Puesto 29Ver Agent SkillPosible
copy-editing
Edita y mejora copy de marketing existente mediante siete pasadas enfocadas que cubren claridad, voz, beneficios y prueba.
138.021 · popularidad - Puesto 30Ver Agent SkillPosible
vercel-cli-with-tokens
OficialDespliega y gestiona proyectos en Vercel mediante autenticación basada en tokens. Úsalo cuando trabajes con Vercel CLI usando tokens de acceso en lugar de inicio de sesión interactivo — p. ej. "deploy to vercel", "set up vercel", "add environment variables to vercel".
- Puesto 31Ver Agent SkillPosible
ui-taste
Manuales de diseño de UI para crear, pulir y revisar interfaces web e iOS con flujos de trabajo anti-slop y referencias opcionales de productos reales.
452.376 · popularidad
Qué cubre este tema
Cada subtema agrupa Agent Skills para una situación concreta.
- Story
- The argument, before markup.
- Slides
- Each view is a slide, even if it is a DIV.
- Visuals
- Type and layout that survive a projector.
- Interaction
- How the speaker moves through the deck live.
- Export & share
- A file or URL someone else can open later.
- Access
- Readable in a browser, a PDF, and a screen reader.
Preguntas frecuentes
- ¿Qué tipos de skills se listan en HTML Presentation?
- Skills que ayudan a un Agent de IA a crear una presentación basada en navegador. Abarcan relato, diapositivas, visuales, interacción, exportación y uso compartido, y acceso.
- ¿Cómo está ordenada la lista?
- La lista está clasificada por demanda de búsqueda observada, con coincidencias directas primero y un límite por cada publisher.
- ¿Estos skills sustituyen a PowerPoint?
- No. Una presentación HTML sigue siendo una presentación con relato, diapositivas y visuales, pero añade las restricciones del navegador.
- ¿Qué debo revisar antes de elegir uno?
- Ajusta la skill a tu paso actual: historia, diapositivas, visuales, interacción, exportación y uso compartido, o acceso. Los subtemas se corresponden directamente con esas etapas.
Cómo instalar un Agent Skill
Los Agent Skills son archivos SKILL.md. La mayoría de los agentes los detectan cuando están en el directorio de skills correcto:
- Claude Code — copy the SKILL.md for slides into ~/.claude/skills/slides/ for yourself, or .claude/skills/slides/ to share it with a project.
- From the registry — run npx skills add nextlevelbuilder/ui-ux-pro-max-skill@slides.
- Or download slides from its source and place that SKILL.md in the directory above.
Cómo elegir Comprueba la fuente y las instrucciones del propio Skill antes de instalar. Las etiquetas Official y Notable describen el origen del Skill.