Agent skill

Aurora UI

by sickn33 in sickn33/agentic-awesome-skills

Web and App implementation guide for Aurora UI. An agent skill from sickn33/agentic-awesome-skills.

MITAuto-check passedMobile

Install Aurora UI

skills CLI
$ npx skills add sickn33/agentic-awesome-skills --skill aurora-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install sickn33/agentic-awesome-skills aurora-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/sickn33/agentic-awesome-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/design-it/aurora-ui .claude/skills/aurora-ui && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
aurora-ui
GitHub stars
47k
Used in
1 other repo
Token cost
~2.6k tokens
SKILL.md length
374 words
Files
1
Skills in repo
1,354
Repo updated
First seen
Licence
MIT

At a glance

Web and App implementation guide for Aurora UI. An agent skill from sickn33/agentic-awesome-skills.

  • Works in 3 steps: Blurred Color Orbs: Large, out-of-focus,… → Glassy Overlays: Foreground elements are… → Fluid Motion: The background color orbs…
  • User wants gradient glows
  • SKILL.md covers When to Use, Core Principles, Visual DNA and Web Implementation, plus 3 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Aurora UI is an agent skill from sickn33/agentic-awesome-skills. Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.

Its SKILL.md is about 2.6k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Mobile, covering Physical and earth sciences and Cross-platform mobile apps. The repository describes itself as: AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and planning, backed by 2,400+ agentic skills. Includes… The licence is MIT.

When your agent uses it

  • User wants gradient glows
  • Atmospheric lighting effects

Example prompts

  • “/aurora-ui”

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  1. Blurred Color Orbs: Large, out-of-focus, highly saturated color blobs floating in the background.
  2. Glassy Overlays: Foreground elements are often semi-transparent (glassmorphism) to let the aurora effect shine through.
  3. Fluid Motion: The background color orbs should slowly drift, expand, and contract.

What it can do on your machine

Read from SKILL.md and the folder at commit ec02547. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are css, swift, dart, javascript and kotlin).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Aurora UI loads about 2.6k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 374 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~2.6k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from sickn33/agentic-awesome-skills at commit ec02547, republished under its MIT licence (© sickn33). 374 words, ~2,619 tokens.

Download SKILL.mdSave it as .claude/skills/aurora-ui/SKILL.md (or your agent's skills folder).
name
aurora-ui
description
Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.
date_added
2026-06-17
risk
safe
source
self
source_type
self

Aurora UI

"Ethereal, shifting lights. Like the Northern Lights trapped beneath a pane of frosted glass."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

  1. Blurred Color Orbs: Large, out-of-focus, highly saturated color blobs floating in the background.
  2. Glassy Overlays: Foreground elements are often semi-transparent (glassmorphism) to let the aurora effect shine through.
  3. Fluid Motion: The background color orbs should slowly drift, expand, and contract.

Visual DNA

  • Colors: Requires dark, deep backgrounds with vibrant, luminous accents. Midnight Luxury or Yacht Club (modified to dark mode) work well, injecting bright cyan, magenta, or lime green as the glowing orbs.
  • Typography: Thin, elegant sans-serifs or sophisticated serif fonts. High contrast white text.
  • Layout: Keep foreground UI elements minimal to let the background remain the star.

Web Implementation

  • Best achieved with absolute-positioned, heavily blurred divs behind the main content.
  • CSS Example:
css
body {
  background-color: #0A0A0A;
  overflow-x: hidden;
  position: relative;
}

/* The Glowing Orb */
.aurora-blob {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(181,154,95,0.8) 0%, rgba(181,154,95,0) 70%);
  border-radius: 50%;
  filter: blur(80px);
  z-index: -1;
  animation: float 20s infinite ease-in-out alternate;
}

.aurora-blob.blue {
  background: radial-gradient(circle, rgba(92,107,115,0.8) 0%, rgba(0,0,0,0) 70%);
  top: 20%;
  left: 60%;
  animation-delay: -5s;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 100px) scale(1.2); }
  100% { transform: translate(100px, -50px) scale(0.9); }
}

/* Foreground content should be glassmorphic */
.aurora-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 24px;
}

App Implementation

SwiftUI
swift
struct AuroraView: View {
    @State private var animate = false
    
