opencode-skills-collection 3.1.0 → 3.1.1

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

@@ -0,0 +1,262 @@
+---
+name: card-based-design
+description: Web and App implementation guide for Card-Based Design. Trigger when user wants information cards, Pinterest-style layouts, and bite-sized content containers.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Card-Based Design
+
+> "Bite-sized consumption. Encapsulating discrete pieces of information into distinct visual containers."
+
+
+## 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. **Encapsulation**: Every card is self-contained. It has an image, a title, a short description, and usually an action (like a button or a 'like' icon).
+2. **Responsive Flow**: Cards easily reflow on different screen sizes (from a 4-column grid on desktop to a single column on mobile).
+3. **Clear Boundaries**: Cards must visually pop off the background.
+
+## Visual DNA
+- **Colors**: Very flexible. The background should be slightly darker or distinct from the card color. **Sophisticated Neutral** works well for a premium feel.
+- **Typography**: Clear hierarchy within the card (Header, Subheader, Body).
+- **Styling**: Standard `border-radius: 8px` and a medium drop shadow.
+
+## Web Implementation
+- CSS Grid with `auto-fit` or a Masonry layout.
+- **CSS Example**:
+```css
+body {
+  background-color: #f0f2f5; /* Standard app background */
+  padding: 40px;
+}
+
+.card-grid {
+  display: grid;
+  /* Auto-responsive magic */
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: 24px;
+}
+
+.card {
+  background: #ffffff;
+  border-radius: 12px;
+  overflow: hidden; /* Keep images inside the rounded corners */
+  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+  transition: transform 0.2s, box-shadow 0.2s;
+  display: flex;
+  flex-direction: column;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+}
+
+.card-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-bottom: 1px solid #eee;
+}
+
+.card-content {
+  padding: 20px;
+  flex-grow: 1; /* Pushes footer to the bottom */
+}
+
+.card-footer {
+  padding: 16px 20px;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct ContentCard: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            // Image Area
+            Rectangle()
+                .fill(Color.gray.opacity(0.2))
+                .frame(height: 160)
+            
+            // Content Area
+            VStack(alignment: .leading, spacing: 8) {
+                Text("Card Title")
+                    .font(.headline)
+                Text("A brief description of the content inside this discrete card container.")
+                    .font(.subheadline)
+                    .foregroundColor(.secondary)
+                    .lineLimit(2)
+            }
+            .padding(16)
+        }
+        .background(Color.white)
+        .cornerRadius(12)
+        // Clean, subtle drop shadow
+        .shadow(color: Color.black.opacity(0.08), radius: 12, x: 0, y: 4)
+    }
+}
+
+// In your view:
+// LazyVGrid(columns: [GridItem(.adaptive(minimum: 160), spacing: 16)]) { ... }
+```
+- `VStack` inside a background with `.cornerRadius` and `.shadow` is the standard.
+- Use `LazyVGrid` with `.adaptive(minimum: 160)` to automatically create a multi-column card grid that flows perfectly on iPad or iPhone.
+
+### Flutter
+```dart
+class ContentCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 4, // Handles shadow natively
+      shadowColor: Colors.black.withOpacity(0.4),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      clipBehavior: Clip.antiAlias, // Critical: stops images from bleeding over corners
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Image Area
+          Container(
+            height: 160,
+            color: Colors.grey[300],
+            width: double.infinity,
+          ),
+          // Content Area
+          Padding(
+            padding: const EdgeInsets.all(16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: const [
+                Text('Card Title', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
+                SizedBox(height: 8),
+                Text(
+                  'A brief description of the content inside this discrete card container.',
+                  style: TextStyle(color: Colors.black54),
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+// In your view: Use GridView.builder for the layout
+```
+- The native `Card` widget does almost all the heavy lifting.
+- **Critical fix**: You must set `clipBehavior: Clip.antiAlias` on the `Card`, otherwise the top corners of your images will peek outside the border radius.
+
+### React Native
+```jsx
+const ContentCard = () => {
+  return (
+    <View style={styles.card}>
+      <View style={styles.imageArea} />
+      <View style={styles.contentArea}>
+        <Text style={styles.title}>Card Title</Text>
+        <Text style={styles.description} numberOfLines={2}>
+          A brief description of the content inside this discrete card container.
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    backgroundColor: '#FFF',
+    borderRadius: 12,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+    elevation: 4,
+    margin: 8,
+    overflow: 'hidden', // Keeps image inside borders
+  },
+  imageArea: {
+    height: 160,
+    backgroundColor: '#E0E0E0',
+  },
+  contentArea: {
+    padding: 16,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '600',
+    marginBottom: 8,
+  },
+  description: {
+    color: '#666',
+  }
+});
+// In your view: <FlatList numColumns={2} data={data} renderItem={...} />
+```
+- Wrap everything in a View with `borderRadius` and `overflow: 'hidden'`.
+- `elevation: 4` provides the drop shadow on Android, while the `shadow*` props handle iOS.
+- For a Pinterest/Masonry style (columns of different heights), you must use a third-party library like `react-native-masonry-list`, as `FlatList` cannot do varying row heights in columns.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun ContentCard() {
+    // ElevatedCard provides the shadow and shape natively
+    ElevatedCard(
+        elevation = CardDefaults.elevatedCardElevation(defaultElevation = 4.dp),
+        shape = RoundedCornerShape(12.dp),
+        colors = CardDefaults.elevatedCardColors(containerColor = Color.White),
+        modifier = Modifier.fillMaxWidth().padding(8.dp)
+    ) {
+        Column {
+            // Image Area
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(160.dp)
+                    .background(Color.LightGray)
+            )
+            
+            // Content Area
+            Column(modifier = Modifier.padding(16.dp)) {
+                Text(
+                    text = "Card Title",
+                    style = MaterialTheme.typography.titleMedium,
+                    fontWeight = FontWeight.Bold
+                )
+                Spacer(Modifier.height(8.dp))
+                Text(
+                    text = "A brief description of the content inside this discrete card container.",
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = Color.Gray,
+                    maxLines = 2,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
+        }
+    }
+}
+// In your view: LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 160.dp)) { ... }
+```
+- `ElevatedCard` is the perfect Material 3 component for this. It handles clipping and shadows automatically.
+- Use `GridCells.Adaptive(minSize = 160.dp)` in a `LazyVerticalGrid` to achieve an auto-flowing grid identical to CSS Grid `auto-fit`.
+
+## Do's and Don'ts
+- **DO**: Make the entire card clickable, not just the title or image.
+- **DON'T**: Put too much text in a card. If the user has to scroll *within* a card, the card is too big.
+
+## 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/claymorphism/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: claymorphism
+description: Web and App implementation guide for Claymorphism. Trigger when user wants soft 3D elements, rounded shapes, and a playful, tactile appearance.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Claymorphism
+
+> "Like interacting with a pristine, digital claymation set. Soft, bubbly, and incredibly approachable."
+
+
+## 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. **Fluffy 3D Volume**: Elements look like inflated balloons or soft clay blocks.
+2. **Double Inner Shadows**: The signature of claymorphism is an inset light shadow on the top-left and an inset dark shadow on the bottom-right, giving 3D volume to a solid shape.
+3. **Continuous Curves**: Maximum border-radius. No sharp edges exist in this universe.
+
+## Visual DNA
+- **Colors**: Thrives on pastels and bright, friendly hues. **Desert Mirage**, **Earth-Grounded Elegance**, or custom pastel palettes work best.
+- **Typography**: Playful, thick, rounded fonts (e.g., `Sniglet`, `Fredoka One`, `Nunito`).
+- **Shapes**: 'Squicles' (squares with heavily rounded, continuous corners) and perfect circles.
+
+## Web Implementation
+- Distinct from Neumorphism: Claymorphism elements detach from the background (they have drop shadows) and use inner shadows to create volume, often using colors that contrast with the background.
+- **CSS Example**:
+```css
+.clay-card {
+  background-color: #F8B4A6; /* Soft coral */
+  border-radius: 32px;
+  padding: 40px;
+  
+  /* 
+    1. Outer drop shadow (detaches from background)
+    2. Inner top-left highlight (volume)
+    3. Inner bottom-right shadow (volume)
+  */
+  box-shadow: 
+    8px 8px 24px rgba(0, 0, 0, 0.15),           /* Outer */
+    inset -8px -8px 16px rgba(0, 0, 0, 0.1),    /* Inner dark */
+    inset 8px 8px 16px rgba(255, 255, 255, 0.4); /* Inner light */
+    
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy */
+}
+
+.clay-card:hover {
+  transform: translateY(-5px) scale(1.02);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct ClayCard: View {
+    @State private var isPressed = false
+    
+    var body: some View {
+        VStack(spacing: 16) {
+            Image(systemName: "cloud.sun.fill")
+                .font(.system(size: 48))
+                .foregroundColor(.white)
+            Text("Claymorphic Card")
+                .font(.system(size: 20, weight: .bold, design: .rounded))
+                .foregroundColor(.white)
+        }
+        .padding(40)
+        .background(Color(red: 0.97, green: 0.71, blue: 0.65)) // Soft coral
+        .cornerRadius(32)
+        // Outer shadow — detaches from background
+        .shadow(color: .black.opacity(0.15), radius: 12, x: 8, y: 8)
+        // Inner highlight (top-left) — faked with overlay
+        .overlay(
+            RoundedRectangle(cornerRadius: 32)
+                .stroke(
+                    LinearGradient(
+                        colors: [.white.opacity(0.5), .clear, .black.opacity(0.1)],
+                        startPoint: .topLeading,
+                        endPoint: .bottomTrailing
+                    ),
+                    lineWidth: 3
+                )
+        )
+        // Bouncy spring animation on tap
+        .scaleEffect(isPressed ? 0.95 : 1.0)
+        .animation(.interpolatingSpring(stiffness: 300, damping: 10), value: isPressed)
+        .onTapGesture { }
+        .simultaneousGesture(
+            DragGesture(minimumDistance: 0)
+                .onChanged { _ in isPressed = true }
+                .onEnded { _ in isPressed = false }
+        )
+    }
+}
+```
+- The "clay" volume comes from a gradient stroke overlay: white on top-left, dark on bottom-right.
+- Use `.interpolatingSpring(stiffness: 300, damping: 10)` for the bouncy feel — critical for clay aesthetics.
+- Background color should be pastel/bright but NOT the same as the parent (unlike neumorphism).
+
+### Flutter
+```dart
+class ClayCard extends StatefulWidget {
+  @override
+  State<ClayCard> createState() => _ClayCardState();
+}
+
+class _ClayCardState extends State<ClayCard> with SingleTickerProviderStateMixin {
+  double _scale = 1.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTapDown: (_) => setState(() => _scale = 0.95),
+      onTapUp: (_) => setState(() => _scale = 1.0),
+      onTapCancel: () => setState(() => _scale = 1.0),
+      child: AnimatedScale(
+        scale: _scale,
+        duration: const Duration(milliseconds: 200),
+        curve: Curves.elasticOut,  // Bouncy clay feel
+        child: Container(
+          padding: const EdgeInsets.all(40),
+          decoration: BoxDecoration(
+            color: const Color(0xFFF8B4A6), // Soft coral
+            borderRadius: BorderRadius.circular(32),
+            boxShadow: [
+              // Outer shadow
+              BoxShadow(
+                color: Colors.black.withOpacity(0.15),
+                offset: const Offset(8, 8),
+                blurRadius: 24,
+              ),
+            ],
+            // Gradient border for the clay volume effect
+            border: GradientBorder(
+              gradient: LinearGradient(
+                colors: [
+                  Colors.white.withOpacity(0.5),
+                  Colors.transparent,
+                  Colors.black.withOpacity(0.1),
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
+              width: 3,
+            ),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Icon(Icons.wb_sunny, size: 48, color: Colors.white),
+              const SizedBox(height: 16),
+              const Text('Claymorphic Card',
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold,
+                  color: Colors.white)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Use `Curves.elasticOut` or `Curves.bounceOut` for the spring animation — essential for the clay feeling.
+- Gradient borders require a custom `ShapeDecoration` or a `Stack` with a gradient container behind the main container.
+- Alternative for inner shadow: use `flutter_inset_box_shadow` package with light top-left and dark bottom-right insets.
+
+### React Native
+```jsx
+const ClayCard = () => {
+  const scale = useRef(new Animated.Value(1)).current;
+  
+  const pressIn = () => {
+    Animated.spring(scale, {
+      toValue: 0.95,
+      friction: 3,      // Low friction = bouncy
+      tension: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+  
+  const pressOut = () => {
+    Animated.spring(scale, {
+      toValue: 1,
+      friction: 3,
+      tension: 100,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  return (
+    <Pressable onPressIn={pressIn} onPressOut={pressOut}>
+      <Animated.View style={{
+        transform: [{ scale }],
+        padding: 40,
+        backgroundColor: '#F8B4A6',
+        borderRadius: 32,
+        alignItems: 'center',
+        // Outer shadow
+        shadowColor: '#000',
+        shadowOffset: { width: 8, height: 8 },
+        shadowOpacity: 0.15,
+        shadowRadius: 12,
+        elevation: 8,
+        // Gradient border must be faked with a wrapper or SVG
+        borderWidth: 3,
+        borderColor: 'rgba(255,255,255,0.3)', // Simplified — top highlight
+      }}>
+        <Text style={{ fontSize: 48 }}>☀️</Text>
+        <Text style={{
+          fontSize: 20, fontWeight: '700', color: '#FFF', marginTop: 16,
+        }}>
+          Claymorphic Card
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+```
+- Use `Animated.spring` with low `friction` (3-5) for the signature bouncy clay behavior.
+- Gradient borders aren't possible natively — use a solid white-tinted border as a simplified approximation, or wrap in an `expo-linear-gradient` View.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun ClayCard() {
+    var isPressed by remember { mutableStateOf(false) }
+    val scale by animateFloatAsState(
+        targetValue = if (isPressed) 0.95f else 1f,
+        animationSpec = spring(dampingRatio = 0.3f, stiffness = 300f),
+    )
+    
+    Box(
+        modifier = Modifier
+            .graphicsLayer { scaleX = scale; scaleY = scale }
+            .shadow(8.dp, RoundedCornerShape(32.dp))
+            .clip(RoundedCornerShape(32.dp))
+            .background(Color(0xFFF8B4A6))
+            .border(
+                3.dp,
+                Brush.linearGradient(
+                    colors = listOf(
+                        Color.White.copy(alpha = 0.5f),
+                        Color.Transparent,
+                        Color.Black.copy(alpha = 0.1f),
+                    ),
+                    start = Offset.Zero,
+                    end = Offset.Infinite,
+                ),
+                RoundedCornerShape(32.dp),
+            )
+            .padding(40.dp)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed = true
+                        tryAwaitRelease()
+                        isPressed = false
+                    },
+                )
+            },
+        contentAlignment = Alignment.Center,
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            Icon(Icons.Default.WbSunny, tint = Color.White,
+                modifier = Modifier.size(48.dp))
+            Spacer(Modifier.height(16.dp))
+            Text("Claymorphic Card",
+                fontSize = 20.sp, fontWeight = FontWeight.Bold, color = Color.White)
+        }
+    }
+}
+```
+- Use `spring(dampingRatio = 0.3f)` — low damping = bouncy. This is the core of the clay feeling.
+- Gradient borders work natively in Compose via `Modifier.border(width, Brush.linearGradient(...), shape)`.
+- Use `Modifier.clip()` before `.background()` to ensure the rounded corners clip content properly.
+
+## Do's and Don'ts
+- **DO**: Use highly bouncy, spring-based animations to reinforce the soft, physical nature of the "clay."
+- **DON'T**: Use thin, delicate fonts. They will get lost against the heavy, voluminous UI elements.
+
+## 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.