opencode-skills-collection 3.1.0 → 3.1.1

package/bundled-skills/design-it/cyber-y2k/SKILL.md

@@ -0,0 +1,312 @@
+---
+name: cyber-y2k
+description: Web and App implementation guide for Cyber Y2K. Trigger when user wants modern Y2K, holographic visuals, and glitch aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Cyber Y2K
+
+> "Y2K, but seen through a distorted, modern lens. Darker, glitchier, and highly holographic."
+
+
+## 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. **Holographic Gradients**: Iridescent, oil-slick color palettes that shift as you move.
+2. **Glitch Art**: Text or images that appear corrupted, split into RGB channels, or stutter.
+3. **Tribal & Tribal-Tech Vectors**: Sharp, aggressive vector graphics (think early 2000s tribal tattoos mixed with circuit boards).
+
+## Visual DNA
+- **Colors**: Deep black background. Highlights are holographic (purple, cyan, lime green, hot pink all mixed into fluid gradients).
+- **Typography**: Extremely bold, stretched fonts, or highly technical monospace fonts.
+- **Visuals**: CD-ROM reflections, barbed wire graphics, and heavy chromatic aberration.
+
+## Web Implementation
+- Use CSS animations for glitching and animated background gradients.
+- **CSS Example**:
+```css
+body {
+  background-color: #050505;
+  color: #fff;
+}
+
+/* Holographic button */
+.cyber-y2k-btn {
+  background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
+  background-size: 1800% 1800%;
+  animation: rainbow 18s ease infinite;
+  
+  color: #fff;
+  font-weight: 900;
+  text-transform: uppercase;
+  border: 1px solid rgba(255,255,255,0.5);
+  border-radius: 30px;
+  padding: 16px 32px;
+  mix-blend-mode: screen; /* Makes it interact with background */
+}
+
+@keyframes rainbow { 
+  0%{background-position:0% 82%}
+  50%{background-position:100% 19%}
+  100%{background-position:0% 82%}
+}
+
+/* RGB Split text effect */
+.glitch-text {
+  position: relative;
+  font-family: 'Courier New', monospace;
+  font-size: 3rem;
+  font-weight: bold;
+}
+.glitch-text::before, .glitch-text::after {
+  content: attr(data-text);
+  position: absolute;
+  top: 0; left: 0;
+  opacity: 0.8;
+}
+.glitch-text::before {
+  color: #0ff;
+  z-index: -1;
+  transform: translate(-3px, 2px);
+}
+.glitch-text::after {
+  color: #f0f;
+  z-index: -2;
+  transform: translate(3px, -2px);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct CyberY2KView: View {
+    @State private var rotation: Double = 0
+    
+    var body: some View {
+        ZStack {
+            Color.black.ignoresSafeArea()
+            
+            VStack(spacing: 40) {
+                // Glitch Text
+                ZStack {
+                    Text("SYSTEM.ERROR")
+                        .font(.custom("Courier New", size: 40).bold())
+                        .foregroundColor(.cyan)
+                        .offset(x: -3, y: 2) // RGB split channel 1
+                    
+                    Text("SYSTEM.ERROR")
+                        .font(.custom("Courier New", size: 40).bold())
+                        .foregroundColor(.pink)
+                        .offset(x: 3, y: -2) // RGB split channel 2
+                    
+                    Text("SYSTEM.ERROR")
+                        .font(.custom("Courier New", size: 40).bold())
+                        .foregroundColor(.white)
+                }
+                
+                // Holographic Button
+                Button(action: {}) {
+                    Text("ENTER MATRIX")
+                        .font(.headline.weight(.black))
+                        .foregroundColor(.white)
+                        .padding(.horizontal, 32)
+                        .padding(.vertical, 16)
+                        .background(
+                            AngularGradient(
+                                gradient: Gradient(colors: [.red, .yellow, .green, .cyan, .blue, .purple, .red]),
+                                center: .center,
+                                angle: .degrees(rotation)
+                            )
+                        )
+                        .cornerRadius(30)
+                        .overlay(RoundedRectangle(cornerRadius: 30).stroke(Color.white.opacity(0.5), lineWidth: 1))
+                }
+                .onAppear {
+                    withAnimation(.linear(duration: 5).repeatForever(autoreverses: false)) {
+                        rotation = 360
+                    }
+                }
+            }
+        }
+    }
+}
+```
+- The RGB Glitch effect is incredibly simple in SwiftUI: stack three identical `Text` views in a `ZStack`. Give the bottom ones `.cyan` and `.pink` colors and slightly `.offset()` them.
+- Use an `AngularGradient` bound to a rotating `@State` variable to achieve the iridescent CD-ROM holographic effect.
+
+### Flutter
+```dart
+class CyberY2KScreen extends StatefulWidget {
+  @override
+  State<CyberY2KScreen> createState() => _CyberY2KScreenState();
+}
+
+class _CyberY2KScreenState extends State<CyberY2KScreen> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            // Glitch Text
+            Stack(
+              children: [
+                Transform.translate(offset: const Offset(-3, 2), child: const Text('SYSTEM.ERROR', style: TextStyle(color: Colors.cyan, fontSize: 40, fontFamily: 'Courier', fontWeight: FontWeight.bold))),
+                Transform.translate(offset: const Offset(3, -2), child: const Text('SYSTEM.ERROR', style: TextStyle(color: Colors.pinkAccent, fontSize: 40, fontFamily: 'Courier', fontWeight: FontWeight.bold))),
+                const Text('SYSTEM.ERROR', style: TextStyle(color: Colors.white, fontSize: 40, fontFamily: 'Courier', fontWeight: FontWeight.bold)),
+              ],
+            ),
+            const SizedBox(height: 60),
+            // Holographic Button via ShaderMask
+            AnimatedBuilder(
+              animation: _controller,
+              builder: (context, child) {
+                return ShaderMask(
+                  shaderCallback: (Rect bounds) {
+                    return SweepGradient(
+                      colors: const [Colors.red, Colors.yellow, Colors.green, Colors.cyan, Colors.blue, Colors.purple, Colors.red],
+                      transform: GradientRotation(_controller.value * 2 * 3.14159), // Rotate through 360 degrees
+                    ).createShader(bounds);
+                  },
+                  child: Container(
+                    decoration: BoxDecoration(
+                      color: Colors.white, // Color to be masked by shader
+                      borderRadius: BorderRadius.circular(30),
+                      border: Border.all(color: Colors.white.withOpacity(0.5)),
+                    ),
+                    padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+                    child: const Text('ENTER MATRIX', style: TextStyle(color: Colors.black, fontWeight: FontWeight.w900)),
+                  ),
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- In Flutter, a `ShaderMask` with a `SweepGradient` attached to an `AnimationController` creates a perfect, performant oil-slick holographic effect over any widget.
+- Use `Stack` and `Transform.translate` to build the RGB glitch text.
+
+### React Native
+```jsx
+// Requires react-native-linear-gradient for complex gradients
+import LinearGradient from 'react-native-linear-gradient';
+
+const GlitchText = ({ text }) => {
+  const baseStyle = { fontSize: 40, fontFamily: 'Courier', fontWeight: 'bold', position: 'absolute' };
+  return (
+    <View style={{ alignItems: 'center', height: 50, justifyContent: 'center' }}>
+      <Text style={[baseStyle, { color: '#00FFFF', transform: [{ translateX: -3 }, { translateY: 2 }] }]}>{text}</Text>
+      <Text style={[baseStyle, { color: '#FF00FF', transform: [{ translateX: 3 }, { translateY: -2 }] }]}>{text}</Text>
+      <Text style={[baseStyle, { color: '#FFF' }]}>{text}</Text>
+    </View>
+  );
+};
+
+const CyberY2KScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#050505', justifyContent: 'center', alignItems: 'center' }}>
+      <GlitchText text="SYSTEM.ERROR" />
+      
+      <View style={{ marginTop: 60 }}>
+        {/* React Native cannot easily animate gradient angles natively.
+            Use a complex LinearGradient to simulate the iridescent shine. */}
+        <LinearGradient
+          colors={['#ff2400', '#e8b71d', '#1de840', '#1ddde8', '#dd00f3']}
+          start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
+          style={{
+            borderRadius: 30, padding: 16, paddingHorizontal: 32,
+            borderWidth: 1, borderColor: 'rgba(255,255,255,0.5)'
+          }}
+        >
+          <Text style={{ color: '#FFF', fontWeight: '900' }}>ENTER MATRIX</Text>
+        </LinearGradient>
+      </View>
+    </View>
+  );
+};
+```
+- Stacked absolute `<Text>` nodes handle the RGB split glitch well.
+- True animating holographic gradients (like Sweep/Angular) require `@shopify/react-native-skia`. If Skia is unavailable, use a static multi-stop `LinearGradient` as a fallback.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun GlitchText(text: String) {
+    Box(contentAlignment = Alignment.Center) {
+        Text(text, color = Color.Cyan, fontSize = 40.sp, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold,
+            modifier = Modifier.offset(x = (-3).dp, y = 2.dp))
+        Text(text, color = Color.Magenta, fontSize = 40.sp, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold,
+            modifier = Modifier.offset(x = 3.dp, y = (-2).dp))
+        Text(text, color = Color.White, fontSize = 40.sp, fontFamily = FontFamily.Monospace, fontWeight = FontWeight.Bold)
+    }
+}
+
+@Composable
+fun CyberY2KScreen() {
+    val infiniteTransition = rememberInfiniteTransition()
+    val rotation by infiniteTransition.animateFloat(
+        initialValue = 0f,
+        targetValue = 360f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(5000, easing = LinearEasing)
+        )
+    )
+
+    Column(
+        modifier = Modifier.fillMaxSize().background(Color.Black),
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center
+    ) {
+        GlitchText("SYSTEM.ERROR")
+        
+        Spacer(Modifier.height(60.dp))
+        
+        // Holographic Button
+        Box(
+            modifier = Modifier
+                .background(
+                    brush = Brush.sweepGradient(
+                        colors = listOf(Color.Red, Color.Yellow, Color.Green, Color.Cyan, Color.Blue, Color.Magenta, Color.Red),
+                        center = Offset.Unspecified
+                    ),
+                    shape = RoundedCornerShape(30.dp)
+                )
+                .graphicsLayer { rotationZ = rotation } // Note: This rotates the whole button. 
+                // To rotate ONLY the gradient brush requires custom ShaderBrush or drawing the rect manually in drawBehind with a rotating matrix.
+                .border(1.dp, Color.White.copy(alpha = 0.5f), RoundedCornerShape(30.dp))
+                .padding(horizontal = 32.dp, vertical = 16.dp)
+        ) {
+            Text("ENTER MATRIX", color = Color.White, fontWeight = FontWeight.Black)
+        }
+    }
+}
+```
+- Like other frameworks, use a `Box` to stack text with `Modifier.offset()` for glitches.
+- A `Brush.sweepGradient` creates the holographic CD-ROM colors, though rotating the brush *itself* (not the whole widget) in Compose requires a bit of advanced `Matrix` manipulation inside a `ShaderBrush`.
+
+## Do's and Don'ts
+- **DO**: Incorporate UI elements that look like raw HTML/CSS (like visible tables or marquee tags) as an ironic nod to early web.
+- **DON'T**: Use clean, modern geometric layouts. Cyber Y2K is chaotic and rebellious.
+
+## 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/cyberpunk-ui/SKILL.md

