Convierte previsualizaciones HTML, como brand heroes o banners, en SVGs autocontenidos para READMEs de GitHub. Renderiza fuentes con precisión, incluyendo ejes de fuentes variables y ajuste de texto, utilizando fontkit para resolver problemas de peso de fuentes variables y Playwright para verificación visual.
/plugin marketplace add Sora-bluesky/html-to-svg
El comando exacto puede variar según el repositorio. Consulta el README en GitHub.
Para el autor de la skill
Muestra que tu skill está catalogada en Skillteca, genera backlink y tráfico rastreable.
[](https://www.skillteca.com.br/skills/html-to-svg?utm_source=badge&utm_medium=readme&utm_campaign=badge)
Kit de herramientas para interactuar y probar aplicaciones web locales usando Playwright. Permite verificar la funcionalidad del frontend, depurar el comportamiento de la UI, capturar capturas de pantalla del navegador y ver los registros del navegador.
Aplica los colores y la tipografía oficiales de la marca Anthropic a cualquier artefacto que se beneficie de su identidad visual. Úselo cuando se apliquen pautas de estilo, formato visual o estándares de diseño de la empresa.
Crea interfaces frontend distintivas y de grado de producción con alta calidad de diseño, generando código creativo y pulido y diseño de UI que evita la estética genérica de IA. Úsela para construir componentes web, páginas y aplicaciones, o para estilizar/embellecer UIs web.
Suite de herramientas para crear artefactos HTML elaborados y multicomponente para claude.ai, utilizando tecnologías web frontend modernas (React, Tailwind CSS, shadcn/ui). Úselo para artefactos complejos que requieran gestión de estado, enrutamiento o componentes shadcn/ui, no para artefactos HTML/JSX simples de un solo archivo.
Alerta por categoría
Un email corto con solo las skills nuevas de Design e Frontend. 4 minutos de lectura, sin spam, te das de baja con un clic.
Confirmas tu email en el primer envío. Sin spam. Te das de baja con un clic.
Static HTML preview を、GitHub README 等で使える自己完結 SVGに変換する。
外部依存(Web Font / JS / External CSS)を持たず、SVG sandbox や <img src=".svg">
環境で確実に表示される。
| 既存ツール | 問題 |
|---|---|
| html2svg / dom-to-svg | レイアウト精度が不安定 |
| opentype.js | Variable Font の axis を反映できない(全 weight で同一path) |
@font-face + Base64 埋め込み | GitHub の SVG sandbox は外部 font / <style> を制限 |
このスキルは fontkit + Playwright を使い、ブラウザレンダリングと一致する SVG を機械的に生成する。詳細な背景は [refe
[Description truncada. Veja o README completo no GitHub.]
Entra para comentar. Entrar
