opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/frutiger-aero/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: frutiger-aero
+description: Web and App implementation guide for Frutiger Aero. Trigger when user wants glossy gradients, early 2000s nature-inspired tech, glass, and water motifs.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Frutiger Aero
+
+> "The aesthetic of mid-2000s optimism. Glossy plastic, clear water, blue skies, and eco-friendly technology."
+
+
+## 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. **Hyper-Glossy Textures**: Buttons look like polished glass or wet plastic. Extensive use of convex gradients and specular highlights.
+2. **Skeuomorphic Nature**: Motifs of green grass, blue skies, water droplets, and bubbles intersecting with sleek glass technology (think Windows Aero or early iOS).
+3. **Translucency**: Frosted glass effects, but much more saturated and reflective than modern glassmorphism.
+
+## Visual DNA
+- **Colors**: Cyan, sky blue, lime green, and pure white. Avoid dark themes entirely.
+- **Typography**: Clean, highly legible humanist sans-serifs (like the font *Frutiger*, `Segoe UI`, or `Myriad Pro`).
+- **Styling**: Drop shadows are deep. Highlights are bright, sharp white lines at the top of buttons.
+
+## Web Implementation
+- Use multiple box-shadows (inset for the gloss, outset for depth) and linear-gradients.
+- **CSS Example**:
+```css
+body {
+  /* Classic blue sky / green grass gradient */
+  background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 60%, #98FB98 100%);
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+}
+
+.aero-btn {
+  background: linear-gradient(to bottom, #73c8f8 0%, #1583d7 50%, #0361a3 50%, #299eef 100%);
+  color: white;
+  border: 1px solid #024b7f;
+  border-radius: 20px;
+  padding: 12px 32px;
+  font-weight: 600;
+  text-shadow: 0 -1px 1px rgba(0,0,0,0.5);
+  
+  /* The Glossy Highlight and Depth */
+  box-shadow: 
+    inset 0 1px 1px rgba(255,255,255,0.8), /* Top edge highlight */
+    inset 0 15px 15px rgba(255,255,255,0.3), /* Convex plastic shine */
+    0 4px 6px rgba(0,0,0,0.2); /* Drop shadow */
+}
+
+.aero-panel {
+  /* Windows Vista/7 Aero Glass */
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  border-top-color: #ffffff; /* Brighter top edge */
+  border-radius: 8px;
+  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct FrutigerAeroView: View {
+    var body: some View {
+        ZStack {
+            // Classic sky to grass gradient
+            LinearGradient(
+                colors: [Color(hex: "87CEEB"), Color(hex: "E0F6FF"), Color(hex: "98FB98")],
+                startPoint: .top, endPoint: .bottom
+            ).ignoresSafeArea()
+            
+            // Glossy Button
+            Button(action: {}) {
+                Text("Windows Vista")
+                    .font(.headline)
+                    .foregroundColor(.white)
+                    .shadow(color: .black.opacity(0.5), radius: 1, y: -1) // Inset text shadow effect
+                    .padding(.horizontal, 40)
+                    .padding(.vertical, 16)
+                    .background(
+                        // Base gradient
+                        LinearGradient(
+                            stops: [
+                                .init(color: Color(hex: "73c8f8"), location: 0.0),
+                                .init(color: Color(hex: "1583d7"), location: 0.5),
+                                .init(color: Color(hex: "0361a3"), location: 0.5), // Sharp color stop
+                                .init(color: Color(hex: "299eef"), location: 1.0)
+                            ],
+                            startPoint: .top, endPoint: .bottom
+                        )
+                    )
+                    .cornerRadius(25)
+                    .overlay(
+                        // Top white specular highlight
+                        RoundedRectangle(cornerRadius: 25)
+                            .stroke(
+                                LinearGradient(colors: [.white, .clear], startPoint: .top, endPoint: .bottom),
+                                lineWidth: 1.5
+                            )
+                    )
+                    .shadow(color: .black.opacity(0.3), radius: 5, y: 4)
+            }
+        }
+    }
+}
+// Note: Color(hex:) requires a custom extension in SwiftUI.
+```
+- The signature Frutiger Aero "gel" look requires a sharp color transition right in the middle. Set two gradient stops at `0.5` with different colors.
+- An `.overlay` with a top-down white-to-clear gradient stroke creates the glass highlight edge.
+
+### Flutter
+```dart
+class FrutigerAeroScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        // Sky/Grass background
+        decoration: const BoxDecoration(
+          gradient: LinearGradient(
+            begin: Alignment.topCenter, end: Alignment.bottomCenter,
+            colors: [Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)],
+          ),
+        ),
+        child: Center(
+          child: Container(
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(25),
+              boxShadow: const [BoxShadow(color: Colors.black38, blurRadius: 6, offset: Offset(0, 4))],
+              // Glossy Gel Button
+              gradient: const LinearGradient(
+                begin: Alignment.topCenter, end: Alignment.bottomCenter,
+                stops: [0.0, 0.5, 0.5, 1.0], // Sharp transition at 50%
+                colors: [
+                  Color(0xFF73C8F8), // Light top
+                  Color(0xFF1583D7), // Mid top
+                  Color(0xFF0361A3), // Dark mid (creates the glass horizon)
+                  Color(0xFF299EEF), // Bright bottom reflection
+                ],
+              ),
+              border: Border.all(color: Colors.white.withOpacity(0.5), width: 1),
+            ),
+            child: Material(
+              color: Colors.transparent,
+              child: InkWell(
+                borderRadius: BorderRadius.circular(25),
+                onTap: () {},
+                child: const Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
+                  child: Text(
+                    'Media Player',
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontWeight: FontWeight.bold,
+                      shadows: [Shadow(color: Colors.black54, offset: Offset(0, -1))],
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Flutter's `LinearGradient` `stops` array is perfect for this. Providing `0.5` twice creates a hard line that mimics a curved glass reflection.
+- Use `Text` shadows with a negative `offset: Offset(0, -1)` to recreate the classic etched-text look of the 2000s.
+
+### React Native
+```jsx
+import LinearGradient from 'react-native-linear-gradient';
+
+const FrutigerAeroScreen = () => {
+  return (
+    <LinearGradient
+      colors={['#87CEEB', '#E0F6FF', '#98FB98']}
+      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+    >
+      <View style={{
+        shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, 
+        shadowOpacity: 0.3, shadowRadius: 5, elevation: 8
+      }}>
+        <LinearGradient
+          colors={['#73C8F8', '#1583D7', '#0361A3', '#299EEF']}
+          locations={[0, 0.5, 0.5, 1]} // The sharp glass horizon
+          style={{
+            borderRadius: 25,
+            paddingVertical: 16,
+            paddingHorizontal: 40,
+            borderWidth: 1,
+            borderColor: 'rgba(255,255,255,0.6)',
+            borderTopWidth: 2 // Stronger specular highlight on top
+          }}
+        >
+          <Text style={{ 
+            color: '#FFF', 
+            fontWeight: 'bold', 
+            textShadowColor: 'rgba(0,0,0,0.5)', 
+            textShadowOffset: { width: 0, height: -1 }, 
+            textShadowRadius: 1 
+          }}>
+            Glossy Button
+          </Text>
+        </LinearGradient>
+      </View>
+    </LinearGradient>
+  );
+};
+```
+- `react-native-linear-gradient` supports `locations`. Set them to `[0, 0.5, 0.5, 1]` to create the two-tone convex reflection.
+- Setting `borderTopWidth: 2` with a white border color effectively simulates the bright white top-edge highlight of a shiny plastic object.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun FrutigerAeroScreen() {
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(
+                Brush.verticalGradient(listOf(Color(0xFF87CEEB), Color(0xFFE0F6FF), Color(0xFF98FB98)))
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        // Glossy Button
+        val glassBrush = Brush.verticalGradient(
+            0.0f to Color(0xFF73C8F8),
+            0.49f to Color(0xFF1583D7),
+            0.5f to Color(0xFF0361A3), // Sharp reflection line
+            1.0f to Color(0xFF299EEF)
+        )
+
+        Box(
+            modifier = Modifier
+                .shadow(8.dp, RoundedCornerShape(25.dp))
+                .background(glassBrush, RoundedCornerShape(25.dp))
+                .border(
+                    width = 1.dp,
+                    brush = Brush.verticalGradient(listOf(Color.White, Color.Transparent)), // Top highlight
+                    shape = RoundedCornerShape(25.dp)
+                )
+                .clickable { }
+                .padding(horizontal = 40.dp, vertical = 16.dp)
+        ) {
+            Text(
+                text = "Eco Tech",
+                color = Color.White,
+                fontWeight = FontWeight.Bold,
+                style = TextStyle(
+                    shadow = Shadow(color = Color.Black.copy(alpha = 0.5f), offset = Offset(0f, -2f), blurRadius = 2f)
+                )
+            )
+        }
+    }
+}
+```
+- Compose's `Brush.verticalGradient` accepts `vararg colorStops: Pair<Float, Color>`. Use `0.49f` and `0.5f` to create the hard reflection line.
+- A gradient border `Modifier.border(brush = ...)` transitioning from White to Transparent perfectly recreates the top-down specular highlight.
+
+## Do's and Don'ts
+- **DO**: Include imagery of lens flares, auroras, or water bubbles if appropriate.
+- **DON'T**: Make it flat. Frutiger Aero is the ultimate antithesis of Flat Design. Everything must shine.
+
+## 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/glassmorphism/SKILL.md

