frontend-design-system

Use this Skill to apply a design system to Tailwind CSS components, enforcing specific visual tokens and themes to ensure your UI avoids generic styling and maintains a consistent, on-brand look across generated or restyled elements.

You can restyle UI components to match existing branding by applying the Luminaris Galaxy theme tokens, dark charcoal surfaces, and signature components like GradientHeader and ScoreGauge to maintain a visually consistent product identity.

Yes, TypeScript support is required within the Luminaris monorepo to properly integrate the design system and generate on-brand frontend components using Tailwind CSS.

The best way to generate on-brand frontend UIs is to integrate this Skill with frontend generators, automatically applying specific design tokens and visual language to create visually consistent cards, headers, badges, and gauges.

Generated Tailwind components look generic when they lack a structured design system. This Skill solves the issue by overriding default styles with specific branding rules, dark surfaces, and custom component tokens.