opencode-skills-collection 3.1.0 → 3.1.1

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

@@ -0,0 +1,310 @@
+---
+name: holographic-ui
+description: Web and App implementation guide for Holographic UI. Trigger when user wants light-based appearance, projected interfaces, and transparent floating elements.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Holographic UI
+
+> "Made of light. Interfaces projected into thin air, visible but completely translucent."
+
+
+## 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. **Zero Opacity Backgrounds**: Elements are never fully solid. Everything is semi-transparent, allowing the background to show through.
+2. **Scanlines and Interference**: The illusion of a projection is sold by horizontal scanlines, slight chromatic aberration, or flickering.
+3. **Luminous Edges**: The borders of elements are brighter than the centers, mimicking how lasers or light projections focus at the edges.
+
+## Visual DNA
+- **Colors**: Almost exclusively monochrome Cyan, Blue, or Green, with white core highlights.
+- **Typography**: Thin, technical sans-serifs. Must have a glowing `text-shadow`.
+- **Styling**: Intensive use of `rgba()`, `mix-blend-mode: screen` or `add`, and CSS filters.
+
+## Web Implementation
+- **CSS Example**:
+```css
+body {
+  background-color: #020202; /* Must be dark for holograms to show */
+  background-image: url('dark-lab-background.jpg');
+  background-size: cover;
+  color: #88ffff;
+}
+
+.hologram-panel {
+  background: rgba(0, 200, 255, 0.05); /* Extremely sheer */
+  border: 1px solid rgba(136, 255, 255, 0.5);
+  border-radius: 4px;
+  padding: 30px;
+  
+  /* The glowing edge */
+  box-shadow: 
+    inset 0 0 20px rgba(0, 200, 255, 0.2),
+    0 0 15px rgba(0, 200, 255, 0.3);
+    
+  /* Scanline effect */
+  background-image: linear-gradient(
+    rgba(136, 255, 255, 0.1) 1px, 
+    transparent 1px
+  );
+  background-size: 100% 4px;
+}
+
+.holo-text {
+  font-family: 'Rajdhani', sans-serif;
+  text-transform: uppercase;
+  text-shadow: 0 0 8px rgba(136, 255, 255, 0.8);
+  mix-blend-mode: screen;
+}
+
+/* Subtle flicker */
+.holo-flicker {
+  animation: hologramFlicker 4s infinite;
+}
+
+@keyframes hologramFlicker {
+  0%, 100% { opacity: 1; }
+  92% { opacity: 1; }
+  93% { opacity: 0.4; }
+  94% { opacity: 0.9; }
+  96% { opacity: 0.2; }
+  98% { opacity: 1; }
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct HolographicUIView: View {
+    @State private var isFlickering = false
+    
+    var body: some View {
+        ZStack {
+            Color.black.ignoresSafeArea()
+            
+            VStack {
+                Text("HOLOGRAM ACTIVE")
+                    .font(.custom("Courier", size: 24))
+                    .foregroundColor(Color(hex: "88FFFF"))
+                    .shadow(color: Color(hex: "88FFFF"), radius: 10)
+                    .blendMode(.screen) // Critical for light UI
+                
+                Spacer().frame(height: 40)
+                
+                VStack {
+                    Text("SYSTEM DIAGNOSTICS")
+                        .foregroundColor(Color(hex: "88FFFF"))
+                }
+                .padding(30)
+                .frame(maxWidth: .infinity)
+                .background(Color(hex: "88FFFF").opacity(0.05))
+                .border(Color(hex: "88FFFF").opacity(0.5), width: 1)
+                // The glowing edge effect
+                .shadow(color: Color(hex: "88FFFF").opacity(0.5), radius: 15)
+                .blendMode(.screen)
+                .opacity(isFlickering ? 0.4 : 1.0)
+            }
+            .padding()
+            
+            // Scanline Overlay
+            LinearGradient(
+                stops: [
+                    .init(color: Color(hex: "88FFFF").opacity(0.1), location: 0),
+                    .init(color: .clear, location: 0.5)
+                ],
+                startPoint: .top, endPoint: .bottom
+            )
+            .frame(height: 4)
+            .background(Color.clear)
+            // You would tile this in a real app using an Image or custom shape
+            .blendMode(.screen)
+        }
+        .onAppear {
+            // Simulate flicker
+            Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { _ in
+                if Int.random(in: 1...100) > 95 {
+                    isFlickering.toggle()
+                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
+                        isFlickering = false
+                    }
+                }
+            }
+        }
+    }
+}
+```
+- `.blendMode(.screen)` is absolutely critical. It makes elements act like projected light.
+- Stack multiple `.shadow()` modifiers to create a bloom effect around text and borders.
+
+### Flutter
+```dart
+class HolographicScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black, // Dark lab background
+      body: Stack(
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(24.0),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                // Glowing Text
+                const Text(
+                  'HOLOGRAM ACTIVE',
+                  style: TextStyle(
+                    fontFamily: 'Courier',
+                    fontSize: 24,
+                    color: Color(0xFF88FFFF),
+                    shadows: [Shadow(color: Color(0xFF88FFFF), blurRadius: 10)],
+                  ),
+                ),
+                const SizedBox(height: 40),
+                
+                // Hologram Panel
+                Container(
+                  width: double.infinity,
+                  padding: const EdgeInsets.all(30),
+                  decoration: BoxDecoration(
+                    color: const Color(0xFF88FFFF).withOpacity(0.05),
+                    border: Border.all(color: const Color(0xFF88FFFF).withOpacity(0.5)),
+                    boxShadow: [
+                      BoxShadow(color: const Color(0xFF88FFFF).withOpacity(0.2), blurRadius: 15, spreadRadius: 5),
+                    ],
+                  ),
+                  child: const Text(
+                    'SYSTEM DIAGNOSTICS',
+                    textAlign: TextAlign.center,
+                    style: TextStyle(color: Color(0xFF88FFFF)),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          // Scanlines (IgnorePointer so it doesn't block taps)
+          IgnorePointer(
+            child: ShaderMask(
+              blendMode: BlendMode.screen, // Makes it act like light
+              shaderCallback: (bounds) => const LinearGradient(
+                begin: Alignment.topCenter, end: Alignment.bottomCenter,
+                stops: [0.0, 0.5, 0.5, 1.0],
+                colors: [Colors.black12, Colors.black12, Colors.transparent, Colors.transparent],
+              ).createShader(bounds),
+              // To actually tile in Flutter, you often need a CustomPainter.
+              // Here we simulate the blend mode.
+              child: Container(color: const Color(0xFF88FFFF).withOpacity(0.1)),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- The `Shadow` array inside `TextStyle` creates the glowing text.
+- `BoxShadow` with `spreadRadius` creates the glowing panel border.
+- `ShaderMask` with `BlendMode.screen` layered over the UI gives it that light-projection quality.
+
+### React Native
+```jsx
+const HolographicScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#020202', padding: 24, justifyContent: 'center' }}>
+      
+      <Text style={{
+        fontFamily: 'monospace', fontSize: 24, textAlign: 'center', color: '#88FFFF',
+        textShadowColor: '#88FFFF', textShadowRadius: 10, marginBottom: 40
+      }}>
+        HOLOGRAM ACTIVE
+      </Text>
+
+      <View style={{
+        backgroundColor: 'rgba(0, 200, 255, 0.05)',
+        borderWidth: 1, borderColor: 'rgba(136, 255, 255, 0.5)',
+        padding: 30, borderRadius: 4,
+        // The glowing edge
+        shadowColor: '#88FFFF', shadowOffset: { width: 0, height: 0 },
+        shadowOpacity: 0.5, shadowRadius: 15, elevation: 10
+      }}>
+        <Text style={{ color: '#88FFFF', textAlign: 'center', fontFamily: 'monospace' }}>
+          SYSTEM DIAGNOSTICS
+        </Text>
+      </View>
+
+      {/* Pseudo-scanlines overlay. In a real app, use an repeating Image background. */}
+      <View pointerEvents="none" style={{
+        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
+        backgroundColor: 'rgba(136, 255, 255, 0.03)',
+      }} />
+
+    </View>
+  );
+};
+```
+- React Native doesn't support `mix-blend-mode` out of the box, so you must rely heavily on low-opacity backgrounds and intense `textShadow` / `shadowRadius`.
+- Use `pointerEvents="none"` on scanline overlays so they don't block user interactions.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun HolographicScreen() {
+    Box(modifier = Modifier.fillMaxSize().background(Color(0xFF020202))) {
+        Column(
+            modifier = Modifier.fillMaxSize().padding(24.dp),
+            verticalArrangement = Arrangement.Center,
+            horizontalAlignment = Alignment.CenterHorizontally
+        ) {
+            // Glowing Text
+            Text(
+                text = "HOLOGRAM ACTIVE",
+                fontFamily = FontFamily.Monospace,
+                fontSize = 24.sp,
+                color = Color(0xFF88FFFF),
+                style = TextStyle(
+                    shadow = Shadow(color = Color(0xFF88FFFF), blurRadius = 10f)
+                ),
+                modifier = Modifier.graphicsLayer { blendMode = BlendMode.Screen }
+            )
+            
+            Spacer(Modifier.height(40.dp))
+            
+            // Glowing Panel
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .graphicsLayer { blendMode = BlendMode.Screen }
+                    .shadow(15.dp, ambientColor = Color(0xFF88FFFF), spotColor = Color(0xFF88FFFF))
+                    .background(Color(0xFF88FFFF).copy(alpha = 0.05f))
+                    .border(1.dp, Color(0xFF88FFFF).copy(alpha = 0.5f))
+                    .padding(30.dp),
+                contentAlignment = Alignment.Center
+            ) {
+                Text("SYSTEM DIAGNOSTICS", color = Color(0xFF88FFFF), fontFamily = FontFamily.Monospace)
+            }
+        }
+        
+        // Simulating scanlines overlay
+        Box(
+            modifier = Modifier
+                .fillMaxSize()
+                .background(Color(0xFF88FFFF).copy(alpha = 0.03f))
+        )
+    }
+}
+```
+- `Modifier.graphicsLayer { blendMode = BlendMode.Screen }` is exactly what you need in Compose to make elements act like projected light.
+- Use Compose's `shadow` modifier with `ambientColor` and `spotColor` set to cyan to make the panels emit light.
+
+## Do's and Don'ts
+- **DO**: Use `mix-blend-mode: screen` (web) or additive blending so overlapping holographic panels get brighter where they intersect.
+- **DON'T**: Use any dark colors or drop shadows for the UI elements. Shadows don't exist in light projections.
+
+## 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/isometric-design/SKILL.md

