Standardizes token-based styling for React-based frameworks and static sites with themed components.
npx skills add https://github.com/million-views/skills --skill elementary
Please help me install this Agent Skill. Skill: elementary Source: https://github.com/million-views/skills/tree/main/elementary Command: npx skills add https://github.com/million-views/skills --skill elementary
The Elementary design system standardizes design tokens and theme-driven values to ensure consistent UI across projects and teams.
Install the Elementary assets to your project and import the polished theme and components CSS to start theming.
High-intent search queries and answers about installing and using this skill.
Standardizing design tokens uses a three-layer system separating semantic tokens, theme implementations, and component classes to ensure consistent UI across projects. This approach enables theme switching while reusing the same underlying token structure.
Semantic design tokens are stable naming references that remain consistent across different themes. They work through layer separation: Layer 1 defines tokens, Layer 2 implements themes like light and dark, and Layer 3 applies tokens to component classes.
CSS variables for design tokens are fully supported in React-based frameworks and static sites. The system applies themeable CSS variables across both environments, allowing theme switching between polished and sketch themes.
Setting up a token-based design system involves installing the asset files and importing the polished theme CSS along with component styles. This enables immediate light and dark theme switching using the pre-built theme implementations.
The design token system explicitly supports switching between polished production UI and sketch themes. Both theme variants are built on the same semantic tokens, ensuring component classes adapt correctly across either visual style.
The best way to maintain consistent web design across UI themes is binding component classes to semantic tokens rather than hard-coded values. This ensures visual consistency automatically updates whenever themes change.
mapboxInitialize and manage Mapbox GL JS maps in React, Vue, Svelte, Angular, and Next.js.
deomiarnGenerate design tokens, CSS variables, and Tailwind extensions for web design systems.
bpteamDefine Tailwind v4 design tokens and CVA-driven component primitives.
JhabbigDesign scalable design system foundations with tokens, theming, and component architecture.
