opencode-skills-collection 3.1.0 → 3.1.1

package/bundled-skills/design-it/flat-design-2/SKILL.md

@@ -0,0 +1,240 @@
+---
+name: flat-design-2
+description: Web and App implementation guide for Flat Design 2.0 (Semi-Flat). Trigger when the user wants flat design with subtle shadows and improved usability.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Flat Design 2.0 (Semi-Flat)
+
+> "Flat aesthetics, but with subtle hints of physics to communicate interactability."
+
+
+## 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. **Mostly Flat**: The primary aesthetic remains 2D and solid.
+2. **Subtle Elevation**: Use extremely soft, large-spread shadows strictly to indicate interactable elements (buttons, floating action buttons) or layers (modals).
+3. **Micro-Gradients**: Occasional, barely noticeable linear gradients to prevent large surfaces from feeling dead.
+
+## Visual DNA
+- **Colors**: Pairs well with **Warm Tech** or **Earth-Grounded Elegance**.
+- **Typography**: Clean, readable sans-serifs.
+- **Shadows**: Shadows must be low opacity, high blur, and usually tinted with the background color, not pure black.
+
+## Web Implementation
+- **CSS Example**:
+```css
+:root {
+  --shadow-color: rgba(43, 48, 58, 0.08); /* Tinted shadow */
+}
+
+.flat2-card {
+  background-color: var(--bg-primary);
+  border-radius: 8px;
+  padding: 32px;
+  /* Very subtle, diffuse shadow */
+  box-shadow: 0 10px 30px var(--shadow-color);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.flat2-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(43, 48, 58, 0.12);
+}
+
+.flat2-btn {
+  background: var(--cta-highlight);
+  border-radius: 4px;
+  padding: 12px 24px;
+  color: white;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SemiFlatCard: View {
+    @State private var isPressed = false
+    
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Text("Semi-Flat Card")
+                .font(.system(size: 18, weight: .semibold))
+            Text("Flat aesthetic with just enough depth to hint at interactivity.")
+                .font(.system(size: 15))
+                .foregroundColor(.secondary)
+        }
+        .padding(24)
+        .background(Color(.systemBackground))
+        .cornerRadius(8)
+        // The key: very soft, tinted shadow — NOT harsh black
+        .shadow(color: Color.black.opacity(0.06), radius: 12, x: 0, y: 4)
+        .scaleEffect(isPressed ? 0.98 : 1.0)
+        .animation(.easeOut(duration: 0.2), value: isPressed)
+        .onLongPressGesture(minimumDuration: .infinity, pressing: { pressing in
+            isPressed = pressing
+        }, perform: {})
+    }
+}
+
+struct SemiFlatButton: View {
+    var body: some View {
+        Button(action: {}) {
+            Text("Continue")
+                .font(.system(size: 15, weight: .semibold))
+                .foregroundColor(.white)
+                .padding(.horizontal, 24)
+                .padding(.vertical, 12)
+                .background(Color.accentColor)
+                .cornerRadius(4)
+                // Subtle button shadow
+                .shadow(color: Color.accentColor.opacity(0.25), radius: 8, x: 0, y: 4)
+        }
+        .buttonStyle(.plain)
+    }
+}
+```
+- Shadow color should be tinted (e.g., `Color.accentColor.opacity(0.15)`), never pure black.
+- Use `radius: 10...16` with `opacity: 0.05...0.08` — if you can immediately see the shadow, it's too heavy.
+- Add subtle `scaleEffect` on press to hint at physical feedback.
+
+### Flutter
+```dart
+class SemiFlatCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(8),
+        // Very soft, tinted shadow
+        boxShadow: [
+          BoxShadow(
+            color: const Color(0xFF2B303A).withOpacity(0.08),
+            blurRadius: 24,
+            offset: const Offset(0, 8),
+            spreadRadius: 0,
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Text('Semi-Flat Card',
+            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
+          const SizedBox(height: 16),
+          const Text('Flat aesthetic with just enough depth to hint at interactivity.',
+            style: TextStyle(fontSize: 15, color: Colors.black54)),
+          const SizedBox(height: 20),
+          ElevatedButton(
+            onPressed: () {},
+            style: ElevatedButton.styleFrom(
+              elevation: 2,  // Very low — just enough to feel clickable
+              shadowColor: Theme.of(context).primaryColor.withOpacity(0.3),
+              backgroundColor: Theme.of(context).primaryColor,
+              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            ),
+            child: const Text('Continue', style: TextStyle(fontWeight: FontWeight.w600)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Use `elevation: 1` to `elevation: 4` max. Never exceed `elevation: 6`.
+- Tint the `shadowColor` to match the card's background or the brand color.
+- Use `InkWell` for ripple effects and a slight `Transform.translate` animation on press.
+
+### React Native
+```jsx
+const SemiFlatCard = () => (
+  <View style={{
+    padding: 24,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    // Very subtle, diffuse shadow
+    shadowColor: '#2B303A',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.08,
+    shadowRadius: 24,
+    // Android
+    elevation: 3,
+  }}>
+    <Text style={{ fontSize: 18, fontWeight: '600', marginBottom: 16 }}>
+      Semi-Flat Card
+    </Text>
+    <Text style={{ fontSize: 15, color: '#666', marginBottom: 20 }}>
+      Flat aesthetic with just enough depth to hint at interactivity.
+    </Text>
+    <Pressable
+      style={({ pressed }) => ({
+        backgroundColor: '#4A90D9',
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        borderRadius: 4,
+        alignSelf: 'flex-start',
+        transform: [{ scale: pressed ? 0.97 : 1 }],
+        shadowColor: '#4A90D9',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 8,
+      })}
+    >
+      <Text style={{ color: '#FFF', fontWeight: '600' }}>Continue</Text>
+    </Pressable>
+  </View>
+);
+```
+- On iOS use `shadowOpacity: 0.05...0.10` with `shadowRadius: 16...24` for a diffuse spread.
+- On Android, `elevation: 2...4` is equivalent. Avoid going above `elevation: 6`.
+- Use `Pressable` with `({ pressed })` style callback for animated press states.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SemiFlatCard() {
+    Card(
+        modifier = Modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(8.dp),
+        elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+        colors = CardDefaults.cardColors(containerColor = Color.White),
+    ) {
+        Column(modifier = Modifier.padding(24.dp)) {
+            Text("Semi-Flat Card", fontSize = 18.sp, fontWeight = FontWeight.SemiBold)
+            Spacer(Modifier.height(16.dp))
+            Text("Flat aesthetic with just enough depth to hint at interactivity.",
+                fontSize = 15.sp, color = Color(0xFF666666))
+            Spacer(Modifier.height(20.dp))
+            Button(
+                onClick = {},
+                shape = RoundedCornerShape(4.dp),
+                elevation = ButtonDefaults.buttonElevation(defaultElevation = 2.dp),
+                contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp),
+            ) {
+                Text("Continue", fontWeight = FontWeight.SemiBold)
+            }
+        }
+    }
+}
+```
+- Use `CardDefaults.cardElevation(defaultElevation = 2.dp)` — keep it under 4dp.
+- On hover/press: `hoveredElevation = 4.dp, pressedElevation = 1.dp` for subtle physics.
+- Tint shadows by using `Modifier.shadow(elevation, shape, ambientColor, spotColor)` with custom tinted colors.
+
+## Do's and Don'ts
+- **DO**: Keep shadows incredibly subtle. If you immediately notice the shadow, it's too dark.
+- **DON'T**: Use inner shadows, heavy gradients, or skeuomorphic textures.
+
+## 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/floating-ui/SKILL.md

