frontend-design-system

Name: frontend-design-system
Availability: InStock
Author: web3br1

Apply Luminaris design system tokens to Tailwind CSS and TypeScript components.

Updated Jun 18, 2026

Search Tags:#branding #design system #tailwind css #frontend development #ui design

Ready to run

npx skills add https://github.com/web3br1/luminaristest --skill frontend-design-system-web3br1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-design-system
Source: https://github.com/web3br1/luminaristest/tree/main/.claude/skills/frontend-design-system
Command: npx skills add https://github.com/web3br1/luminaristest --skill frontend-design-system-web3br1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures that UIs and components generated or restyled adhere to the Luminaris design system, avoiding generic Tailwind styles.

Core Features & Use Cases

On-Brand Styling: Applies the Galaxy theme tokens, dark charcoal surfaces, and signature components like GradientHeader and ScoreGauge.
Component Generation: Integrates with frontend generators to create UIs that are visually consistent with the Luminaris product.
Use Case: When creating or restyling UI components like cards, headers, badges, KPI tiles, and gauges, use this Skill to maintain a consistent on-brand look.

Quick Start

Use the frontend-design-system skill to style the 'LeadScoreCard' component to be on-brand with the Luminaris Galaxy theme.

Frequently Asked Questions about frontend-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I apply a design system to Tailwind CSS components?▼

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.

How do I restyle UI components to match an existing branding theme?▼

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.

Do I need TypeScript to use a design system Skill in a monorepo?▼

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

What is the best way to generate on-brand frontend UIs?▼

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.

Why do my generated Tailwind components look generic?▼

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.