    var body: some View {
        ZStack {
            // Dark background
            Color.black.ignoresSafeArea()
            
            // Animated Orbs
            Circle()
                .fill(Color(red: 0.71, green: 0.60, blue: 0.37)) // #B59A5F
                .blur(radius: 80)
                .frame(width: 300, height: 300)
                .offset(x: animate ? -50 : 50, y: animate ? -100 : 0)
            
            Circle()
                .fill(Color(red: 0.36, green: 0.42, blue: 0.45)) // #5C6B73
                .blur(radius: 80)
                .frame(width: 300, height: 300)
                .offset(x: animate ? 100 : -50, y: animate ? 100 : -50)
            
            // Glassy Foreground content
            VStack {
                Text("Aurora Interface")
                    .font(.largeTitle.bold())
                    .foregroundColor(.white)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(.ultraThinMaterial)
        }
        .onAppear {
            withAnimation(.easeInOut(duration: 10).repeatForever(autoreverses: true)) {
                animate = true
            }
        }
    }
}
  • Use Circle().blur(radius: 80...120) in a ZStack underneath the main content.
  • Animate the .offset() with a very long duration (10-20 seconds).
  • Use .background(.ultraThinMaterial) on foreground containers to let the colored light bleed through nicely.
Flutter
dart
import 'dart:ui';

class AuroraView extends StatefulWidget {
  @override
  State<AuroraView> createState() => _AuroraViewState();
}

class _AuroraViewState extends State<AuroraView> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 10))..repeat(reverse: true);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: [
          // Animated orb
          AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return Positioned(
                top: 100 + (_controller.value * 100),
                left: -50 + (_controller.value * 100),
                child: Container(
                  width: 300,
                  height: 300,
                  decoration: const BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xFFB59A5F),
                  ),
                ),
              );
            },
          ),
          // Massive blur layer over the orbs
          Positioned.fill(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 80, sigmaY: 80),
              child: Container(color: Colors.transparent),
            ),
          ),
          // Glassy Foreground
          Center(
            child: ClipRRect(
              borderRadius: BorderRadius.circular(24),
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
                child: Container(
                  padding: const EdgeInsets.all(32),
                  color: Colors.white.withOpacity(0.05),
                  child: const Text('Aurora Interface',
                    style: TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
  • A massive full-screen BackdropFilter over moving solid circles is often more performant than blurring each circle individually.
  • Layer a second, weaker BackdropFilter for the actual foreground glassmorphism panels.
Show full SKILL.md (143 more words)Show less
React Native
jsx
// Requires @react-native-community/blur
import { BlurView } from '@react-native-community/blur';

const AuroraView = () => {
  const anim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.sequence([
        Animated.timing(anim, { toValue: 1, duration: 10000, useNativeDriver: true }),
        Animated.timing(anim, { toValue: 0, duration: 10000, useNativeDriver: true }),
      ])
    ).start();
  }, []);

  const translateY = anim.interpolate({ inputRange: [0, 1], outputRange: [0, 100] });

  return (
    <View style={{ flex: 1, backgroundColor: '#000' }}>
      {/* Orb — note: React Native struggles with massive live blurs, 
          so pre-rendered blurred PNGs are highly recommended for production */}
      <Animated.Image 
        source={require('./blurred_orb_cyan.png')} 
        style={{
          position: 'absolute',
          top: -50, left: -50,
          width: 400, height: 400,
          opacity: 0.8,
          transform: [{ translateY }]
        }}
      />

      {/* Glass Foreground */}
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <BlurView blurType="dark" blurAmount={20} style={{ padding: 32, borderRadius: 24 }}>
          <Text style={{ color: '#FFF', fontSize: 24, fontWeight: '700' }}>
            Aurora Interface
          </Text>
        </BlurView>
      </View>
    </View>
  );
};
  • Performance Warning: Do NOT use BlurView with huge amounts for moving background orbs on React Native — it will lag terribly, especially on Android.
  • Best Practice: Create large, already-blurred PNG images in Figma/Photoshop and animate those using Animated.Image.
Jetpack Compose
kotlin
@Composable
fun AuroraView() {
    val infiniteTransition = rememberInfiniteTransition()
    val offsetY by infiniteTransition.animateFloat(
        initialValue = -50f,
        targetValue = 100f,
        animationSpec = infiniteRepeatable(
            animation = tween(10000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )

    Box(modifier = Modifier
        .fillMaxSize()
        .background(Color.Black)) {
        
        // Blurred Orb
        Box(
            modifier = Modifier
                .offset(x = (-50).dp, y = offsetY.dp)
                .size(300.dp)
                .blur(80.dp) // API 31+ only!
                .background(Color(0xFFB59A5F), CircleShape)
        )
        
        // Pre-API 31 fallback: use a radial gradient instead of blur
        Box(
            modifier = Modifier
                .offset(x = 150.dp, y = (offsetY * -1).dp)
                .size(300.dp)
                .background(
                    Brush.radialGradient(
                        colors = listOf(Color(0xFF5C6B73).copy(alpha = 0.8f), Color.Transparent)
                    )
                )
        )

        // Glass panel
        Card(
            modifier = Modifier.align(Alignment.Center).padding(32.dp),
            colors = CardDefaults.cardColors(containerColor = Color.White.copy(alpha = 0.05f)),
            shape = RoundedCornerShape(24.dp),
        ) {
            Text("Aurora Interface",
                color = Color.White, fontSize = 24.sp, fontWeight = FontWeight.Bold,
                modifier = Modifier.padding(32.dp))
        }
    }
}
  • Modifier.blur() is only fully supported on Android 12 (API 31+).
  • Critical Fallback: For older devices, use Brush.radialGradient fading from color to Color.Transparent to fake the glowing orb effect without needing expensive blur calculations.

Do's and Don'ts

  • DO: Ensure the foreground text remains legible. If a bright orb floats behind white text, the text will vanish. Use glassy panels to guarantee contrast.
  • DON'T: Use sharp gradients. Everything in the background must be heavily blurred and diffuse.

Limitations

  • This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
  • Ensure appropriate contrast ratios and responsive behaviors are verified separately.

© sickn33, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/design-it/aurora-ui of sickn33/agentic-awesome-skills.

Open the folder on GitHubat commit ec02547

Used in 1 other repository

We found 5 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sickn33/agentic-awesome-skills, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Aurora UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Aurora UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Aurora UI this skillsickn33/agentic-awesome-skills47k1 repos~2.6kAutomated safety check: PassMIT
React Native Best Practicesvercel-labs/openreview1.7k17 repos~1.1kAutomated safety check: PassMIT
Compose Multiplatform Patternsmonta-app/ocpp-emulator1805 repos~2kAutomated safety check: PassApache-2.0
Creating Reanimated Animationsgluestack/gluestack-ui5.3k—~2.4kAutomated safety check: PassNone
Uni-app Components and APIsfeige996/unibest2.3k—~1.6kAutomated safety check: PassMIT
Add Flutter Docusaurus Localematthiasn/lotti1.2k—~1.2kAutomated safety check: PassGPL-3.0

Similar skills

  • React Native Best Practices

    vercel-labs/openreview

    Official

    A prioritized rule set for React Native and Expo apps covering list performance, animation, navigation, UI patterns, state, rendering, monorepos and configuration.

    1.7k GitHub starsUsed in 17 repos~1.1k tokens
    MobileAuto-check passed
  • Compose Multiplatform Patterns

    monta-app/ocpp-emulator

    Compose Multiplatform and Jetpack Compose patterns for KMP projects — state management, navigation, theming, performance, and platform-specific UI.

    180 GitHub starsUsed in 5 repos~2k tokens
    MobileAuto-check passed
  • Creating Reanimated Animations

    gluestack/gluestack-ui

    Generate React Native Reanimated animation code for React Native apps.

    5.3k GitHub stars~2.4k tokensUpdated 1 mo ago
    MobileAuto-check passed
  • Gives per-component and per-API examples, reference specs and compatibility notes for building cross-platform uni-app apps, mirroring the official documentation.

    2.3k GitHub stars~1.6k tokensUpdated 23 days ago
    MobileAuto-check passed
  • Add, complete, or audit a locale across a Flutter application's ARB catalogs and a localized Docusaurus manual, including generated localization code, locale selectors, native platform declarations…

    1.2k GitHub stars~1.2k tokensUpdated yesterday
    MobileAuto-check passed
  • Jetpack Compose Expert

    aldefy/compose-skill

    Guides Jetpack Compose and Compose Multiplatform work across Android, Desktop, iOS and web, plus Android TV, Material 3 motion, paging, navigation and design-to-code.

    596 GitHub stars~4.8k tokensUpdated 2 mo ago
    MobileAuto-check passed

More from sickn33/agentic-awesome-skills

All 1,354 skills in this repo
  • Liuguang Banlan UI

    sickn33/agentic-awesome-skills

    Implements an interface in one of two named color modes, iridescent white or colorful black, from a parameterized starter that reports measured color intensity.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • User Thoughts Memory

    sickn33/agentic-awesome-skills

    Saves a user's project decisions, rules and preferences into a project-local mdbase so later sessions and other agents can recover the intent.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • Using LWC Memory and Graphs

    sickn33/agentic-awesome-skills

    Keeps project decisions, research and verified results available across coding-agent sessions through LWC memory, a document Wiki graph and a CodeGraph code index.

    47k GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed
  • Find Complementary Founders

    sickn33/agentic-awesome-skills

    Guides an agent through assessing its own owner for cofounder fit, publishing an approved profile, and ranking complementary profiles other agents published for their owners.

    47k GitHub starsUsed in 1 repo~4.8k tokens
    Auto-check passed
  • Cline Pilot

    sickn33/agentic-awesome-skills

    Acts as a proxy for the Cline CLI, dispatching coding tasks one at a time, monitoring runs by hard evidence, relaying decisions to you and learning per-project preferences.

    47k GitHub starsUsed in 1 repo~4.6k tokens
    Auto-check passed
  • Content Creator

    sickn33/agentic-awesome-skills

    Drafts and reviews audience-specific content from supplied brand examples, with local scripts for brand voice and SEO diagnostics, channel templates and a content calendar.

    47k GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed

Categories

Questions about Aurora UI

What does Aurora UI do?

Web and App implementation guide for Aurora UI. An agent skill from sickn33/agentic-awesome-skills. Aurora UI is an agent skill from sickn33/agentic-awesome-skills. Web and App implementation guide for Aurora UI.

When should I use Aurora UI?

Aurora UI fits situations like: user wants gradient glows; atmospheric lighting effects.

How do I install Aurora UI in Claude Code?

Run `npx skills add sickn33/agentic-awesome-skills --skill aurora-ui -a claude-code`. Or copy the skill folder (skills/design-it/aurora-ui in sickn33/agentic-awesome-skills) into .claude/skills/aurora-ui in your project. Claude Code loads it when a task matches its description.

How do I install Aurora UI in Codex?

Run `npx skills add sickn33/agentic-awesome-skills --skill aurora-ui -a codex`. Or copy the skill folder (skills/design-it/aurora-ui in sickn33/agentic-awesome-skills) into .agents/skills/aurora-ui in your project. Codex loads it when a task matches its description.

Can I use Aurora UI in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sickn33/agentic-awesome-skills --skill aurora-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/aurora-ui, .gemini/skills/aurora-ui, .github/skills/aurora-ui and .opencode/skills/aurora-ui in your project.

What does Aurora UI need to run?

SKILL.md names no scripts, command-line tools or credentials: Aurora UI is instructions for the agent only.

Does Aurora UI access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Aurora UI safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Aurora UI use?

Aurora UI is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Aurora UI use?

About 2.6k tokens (SKILL.md is roughly 10k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Aurora UI?

Skills that share tags, products or a category with Aurora UI: React Native Best Practices (vercel-labs/openreview, 1.7k stars), Compose Multiplatform Patterns (monta-app/ocpp-emulator, 180 stars), Creating Reanimated Animations (gluestack/gluestack-ui, 5.3k stars) and Uni-app Components and APIs (feige996/unibest, 2.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Aurora UI?

sickn33 (a GitHub user) maintains it in sickn33/agentic-awesome-skills, which has 47,343 GitHub stars. The repository holds 1,354 skills in this directory. The repository was last updated on October 7, 2026.

Source: sickn33/agentic-awesome-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.