Design System & UI
CommunityBuild a cohesive UI with Tailwind.
Design & Creative#typography#tailwind#design-system#ui-components#framer-motion#color-palette#glass-card
Authortachfineamnay
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Design System & UI Download link: https://github.com/tachfineamnay/LumiraV2/archive/main.zip#design-system-ui Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.