Guide frontend development with DUI components and design tokens.
npx skills add https://github.com/deepfuturenow/dui --skill dui
Please help me install this Agent Skill. Skill: dui Source: https://github.com/deepfuturenow/dui/tree/main/skills/dui Command: npx skills add https://github.com/deepfuturenow/dui --skill dui
DUI provides a cohesive, design-token driven UI framework built on Lit web components, enabling teams to rapidly assemble accessible, consistent interfaces with less boilerplate.
Install DUI in your project and start importing the needed components, e.g. import "@deepfuture/dui-components/button" to begin using dui-button.
High-intent search queries and answers about installing and using this skill.
Build web component interfaces using design tokens by importing Lit-based components and applying CSS custom properties for theming. This enforces best practices like ::part root and token-driven theming to assemble consistent UIs with less boilerplate.
A design token driven UI framework uses predefined CSS custom properties to standardize theming across components. You need one when assembling accessible, consistent interfaces at scale, reducing boilerplate while maintaining cohesive visual systems.
Apply dark mode theming with an OKLCH color system by utilizing a 4-primitives color framework and design tokens. This scalable theming approach allows seamless switching between light and dark modes across all component families.
Use runtime inspection to prototype and export UI component changes when the inspector package is available. It enables mutation workflows that allow you to inspect components at runtime and export modifications directly to your project.
This Lit web component framework supports composing complex data tables and dashboards through a catalog of 57 component families. You can assemble real-world blocks like cards, charts, maps, and data tables using a standardized component set.
Limitations of using CSS custom properties for token-driven theming include dependency on browser support for CSS shadow parts and the need for strict adherence to ::part root conventions to maintain consistent styling across component boundaries.
deepfuturenowPort Base UI React components to Lit-based DUI primitives while preserving accessibility.
effiemincerPrototype ambitious frontend interfaces with browser automation and progressive enhancement.
jonnymuirAnalyze CSS custom property implementations for naming conventions and cascade layer declarations.
OpenDCAIStandardize React component development with design tokens and TypeScript.
