Dile Components

Obtiene la documentación real de los componentes @dile/ui antes de escribir marcado dile-*

Por Polydile · Polydile/dile-components

Probado · Funciona ★ 9.2/10

Dile Components — Obtiene la documentación real de los componentes @dile/ui antes de escribir marcado dile-*

Qué hace

Ayuda para construir UI con las bibliotecas de Dile Components (@dile/ui, @dile/crud, @dile/editor, @dile/lib, @dile/iconlib), un catálogo de elementos personalizados basados en Lit y agnósticos al framework. Mapea cada paquete a lo que contiene y enruta al agente a través del índice llms.txt del proyecto al documento markdown exacto para un componente antes de escribir cualquier etiqueta, propiedad, evento o propiedad CSS personalizada. Se activa cuando instalas o importas elementos dile-*, construyes pantallas CRUD, añades el editor ProseMirror o aplicas temas a los componentes Dile.

Informe de la prueba

Pedí un diálogo de confirmación Dile con tema dos veces y verifiqué ambas respuestas línea por línea contra el código fuente de @dile/ui 2.28.0. Siguiendo la skill (índice llms.txt, luego el documento del componente) produjo diez hechos de API que coincidían con el código enviado; el intento sin skill acertó cuatro de nueve, inventando una propiedad `open` (es `opened`), slots de encabezado/pie de página que dile-modal no tiene, un atributo `primary` que dile-button no define, y un evento `modal-closed` que en realidad se llama `dile-modal-closed`. Tampoco encontró `dile-confirm` y creó manualmente el diálogo que la biblioteca ya incluye. Un detalle: la plantilla de URL en el cuerpo necesita un prefijo `dile-`, por lo que /md/components/input.md devuelve 404 mientras que dile-input.md devuelve 200 — leer llms.txt primero, como indica la skill, lo evita.

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

Instalación

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

Comandos y prompts de ejemplo

  • /dile-componentsObtiene la documentación real de los componentes @dile/ui antes de escribir marcado dile-*

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • 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