@@ -0,0 +1,272 @@
+---
+name: glassmorphism
+description: Web and App implementation guide for Glassmorphism. Trigger when user wants a frosted glass effect, blurred backgrounds, transparency, or a sleek MacOS-like feel.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Glassmorphism
+
+> "Looking through a frosted window. Interfaces that blend seamlessly with vibrant backgrounds."
+
+
+## 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. **Background Blur (Backdrop Filter)**: The defining characteristic. Elements blur whatever is underneath them.
+2. **Semi-transparent White/Dark Backgrounds**: Panels use rgba() colors to let the background shine through.
+3. **Subtle Light Borders**: A 1px semi-transparent white (or light) border to simulate the glass edge catching the light.
+
+## Visual DNA
+- **Colors**: Requires a vibrant or textured background to work (e.g., gradients, abstract meshes, or photos). Works beautifully over **Yacht Club** or **Earth-Grounded Elegance** if there is underlying visual texture.
+- **Typography**: Clean, geometric sans-serifs. High contrast text (pure white or pure black) is required for legibility against the glass.
+- **Shadows**: Soft, subtle drop shadows to detach the glass pane from the background.
+
+## Web Implementation
+- Rely heavily on `backdrop-filter: blur()`.
+- **CSS Example**:
+```css
+body {
+  /* Requires a complex background to see the glass effect */
+  background: url('abstract-mesh.jpg') cover; 
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.15); /* Light glass */
+  /* OR background: rgba(0, 0, 0, 0.25); for Dark glass */
+  
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  
+  border: 1px solid rgba(255, 255, 255, 0.3); /* The glass edge */
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  
+  padding: 32px;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct GlassCard: View {
+    var body: some View {
+        ZStack {
+            // Vibrant background required for glass to show
+            LinearGradient(
+                colors: [.purple, .blue, .cyan],
+                startPoint: .topLeading,
+                endPoint: .bottomTrailing
+            )
+            .ignoresSafeArea()
+            
+            // Glass panel
+            VStack(alignment: .leading, spacing: 16) {
+                Text("Glass Panel")
+                    .font(.system(size: 22, weight: .semibold))
+                    .foregroundColor(.white)
+                Text("Content floating on frosted glass.")
+                    .font(.system(size: 15))
+                    .foregroundColor(.white.opacity(0.8))
+                
+                Button(action: {}) {
+                    Text("Continue")
+                        .font(.system(size: 15, weight: .semibold))
+                        .foregroundColor(.white)
+                        .padding(.horizontal, 24)
+                        .padding(.vertical, 12)
+                        .background(.ultraThinMaterial)
+                        .cornerRadius(8)
+                }
+            }
+            .padding(24)
+            .background(.ultraThinMaterial)  // Built-in frosted glass
+            .cornerRadius(16)
+            .overlay(
+                RoundedRectangle(cornerRadius: 16)
+                    .stroke(.white.opacity(0.3), lineWidth: 1) // Glass edge highlight
+            )
+            .shadow(color: .black.opacity(0.1), radius: 20, x: 0, y: 10)
+            .padding(24)
+        }
+    }
+}
+```
+- Use `.ultraThinMaterial`, `.thinMaterial`, `.regularMaterial`, `.thickMaterial` — Apple built glassmorphism natively.
+- Add `.overlay(RoundedRectangle().stroke(.white.opacity(0.3)))` for the light edge catch.
+- Glass only works if there's a vibrant background visible behind it.
+
+### Flutter
+```dart
+class GlassCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        // Vibrant background
+        Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              colors: [Colors.purple, Colors.blue, Colors.cyan],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+          ),
+        ),
+        // Glass panel
+        Center(
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(16),
+            child: BackdropFilter(
+              filter: ImageFilter.blur(sigmaX: 16, sigmaY: 16),
+              child: Container(
+                padding: const EdgeInsets.all(24),
+                decoration: BoxDecoration(
+                  color: Colors.white.withOpacity(0.15),
+                  borderRadius: BorderRadius.circular(16),
+                  border: Border.all(
+                    color: Colors.white.withOpacity(0.3),
+                    width: 1,
+                  ),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withOpacity(0.1),
+                      blurRadius: 20,
+                      offset: const Offset(0, 10),
+                    ),
+                  ],
+                ),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const Text('Glass Panel',
+                      style: TextStyle(fontSize: 22, fontWeight: FontWeight.w600,
+                        color: Colors.white)),
+                    const SizedBox(height: 16),
+                    Text('Content floating on frosted glass.',
+                      style: TextStyle(fontSize: 15,
+                        color: Colors.white.withOpacity(0.8))),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+```
+- **Critical**: `BackdropFilter` MUST be wrapped in `ClipRRect` — without clipping, the blur applies to the entire screen.
+- Use `ImageFilter.blur(sigmaX: 10...20, sigmaY: 10...20)` for the frosted effect.
+- Set the container color to `Colors.white.withOpacity(0.1...0.2)` — too opaque kills the glass look.
+
+### React Native
+```jsx
+import { BlurView } from '@react-native-community/blur';
+
+const GlassCard = () => (
+  <View style={{ flex: 1 }}>
+    {/* Vibrant background */}
+    <LinearGradient
+      colors={['#9B59B6', '#3498DB', '#1ABC9C']}
+      style={StyleSheet.absoluteFill}
+    />
+    
+    {/* Glass panel */}
+    <View style={{
+      margin: 24,
+      borderRadius: 16,
+      overflow: 'hidden', // Required for blur clipping
+    }}>
+      <BlurView
+        blurType="light"
+        blurAmount={16}
+        style={{ padding: 24 }}
+      >
+        <View style={{
+          // Glass border overlay
+          borderRadius: 16,
+          borderWidth: 1,
+          borderColor: 'rgba(255,255,255,0.3)',
+        }}>
+          <Text style={{
+            fontSize: 22, fontWeight: '600', color: '#FFF',
+            marginBottom: 16,
+          }}>
+            Glass Panel
+          </Text>
+          <Text style={{
+            fontSize: 15, color: 'rgba(255,255,255,0.8)',
+          }}>
+            Content floating on frosted glass.
+          </Text>
+        </View>
+      </BlurView>
+    </View>
+  </View>
+);
+```
+- Install `@react-native-community/blur` — React Native has NO native blur support.
+- Wrap the `BlurView` parent in a `View` with `overflow: 'hidden'` and `borderRadius` to clip the blur.
+- Use `blurType: 'light'` for light glass, `'dark'` for dark glass, `'chromeMaterial'` for iOS Chrome effect.
+- **Android limitation**: `BlurView` performance varies on Android. Test thoroughly.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun GlassCard() {
+    Box(modifier = Modifier.fillMaxSize()) {
+        // Vibrant background
+        Box(modifier = Modifier
+            .fillMaxSize()
+            .background(Brush.linearGradient(
+                colors = listOf(Color(0xFF9B59B6), Color(0xFF3498DB), Color(0xFF1ABC9C)),
+                start = Offset.Zero,
+                end = Offset.Infinite,
+            ))
+        )
+        
+        // Glass panel — Compose lacks native backdrop-filter,
+        // so use a semi-transparent surface with blur via Modifier.blur()
+        Card(
+            modifier = Modifier
+                .padding(24.dp)
+                .align(Alignment.Center),
+            shape = RoundedCornerShape(16.dp),
+            colors = CardDefaults.cardColors(
+                containerColor = Color.White.copy(alpha = 0.15f),
+            ),
+            border = BorderStroke(1.dp, Color.White.copy(alpha = 0.3f)),
+            elevation = CardDefaults.cardElevation(defaultElevation = 0.dp),
+        ) {
+            Column(modifier = Modifier.padding(24.dp)) {
+                Text("Glass Panel",
+                    fontSize = 22.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    color = Color.White)
+                Spacer(Modifier.height(16.dp))
+                Text("Content floating on frosted glass.",
+                    fontSize = 15.sp,
+                    color = Color.White.copy(alpha = 0.8f))
+            }
+        }
+    }
+}
+```
+- **Compose limitation**: True `backdrop-filter` blur doesn't exist natively. Use `Modifier.blur()` (API 31+) on the background, or use `RenderEffect.createBlurEffect()` for lower APIs.
+- Use the `haze` library (`dev.chrisbanes.haze`) for proper glassmorphism in Compose — it provides `Modifier.haze()` and `Modifier.hazeChild()`.
+- Without native blur, fallback to `Color.White.copy(alpha = 0.15f)` with a strong `border` to simulate the glass edge.
+
+## Do's and Don'ts
+- **DO**: Ensure there is enough contrast between text and the blurred background. Accessibility is often a challenge with this style.
+- **DON'T**: Use Glassmorphism on a solid white or solid black background—the effect will be completely invisible.
+
+## 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.