Dile Components

Pobiera rzeczywistą dokumentację komponentów @dile/ui, zanim napiszesz znaczniki dile-*.

Autor: Polydile · Polydile/dile-components

Testowano · Działa ★ 9.2/10

Dile Components — Pobiera rzeczywistą dokumentację komponentów @dile/ui, zanim napiszesz znaczniki dile-*.

Co robi ten skill

Pomocnik do budowania interfejsu użytkownika z bibliotekami Dile Components (@dile/ui, @dile/crud, @dile/editor, @dile/lib, @dile/iconlib), katalogiem niestandardowych elementów opartych na Lit, niezależnych od frameworka. Mapuje każdy pakiet do tego, co zawiera, i kieruje agenta przez indeks llms.txt projektu do dokładnego dokumentu markdown dla komponentu, zanim napisze jakikolwiek tag, właściwość, zdarzenie lub niestandardową właściwość CSS. Uruchamia się, gdy instalujesz lub importujesz elementy dile-*, budujesz ekrany CRUD, dodajesz edytor ProseMirror lub stylizujesz komponenty Dile.

Raport z testu

Poproszono o tematyczne okno dialogowe potwierdzenia Dile dwukrotnie i sprawdzono obie odpowiedzi linia po linii względem źródła @dile/ui 2.28.0. Postępując zgodnie z umiejętnością (indeks llms.txt, a następnie dokument komponentu) uzyskano dziesięć faktów API, które wszystkie pasowały do dostarczonego kodu; próba bez umiejętności uzyskała cztery z dziewięciu poprawnych, wymyślając właściwość `open` (jest to `opened`), sloty nagłówka/stopki, których dile-modal nie ma, atrybut `primary`, którego dile-button nie definiuje, i zdarzenie `modal-closed` faktycznie nazwane `dile-modal-closed`. Nigdy też nie znalazło `dile-confirm` i ręcznie stworzyło dialog, który biblioteka już dostarcza. Jedna niedoskonałość: szablon URL w treści potrzebuje prefiksu `dile-`, więc /md/components/input.md zwraca 404, podczas gdy dile-input.md zwraca 200 – czytanie llms.txt najpierw, zgodnie z instrukcjami umiejętności, tego unika.

Testowano: 2026-07-28 · Claude Code 2.x (agent harness)

Instalacja

git clone https://github.com/Polydile/dile-components.git
mkdir -p ~/.claude/skills
cd dile-components && cp -r skills/dile-components ~/.claude/skills/dile-components

Komendy i przykładowe prompty

/dile-componentsPobiera rzeczywistą dokumentację komponentów @dile/ui, zanim napiszesz znaczniki dile-*.

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

Add a themed dile-input email field with validation to my login form
How do I theme @dile/ui buttons using CSS custom properties?
Build a CRUD screen for our admin panel using the @dile/crud package

Pełny raport →