Dile Components
Ruft die echten @dile/ui-Komponenten-Dokumente ab, bevor Sie dile-*-Markup schreiben
Getestet · Funktioniert
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 formHow do I theme @dile/ui buttons using CSS custom properties?Build a CRUD screen for our admin panel using the @dile/crud package