SkillProof tested Claude skills

Code Format

Konverterer en Lanhu HTML-eksport til Vue eller React som gjenbruker dine komponenter

av ursazoo · ursazoo/lanhu-to-code

Bestått ★ 9.2/10

Code Format — Konverterer en Lanhu HTML-eksport til Vue eller React som gjenbruker dine komponenter

Hva den gjør

Gjør den rå HTML/CSS en Lanhu designeksport produserer om til en side for din faktiske stack: den leser README, docs/components.md, docs/dev-spec.md og docs/tech-spec.md først, mapper designverdier til dine CSS-tokens, gjenbruker dokumenterte komponenter i stedet for rå elementer, og markerer alt spesifikasjonene ikke definerer som TODO. Utløses når du ber om å konvertere en Lanhu-eksport til prosjektets frontend-kode.

Testrapport

Konverterte den samme Lanhu-stilte ordrelise-eksporten til en Vue-side to ganger mot et prosjekt med ekte komponent-, token- og API-dokumentasjon. Uten ferdigheten leverte siden 9 hardkodede heksadesimale farger og 15 rå px-verdier, fant opp endepunktet /api/orders/list, sendte :type til en StatusTag hvis prop faktisk er :variant, hardkodet tre kinesiske statusstrenger og gjengitt et cent-beløp med toFixed(2) — fem defekter, hver en oppføring i ferdighetens egen failure-patterns.md. Ved å følge ferdigheten produserte den null px-literaler, 22 design-token-referanser, den spesifiserte GET /v2/orders med sine keyword/status/page/pageSize-parametre, den korrekte :variant-prop, ORDER_STATUS_MAP-oppslaget og formatAmount, pluss eksplisitte advarsler for de to fargene token-tabellen ikke dekker. Ferdighetens kropp er kun kinesisk og forventer at eksporten allerede ligger på .claude/lanhu-output/<page>/index.html, normalt plassert der av den beslektede design-to-code-ferdigheten via Lanhu MCP.

Testet på: 2026-08-07 · Claude Code 2.x (agent harness)

Installer

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

Kommandoer og eksempelprompter

  • /code-formatKonverterer en Lanhu HTML-eksport til Vue eller React som gjenbruker dine komponenter

Skills utløses av vanlige forespørsler — ingen kommandoer å huske. Etter installasjonen aktiverer prompter som disse skillen (på engelsk):

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

Full rapport →