From design-system-aurora-plugin
Glass Aurora design system—ethereal glassmorphism, aurora gradients, neon glows, purple-cyan color scheme. Use when creating or modifying UI components to ensure consistency with the design language (glassmorphic cards, gradient text, neon buttons, animations). For design decisions on colors, typography, spacing, or component styling.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-system-aurora-plugin:design-system-auroraThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are a specialized design assistant applying the **Glass Aurora** aesthetic to the current project. This skill provides comprehensive guidance for maintaining design consistency across all UI changes, new components, and visual refinements.
You are a specialized design assistant applying the Glass Aurora aesthetic to the current project. This skill provides comprehensive guidance for maintaining design consistency across all UI changes, new components, and visual refinements.
The Glass Aurora design language combines three key elements:
The result is a modern, ethereal aesthetic that feels premium and interactive.
Comprehensive reference documentation is available:
Load these references when you need specific implementation details or token values.
Every component should incorporate the fundamental glassmorphism pattern:
className="
bg-white/10 backdrop-blur-xl
border border-white/20
hover:border-purple-400/40
hover:shadow-purple-500/20
transition-all duration-300
rounded-xl
"
Essential Elements:
bg-white/10 (10% opacity white for frosted glass)backdrop-blur-xl (24px blur for strong frosted effect)border border-white/20 (subtle translucent edge definition)hover:border-purple-400/40 (purple accent on hover)hover:shadow-purple-500/20 (neon glow shadow)transition-all duration-300 (300ms transitions)rounded-xl (12px border radius, default for cards)Use for animated backgrounds or emphasis sections:
animate-aurora-shift // 6-second cycling gradient animation
The animation cycles through three color stops:
rgba(124, 58, 255, ...))rgba(59, 130, 246, ...))rgba(16, 185, 129, ...))Create containers with: bg-gradient-to-br from-purple-500/10 to-cyan-500/10 animate-aurora-shift
Headlines and key text use gradient:
className="
bg-gradient-to-r from-purple-400 to-cyan-400
bg-clip-text text-transparent
"
Color variations:
from-purple-400 to-cyan-400from-purple-500 to-pink-400from-blue-400 to-emerald-400Primary action buttons combine gradients with glow effects:
className="
bg-gradient-to-r from-purple-500 to-cyan-500
hover:from-purple-400 hover:to-cyan-400
hover:shadow-purple-500/30
hover:scale-[1.02]
transition-all
shadow-[inset_0_1px_0_0_rgba(255,255,255,0.2)]
"
Key interactions:
Primary Colors (dark mode):
#9D4EDD (270 80% 55%) - Main CTAs#06B6D4 (180 100% 50%) - Accents#10B981 (160 100% 50%) - Success/confirmAurora Animation Colors:
#7C3AFF (124, 58, 255)#3B82F6 (59, 130, 246)#10B981 (16, 185, 129)20-Color Palette (for activity images, visual distinction): See design-tokens.md for complete palette with hex codes.
Font Family:
Font Weights:
Font Sizes (Tailwind scale):
text-2xl (24px) to text-3xl (30px)text-base (16px) to text-lg (18px)text-sm (14px)All components must work seamlessly in both modes using dark: prefix:
className="
bg-white dark:bg-gray-800
text-gray-900 dark:text-cyan-300
border-gray-300 dark:border-purple-500/30
hover:bg-gray-50 dark:hover:bg-purple-900/30
"
Key Conversions:
text-gray-900 → Dark text: dark:text-cyan-300bg-white → Dark bg: dark:bg-gray-800border-gray-300 → Dark border: dark:border-purple-500/30hover:bg-gray-50 → Dark hover: dark:hover:bg-purple-900/30Available Custom Animations:
animate-aurora-shift - 6s aurora gradient cycleanimate-neon-glow-pulse - 3s glow pulse effectanimate-shimmer-glass - 3s shimmer effectanimate-flip - 600ms card flipanimate-fade-in-up - 300ms entrance animationanimate-floating-up - 3s particle float effectStandard Transitions:
transition-all duration-300hover:scale-[1.02], hover:shadow-xl, hover:border-purple-400/40active:scale-95 for pressed stateUse Tailwind's standard spacing scale (all increments of 4px):
Padding: p-4, p-6, px-3, py-2
Gap/Margin: gap-4, gap-6, mb-4, mt-8
Responsive: md:gap-6, lg:p-8
Grid Layouts:
grid-cols-1md:grid-cols-2lg:grid-cols-3When displaying the project logo with the app name (for auth pages, headers, etc.):
<div className="flex items-center gap-3">
<Image
src="/logo.png"
alt="App Logo"
width={100}
height={40}
priority
className="drop-shadow-lg"
/>
<h1 className="text-3xl font-bold bg-gradient-to-r from-purple-400 to-cyan-400 bg-clip-text text-transparent">
App Name
</h1>
</div>
Key Elements:
from-purple-400 to-cyan-400)items-center gap-3 for proper alignmenttext-3xl font-bold for standalone brandingdrop-shadow-lg to logo for depthVariations:
text-2xl app nametext-3xl app name (as shown above)text-4xl or text-5xl app nameDetermine what you're building:
IMPORTANT — Modal & overlay readability: Modals, dialogs, dropdown menus, and any floating overlay that contains text must use a solid, opaque background (
bg-white dark:bg-gray-900) with explicit high-contrast text color (text-gray-900 dark:text-gray-100). Never use semi-transparent or gradient backgrounds (e.g.from-white/95,bg-white/10) on these components — they cause grey-on-grey text that is unreadable. Glassmorphism is for cards and decorative containers only, not for content-bearing overlays.
Pick the appropriate pattern from above and apply the base classes.
Choose colors based on context:
Always include dark: variants for:
Add smooth transitions:
animate-fade-in-upanimate-pulsehover:shadow-purple-500/30 hover:shadow-cyan-400/20
Creates dual-color neon glow on interaction.
text-sm md:text-base lg:text-lg
Scales gracefully across breakpoints.
border-purple-400/40 ring-2 ring-purple-400
Use border color and ring for clear active indication.
bg-white/10 dark:bg-white/5 animate-pulse
Subtle placeholder with pulse animation.
space-y-4
Consistent vertical spacing between form elements.
For detailed information, consult:
If uncertain about:
The Glass Aurora aesthetic captures an ethereal, premium feel through:
All UI changes should maintain this vision while allowing for refinements and improvements.
npx claudepluginhub awojtas/aidans-agent-skills --plugin design-system-aurora-pluginImplements glassmorphism UI effects with backdrop blur, transparency, and subtle borders. Provides CSS and Tailwind patterns for dark and light themed glass cards.
Provides UI/UX design guidance for unique, accessible web interfaces covering colors, typography, layouts. Always asks before decisions; activates for building web components, pages, apps.
Generates distinctive, production-grade frontend code for web components, pages, and apps with bold, creative UX designs in styles like brutalist or retro-futuristic, avoiding generic AI aesthetics.