SkillProof tested Claude skills

Code Format

Konverterar en Lanhu HTML-export till Vue eller React som återanvänder dina komponenter

av ursazoo · ursazoo/lanhu-to-code

Testad · Fungerar ★ 9.2/10

Code Format — Konverterar en Lanhu HTML-export till Vue eller React som återanvänder dina komponenter

Vad den gör

Omvandlar den råa HTML/CSS som en Lanhu-designexport producerar till en sida för din faktiska stack: den läser README, docs/components.md, docs/dev-spec.md och docs/tech-spec.md först, mappar designvärden till dina CSS-tokens, återanvänder dokumenterade komponenter istället för råa element, och markerar allt som specifikationerna inte definierar som TODO. Utlöses när du ber att konvertera en Lanhu-export till projektets frontend-kod.

Testrapport

Konverterade samma Lanhu-stil order-list export till en Vue-sida två gånger mot ett projekt med verkliga komponent-, token- och API-dokument. Utan skillen levererade sidan 9 hårdkodade hex-färger och 15 råa px-värden, uppfann endpointen /api/orders/list, skickade :type till en StatusTag vars prop faktiskt är :variant, hårdkodade tre Chinese status strings och renderade ett centbelopp med toFixed(2) — fem defekter, var och en en post i skillens egen failure-patterns.md. Att följa skillen producerade noll px-literalvärden, 22 design-token-referenser, den specificerade GET /v2/orders med dess keyword/status/page/pageSize-parametrar, den korrekta :variant-propen, ORDER_STATUS_MAP-uppslagningen och formatAmount, plus explicita varningar för de två färgerna som token-tabellen inte täcker. Skill-kroppen är Chinese-only och förväntar sig att exporten redan ligger på .claude/lanhu-output/<page>/index.html, normalt placerad där av den syskon-design-to-code-skillen via Lanhu MCP.

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

Installation

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

Kommandon och exempelprompter

  • /code-formatKonverterar en Lanhu HTML-export till Vue eller React som återanvänder dina komponenter

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →