SkillProof tested Claude skills

Code Format

Convierte una exportación HTML de Lanhu en Vue o React que reutiliza tus componentes

Por ursazoo · ursazoo/lanhu-to-code

Probado · Funciona ★ 9.2/10

Code Format — Convierte una exportación HTML de Lanhu en Vue o React que reutiliza tus componentes

Qué hace

Convierte el HTML/CSS en bruto que produce una exportación de diseño de Lanhu en una página para tu stack actual: primero lee README, docs/components.md, docs/dev-spec.md y docs/tech-spec.md, mapea los valores de diseño a tus tokens CSS, reutiliza componentes documentados en lugar de elementos en bruto, y marca como TODO cualquier cosa que las especificaciones no definan. Se activa cuando pides convertir una exportación de Lanhu en código frontend de proyecto. El cuerpo de la skill es Chinese-only y espera que la exportación ya esté en .claude/lanhu-output/<page>/index.html, normalmente colocada allí por la skill hermana design-to-code a través del Lanhu MCP.

Informe de la prueba

Convertí la misma exportación de lista de pedidos estilo Lanhu en una página Vue dos veces contra un proyecto con documentación real de componentes, tokens y API. Sin la skill, la página incluía 9 colores hexadecimales codificados y 15 valores px en bruto, inventó el endpoint /api/orders/list, pasó :type a un StatusTag cuya prop es en realidad :variant, codificó tres cadenas de estado Chinese y renderizó una cantidad en centavos con toFixed(2) — cinco defectos, cada uno una entrada en el propio failure-patterns.md de la skill. Siguiendo la skill se produjeron cero literales px, 22 referencias de tokens de diseño, el GET /v2/orders especificado con sus parámetros keyword/status/page/pageSize, la prop :variant correcta, la búsqueda ORDER_STATUS_MAP y formatAmount, además de advertencias explícitas para los dos colores que la tabla de tokens no cubre. El cuerpo de la skill es Chinese-only y espera que la exportación ya esté en .claude/lanhu-output/<page>/index.html, normalmente colocada allí por la skill hermana design-to-code a través del Lanhu MCP.

Probado el: 2026-08-07 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/ursazoo/lanhu-to-code.git
mkdir -p ~/.claude/skills
cd lanhu-to-code && cp -r skills/code-format ~/.claude/skills/code-format

Comandos y prompts de ejemplo

  • /code-formatConvierte una exportación HTML de Lanhu en Vue o React que reutiliza tus componentes

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 把这个蓝湖导出的订单列表HTML页面转换成能复用我们项目组件库的Vue 3页面代码
  • 先读一下docs里的组件文档和设计规范，再把这份蓝湖导出的页面转成React组件
  • 这是蓝湖的HTML导出文件，帮我映射成我们项目的设计token，并转换成对应的Vue页面

Informe completo →