SkillProof tested Claude skills

Code Format

Převádí Lanhu HTML export do Vue nebo React, který znovu používá vaše komponenty

od ursazoo · ursazoo/lanhu-to-code

Otestováno · Funguje ★ 9.2/10

Code Format — Převádí Lanhu HTML export do Vue nebo React, který znovu používá vaše komponenty

Co umí

Převádí surový HTML/CSS, který produkuje Lanhu design export, na stránku pro váš skutečný stack: nejprve čte README, docs/components.md, docs/dev-spec.md a docs/tech-spec.md, mapuje designové hodnoty na vaše CSS tokeny, znovu používá dokumentované komponenty namísto surových elementů a cokoli, co specifikace nedefinují, označuje jako TODO. Spouští se, když požádáte o převod Lanhu exportu na projektový frontend kód. Tělo skillu je Chinese-only a očekává, že export již bude umístěn na .claude/lanhu-output/<page>/index.html, normálně tam umístěný sibling design-to-code skill via the Lanhu MCP.

Testovací report

Převedl jsem stejný Lanhu-styl export seznamu objednávek na Vue stránku dvakrát proti projektu se skutečnými komponentami, tokeny a API dokumentací. Bez skillu stránka dodala 9 hardcoded hex colors and 15 raw px values, invented the endpoint /api/orders/list, passed :type to a StatusTag whose prop is actually :variant, hardcoded three Chinese status strings and rendered a cents amount with toFixed(2) — five defects, each one an entry in the skill's own failure-patterns.md. Po použití skillu se vyprodukovalo zero px literals, 22 design-token references, the spec'd GET /v2/orders with its keyword/status/page/pageSize params, the correct :variant prop, the ORDER_STATUS_MAP lookup and formatAmount, plus explicit warnings for the two colors the token table does not cover. Tělo skillu je Chinese-only a očekává, že export již bude umístěn na .claude/lanhu-output/<page>/index.html, normálně tam umístěný sibling design-to-code skill via the Lanhu MCP.

Testováno: 2026-08-07 · Claude Code 2.x (agent harness)

Instalace

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

Příkazy a ukázkové prompty

  • /code-formatPřevádí Lanhu HTML export do Vue nebo React, který znovu používá vaše komponenty

Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):

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

Kompletní testovací report (anglicky) →