opencode-skills-collection 3.1.0 → 3.1.1

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

@@ -0,0 +1,280 @@
+---
+name: skeuomorphism
+description: Web and App implementation guide for Skeuomorphism. Trigger when user wants UI to mimic real-world objects, realistic textures, or physical metaphors.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Skeuomorphism
+
+> "Digital interfaces that look and behave like their physical counterparts."
+
+
+## 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. **Realistic Textures**: Leather, brushed metal, wood grain, paper. The UI should feel like a physical object you can touch.
+2. **Physical Lighting & Depth**: Intense attention to specular highlights, drop shadows, inner shadows, bevels, and ambient occlusion.
+3. **Real-world Metaphors**: Switches that look like hardware toggles, dials with physical notches, notepads with binding rings.
+
+## Visual DNA
+- **Colors**: Highly dependent on the material being simulated. For rich, classic skeuomorphism, use the **Industrial Chic** (for metal/hardware) or **Monochromatic Brown** (for wood/leather) palettes.
+- **Typography**: Fonts that match the physical object (e.g., typewriter fonts for paper, LCD fonts for digital screens, embossed sans-serifs for hardware buttons).
+- **Details**: Screws, stitching, glare, and gradients are your primary tools.
+
+## Web Implementation
+- Heavy use of layered background images (textures), complex gradients, and multiple box-shadows.
+- **CSS Example**:
+```css
+.skeuo-button {
+  /* Brushed metal effect */
+  background: linear-gradient(180deg, #e0e0e0 0%, #a0a0a0 100%),
+              url('brushed-metal-texture.png');
+  background-blend-mode: overlay;
+  
+  border: 1px solid #7a7a7a;
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+  
+  /* Bevel, inner highlight, and drop shadow */
+  box-shadow: 
+    inset 0 2px 4px rgba(255,255,255,0.8), /* Top highlight */
+    inset 0 -2px 4px rgba(0,0,0,0.4),      /* Bottom shading */
+    0 4px 6px rgba(0,0,0,0.5),             /* Drop shadow */
+    0 1px 1px rgba(0,0,0,0.2);
+}
+
+.skeuo-button:active {
+  /* Pressing the physical button */
+  box-shadow: 
+    inset 0 4px 8px rgba(0,0,0,0.6),
+    inset 0 -1px 2px rgba(255,255,255,0.4),
+    0 1px 1px rgba(0,0,0,0.2);
+  transform: translateY(2px);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SkeuoButton: View {
+    @State private var isPressed = false
+    
+    var body: some View {
+        Button(action: {}) {
+            Text("POWER")
+                .font(.system(size: 14, weight: .bold))
+                .foregroundColor(.white)
+                .textCase(.uppercase)
+        }
+        .frame(width: 80, height: 80)
+        .background(
+            ZStack {
+                // Brushed metal base
+                Circle()
+                    .fill(
+                        LinearGradient(
+                            colors: [Color(white: 0.88), Color(white: 0.63)],
+                            startPoint: .top,
+                            endPoint: .bottom
+                        )
+                    )
+                // Inner highlight (top bevel)
+                Circle()
+                    .stroke(
+                        LinearGradient(
+                            colors: [.white.opacity(0.8), .clear],
+                            startPoint: .top,
+                            endPoint: .center
+                        ),
+                        lineWidth: 2
+                    )
+                    .padding(1)
+            }
+        )
+        .clipShape(Circle())
+        // Outer bezel ring
+        .overlay(Circle().stroke(Color(white: 0.5), lineWidth: 1))
+        // Physical drop shadow
+        .shadow(color: .black.opacity(isPressed ? 0.2 : 0.5), radius: isPressed ? 2 : 6,
+                x: 0, y: isPressed ? 1 : 4)
+        .scaleEffect(isPressed ? 0.96 : 1.0)
+        .animation(.easeOut(duration: 0.1), value: isPressed)
+        .simultaneousGesture(
+            DragGesture(minimumDistance: 0)
+                .onChanged { _ in isPressed = true }
+                .onEnded { _ in isPressed = false }
+        )
+    }
+}
+```
+- Stack multiple shapes (`Circle`, `RoundedRectangle`) with different gradients to build up realistic depth.
+- Use `.overlay()` with stroked shapes for highlight bezels along the edges.
+- The pressed state should reduce shadow AND scale — simulating a physical push.
+
+### Flutter
+```dart
+class SkeuoButton extends StatefulWidget {
+  @override
+  State<SkeuoButton> createState() => _SkeuoButtonState();
+}
+
+class _SkeuoButtonState extends State<SkeuoButton> {
+  bool _isPressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTapDown: (_) => setState(() => _isPressed = true),
+      onTapUp: (_) => setState(() => _isPressed = false),
+      onTapCancel: () => setState(() => _isPressed = false),
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 100),
+        width: 80,
+        height: 80,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          // Brushed metal gradient
+          gradient: LinearGradient(
+            colors: [Colors.grey[300]!, Colors.grey[600]!],
+            begin: Alignment.topCenter,
+            end: Alignment.bottomCenter,
+          ),
+          border: Border.all(color: Colors.grey[500]!, width: 1),
+          boxShadow: [
+            // Outer drop shadow
+            BoxShadow(
+              color: Colors.black.withOpacity(_isPressed ? 0.2 : 0.5),
+              blurRadius: _isPressed ? 4 : 12,
+              offset: Offset(0, _isPressed ? 2 : 6),
+            ),
+            // Inner top highlight (faked with a light inset)
+            BoxShadow(
+              color: Colors.white.withOpacity(0.6),
+              blurRadius: 1,
+              offset: const Offset(0, -1),
+              spreadRadius: -1,
+            ),
+          ],
+        ),
+        transform: Matrix4.identity()..scale(_isPressed ? 0.96 : 1.0),
+        alignment: Alignment.center,
+        child: const Text('POWER',
+          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold,
+            fontSize: 14, shadows: [
+              Shadow(color: Colors.black54, offset: Offset(0, 1), blurRadius: 2),
+            ])),
+      ),
+    );
+  }
+}
+```
+- Use `AnimatedContainer` for smooth press transitions. Adjust `boxShadow`, `transform`, and gradient on tap.
+- Layer `BoxShadow` entries: one for the outer drop shadow, one for the inner top-edge highlight.
+- For complex textures (leather, wood), use `DecorationImage` with an asset file inside `BoxDecoration`.
+
+### React Native
+```jsx
+const SkeuoButton = () => {
+  const [pressed, setPressed] = useState(false);
+  
+  return (
+    <Pressable
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={{
+        width: 80,
+        height: 80,
+        borderRadius: 40,
+        alignItems: 'center',
+        justifyContent: 'center',
+        // Metal gradient must be done via an image or LinearGradient component
+        backgroundColor: '#A0A0A0',
+        borderWidth: 1,
+        borderColor: '#7A7A7A',
+        // Shadow changes on press
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: pressed ? 1 : 4 },
+        shadowOpacity: pressed ? 0.2 : 0.5,
+        shadowRadius: pressed ? 2 : 6,
+        elevation: pressed ? 2 : 8,
+        transform: [{ scale: pressed ? 0.96 : 1 }],
+      }}
+    >
+      <Text style={{
+        color: '#FFF',
+        fontWeight: '700',
+        fontSize: 14,
+        textShadowColor: 'rgba(0,0,0,0.5)',
+        textShadowOffset: { width: 0, height: 1 },
+        textShadowRadius: 2,
+      }}>
+        POWER
+      </Text>
+    </Pressable>
+  );
+};
+```
+- For realistic textures, use `ImageBackground` with exported texture assets (leather.png, brushed-metal.png).
+- Use `Pressable` with `onPressIn`/`onPressOut` to animate shadow depth, scale, and opacity changes.
+- Complex gradient bevels require `react-native-linear-gradient` or `expo-linear-gradient`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SkeuoButton() {
+    var isPressed by remember { mutableStateOf(false) }
+    val scale by animateFloatAsState(if (isPressed) 0.96f else 1f)
+    val elevation by animateDpAsState(if (isPressed) 2.dp else 8.dp)
+    
+    Box(
+        modifier = Modifier
+            .size(80.dp)
+            .graphicsLayer { scaleX = scale; scaleY = scale }
+            .shadow(elevation, CircleShape)
+            .clip(CircleShape)
+            .background(
+                Brush.verticalGradient(
+                    colors = listOf(Color(0xFFE0E0E0), Color(0xFFA0A0A0))
+                )
+            )
+            .border(1.dp, Color(0xFF7A7A7A), CircleShape)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed = true
+                        tryAwaitRelease()
+                        isPressed = false
+                    }
+                )
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Text("POWER",
+            color = Color.White,
+            fontWeight = FontWeight.Bold,
+            fontSize = 14.sp,
+            style = TextStyle(shadow = Shadow(
+                color = Color.Black.copy(alpha = 0.5f),
+                offset = Offset(0f, 2f),
+                blurRadius = 4f,
+            )))
+    }
+}
+```
+- Use `Brush.verticalGradient()` for metallic surfaces and `Modifier.border()` with `CircleShape` for bezels.
+- Animate `shadow` elevation and `graphicsLayer { scaleX/scaleY }` on press for realistic physical push.
+- For textures, use `Modifier.paint(painterResource(R.drawable.brushed_metal))` as a background.
+
+## Do's and Don'ts
+- **DO**: Ensure the metaphor makes sense for the user's task.
+- **DON'T**: Overuse it to the point of clutter. Keep the interactive elements highly realistic, but let the structural layout remain clean.
+
+## 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/soft-pastel/SKILL.md

@@ -0,0 +1,307 @@
+---
+name: soft-pastel
+description: Web and App implementation guide for Soft Pastel Design. Trigger when user wants gentle colors, calming UI, baby/lifestyle branding, or low-contrast aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Soft Pastel Design
+
+> "Calm, airy, and gentle. A low-stress interface built on washed-out, cheerful hues."
+
+
+## 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. **Desaturated, High-Lightness Colors**: Every color is mixed with a heavy amount of white.
+2. **Soft, Rounded Edges**: Border radii are large and friendly.
+3. **Airy Spacing**: Generous whitespace prevents the soft colors from feeling muddy or crowded.
+
+## Visual DNA
+- **Colors**: Mint green, baby blue, blush pink, lavender, and buttercream yellow. Use a warm, slightly off-white background (e.g., `#FFFBF7`) rather than clinical `#FFFFFF`.
+- **Typography**: Soft, rounded sans-serifs (`Quicksand`, `Nunito`) or elegant, low-contrast serifs. Avoid aggressive, ultra-bold fonts.
+- **Shadows**: Very soft, large-spread shadows, often tinted with the pastel color rather than black.
+
+## Web Implementation
+- **CSS Example**:
+```css
+:root {
+  --pastel-bg: #FFFBF7;
+  --pastel-pink: #FFD1DC;
+  --pastel-blue: #AEC6CF;
+  --pastel-green: #B7E4C7;
+  --pastel-text: #4A4A4A; /* Soft dark grey, NOT pure black */
+}
+
+body {
+  background-color: var(--pastel-bg);
+  color: var(--pastel-text);
+  font-family: 'Nunito', sans-serif;
+  line-height: 1.6;
+}
+
+.pastel-card {
+  background-color: #ffffff;
+  border-radius: 24px;
+  padding: 40px;
+  /* Tinted, very soft shadow */
+  box-shadow: 0 20px 40px rgba(174, 198, 207, 0.15); 
+}
+
+.pastel-pill {
+  background-color: var(--pastel-pink);
+  color: #a05a6c; /* Darker version of the pink for contrast */
+  border-radius: 50px;
+  padding: 8px 24px;
+  font-weight: 700;
+  display: inline-block;
+}
+
+.pastel-btn {
+  background-color: var(--pastel-blue);
+  color: #2b5563; /* Darker text */
+  border: none;
+  border-radius: 12px;
+  padding: 16px 32px;
+  transition: transform 0.2s;
+}
+.pastel-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(174, 198, 207, 0.4);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SoftPastelView: View {
+    // Pastel Palette
+    let bg = Color(hex: "FFFBF7")
+    let pink = Color(hex: "FFD1DC")
+    let blue = Color(hex: "AEC6CF")
+    let textDark = Color(hex: "4A4A4A")
+    
+    var body: some View {
+        ScrollView {
+            VStack(spacing: 32) {
+                // Pastel Card
+                VStack(alignment: .leading, spacing: 16) {
+                    Text("Calm & Airy")
+                        .font(.custom("Nunito-Bold", size: 28))
+                        .foregroundColor(textDark)
+                    
+                    Text("Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.")
+                        .font(.custom("Nunito-Regular", size: 16))
+                        .foregroundColor(textDark.opacity(0.8))
+                        .lineSpacing(6)
+                }
+                .padding(40)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .background(Color.white)
+                .cornerRadius(32) // Soft, large radius
+                // Tinted pastel shadow instead of black/gray
+                .shadow(color: blue.opacity(0.2), radius: 30, y: 15)
+                
+                // Pastel Button
+                Button(action: {}) {
+                    Text("Gentle Action")
+                        .font(.custom("Nunito-Bold", size: 18))
+                        .foregroundColor(Color(hex: "2B5563")) // Darker contrast of the blue
+                        .frame(maxWidth: .infinity)
+                        .padding(.vertical, 20)
+                        .background(blue)
+                        .cornerRadius(20)
+                }
+            }
+            .padding(24)
+        }
+        .background(bg.ignoresSafeArea())
+    }
+}
+```
+- A custom font like Nunito or Quicksand is practically required. System fonts are often too rigid.
+- The `shadow(color:)` must be tinted with one of your pastel palette colors, never black or gray.
+- Corner radii should be very large (20-32).
+
+### Flutter
+```dart
+class SoftPastelScreen extends StatelessWidget {
+  final Color bg = const Color(0xFFFFFBF7);
+  final Color pink = const Color(0xFFFFD1DC);
+  final Color blue = const Color(0xFFAEC6CF);
+  final Color textDark = const Color(0xFF4A4A4A);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: bg,
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(24.0),
+        child: Column(
+          children: [
+            // Pastel Card
+            Container(
+              width: double.infinity,
+              padding: const EdgeInsets.all(40),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(32), // Soft edges
+                boxShadow: [
+                  // Tinted shadow
+                  BoxShadow(color: blue.withOpacity(0.2), blurRadius: 30, offset: const Offset(0, 15))
+                ],
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('Calm & Airy', style: TextStyle(fontFamily: 'Nunito', fontSize: 28, fontWeight: FontWeight.bold, color: textDark)),
+                  const SizedBox(height: 16),
+                  Text('Generous whitespace and soft corners.', style: TextStyle(fontFamily: 'Nunito', fontSize: 16, height: 1.6, color: textDark.withOpacity(0.8))),
+                ],
+              ),
+            ),
+            const SizedBox(height: 32),
+            
+            // Pastel Button
+            ElevatedButton(
+              onPressed: () {},
+              style: ElevatedButton.styleFrom(
+                backgroundColor: blue,
+                foregroundColor: const Color(0xFF2B5563), // Darker text for contrast
+                minimumSize: const Size(double.infinity, 60),
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
+                elevation: 0, // Remove default harsh shadow
+              ),
+              child: const Text('Gentle Action', style: TextStyle(fontFamily: 'Nunito', fontSize: 18, fontWeight: FontWeight.bold)),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- Disable `elevation` on Flutter buttons and cards if you want to apply custom tinted drop shadows. Default elevations cast black shadows.
+
+### React Native
+```jsx
+const SoftPastelScreen = () => {
+  const colors = {
+    bg: '#FFFBF7',
+    blue: '#AEC6CF',
+    textDark: '#4A4A4A'
+  };
+
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: colors.bg, padding: 24 }}>
+      
+      {/* Pastel Card */}
+      <View style={{
+        backgroundColor: '#FFFFFF',
+        borderRadius: 32,
+        padding: 40,
+        marginBottom: 32,
+        // iOS tinted shadow
+        shadowColor: colors.blue, shadowOffset: { width: 0, height: 15 },
+        shadowOpacity: 0.2, shadowRadius: 30,
+        // Android tinted shadow (Requires Android 9+)
+        elevation: 10, shadowColor: colors.blue,
+      }}>
+        <Text style={{ fontFamily: 'Nunito-Bold', fontSize: 28, color: colors.textDark, marginBottom: 16 }}>
+          Calm & Airy
+        </Text>
+        <Text style={{ fontFamily: 'Nunito-Regular', fontSize: 16, lineHeight: 26, color: colors.textDark, opacity: 0.8 }}>
+          Generous whitespace and soft corners prevent the desaturated colors from feeling muddy.
+        </Text>
+      </View>
+
+      {/* Pastel Button */}
+      <TouchableOpacity style={{
+        backgroundColor: colors.blue,
+        borderRadius: 20,
+        paddingVertical: 20,
+        alignItems: 'center'
+      }}>
+        <Text style={{ fontFamily: 'Nunito-Bold', fontSize: 18, color: '#2B5563' }}>
+          Gentle Action
+        </Text>
+      </TouchableOpacity>
+      
+    </ScrollView>
+  );
+};
+```
+- Make sure you are using a soft, non-pure-white background (`#FFFBF7`) so that pure `#FFFFFF` cards pop nicely against it without harsh borders.
+- Tinted shadows work on Android 9+ via `shadowColor` combined with `elevation`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SoftPastelScreen() {
+    val bg = Color(0xFFFFFBF7)
+    val blue = Color(0xFFAEC6CF)
+    val textDark = Color(0xFF4A4A4A)
+
+    Column(
+        modifier = Modifier.fillMaxSize().background(bg).verticalScroll(rememberScrollState()).padding(24.dp)
+    ) {
+        // Pastel Card
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .shadow(
+                    elevation = 20.dp, 
+                    shape = RoundedCornerShape(32.dp), 
+                    ambientColor = blue, // Tinted shadow
+                    spotColor = blue
+                )
+                .background(Color.White, RoundedCornerShape(32.dp))
+                .padding(40.dp)
+        ) {
+            Column {
+                Text(
+                    text = "Calm & Airy",
+                    fontSize = 28.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = textDark,
+                    fontFamily = FontFamily.SansSerif // Replace with Nunito
+                )
+                Spacer(Modifier.height(16.dp))
+                Text(
+                    text = "Generous whitespace and soft corners.",
+                    fontSize = 16.sp,
+                    lineHeight = 26.sp,
+                    color = textDark.copy(alpha = 0.8f),
+                    fontFamily = FontFamily.SansSerif
+                )
+            }
+        }
+        
+        Spacer(Modifier.height(32.dp))
+        
+        // Pastel Button
+        Button(
+            onClick = { },
+            colors = ButtonDefaults.buttonColors(containerColor = blue, contentColor = Color(0xFF2B5563)),
+            shape = RoundedCornerShape(20.dp),
+            modifier = Modifier.fillMaxWidth().height(60.dp),
+            elevation = null
+        ) {
+            Text("Gentle Action", fontSize = 18.sp, fontWeight = FontWeight.Bold)
+        }
+    }
+}
+```
+- The `shadow` modifier in Compose takes `ambientColor` and `spotColor`. Set both to your pastel accent color to achieve the soft tinted glow.
+
+## Do's and Don'ts
+- **DO**: Use illustrative assets that match the pastel vibe (flat vectors, soft gradients).
+- **DON'T**: Use stark black borders, sharp corners, or high-saturation primary 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.