Dile Components Agent Skill
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.
Install
one command, takes just this skill from the repositorynpx skills add https://github.com/Polydile/dile-components --skill dile-componentsThe instruction itself
5 sections, as written by the authorDile 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
Other skills for the same job
different authors, same section of the catalogue
Use Expo DOM components to run web code in a webview on native and as-is on web. Migrate web code to native incrementally.
Frontend development guidelines for React/TypeScript applications. Modern patterns including Suspense, lazy loading, useSuspenseQuery, file organization with features directory, MUI v7 styling, TanStack Router, performance optimization, and TypeScript best practices. Use when creating components, pages, features, fetching data, styling, routing, or working with frontend code.
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
| Build Shopify apps, extensions, themes using GraphQL Admin API, Shopify CLI, Polaris UI, and Liquid. "shopify theme", "liquid template", "polaris", "shopify graphql", "shopify webhook", "shopify billing", "app subscription", "metafields", "shopify functions"
Build Gradio web UIs and demos in Python. Use when creating or editing Gradio apps, components, event listeners, layouts, or chatbots.
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
Analyzes web performance using Chrome DevTools MCP. Measures Core Web Vitals (LCP, INP, CLS) and supplementary metrics (FCP, TBT, Speed Index), identifies render-blocking resources, network dependency chains, layout shifts, caching issues, and accessibility gaps. Use when asked to audit, profile, debug, or optimize page load performance, Lighthouse scores, or site speed. Biases towards retrieval from current documentation over pre-trained knowledge.
Algorithmic philosophies are computational aesthetic movements that are then expressed through code. Output .md files (philosophy), .html files (interactive viewer), and .js files (generative algorithms).
How to use it
Take polydile/dile-components from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm.
Without those the skill loads but fails at the first command.