@@ -0,0 +1,262 @@
+---
+name: cyberpunk-ui
+description: Web and App implementation guide for Cyberpunk UI. Trigger when user wants neon colors, dark backgrounds, high-tech dystopian aesthetics, and hacking interfaces.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Cyberpunk UI
+
+> "High tech, low life. Neon signs cutting through the smog of a dystopian megacity."
+
+
+## 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. **Neon on Black**: The foundation is absolute black (`#000000`) or deep charcoal, cut by searingly bright neon accents.
+2. **Angled Geometries**: Clipped corners (chamfers) rather than rounded corners. UI elements often look like they were cut from metal plates.
+3. **Glitch and Data**: Random streams of hexadecimal data, barcode accents, and intentional visual tearing.
+
+## Visual DNA
+- **Colors**: Acid Yellow (`#FCE205`), Cyan (`#00FFFF`), Hot Pink (`#FF003C`), against Black. 
+- **Typography**: Industrial, squared-off sans-serifs (like `Rajdhani`, `Blender Pro`, or `Teko`), mixed with small monospace fonts for data.
+- **Styling**: Diagonal stripes, warning tape patterns, and heavy outer glows.
+
+## Web Implementation
+- Rely on `clip-path` for the angled cuts.
+- **CSS Example**:
+```css
+body {
+  background-color: #050505;
+  color: #00FFFF;
+  font-family: 'Rajdhani', sans-serif;
+  background-image: repeating-linear-gradient(
+    45deg,
+    #050505,
+    #050505 10px,
+    #0a0a0a 10px,
+    #0a0a0a 20px
+  );
+}
+
+.cyberpunk-button {
+  background-color: #FF003C; /* Cyberpunk Red/Pink */
+  color: #FFF;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  border: none;
+  padding: 16px 32px;
+  
+  /* The signature clipped corner */
+  clip-path: polygon(
+    0 0, 
+    calc(100% - 15px) 0, 
+    100% 15px, 
+    100% 100%, 
+    15px 100%, 
+    0 calc(100% - 15px)
+  );
+  
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+/* The glitch/shadow effect */
+.cyberpunk-button:hover {
+  background-color: #FCE205; /* Acid Yellow */
+  color: #000;
+  box-shadow: 
+    -4px 0 0 #00FFFF,
+    4px 0 0 #FF003C;
+}
+
+.data-stream {
+  font-family: monospace;
+  font-size: 0.8rem;
+  color: rgba(0, 255, 255, 0.5);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct CyberpunkShape: Shape {
+    let cutSize: CGFloat = 15
+    func path(in rect: CGRect) -> Path {
+        var path = Path()
+        // Top left
+        path.move(to: CGPoint(x: 0, y: 0))
+        // Top right (cut)
+        path.addLine(to: CGPoint(x: rect.maxX - cutSize, y: 0))
+        path.addLine(to: CGPoint(x: rect.maxX, y: cutSize))
+        // Bottom right
+        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
+        // Bottom left (cut)
+        path.addLine(to: CGPoint(x: cutSize, y: rect.maxY))
+        path.addLine(to: CGPoint(x: 0, y: rect.maxY - cutSize))
+        path.closeSubpath()
+        return path
+    }
+}
+
+struct CyberButton: View {
+    var body: some View {
+        Button(action: {}) {
+            Text("SYS.OVERRIDE")
+                .font(.custom("Rajdhani", size: 24))
+                .fontWeight(.bold)
+                .foregroundColor(.white)
+                .padding(.horizontal, 32)
+                .padding(.vertical, 16)
+        }
+        .background(Color(red: 1.0, green: 0.0, blue: 0.24)) // Cyberpunk Red
+        .clipShape(CyberpunkShape())
+        .overlay(
+            CyberpunkShape()
+                .stroke(Color(red: 0.0, green: 1.0, blue: 1.0), lineWidth: 2) // Cyan border
+        )
+    }
+}
+```
+- Define a custom `Shape` that physically cuts off the corners, bypassing standard `cornerRadius`.
+- Use `.clipShape()` for the background, and `.overlay()` with `.stroke()` for high-tech borders.
+
+### Flutter
+```dart
+class CyberpunkClipper extends CustomClipper<Path> {
+  final double cutSize = 15.0;
+
+  @override
+  Path getClip(Size size) {
+    Path path = Path();
+    path.lineTo(size.width - cutSize, 0); // Top right cut start
+    path.lineTo(size.width, cutSize);     // Top right cut end
+    path.lineTo(size.width, size.height);
+    path.lineTo(cutSize, size.height);    // Bottom left cut start
+    path.lineTo(0, size.height - cutSize);// Bottom left cut end
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
+}
+
+class CyberButton extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return ClipPath(
+      clipper: CyberpunkClipper(),
+      child: Container(
+        color: const Color(0xFFFF003C), // Cyberpunk Red
+        padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+        child: const Text(
+          'SYS.OVERRIDE',
+          style: TextStyle(
+            color: Colors.white,
+            fontSize: 24,
+            fontWeight: FontWeight.bold,
+            fontFamily: 'Rajdhani',
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Extend `CustomClipper<Path>` to calculate the precise angular cuts.
+- Wrap your containers in `ClipPath`. 
+- For borders, you must use a `CustomPaint` with a `CustomPainter` that traces the exact same path.
+
+### React Native
+```jsx
+import Svg, { Polygon } from 'react-native-svg';
+
+const CyberButton = () => {
+  return (
+    <View style={{ alignItems: 'center', justifyContent: 'center', width: 200, height: 60 }}>
+      {/* Background SVG to achieve the clipped corner look */}
+      <View style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}>
+        <Svg height="100%" width="100%" viewBox="0 0 200 60" preserveAspectRatio="none">
+          <Polygon 
+            points="0,0 185,0 200,15 200,60 15,60 0,45"
+            fill="#FF003C" 
+            stroke="#00FFFF"
+            strokeWidth="2"
+          />
+        </Svg>
+      </View>
+      
+      <Text style={{ 
+        color: '#FFF', 
+        fontSize: 20, 
+        fontWeight: 'bold',
+        fontFamily: 'Rajdhani-Bold' 
+      }}>
+        SYS.OVERRIDE
+      </Text>
+    </View>
+  );
+};
+```
+- React Native does not natively support clipping paths on views easily.
+- **Solution**: Use `react-native-svg` to draw a `<Polygon>` that acts as the absolute-positioned background behind transparent text.
+
+### Jetpack Compose
+```kotlin
+class CyberpunkShape(private val cutSize: Dp) : Shape {
+    override fun createOutline(
+        size: Size,
+        layoutDirection: LayoutDirection,
+        density: Density
+    ): Outline {
+        val cutPx = with(density) { cutSize.toPx() }
+        val path = Path().apply {
+            moveTo(0f, 0f)
+            lineTo(size.width - cutPx, 0f)
+            lineTo(size.width, cutPx)
+            lineTo(size.width, size.height)
+            lineTo(cutPx, size.height)
+            lineTo(0f, size.height - cutPx)
+            close()
+        }
+        return Outline.Generic(path)
+    }
+}
+
+@Composable
+fun CyberButton() {
+    Box(
+        modifier = Modifier
+            .clip(CyberpunkShape(15.dp))
+            .background(Color(0xFFFF003C))
+            .border(2.dp, Color(0xFF00FFFF), CyberpunkShape(15.dp))
+            .clickable { }
+            .padding(horizontal = 32.dp, vertical = 16.dp)
+    ) {
+        Text(
+            text = "SYS.OVERRIDE",
+            color = Color.White,
+            fontSize = 24.sp,
+            fontWeight = FontWeight.Bold,
+            // Assuming custom font is loaded
+        )
+    }
+}
+```
+- Create a custom `Shape` by overriding `createOutline` and tracing the `Path`.
+- Pass this shape directly into `Modifier.clip()` and `Modifier.background()`.
+- You can elegantly apply a border stroke directly to the custom shape using `Modifier.border()`.
+
+## Do's and Don'ts
+- **DO**: Include tiny, meaningless technical details (crosshairs, serial numbers, "SYS.OVERRIDE" text).
+- **DON'T**: Use soft, organic curves or gradients. It must be sharp and aggressive.
+
+## 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.