@@ -0,0 +1,299 @@
+---
+name: floating-ui
+description: Web and App implementation guide for Floating UI. Trigger when user wants detached cards, elevated components, and a light, airy feel.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Floating UI
+
+> "Defying gravity. Elements that hover effortlessly above the surface."
+
+
+## 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. **Detachment**: UI elements (like nav bars, sidebars, or main content cards) do not touch the edges of the screen. They float with margins on all sides.
+2. **Soft, Diffuse Shadows**: Large, highly blurred shadows directly beneath elements.
+3. **Pill Shapes & Rounds**: Fully rounded corners (pill shapes) enhance the floating, bubble-like aesthetic.
+
+## Visual DNA
+- **Colors**: **Earth-Grounded Elegance** or **Minimalist Slate**. Use a slightly tinted background (off-white or very light gray) so the floating white elements pop.
+- **Typography**: Clean, airy sans-serifs with generous line height.
+- **Layout**: The "floating island" pattern for navigation (a pill-shaped nav bar centered at the bottom or top of the screen).
+
+## Web Implementation
+- Focus on large margins and specific shadow styles.
+- **CSS Example**:
+```css
+body {
+  background-color: var(--bg-primary); /* e.g., #F4F4F9 */
+  padding: 24px; /* Ensure nothing touches the edge */
+}
+
+.floating-nav {
+  position: fixed;
+  bottom: 32px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: white;
+  border-radius: 50px; /* Pill shape */
+  padding: 12px 32px;
+  
+  /* Large, soft shadow */
+  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
+  
+  display: flex;
+  gap: 24px;
+}
+
+.floating-card {
+  background: white;
+  border-radius: 24px;
+  padding: 32px;
+  margin-bottom: 24px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct FloatingUIView: View {
+    var body: some View {
+        ZStack {
+            // Very light background
+            Color(red: 0.95, green: 0.95, blue: 0.97).ignoresSafeArea()
+            
+            ScrollView {
+                VStack(spacing: 24) {
+                    // Floating Content Card
+                    VStack(alignment: .leading, spacing: 12) {
+                        Text("Floating Card")
+                            .font(.title2).fontWeight(.bold)
+                        Text("This card hovers above the background, with massive soft shadows and completely rounded corners.")
+                            .foregroundColor(.secondary)
+                    }
+                    .padding(32)
+                    .frame(maxWidth: .infinity, alignment: .leading)
+                    .background(Color.white)
+                    .cornerRadius(32) // Very large radius
+                    // Large, highly blurred shadow
+                    .shadow(color: Color.black.opacity(0.05), radius: 30, x: 0, y: 15)
+                    .padding(.horizontal, 24) // Keeps it detached from edges
+                }
+                .padding(.top, 40)
+            }
+            
+            // Floating Pill Navigation
+            VStack {
+                Spacer()
+                HStack(spacing: 40) {
+                    Image(systemName: "house.fill").foregroundColor(.blue)
+                    Image(systemName: "magnifyingglass").foregroundColor(.gray)
+                    Image(systemName: "bell.fill").foregroundColor(.gray)
+                    Image(systemName: "person.fill").foregroundColor(.gray)
+                }
+                .padding(.vertical, 16)
+                .padding(.horizontal, 32)
+                .background(Color.white)
+                .clipShape(Capsule()) // Pill shape
+                .shadow(color: Color.black.opacity(0.1), radius: 25, x: 0, y: 10)
+                .padding(.bottom, 32) // Detached from bottom edge
+            }
+        }
+    }
+}
+```
+- A `.clipShape(Capsule())` with a massive `.shadow()` creates the perfect floating pill navigation bar.
+- Push the `.shadow(radius: ...)` up to 25 or 30 with a very low opacity (0.05) to get the soft, diffuse hover effect.
+
+### Flutter
+```dart
+class FloatingUIScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF4F4F9),
+      body: Stack(
+        children: [
+          ListView(
+            padding: const EdgeInsets.all(24),
+            children: [
+              // Floating Content Card
+              Container(
+                margin: const EdgeInsets.only(bottom: 24),
+                padding: const EdgeInsets.all(32),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(32), // Large radius
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withOpacity(0.05),
+                      blurRadius: 30,
+                      offset: const Offset(0, 15),
+                    )
+                  ],
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: const [
+                    Text('Floating Card', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
+                    SizedBox(height: 12),
+                    Text('This card hovers above the background.', style: TextStyle(color: Colors.grey)),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          
+          // Floating Bottom Nav
+          Align(
+            alignment: Alignment.bottomCenter,
+            child: Container(
+              margin: const EdgeInsets.only(bottom: 32),
+              padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(50), // Pill shape
+                boxShadow: [
+                  BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 25, offset: const Offset(0, 10))
+                ],
+              ),
+              child: Row(
+                mainAxisSize: MainAxisSize.min, // Wrap content
+                children: const [
+                  Icon(Icons.home, color: Colors.blue),
+                  SizedBox(width: 40),
+                  Icon(Icons.search, color: Colors.grey),
+                  SizedBox(width: 40),
+                  Icon(Icons.person, color: Colors.grey),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Avoid the native `BottomNavigationBar`. Instead, use a `Stack` and `Align(alignment: Alignment.bottomCenter)` with a `Container` to build the floating pill menu.
+- Use `blurRadius: 30` in `BoxShadow` for the diffuse look.
+
+### React Native
+```jsx
+const FloatingUIScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#F4F4F9' }}>
+      <ScrollView contentContainerStyle={{ padding: 24 }}>
+        {/* Floating Card */}
+        <View style={styles.floatingCard}>
+          <Text style={{ fontSize: 24, fontWeight: 'bold', marginBottom: 12 }}>Floating Card</Text>
+          <Text style={{ color: '#666' }}>This card hovers above the background, detached from all edges.</Text>
+        </View>
+      </ScrollView>
+
+      {/* Floating Pill Nav */}
+      <View style={styles.floatingNav}>
+        <Text style={{ fontSize: 20 }}>🏠</Text>
+        <Text style={{ fontSize: 20, opacity: 0.5 }}>🔍</Text>
+        <Text style={{ fontSize: 20, opacity: 0.5 }}>👤</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  floatingCard: {
+    backgroundColor: '#FFF',
+    borderRadius: 32,
+    padding: 32,
+    marginBottom: 24,
+    // iOS shadow
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 15 },
+    shadowOpacity: 0.05,
+    shadowRadius: 30,
+    // Android shadow
+    elevation: 8,
+  },
+  floatingNav: {
+    position: 'absolute',
+    bottom: 40,
+    alignSelf: 'center',
+    flexDirection: 'row',
+    backgroundColor: '#FFF',
+    borderRadius: 50,
+    paddingVertical: 16,
+    paddingHorizontal: 32,
+    gap: 40, // Needs RN 0.71+
+    
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 10 },
+    shadowOpacity: 0.1,
+    shadowRadius: 25,
+    elevation: 10,
+  }
+});
+```
+- `position: 'absolute'` with `alignSelf: 'center'` is the easiest way to place the pill nav in React Native.
+- Android's `elevation` doesn't support massive blur radii very well, so the effect is stronger and softer on iOS.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun FloatingUIScreen() {
+    Box(modifier = Modifier.fillMaxSize().background(Color(0xFFF4F4F9))) {
+        Column(
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(24.dp)
+        ) {
+            // Floating Card
+            Box(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .shadow(15.dp, RoundedCornerShape(32.dp), spotColor = Color.Black.copy(alpha = 0.05f))
+                    .background(Color.White, RoundedCornerShape(32.dp))
+                    .padding(32.dp)
+            ) {
+                Column {
+                    Text("Floating Card", fontSize = 24.sp, fontWeight = FontWeight.Bold)
+                    Spacer(Modifier.height(12.dp))
+                    Text("This card hovers above the background.", color = Color.Gray)
+                }
+            }
+        }
+        
+        // Floating Pill Nav
+        Row(
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 32.dp)
+                .shadow(20.dp, CircleShape, spotColor = Color.Black.copy(alpha = 0.1f))
+                .background(Color.White, CircleShape)
+                .padding(horizontal = 32.dp, vertical = 16.dp),
+            horizontalArrangement = Arrangement.spacedBy(40.dp)
+        ) {
+            Icon(Icons.Default.Home, contentDescription = null, tint = Color.Blue)
+            Icon(Icons.Default.Search, contentDescription = null, tint = Color.Gray)
+            Icon(Icons.Default.Person, contentDescription = null, tint = Color.Gray)
+        }
+    }
+}
+```
+- Use `CircleShape` for the pill nav background.
+- Crucially, lower the `alpha` of the `spotColor` in `Modifier.shadow` to achieve the soft, diffuse shadow look, otherwise Compose defaults to a harsh, dark shadow.
+
+## Do's and Don'ts
+- **DO**: Animate floating elements! A slow, continuous 2px up/down translateY animation makes them feel truly buoyant.
+- **DON'T**: Pin elements to the screen edges (except perhaps background images).
+
+## 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.