skills.rest
GeneralJerel
GeneralJerelCOMMUNITY
Explore all skills by this author →
GitHub

Aurora UI

Automate Aurora UI component creation with design tokens and glassmorphic surfaces.

Updated Mar 23, 2026
Search Tags:#accessibility#glassmorphism#design-system#ui-components#motion-design#aurora-ui#gradient-mesh
One-click install
npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill aurora-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Aurora UI
Source: https://github.com/GeneralJerel/awesome-style-refs/tree/main/skills/aurora-ui
Command: npx skills add https://github.com/GeneralJerel/awesome-style-refs --skill aurora-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing premium, immersive UI with gradient mesh, glass overlays, and motion requires specialized patterns; teams spend time prototyping from scratch.

Core Features & Use Cases

  • Gradient mesh backgrounds for hero sections and dashboards
  • Glassmorphism cards with backdrop blur and subtle glow
  • Animated motion patterns that respect reduced motion preferences
  • Use Case: Marketing sites, SaaS dashboards, and developer portals seeking a premium aesthetic

Quick Start

Create an Aurora UI hero with an animated gradient mesh background and glassy card overlays.

Frequently Asked Questions about Aurora UI

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

FAQPage Schema
How do I design glassmorphism cards with accessible contrast for SaaS dashboards?▼

Design glassmorphism cards using automated design tokens that ensure accessible contrast on glass surfaces. This provides reusable components with backdrop blur and subtle glow for SaaS dashboards without manual contrast tuning.

What is the best way to create animated gradient mesh backgrounds for marketing sites?▼

The best way to create animated gradient mesh backgrounds is using automated motion patterns that respect reduced motion preferences. This generates premium hero section visuals without prototyping from scratch.

Can I use these UI components for developer portals requiring premium aesthetics?▼

Yes, you can use these UI components for developer portals requiring premium aesthetics. The system applies animated gradients and glass overlays specifically targeting developer portals alongside SaaS marketing sites.

Does the motion design respect user preferences for reduced motion?▼

Yes, the motion design respects user preferences for reduced motion. Animated motion patterns automatically adjust based on user preferences, ensuring accessible gradient mesh animations across all UI components.

How do I build a responsive layout with glassmorphic surfaces and reusable design tokens?▼

Build responsive layouts with glassmorphic surfaces by applying reusable design tokens automated for consistent gradient mesh rendering. This eliminates specialized prototyping patterns required for premium immersive UI.

Related Skills

Explore More Design & Creative Skills→
MengToMengTo
4.5k

progressive-blur

Generates layered progressive blur overlays with backdrop-filter masks for web pages.

Community
Basic
Camilo8902Camilo8902

tailwind-gradient-builder

Generate linear, radial, conic, and mesh CSS gradients with Tailwind CSS.

Community
Intermediate
efekrbasefekrbas
41

gradient-design

Design gradient-heavy interfaces with animated backgrounds and gradient text.

Community
Intermediate
JaylaelikeJaylaelike

premium-ui-systems

Codify design tokens for spacing, radii, color, and typography into reusable UI guidelines.

Community
Advanced