skills.rest
tachfineamnay
tachfineamnayCOMMUNITY
Explore all skills by this author →
GitHub

Design System & UI

Implements Tailwind-based design system with GlassCard, Button, and LevelBadge components for React.

Updated Dec 23, 2025
Search Tags:#typography#tailwind#design-system#ui-components#framer-motion#color-palette#glass-card
One-click install
npx skills add https://github.com/tachfineamnay/LumiraV2 --skill design-system-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Design System & UI
Source: https://github.com/tachfineamnay/LumiraV2/tree/main/skills/05-design-system
Command: npx skills add https://github.com/tachfineamnay/LumiraV2 --skill design-system-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Design System & UI skill provides a cohesive, reusable UI framework based on Tailwind CSS, glass card patterns, animation presets, and standardized typography to ensure visual consistency across Lumira V2 apps.

Core Features & Use Cases

  • Tailwind-based color tokens (abyss, serenity, horizon, stellar) and a unified color system for backgrounds, surfaces, and accents.
  • Glass Card patterns and GlassCard component for consistent modals and cards.
  • Button variants and the cn() utility integration for accessible, responsive components.
  • Animation patterns using Framer Motion (Fade In, Stagger, Glow) to enhance UX.
  • Level Badges, Typography utilities, and responsive breakpoints to accelerate UI development.
  • Best practices and conventions to maintain design system coherence across the monorepo.

Quick Start

Initialize the UI system by importing GlassCard, Button, and LevelBadge components, apply the Tailwind color tokens, and adopt the cn() helper and typography utilities in new components.

Frequently Asked Questions about Design System & UI

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

FAQPage Schema
How do I build a cohesive UI design system with Tailwind CSS and Framer Motion?▼

To build a cohesive UI design system with Tailwind CSS, apply standardized color tokens, GlassCard patterns, Framer Motion animation presets, and a cn() utility to ensure visual consistency across Next.js React components.

What is the best way to standardize typography and color palettes across a Next.js monorepo?▼

Standardizing typography and color palettes across a Next.js monorepo requires applying Tailwind CSS color tokens like abyss and horizon, alongside responsive breakpoints and typography utilities to maintain design system coherence.

Does this Tailwind UI design system support glass card patterns and animation presets?▼

Yes, this Tailwind UI design system supports glass card patterns through a dedicated GlassCard component, and includes Framer Motion animation presets like Fade In, Stagger, and Glow to enhance user experience.

Can I use Lucide React icons and a cn() utility within my React component library?▼

Yes, you can use Lucide React icons and a central cn() utility within your React component library. The system integrates these dependencies alongside button variants to deliver accessible, responsive UI components.

How do I implement responsive breakpoints and level badges for UI components in Tailwind v3.4?▼

Implement responsive breakpoints and Level Badges for UI components in Tailwind v3.4 by adopting provided design system conventions, importing the requisite component patterns, and applying the standardized typography utilities.

Related Skills

Explore More Design & Creative Skills→
adelproadelpro
34

tailwind-patterns

Implement CSS-first Tailwind v4 patterns with design tokens and container queries.

Community
Intermediate
fusenginefusengine
22

motion-system

Establish a motion design system with Framer Motion v11 animations and reduced-motion support.

Community
Advanced
Hamza123545Hamza123545

framer-motion

Implement animations in React applications using motion components, variants, and gestures.

Community
Intermediate
alissimorealissimore

ui-styling

Apply Nexus design system and Tailwind CSS tokens to UI components.

Community
Basic