opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/neumorphism/SKILL.md

@@ -0,0 +1,248 @@
+---
+name: neumorphism
+description: Web and App implementation guide for Neumorphism (Soft UI). Trigger when user wants soft shadows, extruded appearance, and light source simulation.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Neumorphism (Soft UI)
+
+> "Elements extruded from the background material itself, shaped by a singular, persistent light source."
+
+
+## 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. **Unified Surface Color**: The background and the elements MUST share the exact same base color.
+2. **Dual Shadows**: Elements are shaped by two shadows: a light shadow (highlight) on the side facing the light source, and a dark shadow on the opposite side.
+3. **No Borders**: The shape is entirely defined by the shadows.
+
+## Visual DNA
+- **Colors**: Works best with mid-tone neutrals. **Desert Mirage**, **Earth-Grounded Elegance**, or **Sophisticated Neutral** are perfect. Avoid pure white or pure black (shadows/highlights won't show).
+- **Typography**: Soft, rounded sans-serifs (e.g., `Nunito`, `Quicksand`).
+- **Shapes**: Pill shapes, rounded rectangles. Sharp corners break the illusion of extruded material.
+
+## Web Implementation
+- The magic is entirely in `box-shadow` manipulating light and dark variants of the base color.
+- **CSS Example**:
+```css
+:root {
+  --base-color: #E6E2DD; /* From Sophisticated Neutral */
+  --highlight: #ffffff;
+  --shadow: #c4c0bc;
+}
+
+body {
+  background-color: var(--base-color);
+}
+
+.neu-element {
+  background-color: var(--base-color);
+  border-radius: 20px;
+  /* Top-left highlight, Bottom-right shadow */
+  box-shadow:  9px 9px 18px var(--shadow),
+              -9px -9px 18px var(--highlight);
+  padding: 32px;
+}
+
+.neu-pressed {
+  /* Inset shadows for pressed/active state */
+  border-radius: 20px;
+  background: var(--base-color);
+  box-shadow: inset 9px 9px 18px var(--shadow),
+              inset -9px -9px 18px var(--highlight);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct NeuCard: View {
+    let baseColor = Color(red: 0.90, green: 0.89, blue: 0.87) // #E6E2DD
+    
+    var body: some View {
+        VStack(spacing: 24) {
+            Text("Neumorphic Card")
+                .font(.system(size: 20, weight: .semibold, design: .rounded))
+            
+            Text("Extruded from the surface itself.")
+                .font(.system(size: 15, design: .rounded))
+                .foregroundColor(.secondary)
+        }
+        .padding(32)
+        .background(baseColor)
+        .cornerRadius(20)
+        // Light shadow (top-left)
+        .shadow(color: Color.white.opacity(0.7), radius: 10, x: -8, y: -8)
+        // Dark shadow (bottom-right)
+        .shadow(color: Color.black.opacity(0.15), radius: 10, x: 8, y: 8)
+    }
+}
+
+// Pressed / inset neumorphic button
+struct NeuButton: View {
+    @State private var isPressed = false
+    let baseColor = Color(red: 0.90, green: 0.89, blue: 0.87)
+    
+    var body: some View {
+        Button(action: {}) {
+            Text("Press Me")
+                .font(.system(size: 16, weight: .semibold, design: .rounded))
+                .foregroundColor(.primary)
+                .padding(.horizontal, 32)
+                .padding(.vertical, 16)
+        }
+        .background(
+            Group {
+                if isPressed {
+                    // Inset effect using inner shadow (ZStack trick)
+                    RoundedRectangle(cornerRadius: 16)
+                        .fill(baseColor)
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 16)
+                                .stroke(baseColor, lineWidth: 4)
+                                .shadow(color: Color.black.opacity(0.2), radius: 4, x: 4, y: 4)
+                                .clipShape(RoundedRectangle(cornerRadius: 16))
+                        )
+                        .overlay(
+                            RoundedRectangle(cornerRadius: 16)
+                                .stroke(baseColor, lineWidth: 4)
+                                .shadow(color: Color.white.opacity(0.7), radius: 4, x: -4, y: -4)
+                                .clipShape(RoundedRectangle(cornerRadius: 16))
+                        )
+                } else {
+                    RoundedRectangle(cornerRadius: 16)
+                        .fill(baseColor)
+                        .shadow(color: Color.white.opacity(0.7), radius: 10, x: -8, y: -8)
+                        .shadow(color: Color.black.opacity(0.15), radius: 10, x: 8, y: 8)
+                }
+            }
+        )
+        .buttonStyle(.plain)
+        .simultaneousGesture(
+            DragGesture(minimumDistance: 0)
+                .onChanged { _ in isPressed = true }
+                .onEnded { _ in isPressed = false }
+        )
+    }
+}
+```
+- The key trick: two `.shadow()` modifiers — one white (top-left), one dark (bottom-right).
+- Inner shadow (pressed state) requires a ZStack/overlay hack since SwiftUI doesn't have native `inset` shadows. Clip stroked shapes to simulate.
+- The view's background color MUST match its parent's background exactly.
+
+### Flutter
+```dart
+class NeuCard extends StatelessWidget {
+  final Color baseColor = const Color(0xFFE6E2DD);
+  
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(32),
+      decoration: BoxDecoration(
+        color: baseColor,
+        borderRadius: BorderRadius.circular(20),
+        boxShadow: [
+          // Dark shadow (bottom-right)
+          BoxShadow(
+            color: Colors.black.withOpacity(0.15),
+            offset: const Offset(8, 8),
+            blurRadius: 16,
+          ),
+          // Light shadow (top-left)
+          BoxShadow(
+            color: Colors.white.withOpacity(0.7),
+            offset: const Offset(-8, -8),
+            blurRadius: 16,
+          ),
+        ],
+      ),
+      child: Column(
+        children: [
+          const Text('Neumorphic Card',
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.w600)),
+          const SizedBox(height: 16),
+          Text('Extruded from the surface itself.',
+            style: TextStyle(fontSize: 15, color: Colors.black54)),
+        ],
+      ),
+    );
+  }
+}
+```
+- **Inner shadows** (for pressed state) are NOT natively supported in Flutter's `BoxShadow`.
+- Use the `flutter_inset_box_shadow` package OR fake it with a layered `Stack`: place a `Container` with a dark gradient overlay on top and a light gradient below.
+- Set the `Scaffold` background to the SAME `baseColor` so elements look extruded.
+
+### React Native
+```jsx
+const NeuCard = () => (
+  <View style={{
+    padding: 32,
+    backgroundColor: '#E6E2DD',
+    borderRadius: 20,
+    // Light shadow (top-left) — iOS only supports one shadow
+    shadowColor: '#FFFFFF',
+    shadowOffset: { width: -8, height: -8 },
+    shadowOpacity: 0.7,
+    shadowRadius: 10,
+    // Android — use elevation for basic shadow
+    elevation: 8,
+  }}>
+    <Text style={{ fontSize: 20, fontWeight: '600' }}>Neumorphic Card</Text>
+    <Text style={{ fontSize: 15, color: '#888', marginTop: 16 }}>
+      Extruded from the surface itself.
+    </Text>
+  </View>
+);
+```
+- **Major limitation**: React Native only supports ONE shadow per view. True neumorphism requires TWO opposing shadows.
+- **Workaround**: Use `react-native-shadow-2` or `react-native-neomorph-shadows` which provide multi-shadow support.
+- Alternative: Wrap two nested `View`s — the outer one has the dark shadow, the inner one has the light shadow.
+- Inner shadows for pressed states require SVG-based solutions or pre-rendered images.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun NeuCard() {
+    val baseColor = Color(0xFFE6E2DD)
+    
+    Box(
+        modifier = Modifier
+            .padding(24.dp)
+            .shadow(
+                elevation = 8.dp,
+                shape = RoundedCornerShape(20.dp),
+                ambientColor = Color.Black.copy(alpha = 0.15f),
+                spotColor = Color.Black.copy(alpha = 0.15f),
+            )
+            .background(baseColor, RoundedCornerShape(20.dp))
+            .padding(32.dp)
+    ) {
+        Column {
+            Text("Neumorphic Card",
+                fontSize = 20.sp, fontWeight = FontWeight.SemiBold)
+            Spacer(Modifier.height(16.dp))
+            Text("Extruded from the surface itself.",
+                fontSize = 15.sp, color = Color(0xFF888888))
+        }
+    }
+}
+```
+- **Compose limitation**: Like React Native, Compose `Modifier.shadow()` only supports a single directional shadow.
+- For true dual-shadow neumorphism, use a custom `Modifier.drawBehind { }` with `drawIntoCanvas` to paint two separate shadow paths (one light, one dark).
+- The `neumorphic-compose` library provides a pre-built `Modifier.neumorphic()` that handles both shadows.
+- Set the `Scaffold` background to the same `baseColor` — this is non-negotiable.
+
+## Do's and Don'ts
+- **DO**: Use inset shadows for "active" states (like pressed buttons or filled form fields).
+- **DON'T**: Rely on Neumorphism for critical elements without secondary indicators. Contrast is inherently low, making it an accessibility nightmare if used improperly.
+
+## 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/retro-design/SKILL.md

@@ -0,0 +1,283 @@
+---
+name: retro-design
+description: Web and App implementation guide for Retro Design (60s-80s). Trigger when user wants vintage aesthetics, warm muted colors, and nostalgic layouts.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Retro Design
+
+> "A warm, analog feeling. Nostalgia through muted tones, grain, and classic typography."
+
+
+## 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. **Warm, Analog Color Palettes**: Colors look faded by the sun or printed on aged paper.
+2. **Texture and Noise**: A slight grain overlay to simulate film or old print media.
+3. **Classic Typography Pairings**: Heavy, groovy display fonts paired with typewriter or classic serif body copy.
+
+## Visual DNA
+- **Colors**: **Monochromatic Brown** or warm, faded palettes (mustard yellow, burnt orange, sage green, off-white).
+- **Typography**: Display fonts like `Cooper Black`, `Garamond`, or `Courier`.
+- **Styling**: Badges, stamps, wavy borders, and halftone patterns.
+
+## Web Implementation
+- Use CSS filters and background noise images to create texture.
+- **CSS Example**:
+```css
+body {
+  background-color: #F4E8D1; /* Aged paper */
+  color: #3E2723; /* Deep brown ink */
+  font-family: 'Georgia', serif;
+  
+  /* Apply a subtle noise overlay using a pseudo-element or background image */
+  background-image: url('noise-texture.png');
+  background-blend-mode: multiply;
+}
+
+.retro-header {
+  font-family: 'Cooper Black', serif;
+  font-size: 4rem;
+  color: #D35400; /* Burnt orange */
+  text-shadow: 2px 2px 0px #F1C40F; /* Mustard yellow drop shadow */
+  letter-spacing: -1px;
+}
+
+.retro-card {
+  background-color: #FFF3E0;
+  border: 2px solid #3E2723;
+  border-radius: 12px;
+  padding: 24px;
+  
+  /* Vintage offset shadow */
+  box-shadow: 8px 8px 0px #795548;
+}
+
+.retro-badge {
+  display: inline-block;
+  background-color: #E74C3C;
+  color: #F4E8D1;
+  font-family: monospace;
+  font-weight: bold;
+  padding: 8px 16px;
+  border-radius: 50%; /* Make it look like a sticker */
+  transform: rotate(-10deg);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct RetroCard: View {
+    let paperColor = Color(red: 0.96, green: 0.91, blue: 0.82) // #F4E8D1
+    let inkColor = Color(red: 0.24, green: 0.15, blue: 0.14) // #3E2723
+    
+    var body: some View {
+        ZStack {
+            paperColor.ignoresSafeArea()
+            
+            // Optional: Noise texture
+            Image("film_grain")
+                .resizable()
+                .blendMode(.multiply)
+                .opacity(0.3)
+                .ignoresSafeArea()
+            
+            VStack(alignment: .leading, spacing: 24) {
+                Text("RETRO DESIGN")
+                    .font(.custom("Cooper Black", size: 36))
+                    .foregroundColor(Color(red: 0.83, green: 0.33, blue: 0.0)) // #D35400
+                    .shadow(color: Color(red: 0.95, green: 0.77, blue: 0.06), radius: 0, x: 2, y: 2)
+                
+                Text("Analog warmth and classic typography.")
+                    .font(.custom("Georgia", size: 18))
+                    .foregroundColor(inkColor)
+            }
+            .padding(32)
+            .background(Color(red: 1.0, green: 0.95, blue: 0.88))
+            .cornerRadius(12)
+            .overlay(
+                RoundedRectangle(cornerRadius: 12)
+                    .stroke(inkColor, lineWidth: 2)
+            )
+            // Vintage solid offset shadow
+            .shadow(color: Color(red: 0.47, green: 0.33, blue: 0.28), radius: 0, x: 8, y: 8)
+        }
+    }
+}
+```
+- A grain texture image can be overlaid using `.blendMode(.multiply)`. Be aware of memory usage with full-screen textures.
+- Use `.shadow(radius: 0)` to create the hard offset shadows typical of 70s print media.
+- Custom fonts like Cooper Black are absolutely required.
+
+### Flutter
+```dart
+class RetroCard extends StatelessWidget {
+  final Color paperColor = const Color(0xFFF4E8D1);
+  final Color inkColor = const Color(0xFF3E2723);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: paperColor,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Noise texture
+          Opacity(
+            opacity: 0.3,
+            child: Image.asset('assets/film_grain.png', 
+              fit: BoxFit.cover, 
+              colorBlendMode: BlendMode.multiply),
+          ),
+          Center(
+            child: Container(
+              padding: const EdgeInsets.all(32),
+              decoration: BoxDecoration(
+                color: const Color(0xFFFFF3E0),
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(color: inkColor, width: 2),
+                boxShadow: const [
+                  BoxShadow(
+                    color: Color(0xFF795548),
+                    blurRadius: 0, // Hard offset shadow
+                    offset: Offset(8, 8),
+                  ),
+                ],
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  const Text('RETRO DESIGN',
+                    style: TextStyle(
+                      fontFamily: 'Cooper',
+                      fontSize: 36,
+                      color: Color(0xFFD35400),
+                      shadows: [Shadow(color: Color(0xFFF1C40F), offset: Offset(2, 2))],
+                    )),
+                  const SizedBox(height: 24),
+                  Text('Analog warmth and classic typography.',
+                    style: TextStyle(fontFamily: 'Georgia', fontSize: 18, color: inkColor)),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Wrap backgrounds in a `Stack` to place a semi-transparent film grain asset over the solid color.
+- Drop shadows for text and containers must have `blurRadius: 0` to emulate offset misregistered ink prints.
+
+### React Native
+```jsx
+const RetroCard = () => {
+  return (
+    <ImageBackground 
+      source={require('./film_grain.png')}
+      style={{ flex: 1, backgroundColor: '#F4E8D1', padding: 24, justifyContent: 'center' }}
+      imageStyle={{ opacity: 0.3, tintColor: '#3E2723' }}
+    >
+      <View style={{
+        backgroundColor: '#FFF3E0',
+        padding: 32,
+        borderRadius: 12,
+        borderWidth: 2,
+        borderColor: '#3E2723',
+        // Hard drop shadow
+        shadowColor: '#795548',
+        shadowOffset: { width: 8, height: 8 },
+        shadowOpacity: 1,
+        shadowRadius: 0,
+        elevation: 8, // Fallback for Android, though it blurs
+      }}>
+        <Text style={{
+          fontFamily: 'CooperBlack',
+          fontSize: 36,
+          color: '#D35400',
+          textShadowColor: '#F1C40F',
+          textShadowOffset: { width: 2, height: 2 },
+          textShadowRadius: 0,
+          marginBottom: 24
+        }}>
+          RETRO DESIGN
+        </Text>
+        <Text style={{ fontFamily: 'Georgia', fontSize: 18, color: '#3E2723' }}>
+          Analog warmth and classic typography.
+        </Text>
+      </View>
+    </ImageBackground>
+  );
+};
+```
+- Use `ImageBackground` on the root view for the grain.
+- Android's `elevation` cannot do unblurred offset shadows natively. Use `react-native-drop-shadow` for perfect retro shadows on Android.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun RetroCard() {
+    val inkColor = Color(0xFF3E2723)
+    
+    Box(modifier = Modifier.fillMaxSize().background(Color(0xFFF4E8D1))) {
+        // Noise Texture Overlay
+        Image(
+            painter = painterResource(id = R.drawable.film_grain),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.matchParentSize().alpha(0.3f),
+            colorFilter = ColorFilter.tint(Color.Black, BlendMode.Multiply)
+        )
+        
+        Box(
+            modifier = Modifier
+                .align(Alignment.Center)
+                .padding(24.dp)
+                // Fake hard shadow in compose by drawing behind
+                .drawBehind {
+                    drawRoundRect(
+                        color = Color(0xFF795548),
+                        topLeft = Offset(8.dp.toPx(), 8.dp.toPx()),
+                        size = size,
+                        cornerRadius = CornerRadius(12.dp.toPx())
+                    )
+                }
+                .background(Color(0xFFFFF3E0), RoundedCornerShape(12.dp))
+                .border(2.dp, inkColor, RoundedCornerShape(12.dp))
+                .padding(32.dp)
+        ) {
+            Column {
+                Text("RETRO DESIGN",
+                    fontFamily = FontFamily(Font(R.font.cooper_black)),
+                    fontSize = 36.sp,
+                    color = Color(0xFFD35400),
+                    style = TextStyle(shadow = Shadow(Color(0xFFF1C40F), Offset(4f, 4f), 0f))
+                )
+                Spacer(Modifier.height(24.dp))
+                Text("Analog warmth and classic typography.",
+                    fontFamily = FontFamily.Serif,
+                    fontSize = 18.sp,
+                    color = inkColor)
+            }
+        }
+    }
+}
+```
+- Native `Modifier.shadow` creates soft blurs. Use `Modifier.drawBehind` to draw an offset `drawRoundRect` for the hard retro shadow block.
+- Text shadows support hard offsets perfectly via `Shadow(color, offset, blurRadius = 0f)`.
+
+## Do's and Don'ts
+- **DO**: Use slightly off-white backgrounds (cream, beige) instead of pure `#FFFFFF` to simulate aged paper.
+- **DON'T**: Use sleek, modern geometric sans-serifs or tech-focused neon colors.
+
+## 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.