@@ -0,0 +1,228 @@
+---
+name: isometric-design
+description: Web and App implementation guide for Isometric Design. Trigger when user wants angled 3D appearances without vanishing points, often used for technical illustrations.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Isometric Design
+
+> "The architect's view. A parallel projection where depth is constant and parallel lines never converge."
+
+
+## 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. **Parallel Lines**: Unlike true 3D, isometric projection has no vanishing point. Everything is viewed from an exact 30-degree angle.
+2. **Top-Down, Angled View**: The classic "SimCity" perspective.
+3. **Blocky Architecture**: UI elements often look like city blocks or stacked tiles.
+
+## Visual DNA
+- **Colors**: **Warm Tech** or **Earth-Grounded Elegance**. Isometric designs often look like physical models, so slightly muted, realistic colors work well.
+- **Typography**: Keep text flat to the screen, or map it perfectly to the isometric planes (top, left, right).
+- **Shadows**: Hard, long drop shadows cast at an exact angle (usually -45 or 45 degrees).
+
+## Web Implementation
+- CSS transforms are perfect for this. Combine `rotateX(60deg)` and `rotateZ(-45deg)`.
+- **CSS Example**:
+```css
+.isometric-grid {
+  /* The foundation */
+  transform-style: preserve-3d;
+  transform: rotateX(60deg) rotateZ(-45deg);
+}
+
+.iso-block {
+  width: 100px;
+  height: 100px;
+  background-color: var(--secondary-base);
+  position: relative;
+  transition: transform 0.3s;
+}
+
+/* Creating the 3D block with pseudo-elements */
+.iso-block::before {
+  content: '';
+  position: absolute;
+  width: 20px; /* Depth */
+  height: 100%;
+  background-color: var(--primary-text); /* Darker shade for side */
+  right: 100%;
+  transform-origin: right;
+  transform: skewY(-45deg);
+}
+
+.iso-block::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 20px; /* Depth */
+  background-color: var(--cta-highlight); /* Lightest shade for top/bottom */
+  top: 100%;
+  transform-origin: top;
+  transform: skewX(-45deg);
+}
+
+.iso-block:hover {
+  transform: translateZ(20px) translate(-10px, -10px);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct IsometricView: View {
+    var body: some View {
+        ZStack {
+            Color.white.ignoresSafeArea()
+            
+            // Isometric Stack
+            VStack(spacing: 0) {
+                // Top layer
+                Rectangle()
+                    .fill(Color.blue)
+                    .frame(width: 150, height: 150)
+                    .overlay(Text("TOP").foregroundColor(.white))
+                
+                // Shadow simulation
+                Rectangle()
+                    .fill(Color.black.opacity(0.2))
+                    .frame(width: 150, height: 20)
+            }
+            // The exact 3D transformations for Isometric projection
+            .rotationEffect(.degrees(-45))
+            .rotation3DEffect(.degrees(60), axis: (x: 1, y: 0, z: 0))
+        }
+    }
+}
+```
+- SwiftUI's `.rotation3DEffect` makes this surprisingly easy. Rotate Z by -45 degrees first (via `.rotationEffect`), then rotate X by 60 degrees.
+- You can stack multiple views along the Z-axis (or simulate it with Y offsets before the 3D rotation) to create towering isometric city blocks.
+
+### Flutter
+```dart
+import 'dart:math';
+
+class IsometricScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+        child: Transform(
+          // The Isometric Matrix Math
+          alignment: FractionalOffset.center,
+          transform: Matrix4.identity()
+            ..setEntry(3, 2, 0.001) // perspective
+            ..rotateX(pi / 3) // 60 degrees
+            ..rotateZ(-pi / 4), // -45 degrees
+          child: Container(
+            width: 150,
+            height: 150,
+            decoration: BoxDecoration(
+              color: Colors.blue,
+              boxShadow: [
+                // Hard isometric drop shadow
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.3),
+                  offset: const Offset(20, 20),
+                  blurRadius: 0, // No blur for isometric
+                ),
+              ],
+            ),
+            child: const Center(child: Text('ISO BLOCK', style: TextStyle(color: Colors.white))),
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- `Transform` with `Matrix4` is required in Flutter. Applying `rotateX` and `rotateZ` yields the classic isometric grid.
+- Isometric shadows are usually completely hard (0 `blurRadius`) and offset perfectly along the grid axes.
+
+### React Native
+```jsx
+const IsometricScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFF', justifyContent: 'center', alignItems: 'center' }}>
+      
+      <View style={{
+        width: 150,
+        height: 150,
+        backgroundColor: '#2196F3',
+        justifyContent: 'center',
+        alignItems: 'center',
+        
+        // Isometric Transforms
+        transform: [
+          { rotateX: '60deg' },
+          { rotateZ: '-45deg' }
+        ],
+        
+        // Hard isometric shadow
+        shadowColor: '#000',
+        shadowOffset: { width: 20, height: 20 },
+        shadowOpacity: 0.3,
+        shadowRadius: 0, // Hard edge
+        elevation: 10,
+      }}>
+        <Text style={{ color: '#FFF', fontWeight: 'bold' }}>ISO BLOCK</Text>
+      </View>
+      
+    </View>
+  );
+};
+```
+- The `transform` array processes in order. Apply `rotateX` then `rotateZ`.
+- Hard shadows (`shadowRadius: 0`) sell the illustration look.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun IsometricScreen() {
+    Box(
+        modifier = Modifier.fillMaxSize().background(Color.White),
+        contentAlignment = Alignment.Center
+    ) {
+        Box(
+            modifier = Modifier
+                .graphicsLayer {
+                    // Isometric Transforms
+                    rotationX = 60f
+                    rotationZ = -45f
+                    // Add subtle scale if it gets clipped
+                    scaleX = 0.8f
+                    scaleY = 0.8f
+                }
+                .size(150.dp)
+                // Draw a hard shadow behind the box
+                .drawBehind {
+                    drawRect(
+                        color = Color.Black.copy(alpha = 0.3f),
+                        topLeft = Offset(40f, 40f), // Isometric offset
+                        size = size
+                    )
+                }
+                .background(Color(0xFF2196F3)),
+            contentAlignment = Alignment.Center
+        ) {
+            Text("ISO BLOCK", color = Color.White, fontWeight = FontWeight.Bold)
+        }
+    }
+}
+```
+- Use `Modifier.graphicsLayer` to apply `rotationX` and `rotationZ`. 
+- To get a true hard isometric drop shadow in Compose without elevation blurring, use `Modifier.drawBehind` to manually draw a dark rectangle offset from the main content.
+
+## Do's and Don'ts
+- **DO**: Use it for infographics, feature diagrams, or hero sections.
+- **DON'T**: Build your entire app's functional UI in isometric projection. It's too hard to interact with.
+
+## 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.