Dile Components

Ruft die echten @dile/ui-Komponenten-Dokumente ab, bevor Sie dile-*-Markup schreiben

von Polydile · Polydile/dile-components

Getestet · Funktioniert ★ 9.2/10

Dile Components — Ruft die echten @dile/ui-Komponenten-Dokumente ab, bevor Sie dile-*-Markup schreiben

Was es kann

Helfer zum Erstellen von UI mit den Dile Components-Bibliotheken (@dile/ui, @dile/crud, @dile/editor, @dile/lib, @dile/iconlib), einem Lit-basierten Katalog framework-agnostischer Custom Elements. Es ordnet jedes Paket seinem Inhalt zu und leitet den Agenten über den llms.txt-Index des Projekts zum exakten Markdown-Dokument für eine Komponente, bevor ein Tag, eine Eigenschaft, ein Ereignis oder eine CSS-Custom-Property geschrieben wird. Wird ausgelöst, wenn Sie dile-*-Elemente installieren oder importieren, CRUD-Bildschirme erstellen, den ProseMirror-Editor hinzufügen oder Dile-Komponenten thematisieren.

Testbericht

Fragte zweimal nach einem thematisierten Dile-Bestätigungsdialog und überprüfte beide Antworten Zeile für Zeile mit dem @dile/ui 2.28.0-Quellcode. Nach dem Skill (llms.txt-Index, dann das Komponenten-Dokument) wurden zehn API-Fakten produziert, die alle mit dem gelieferten Code übereinstimmten; der Versuch ohne Skill hatte vier von neun richtig, erfand eine `open`-Eigenschaft (es ist `opened`), Header/Footer-Slots, die dile-modal nicht hat, ein `primary`-Attribut, das dile-button nicht definiert, und ein `modal-closed`-Ereignis, das tatsächlich `dile-modal-closed` heißt. Es fand auch nie `dile-confirm` und rollte den Dialog, den die Bibliothek bereits liefert, von Hand. Eine Schwachstelle: Die URL-Vorlage im Text benötigt ein `dile-`-Präfix, sodass /md/components/input.md 404 zurückgibt, während dile-input.md 200 zurückgibt – das Lesen von llms.txt zuerst, wie vom Skill angewiesen, vermeidet dies.

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

Installation

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

Befehle & Beispiel-Prompts

  • /dile-componentsRuft die echten @dile/ui-Komponenten-Dokumente ab, bevor Sie dile-*-Markup schreiben

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • 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