Define and enforce a grayscale design system for Flux UI components.
npx skills add https://github.com/lyzno1/flux --skill flux-design-system
Please help me install this Agent Skill. Skill: flux-design-system Source: https://github.com/lyzno1/flux/tree/main/.agents/skills/flux-design-system Command: npx skills add https://github.com/lyzno1/flux --skill flux-design-system
Flux UI components lack a unified design language, causing visual inconsistency and slower collaboration. This design system defines grayscale tokens, elevation, spacing, and shape semantics to ensure cohesive, accessible interfaces across the Flux web app.
Review a UI component and map its colors, radii, and elevations to Flux tokens, then update the component to align with the design system. For example, replace hard-coded colors with the corresponding tokens and apply rounded-xl or rounded-full where appropriate.
High-intent search queries and answers about installing and using this skill.
Grayscale UI tokens use the oklch color space to define backgrounds, surfaces, borders, and text. This token-based approach maintains visual harmony across components while supporting WCAG-compliant contrast and auto-switching between light and dark modes.
To apply design tokens, review a UI component and map its hardcoded colors, radii, and elevations to the corresponding Flux tokens. Update the component styling to use these tokens, applying shapes like rounded-xl or rounded-full where appropriate for consistency.
Yes, you can auto-switch between light and dark modes by using token-based colors instead of hardcoded values. The system applies oklch grayscale tokens for surfaces and text, ensuring accessibility and WCAG-compliant contrast across themes automatically.
The Flux design system supports accessibility by using oklch grayscale tokens that ensure WCAG-compliant contrast. It enforces auto-switching between light and dark modes without hardcoded colors, maintaining accessible interfaces across all core components.
A grayscale design system focuses solely on neutral color palettes, limiting vibrant or brand-specific color expressions. It governs radii, elevation, and spacing for consistency, but multi-hue branding requires extending the token framework beyond its core scope.
resendConsolidate UI development with design tokens and component primitives.
Community-AccessAudit color contrast and visual accessibility for WCAG AA compliance.
imehrCreate OKLCH design systems with Tailwind v4 tokens and Shadcn components.
DevXojeGenerate color, typography, spacing, and breakpoint tokens from brand inputs.
