Agent Skills para HTML

Audita y mejora la accesibilidad web siguiendo las pautas WCAG 2.2. Úsalo cuando se solicite "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation" o "make accessible".

por addyosmani/web-quality-skills

• Forms
• Media
• Accessibility

Revisa el código de UI para el cumplimiento de las Web Interface Guidelines. Úsalo cuando te pidan "review my UI", "check accessibility", "audit design", "review UX" o "check my site against best practices".

por vercel-labs/agent-skills

• Semantics

Conjunto de herramientas para crear artefactos HTML elaborados y multicomponente en claude.ai usando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úsalo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes de shadcn/ui - no para artefactos simples de HTML/JSX de un solo archivo.

por anthropics/skills

Skill de diseño de interfaces frontend que cubre UX, jerarquía visual, accesibilidad, comportamiento responsive, theming y sistemas de diseño para UI web.

por pbakaus/impeccable

Necesita (declarado): Node.js

Convierte Markdown a HTML con estilos y temas compatibles con WeChat. Admite resaltado de código, matemáticas, Mermaid (renderizado a PNG mediante Chrome headless), PlantUML, notas al pie, alertas, infografías y citas opcionales al pie para enlaces externos. Úsalo cuando el usuario pida "markdown to html", "convert md to…

por jimliu/baoyu-skills

• Semantics
• Forms

Crea diagramas pulidos de arquitectura, flujo de trabajo, secuencia y flujo de datos como HTML interactivo independiente con SVG en línea y temas.

por tt-a1i/archify

• Semantics
• Forms
• Media

Convierte 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.

por QingYunA/answer-me-with-html

• Media

El contrato de composición de HyperFrames: construye proyectos HTML renderizables con atributos de temporización data-*, pistas, subcomposiciones y validación.

por heygen-com/hyperframes

• Forms

Busca, instala y conecta bloques y componentes del registro en composiciones de HyperFrames, incluyendo la conexión de elementos instalados en index.html.

por heygen-com/hyperframes

• Semantics

Arquitectura de tokens de diseño, especificaciones de componentes, variables CSS y generación de diapositivas para sistemas de diseño sistemáticos.

por nextlevelbuilder/ui-ux-pro-max-skill

妙搭（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）。

por larksuite/cli

CLI de automatización de navegador para agents de IA: navegar páginas, rellenar formularios, hacer clic, capturar pantallas, extraer datos y probar aplicaciones web vía CDP.

por vercel-labs/agent-browser

CLI de automatización de navegador para agentes de IA: obtener contenido renderizado, rellenar formularios, hacer clic, capturar pantallas y registrar respuestas de red.

por browser-act/skills

• Semantics

Necesita (declarado): Python

Audita un diseño de Penpot según WCAG 2.1/2.2 AA (opcionalmente AAA) y genera un informe estructurado de severidad: contraste de color, tamaños táctiles/de objetivo, alternativas de texto, jerarquía de encabezados y orden de teclado/enfoque. Propone correcciones — no las aplica automáticamente. También actúa como Evaluator en el ciclo de brief a pantalla. Disparadores: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

por penpot/penpot-ai-kit

Traduce el código de una página, vista o componente de una aplicación existente a una pantalla de Penpot vinculada al sistema de diseño existente: mapea estilos de código a tokens semánticos y reutiliza componentes de la biblioteca en lugar de formas sin procesar. Úsalo cuando el usuario tenga código/markup real y quiera reconstruirlo en Penpot, sección por sección, dentro del sistema. Disparadores: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

por penpot/penpot-ai-kit

• Forms

Revisa un diseño de Penpot frente a su código implementado (un componente fuente o una historia de Storybook) y emite un informe DRIFT estructurado. Úsalo cuando un ingeniero necesite confirmar que la implementación coincide con el diseño: extrae HTML/CSS de una selección, mapea sus tokens/estructura/estados al componente de código, los compara y enumera lo que le falta a cada lado con severidad y una reconciliación. Se degrada con elegancia a una comprobación de tokens del sistema de diseño cuando no se proporciona una fuente de código. Disparadores: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

por penpot/penpot-ai-kit

Renombra semánticamente las capas de Penpot a nombres de elementos HTML (nav, header, main, section, article, button, input, label, h1-h6, p, ul, li, img) o a nombres de rol en kebab-case, reemplazando nombres autogenerados como 'Rectangle 12'. Úsalo para limpiar el nombrado de capas, preparar un archivo para el traspaso o como condición previa para auditorías de accesibilidad (jerarquía de encabezados) y revisión de diseño a código (mapeo semántico). Disparadores: 'rename layers', 'semantic layer names', 'rename to HTML elements', 'clean up layer names', 'fix layer naming', 'add semantic names to layers', 'prepare layers for handoff'.

por penpot/penpot-ai-kit

• Document structure
• Semantics
• Forms