Html Diagram
Mění „nakresli mou architekturu“ na celoobrazovkový, pan/zoom, dark-mode SVG HTML soubor
Otestováno · Funguje
Co umí
Soběstačná dovednost s výzvou, která vytváří celoobrazovkový HTML diagram architektury: SVG-first, minimální próza, ručně psaný dark mode a pan/zoom ukotvený na kurzoru. Spouští se, když uživatel explicitně požádá o celoobrazovkový systémový/architektonický/stack diagram jako samostatný HTML artefakt (je to pouze opt-in — disable-model-invocation je nastaveno, takže se nespustí automaticky).
Testovací report
Načten strom přes gh (omezeno rychlostí na anonymní curl): monorepo 3 dovedností; vybrán skills/html-diagram/SKILL.md podle slugu. Frontmatter parsuje s name+description a disable-model-invocation:true (openai.yaml také nastavuje allow_implicit_invocation:false — je to pouze explicitní vyvolání, skutečné tření při objevování). Obě odkazované cesty existují (references/html-effectiveness/ s 20 příklady HTML + indexem a references/architecture-example.html, skutečný 462řádkový soubor s CSS-var dark mode + localStorage apply-before-paint + 38 zásahů flow-animation). Žádná exfiltrace/base64/secrets v SKILL.md nebo příkladu. Měřen výstup: základní stav byly div boxy + 2 odstavce prózy, žádné SVG/téma/interaktivita; výsledek dovednosti byl celoobrazovkový SVG stage, 0 prózy, přepínač dark-mode, zoom kolečkem ukotvený na kurzoru, pan 1:1 v SVG prostoru, potlačení drag-click ve fázi zachycení a odvolatelný panel uzlů s tlačítkem zavření — každý rozdíl od direktiv dovednosti (jasné vítězství). Chyba v dokumentaci: SKILL.md silně nařizuje pan/zoom, ale jeho vlastní „dobře provedený“ příklad neobsahuje žádné handlery pan/zoom (0 wheel/mousedown), takže vlajková loď reference nedemonstruje jeden z nejsilnějších požadavků dovednosti. Fráze spouštění — MĚLO BY: „vytvoř celoobrazovkový HTML diagram mé mikroservisní architektury“, „interaktivní SVG diagram, jak do sebe zapadá můj auth stack“, „soběstačný HTML artefakt vizualizující mou systémovou architekturu, minimální text“; NEMĚLO BY: „napiš prozaický dokument vysvětlující má architektonická rozhodnutí“, „vytvoř mi komponentu React dashboardu“ — 5/5 správně.
Testováno: 2026-07-20 · Claude Code 2.x (agent harness)
Instalace
npx skills add plannotator/effective-html --skill html-diagram (or: /plugin marketplace add plannotator/effective-html then /plugin install plannotator-effective-html@effective-html)
Příkazy a ukázkové prompty
/html-diagramMění „nakresli mou architekturu“ na celoobrazovkový, pan/zoom, dark-mode SVG HTML soubor
Skilly se spouštějí běžnými požadavky — žádné příkazy k zapamatování. Po instalaci ho aktivují prompty jako tyto (anglicky):
Make a full-screen diagram of our architectureCreate an HTML artifact showing the stack visuallyBuild a diagram-first page explaining this system