Generate math-driven design tokens for type, color, spacing, and dark mode.
npx skills add https://github.com/dylanfeltus/skills --skill design-tokens-dylanfeltus
Please help me install this Agent Skill. Skill: design-tokens Source: https://github.com/dylanfeltus/skills/tree/main/design-tokens Command: npx skills add https://github.com/dylanfeltus/skills --skill design-tokens-dylanfeltus
Token-based design systems often require manual token derivation which is error-prone and inconsistent. This skill generates systematic, math-driven tokens for typography, color, spacing, and dark mode, ensuring scalable, accessible themes across projects.
Set up tokens for a new design system by running a token generation pass using a brand color and base typography settings.
High-intent search queries and answers about installing and using this skill.
To generate design tokens with WCAG-compliant color contrasts, this skill applies mathematical rules to your brand color and base typography. It automatically validates derivations to ensure your color palette meets accessibility standards across light and dark themes.
The best way to create a mathematically derived type scale and spacing system is using deterministic rules. This skill generates comprehensive typographic and spacing tokens, ensuring consistent visual hierarchies and scalable layouts for dashboards or marketing sites.
Yes, you can use the generated design tokens with Tailwind config and CSS custom properties. The skill outputs CSS custom properties, Tailwind config files, and JSON tokens for rapid integration directly into your existing design system setup.
To derive a dark mode color palette from light theme tokens, the skill applies mathematical transformations to your base colors. It enforces WCAG-compliant contrasts and validates derivations to maintain systematic consistency across both themes.
Yes, this token generation approach works for both complex dashboards and marketing sites. The math-driven tokens ensure accessible contrast and consistent theming regardless of project scale, applying systematic typography, color, and spacing rules universally.
Young-ZGenerate X-IPE theme packages with tokens and visual previews from brand inputs.
rp4riExtracts design tokens from CSS, SCSS, JavaScript, and Tailwind config files into CSS custom properties, Tailwind config, and Style Dictionary JSON.
damacusApply UI design principles to Claude for clear, usable interfaces.
inbharataiGenerate complementary, analogous, and triadic color schemes with WCAG contrast checks and CSS variable exports.
