opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/widget-based-design/SKILL.md

@@ -0,0 +1,274 @@
+---
+name: widget-based-design
+description: Web and App implementation guide for Widget-Based Design. Trigger when user wants modular blocks, iOS Home Screen aesthetics, and customizable mini-apps.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Widget-Based Design
+
+> "Miniature applications. Small, highly functional blocks of UI designed to be rearranged."
+
+
+## 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 Aspect Ratios**: Widgets usually follow strict sizes (1x1 square, 2x1 rectangle, 2x2 large square).
+2. **Glanceability**: Widgets show the most important piece of data instantly. Deep interaction usually requires opening the full app.
+3. **Corner Radius Match**: The inner content's border radius should perfectly nest within the widget's outer border radius.
+
+## Visual DNA
+- **Colors**: Widgets often use bright, solid color backgrounds or full-bleed photos to differentiate themselves.
+- **Typography**: Large, bold numbers (like a clock or weather temp) paired with tiny sub-labels.
+- **Layout**: Similar to Bento UI, but specifically focused on functional app-lets rather than just content layout.
+
+## Web Implementation
+- **CSS Example**:
+```css
+.widget-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  grid-auto-rows: 160px; /* Force squares */
+  gap: 16px;
+  padding: 32px;
+}
+
+.widget {
+  background-color: #ffffff;
+  border-radius: 24px; /* Classic iOS widget radius */
+  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Specific Sizes */
+.widget-small { grid-column: span 1; grid-row: span 1; }
+.widget-medium { grid-column: span 2; grid-row: span 1; }
+.widget-large { grid-column: span 2; grid-row: span 2; }
+
+/* Weather Widget Example */
+.widget.weather {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  color: white;
+}
+.weather-temp { font-size: 3rem; font-weight: 300; }
+.weather-icon { position: absolute; top: 16px; right: 16px; font-size: 2rem; }
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct WidgetDesignView: View {
+    let columns = [GridItem(.flexible(), spacing: 16), GridItem(.flexible(), spacing: 16)]
+    
+    var body: some View {
+        ScrollView {
+            LazyVGrid(columns: columns, spacing: 16) {
+                // 2x1 Widget
+                WeatherWidget()
+                    .frame(height: 160) // Base unit height
+                
+                // 1x1 Widget
+                FitnessWidget()
+                    .frame(height: 160)
+                
+                // 1x1 Widget
+                MusicWidget()
+                    .frame(height: 160)
+            }
+            .padding(24)
+        }
+        .background(Color(white: 0.95))
+    }
+}
+
+struct WeatherWidget: View {
+    var body: some View {
+        ZStack(alignment: .topTrailing) {
+            LinearGradient(colors: [Color(hex: "4facfe"), Color(hex: "00f2fe")], startPoint: .topLeading, endPoint: .bottomTrailing)
+            
+            Image(systemName: "cloud.sun.fill")
+                .foregroundColor(.white)
+                .font(.system(size: 40))
+                .padding()
+            
+            VStack(alignment: .leading) {
+                Spacer()
+                Text("72°")
+                    .font(.system(size: 48, weight: .thin))
+                    .foregroundColor(.white)
+                Text("San Francisco")
+                    .font(.subheadline)
+                    .foregroundColor(.white.opacity(0.8))
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding()
+        }
+        .cornerRadius(24) // Classic iOS widget radius
+        .shadow(color: .black.opacity(0.1), radius: 10, y: 5)
+    }
+}
+```
+- SwiftUI is perfect for this. The `LazyVGrid` handles the layout, and `cornerRadius(24)` matches Apple's default widget styling perfectly.
+- Use `ZStack` as the root of the widget to easily overlay content on top of complex gradients or images.
+
+### Flutter
+```dart
+class WidgetDesignScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF2F2F2),
+      body: GridView.count(
+        crossAxisCount: 2, // 2 columns for a typical phone
+        padding: const EdgeInsets.all(24),
+        mainAxisSpacing: 16,
+        crossAxisSpacing: 16,
+        childAspectRatio: 1.0, // 1x1 squares
+        children: [
+          // Note: Flutter GridView doesn't easily span rows/cols out of the box.
+          // flutter_staggered_grid_view is highly recommended for real widget layouts.
+          _buildWeatherWidget(),
+          _buildFitnessWidget(),
+          _buildMusicWidget(),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildWeatherWidget() {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(24),
+        gradient: const LinearGradient(colors: [Color(0xFF4FACFE), Color(0xFF00F2FE)]),
+        boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 10, offset: const Offset(0, 5))],
+      ),
+      padding: const EdgeInsets.all(16),
+      child: Stack(
+        children: [
+          const Align(
+            alignment: Alignment.topRight,
+            child: Icon(Icons.cloud, color: Colors.white, size: 40),
+          ),
+          Align(
+            alignment: Alignment.bottomLeft,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Text('72°', style: TextStyle(color: Colors.white, fontSize: 48, fontWeight: FontWeight.w300)),
+                Text('San Francisco', style: TextStyle(color: Colors.white.withOpacity(0.8), fontSize: 14)),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+```
+- A `Stack` inside a `Container` with `BorderRadius.circular(24)` is the blueprint for every widget.
+- Standard `GridView` is too rigid for mixed 2x1 and 1x1 widgets. Use the `flutter_staggered_grid_view` package for production apps.
+
+### React Native
+```jsx
+const WidgetDesignScreen = () => {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#F2F2F2' }} contentContainerStyle={{ padding: 24 }}>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-between', gap: 16 }}>
+        
+        {/* 2x1 Widget (Full width minus padding) */}
+        <View style={[styles.widget, { width: '100%' }]}>
+          <LinearGradient colors={['#4facfe', '#00f2fe']} style={styles.widgetBg} />
+          <Text style={styles.temp}>72°</Text>
+          <Text style={styles.sub}>San Francisco</Text>
+        </View>
+
+        {/* 1x1 Widgets (Half width minus half gap) */}
+        <View style={[styles.widget, { width: '47%' }]}><Text>Fitness</Text></View>
+        <View style={[styles.widget, { width: '47%' }]}><Text>Music</Text></View>
+
+      </View>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  widget: {
+    height: 160, // Fixed height forces square/rectangular aspect ratios
+    borderRadius: 24,
+    backgroundColor: '#FFF',
+    padding: 16,
+    justifyContent: 'flex-end',
+    shadowColor: '#000', shadowOffset: { width: 0, height: 5 }, shadowOpacity: 0.1, shadowRadius: 10, elevation: 5,
+    overflow: 'hidden'
+  },
+  widgetBg: {
+    ...StyleSheet.absoluteFillObject,
+    borderRadius: 24,
+  },
+  temp: { fontSize: 48, fontWeight: '300', color: '#FFF' },
+  sub: { fontSize: 14, color: 'rgba(255,255,255,0.8)' }
+});
+```
+- In React Native, `flexWrap: 'wrap'` combined with percentage widths (e.g., `47%` for 2 columns with a gap) is the cleanest way to build a responsive widget layout.
+- If using `LinearGradient` from `expo-linear-gradient` or `react-native-linear-gradient`, apply `StyleSheet.absoluteFillObject` so it sits behind the text.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun WidgetDesignScreen() {
+    LazyVerticalGrid(
+        columns = GridCells.Fixed(2),
+        modifier = Modifier.fillMaxSize().background(Color(0xFFF2F2F2)).padding(24.dp),
+        horizontalArrangement = Arrangement.spacedBy(16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        // 2x1 Widget (Spans both columns)
+        item(span = { GridItemSpan(2) }) {
+            WeatherWidget(Modifier.height(160.dp))
+        }
+        // 1x1 Widgets
+        item { Box(Modifier.height(160.dp).background(Color.White, RoundedCornerShape(24.dp))) }
+        item { Box(Modifier.height(160.dp).background(Color.White, RoundedCornerShape(24.dp))) }
+    }
+}
+
+@Composable
+fun WeatherWidget(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth()
+            .shadow(10.dp, RoundedCornerShape(24.dp))
+            .background(Brush.linearGradient(listOf(Color(0xFF4FACFE), Color(0xFF00F2FE))), RoundedCornerShape(24.dp))
+            .padding(16.dp)
+    ) {
+        // Icon
+        Icon(Icons.Filled.Cloud, contentDescription = null, tint = Color.White, modifier = Modifier.align(Alignment.TopEnd).size(40.dp))
+        
+        // Data
+        Column(modifier = Modifier.align(Alignment.BottomStart)) {
+            Text("72°", fontSize = 48.sp, fontWeight = FontWeight.Light, color = Color.White)
+            Text("San Francisco", fontSize = 14.sp, color = Color.White.copy(alpha = 0.8f))
+        }
+    }
+}
+```
+- `LazyVerticalGrid` with `GridCells.Fixed(2)` and `GridItemSpan` perfectly recreate iOS widget grids.
+- `RoundedCornerShape(24.dp)` is essential to sell the look.
+
+## Do's and Don'ts
+- **DO**: Use full-bleed background colors to make different widgets stand out.
+- **DON'T**: Put complex forms or scrollable lists inside a 1x1 widget.
+
+## 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/y2k-design/SKILL.md

@@ -0,0 +1,268 @@
+---
+name: y2k-design
+description: Web and App implementation guide for Y2K Design. Trigger when user wants chrome effects, futuristic 2000s look, blob shapes, and tech optimism.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Y2K Design
+
+> "The optimistic, shiny future as imagined in 1999. Chrome, blobs, and alien tech."
+
+
+## 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. **Metallic & Chrome Effects**: Extensive use of silver, chrome, and shiny metallic gradients.
+2. **Organic, Amorphous Shapes**: "Blob" architecture, curved intersecting lines, and liquid-like forms.
+3. **Tech-Optimism**: Circuit board motifs, target crosshairs, and digital grid backgrounds.
+
+## Visual DNA
+- **Colors**: Silver/chrome, bright cyan, hot pink, lime green. **Industrial Chic** mixed with neon accents works well.
+- **Typography**: Extended (wide) sans-serifs, pixel fonts, or futuristic/alien display fonts (e.g., `Orbitron`, `Syncopate`).
+- **Styling**: Outer glows, metallic bevels, and starry glints (sparkles).
+
+## Web Implementation
+- Rely heavily on complex linear and radial gradients to simulate shiny metal.
+- **CSS Example**:
+```css
+body {
+  background-color: #000000;
+  /* Digital grid background */
+  background-image: linear-gradient(#333 1px, transparent 1px),
+                    linear-gradient(90deg, #333 1px, transparent 1px);
+  background-size: 20px 20px;
+  color: #ffffff;
+  font-family: 'Syncopate', sans-serif;
+}
+
+.y2k-chrome-text {
+  font-size: 4rem;
+  font-weight: 900;
+  text-transform: uppercase;
+  
+  /* Chrome gradient effect */
+  background: linear-gradient(
+    to bottom, 
+    #ffffff 0%, 
+    #999999 45%, 
+    #222222 50%, 
+    #cccccc 55%, 
+    #ffffff 100%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  
+  /* Outer glow */
+  filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
+}
+
+.y2k-blob-btn {
+  background: linear-gradient(135deg, #00FFFF, #FF00FF);
+  border: none;
+  border-radius: 50% 20% / 10% 40%; /* Amorphous blob shape */
+  padding: 20px 40px;
+  color: #fff;
+  font-weight: bold;
+  text-shadow: 1px 1px 2px #000;
+  box-shadow: 0 0 15px #FF00FF;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct Y2KDesignView: View {
+    // Chrome Gradient
+    let chromeGradient = LinearGradient(
+        colors: [Color.white, Color(white: 0.6), Color(white: 0.2), Color(white: 0.8), Color.white],
+        startPoint: .top,
+        endPoint: .bottom
+    )
+    
+    var body: some View {
+        ZStack {
+            Color.black.ignoresSafeArea()
+            
+            VStack(spacing: 40) {
+                // Chrome Text
+                Text("Y2K FUTURE")
+                    .font(.custom("Syncopate-Bold", size: 48))
+                    .foregroundStyle(chromeGradient)
+                    // Cyan glow
+                    .shadow(color: Color(hex: "00FFFF"), radius: 10, x: 0, y: 0)
+                
+                // Blob Button (Faked with Capsule in standard SwiftUI, requires Path for true blob)
+                Button(action: {}) {
+                    Text("ENTER CORE")
+                        .font(.custom("Orbitron-Bold", size: 20))
+                        .foregroundColor(.white)
+                        .padding(.vertical, 20)
+                        .padding(.horizontal, 40)
+                        .background(LinearGradient(colors: [Color(hex: "00FFFF"), Color(hex: "FF00FF")], startPoint: .topLeading, endPoint: .bottomTrailing))
+                        .clipShape(Capsule())
+                        // Glow
+                        .shadow(color: Color(hex: "FF00FF").opacity(0.8), radius: 15, x: 0, y: 0)
+                }
+            }
+        }
+    }
+}
+```
+- SwiftUI's `.foregroundStyle()` makes applying a complex multi-stop `LinearGradient` to text trivial, which is exactly how you build the Chrome Text effect.
+- Add an un-offset `.shadow()` with a neon color to create the Y2K outer glow.
+
+### Flutter
+```dart
+class Y2KDesignScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            // Chrome Text via ShaderMask
+            ShaderMask(
+              shaderCallback: (bounds) => const LinearGradient(
+                begin: Alignment.topCenter, end: Alignment.bottomCenter,
+                colors: [Colors.white, Color(0xFF999999), Color(0xFF222222), Color(0xFFCCCCCC), Colors.white],
+                stops: [0.0, 0.45, 0.5, 0.55, 1.0],
+              ).createShader(bounds),
+              child: const Text(
+                'Y2K FUTURE',
+                style: TextStyle(
+                  fontFamily: 'Syncopate', fontSize: 48, fontWeight: FontWeight.w900, color: Colors.white,
+                  shadows: [Shadow(color: Color(0xFF00FFFF), blurRadius: 20)], // Glow
+                ),
+              ),
+            ),
+            const SizedBox(height: 40),
+            
+            // Neon Button
+            Container(
+              decoration: BoxDecoration(
+                gradient: const LinearGradient(colors: [Color(0xFF00FFFF), Color(0xFFFF00FF)]),
+                borderRadius: BorderRadius.circular(50),
+                boxShadow: const [BoxShadow(color: Color(0xFFFF00FF), blurRadius: 20)],
+              ),
+              child: ElevatedButton(
+                onPressed: () {},
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: Colors.transparent, shadowColor: Colors.transparent,
+                  padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 20),
+                ),
+                child: const Text('ENTER CORE', style: TextStyle(fontFamily: 'Orbitron', fontSize: 20, color: Colors.white)),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- You MUST use `ShaderMask` with a complex multi-stop `LinearGradient` to render the metallic chrome effect on text in Flutter.
+- The `stops` property `[0.0, 0.45, 0.5, 0.55, 1.0]` is the secret to a good metal gradient: a sharp contrast right in the middle simulates the horizon reflection on a cylinder.
+
+### React Native
+```jsx
+// REQUIRES: @react-native-masked-view/masked-view and react-native-linear-gradient
+import MaskedView from '@react-native-masked-view/masked-view';
+import LinearGradient from 'react-native-linear-gradient';
+
+const Y2KDesignScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center' }}>
+      
+      {/* Chrome Text */}
+      <View style={{ height: 60, width: '100%', marginBottom: 40, shadowColor: '#00FFFF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 10 }}>
+        <MaskedView
+          style={{ flex: 1 }}
+          maskElement={<Text style={{ fontFamily: 'Syncopate-Bold', fontSize: 48, color: '#FFF', textAlign: 'center' }}>Y2K FUTURE</Text>}
+        >
+          <LinearGradient
+            colors={['#FFFFFF', '#999999', '#222222', '#CCCCCC', '#FFFFFF']}
+            locations={[0, 0.45, 0.5, 0.55, 1]}
+            style={{ flex: 1 }}
+          />
+        </MaskedView>
+      </View>
+
+      {/* Neon Gradient Button */}
+      <View style={{ shadowColor: '#FF00FF', shadowOffset: {width: 0, height: 0}, shadowOpacity: 1, shadowRadius: 15 }}>
+        <LinearGradient
+          colors={['#00FFFF', '#FF00FF']} start={{x: 0, y: 0}} end={{x: 1, y: 1}}
+          style={{ borderRadius: 50, paddingHorizontal: 40, paddingVertical: 20 }}
+        >
+          <Text style={{ fontFamily: 'Orbitron-Bold', fontSize: 20, color: '#FFF' }}>ENTER CORE</Text>
+        </LinearGradient>
+      </View>
+
+    </View>
+  );
+};
+```
+- In React Native, you need the community `MaskedView` to apply a gradient to text. Create the `<Text>` in the `maskElement` prop, and put the `<LinearGradient>` inside as a child.
+- Pass `locations` to the gradient to create the sharp metallic reflection line.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun Y2KDesignScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize().background(Color.Black),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            
+            // Chrome Text
+            Text(
+                text = "Y2K FUTURE",
+                fontSize = 48.sp,
+                fontFamily = FontFamily.SansSerif, // Replace with Syncopate
+                fontWeight = FontWeight.Black,
+                style = TextStyle(
+                    // Apply Chrome Gradient to Text
+                    brush = Brush.verticalGradient(
+                        0.0f to Color.White,
+                        0.45f to Color(0xFF999999),
+                        0.5f to Color(0xFF222222),
+                        0.55f to Color(0xFFCCCCCC),
+                        1.0f to Color.White
+                    ),
+                    shadow = Shadow(color = Color(0xFF00FFFF), blurRadius = 20f) // Glow
+                )
+            )
+            
+            Spacer(Modifier.height(40.dp))
+            
+            // Neon Button
+            Box(
+                modifier = Modifier
+                    .shadow(20.dp, CircleShape, ambientColor = Color(0xFFFF00FF), spotColor = Color(0xFFFF00FF))
+                    .background(Brush.linearGradient(listOf(Color(0xFF00FFFF), Color(0xFFFF00FF))), CircleShape)
+                    .clickable { }
+                    .padding(horizontal = 40.dp, vertical = 20.dp)
+            ) {
+                Text("ENTER CORE", color = Color.White, fontFamily = FontFamily.SansSerif, fontWeight = FontWeight.Bold, fontSize = 20.sp)
+            }
+        }
+    }
+}
+```
+- Jetpack Compose makes gradient text incredibly easy via `TextStyle(brush = ...)`.
+- Provide specific color stops (`0.45f to ...`) to the `verticalGradient` to create the hard reflection line characteristic of 2000s chrome.
+
+## Do's and Don'ts
+- **DO**: Use sparkles (✨) as decorative elements around headers and buttons.
+- **DON'T**: Make it minimal. Y2K is fundamentally maximalist and flashy.
+
+## 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.