Can it help audit existing CSS for design drift?

Yes, the skill can analyze your current style files to identify naming inconsistencies, redundant values, and accessibility gaps in your existing system.

Does it help with generating typography scales?

Absolutely. It can generate complete typography scales based on specific ratios like the Major Third, providing sizes in rem with corresponding line-heights.

What design token formats does this skill support?

It supports a wide range of formats including CSS Variables, JSON tokens, Tailwind CSS configurations, SCSS variables, and JavaScript-based tokens.

Can I use this skill to check for web accessibility?

Yes, it includes built-in commands to audit color contrast ratios and ensure your UI meets WCAG AA and AAA compliance standards.

Design System & Token Manager

Name: Design System & Token Manager
Author: johnlindquist

byjohnlindquist

•

디자인 도구

Manages comprehensive design systems and tokens to maintain visual consistency across frontend applications.

소개

This skill empowers developers to build and maintain robust design systems directly within their workflow. It provides automated tools for generating color palettes, calculating typography scales, and managing design tokens in multiple formats including CSS variables, JSON, and Tailwind CSS. By incorporating accessibility audits and semantic naming conventions, it ensures that your UI remains professional, consistent, and WCAG-compliant while simplifying the process of exporting tokens for various development environments like SCSS or JavaScript.

주요 기능

Automated color palette generation with WCAG contrast auditing
Multi-format token export for CSS, JSON, Tailwind, and SCSS
2 GitHub stars
Dynamic typography scale calculation based on modular ratios
Automated accessibility reviews to identify contrast issues and design drift
Component-specific token management for buttons and inputs

사용 사례

Converting raw design values into structured JSON tokens for cross-platform synchronization
Initializing a brand new design system for a SaaS application dashboard
Auditing an existing codebase for CSS variable consistency and accessibility compliance

소개

주요 기능

Automated color palette generation with WCAG contrast auditing
Multi-format token export for CSS, JSON, Tailwind, and SCSS
2 GitHub stars
Dynamic typography scale calculation based on modular ratios
Automated accessibility reviews to identify contrast issues and design drift
Component-specific token management for buttons and inputs

사용 사례

Converting raw design values into structured JSON tokens for cross-platform synchronization
Initializing a brand new design system for a SaaS application dashboard
Auditing an existing codebase for CSS variable consistency and accessibility compliance