dile-components
Helps developers use and configure the Dile Components library in any web project, including CRUD screens and UI widgets.
Install
mkdir -p .claude/skills/dile-components && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/19467" && unzip -o skill.zip -d .claude/skills/dile-components && rm skill.zipInstalls to .claude/skills/dile-components
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use when building or modifying UI with the Dile Components library (@dile/ui, @dile/crud, @dile/editor, @dile/utils, @dile/lib, @dile/iconlib, @dile/icons) — a framework-agnostic, Lit-based web component catalog. Trigger when installing/importing dile-* custom elements, using tags like <dile-input>, <dile-modal>, <dile-table>, building CRUD screens, adding a WYSIWYG/Markdown editor, using icon components, or theming with Dile's CSS custom properties.Key capabilities
- →Import framework-agnostic web components
- →Configure CRUD screens
- →Implement rich text editors
- →Apply CSS custom properties for theming
- →Use icon components
How it works
The skill provides a catalog of Lit-based web components that function as plain custom elements. Users install specific packages and import component files to use them directly in HTML.
Inputs & outputs
When to use dile-components
- →Adding UI components
- →Building CRUD screens
- →Implementing rich text editors
- →Theming web components
About this skill
Dile Components
Dile Components (@dile/*) is a catalog of framework-agnostic web components built with Lit. They work as plain custom elements in any project — vanilla JS, React, Vue, Angular, etc. — as long as the build tool resolves npm bare imports (Vite, Webpack, Rollup, web-dev-server...).
Package map
Pick only the package(s) that contain what you need — don't install all of them.
| Package | Use for |
|---|---|
@dile/ui | General UI components: inputs, modals, tables, buttons, etc. |
@dile/crud | Generic, configurable CRUD screens/components |
@dile/editor | WYSIWYG / Markdown rich text editor (ProseMirror-based) |
@dile/utils | General-purpose utility components |
@dile/lib | Mixins/helpers for building apps (state, routing, feedback) |
@dile/iconlib | Icon catalogs (Lucide, Font Awesome, Material...) as custom elements |
@dile/icons | Subset of Material Icons as Lit templates |
Quick start
- Install only the package(s) you need:
npm install @dile/ui - Import the specific component file (ESM, bare specifier):
import '@dile/ui/components/input/input.js'; - Use it as an HTML tag:
<dile-input name="name" label="Name" value="John"></dile-input> - Customize appearance through the component's CSS custom properties (see theming reference below) instead of reaching into its shadow DOM.
Always check the real API before using a component
Component names, props, events, and import paths differ per component and change between versions — don't guess them from memory. Look them up first:
- Index of all docs (llms.txt): https://dile-components.com/llms.txt — a machine-readable index linking to every component/mixin/CRUD/lib/icon doc page as plain markdown.
- Fetch a specific doc page directly once you know its section, e.g.:
https://dile-components.com/md/components/<component>.mdhttps://dile-components.com/md/crud/<page>.mdhttps://dile-components.com/md/lib/<page>.mdhttps://dile-components.com/md/icons/<page>.md
- Human docs site: https://dile-components.com/
- Theming / CSS custom properties: https://dile-components.com/theming/
- Live demo sources: https://github.com/Polydile/dile-components/tree/master/demos
Workflow: fetch llms.txt first to find the right doc link for the component/feature you need, then fetch that specific .md page for exact props, events, slots, and usage examples.
Notes
- All packages are MIT-licensed and published under the
@dilenpm scope. - Packages are versioned independently — check each package's
package.jsonfor the current version. - Repository: https://github.com/Polydile/dile-components
When not to use it
- →When the build tool does not resolve npm bare imports
Prerequisites
Limitations
- →Component names and props change between versions
- →Must not guess API from memory
How it compares
It provides a framework-agnostic approach that works across React, Vue, and vanilla JS, unlike library-specific UI kits.
Compared to similar skills
dile-components side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| dile-components (this skill) | 0 | 17d | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
| anthropic-frontend-design | 12 | 6mo | No flags | Intermediate |
| frontend-ui-engineering | 0 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
frontend-ui-engineering
charlieviettq
Build and refine web UI—component structure, responsive layout, design tokens, state, and accessibility. Use for feature UI work beyond WCAG checks alone.
webf-native-ui
openwebf
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
accessibility-compliance
wshobson
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.