القائمة
Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/ranbot-ai/awesome-skills --skill aurora-uiيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
عرض SKILL.md
Generate project-specific AGENTS.md and companion rules by analyzing a codebase. Supports full, minimal, update, and dry-run modes with package-manager detection, monorepos, backups, managed blocks, c
Run protected AAS maintainer sweeps, PR merge batches, canonical sync, Core preview checks, and scripted releases. Use for repository maintenance, main alignment, CLI/MCP/Workbench changes, or release
Provision backend infra through Cohesivity (cohesivity.ai): Postgres, hosting, auth, storage, and AI model APIs over one HTTP API. Use when a .cohesivity file exists or a project needs a backend.
استنادا إلى تصنيف SOC المهني
| name | aurora-ui |
| description | Web and App implementation guide for Aurora UI. Trigger when user wants gradient glows, color blobs, and atmospheric lighting effects. |
| category | Creative & Media |
| source | antigravity |
| tags | ["react","api","ai","agent","llm","design","image"] |
| url | https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/design-it/aurora-ui |
"Ethereal, shifting lights. Like the Northern Lights trapped beneath a pane of frosted glass."
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.
divs behind the main content.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;
}
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
}
}
}
}
Circle().blur(radius: 80...120) in a ZStack underneath the main content..offset() with a very long duration (10-20 seconds)..background(.ultraThinMaterial) on foreground containers to let the colored light bleed through nicely.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