Design CSS theme systems with design tokens, color palettes, and typography scales.
npx skills add https://github.com/mahg-es/araya --skill theme-design-mahg-es
Please help me install this Agent Skill. Skill: theme-design Source: https://github.com/mahg-es/araya/tree/main/skills/theme-design Command: npx skills add https://github.com/mahg-es/araya --skill theme-design-mahg-es
Hardcoded colors and inconsistent spacing create visual chaos across pages. Theme design codifies the visual language into design tokens — change one token, and every component updates consistently. Themes make visual design systematical, not accidental.
Extract tokens from brand guidelines and implement them as CSS custom properties on the root selector :root to build a theme with dark mode and component variants.
High-intent search queries and answers about installing and using this skill.
Create scalable CSS design tokens by defining custom properties on the :root selector for colors, typography, spacing, and radii, then override them using data-theme attributes or prefers-color-scheme media queries for dark mode support.
The best way to structure CSS custom properties for a design system is grouping them by category on :root, including semantic colors, typographic scales, 4px-based spacing, radii, and shadow elevations to ensure consistent visual language across components.
Build component variants by mapping semantic design tokens like primary, secondary, danger, and ghost to component styles, allowing every variant to update consistently across the application when a root token changes.
Theming with CSS custom properties supports accessibility by allowing you to test and define contrast ratios, focus indicators, and reduced motion preferences within the token system to meet compliance standards.
Use design tokens instead of hardcoded CSS values to eliminate visual chaos across pages, ensuring that changing a single token updates every component consistently and makes visual design systematic rather than accidental.
eyadsibaiDefine brand identity with logo, color, typography, and voice guidelines.
gagan114662Guide Figma design systems with auto-layout, variants, and design tokens.
nazlicancaglarTranslate brand visual identity into tokenized CSS custom properties and design tokens.
marcioaltoeDesign and implement accessible React UI components with shadcn/ui and Tailwind CSS.
