opencode-skills-collection 3.0.51 → 3.1.1

package/bundled-skills/design-it/aurora-ui/SKILL.md

@@ -0,0 +1,307 @@
+---
+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 `div`s 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.
+
+### 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.

package/bundled-skills/design-it/bento-ui/SKILL.md

@@ -0,0 +1,314 @@
+---
+name: bento-ui
+description: Web and App implementation guide for Bento UI. Trigger when user wants modular grid cards, Apple-like dashboard style, or sections arranged like a bento box.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Bento UI
+
+> "Everything in its right place. A highly structured, modular grid of distinct compartments."
+
+
+## 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. **Strict Grid Structure**: The entire UI is built on a responsive, multi-column grid (usually 3x3, 4x4, or irregular masonry).
+2. **Rounded Compartments**: Every distinct piece of content lives inside a card (compartment) with consistent, usually large, border-radius.
+3. **Equal Spacing**: The gap between compartments must be perfectly consistent everywhere.
+
+## Visual DNA
+- **Colors**: Highly adaptable, but looks incredibly premium with **Minimalist Slate** or **Yacht Club**. Often uses a slightly off-white or light gray background to make the white compartments pop.
+- **Typography**: Apple-esque (e.g., `SF Pro`, `Inter`). Headlines are usually bold and placed at the top-left or bottom-left of each compartment.
+- **Visuals**: Often relies on high-quality, edge-to-edge images or single, large 3D icons inside specific grid cells to break up text-heavy cards.
+
+## Web Implementation
+- CSS Grid is mandatory. Flexbox is too difficult to maintain the strict 2D structure.
+- **CSS Example**:
+```css
+.bento-container {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: 200px;
+  gap: 24px;
+  padding: 24px;
+  background-color: var(--bg-primary); /* Slightly darker than cards */
+}
+
+.bento-card {
+  background-color: #fff;
+  border-radius: 32px; /* Very large border radius */
+  padding: 32px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.04);
+  /* Optional: subtle 1px border for crispness */
+  border: 1px solid rgba(0,0,0,0.05);
+  
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/* Creating spans for different bento sizes */
+.bento-span-2 { grid-column: span 2; }
+.bento-span-2-row { grid-row: span 2; }
+.bento-large { grid-column: span 2; grid-row: span 2; }
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct BentoGrid: View {
+    let columns = [
+        GridItem(.flexible(), spacing: 16),
+        GridItem(.flexible(), spacing: 16)
+    ]
+    
+    var body: some View {
+        ScrollView {
+            LazyVGrid(columns: columns, spacing: 16) {
+                // 2x1 Span (Full width)
+                BentoCard(title: "Hero", color: .blue)
+                    .frame(height: 180)
+                
+                // 1x1 Spans
+                BentoCard(title: "Stats", color: .green)
+                    .frame(height: 180)
+                BentoCard(title: "Graph", color: .purple)
+                    .frame(height: 180)
+                
+                // 1x2 Span (Tall)
+                BentoCard(title: "Activity", color: .orange)
+                    .frame(height: 376) // (180 * 2) + 16 spacing
+                
+                // 1x1 Spans next to the tall one
+                VStack(spacing: 16) {
+                    BentoCard(title: "A", color: .pink).frame(height: 180)
+                    BentoCard(title: "B", color: .cyan).frame(height: 180)
+                }
+            }
+            .padding(16)
+        }
+        .background(Color(.systemGroupedBackground))
+    }
+}
+
+struct BentoCard: View {
+    let title: String
+    let color: Color
+    var body: some View {
+        RoundedRectangle(cornerRadius: 24)
+            .fill(Color(.secondarySystemGroupedBackground))
+            .overlay(
+                Text(title).font(.headline).foregroundColor(color),
+                alignment: .topLeading
+            )
+            .padding(16)
+            // Soft bento shadow
+            .shadow(color: .black.opacity(0.04), radius: 12, x: 0, y: 4)
+    }
+}
+```
+- Use `LazyVGrid` for uniform grids.
+- For complex irregular bento layouts (like 1x2 spans), you often have to mix `VStack` and `HStack` inside the grid cells to fake the spans.
+- Maintain absolute consistency with `cornerRadius` (usually 24-32pt) and `spacing` (usually 16pt).
+
+### Flutter
+```dart
+import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
+
+class BentoScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.grey[100],
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16),
+        child: StaggeredGrid.count(
+          crossAxisCount: 4, // 4 columns total
+          mainAxisSpacing: 16,
+          crossAxisSpacing: 16,
+          children: const [
+            // 2x1 (Full width in a 2-col layout, spans 4)
+            StaggeredGridTile.count(
+              crossAxisCellCount: 4,
+              mainAxisCellCount: 2,
+              child: BentoCard(title: 'Hero'),
+            ),
+            // 1x1
+            StaggeredGridTile.count(
+              crossAxisCellCount: 2,
+              mainAxisCellCount: 2,
+              child: BentoCard(title: 'Stats'),
+            ),
+            // 1x1
+            StaggeredGridTile.count(
+              crossAxisCellCount: 2,
+              mainAxisCellCount: 2,
+              child: BentoCard(title: 'Graph'),
+            ),
+            // 1x2 (Tall)
+            StaggeredGridTile.count(
+              crossAxisCellCount: 2,
+              mainAxisCellCount: 4,
+              child: BentoCard(title: 'Activity'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class BentoCard extends StatelessWidget {
+  final String title;
+  const BentoCard({required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(24),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withOpacity(0.04),
+            blurRadius: 12,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      alignment: Alignment.topLeft,
+      child: Text(title, style: const TextStyle(fontWeight: FontWeight.bold)),
+    );
+  }
+}
+```
+- The `flutter_staggered_grid_view` package is practically mandatory for complex Bento grids in Flutter.
+- Use `StaggeredGridTile.count` to explicitly declare the `crossAxis` and `mainAxis` span of each compartment.
+
+### React Native
+```jsx
+const BentoScreen = () => {
+  return (
+    <ScrollView 
+      style={{ flex: 1, backgroundColor: '#F2F2F7' }}
+      contentContainerStyle={{ padding: 16 }}
+    >
+      {/* 2x1 Span */}
+      <View style={[styles.bentoCard, { height: 180, marginBottom: 16 }]}>
+        <Text style={styles.title}>Hero</Text>
+      </View>
+
+      <View style={{ flexDirection: 'row', gap: 16, marginBottom: 16 }}>
+        {/* 1x1 Spans */}
+        <View style={[styles.bentoCard, { flex: 1, height: 180 }]}>
+          <Text style={styles.title}>Stats</Text>
+        </View>
+        <View style={[styles.bentoCard, { flex: 1, height: 180 }]}>
+          <Text style={styles.title}>Graph</Text>
+        </View>
+      </View>
+
+      <View style={{ flexDirection: 'row', gap: 16 }}>
+        {/* 1x2 Span (Tall) */}
+        <View style={[styles.bentoCard, { flex: 1, height: 376 }]}>
+          <Text style={styles.title}>Activity</Text>
+        </View>
+        
+        <View style={{ flex: 1, gap: 16 }}>
+          {/* Stacked 1x1s */}
+          <View style={[styles.bentoCard, { height: 180 }]}>
+            <Text style={styles.title}>A</Text>
+          </View>
+          <View style={[styles.bentoCard, { height: 180 }]}>
+            <Text style={styles.title}>B</Text>
+          </View>
+        </View>
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  bentoCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 24,
+    padding: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.04,
+    shadowRadius: 12,
+    elevation: 2,
+  },
+  title: {
+    fontWeight: '700',
+    fontSize: 18,
+  }
+});
+```
+- React Native lacks CSS Grid. You must manually compose the grid using `flexDirection: 'row'` and vertical stacks.
+- The `gap` property in React Native flexbox makes this significantly easier than using margins.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun BentoGrid() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFFF2F2F7))
+            .verticalScroll(rememberScrollState())
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        // Full width
+        BentoCard(title = "Hero", modifier = Modifier.fillMaxWidth().height(180.dp))
+        
+        // Two columns
+        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+            BentoCard(title = "Stats", modifier = Modifier.weight(1f).height(180.dp))
+            BentoCard(title = "Graph", modifier = Modifier.weight(1f).height(180.dp))
+        }
+        
+        // Complex span: 1x2 left, two 1x1s right
+        Row(horizontalArrangement = Arrangement.spacedBy(16.dp)) {
+            BentoCard(title = "Activity", modifier = Modifier.weight(1f).height(376.dp))
+            
+            Column(
+                modifier = Modifier.weight(1f),
+                verticalArrangement = Arrangement.spacedBy(16.dp)
+            ) {
+                BentoCard(title = "A", modifier = Modifier.fillMaxWidth().height(180.dp))
+                BentoCard(title = "B", modifier = Modifier.fillMaxWidth().height(180.dp))
+            }
+        }
+    }
+}
+
+@Composable
+fun BentoCard(title: String, modifier: Modifier = Modifier) {
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(24.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.White),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp)
+    ) {
+        Text(title, fontWeight = FontWeight.Bold, modifier = Modifier.padding(24.dp))
+    }
+}
+```
+- While `LazyVerticalGrid` exists, for highly specific irregular bento layouts, manually building rows and columns with `weight(1f)` is often much more reliable.
+- Use `Arrangement.spacedBy(16.dp)` on both Columns and Rows to ensure mathematically perfect gutters.
+
+## Do's and Don'ts
+- **DO**: Mix sizes! A bento box is boring if every cell is 1x1. Use 2x1, 1x2, and 2x2 cells to create visual interest.
+- **DON'T**: Clutter the inside of a bento card. If it needs a lot of elements, break it into multiple cards.
+
+## 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.