opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,247 @@
+---
+name: layered-design
+description: Web and App implementation guide for Layered Design. Trigger when user wants multiple depth levels, floating panels, and overlapping content.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Layered Design
+
+> "Stacking context. Interfaces built from overlapping, independent layers."
+
+
+## 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. **Explicit Overlap**: Elements intentionally overlap each other to break the grid and show depth.
+2. **Clear Stratification**: Every layer must be visually distinct via shadow, border, or contrasting color.
+3. **Parallax Scrolling**: Background layers move slower than foreground layers during interaction/scrolling.
+
+## Visual DNA
+- **Colors**: **Monochromatic Brown** or **Sophisticated Neutral**. Layering works best when the background is distinct from the floating elements.
+- **Typography**: Often large, overlapping text that spans across image and background layers.
+- **Spacing**: Negative space is required around overlapping elements so they don't feel cluttered.
+
+## Web Implementation
+- Heavy use of `position: absolute`, negative margins, and `z-index`.
+- **CSS Example**:
+```css
+.layer-container {
+  position: relative;
+  padding: 100px;
+}
+
+.layer-bg-image {
+  position: absolute;
+  top: 0; right: 0;
+  width: 60%;
+  height: 400px;
+  object-fit: cover;
+  z-index: 1;
+}
+
+.layer-text-box {
+  position: relative;
+  z-index: 2; /* Sits above the image */
+  background: white;
+  padding: 40px;
+  width: 50%;
+  margin-top: 200px; /* Pulls it down over the image */
+  box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+  /* Optional: border to define edge */
+  border-left: 4px solid var(--cta-highlight);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct LayeredDesignView: View {
+    var body: some View {
+        ScrollView {
+            ZStack(alignment: .top) {
+                // Background Image Layer (Back)
+                Image("architectural-bg")
+                    .resizable()
+                    .aspectRatio(contentMode: .fill)
+                    .frame(height: 400)
+                    .offset(x: 40, y: 0) // Shifted right
+                    .zIndex(1)
+                
+                // Content Card Layer (Front)
+                VStack(alignment: .leading, spacing: 16) {
+                    Text("Stacking Context")
+                        .font(.largeTitle).bold()
+                    Text("This card intentionally overlaps the background image to create depth without relying on a grid.")
+                        .foregroundColor(.secondary)
+                }
+                .padding(40)
+                .background(Color.white)
+                .shadow(color: Color.black.opacity(0.1), radius: 30, y: 20)
+                .offset(x: -40, y: 200) // Shifted left and pulled down
+                .zIndex(2)
+            }
+            .padding(.bottom, 200) // Account for the offset
+        }
+    }
+}
+```
+- `ZStack` is the foundation of layered design in SwiftUI.
+- Use `.offset()` to intentionally break the alignment and create overlapping compositions.
+- Explicitly set `.zIndex()` if your offsets might cause unexpected paint orders.
+
+### Flutter
+```dart
+class LayeredDesignScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SingleChildScrollView(
+        child: SizedBox(
+          height: 600, // Fixed height stack or use constraints
+          child: Stack(
+            children: [
+              // Background Image Layer
+              Positioned(
+                top: 0,
+                right: -40, // Shifted offscreen right
+                width: MediaQuery.of(context).size.width * 0.8,
+                height: 400,
+                child: Image.asset('assets/architectural-bg.jpg', fit: BoxFit.cover),
+              ),
+              
+              // Content Card Layer
+              Positioned(
+                top: 250, // Overlaps the bottom of the image
+                left: 20, // Overlaps the left of the image
+                width: MediaQuery.of(context).size.width * 0.7,
+                child: Container(
+                  padding: const EdgeInsets.all(40),
+                  decoration: BoxDecoration(
+                    color: Colors.white,
+                    boxShadow: [
+                      BoxShadow(color: Colors.black.withOpacity(0.1), blurRadius: 30, offset: const Offset(0, 20))
+                    ],
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: const [
+                      Text('Stacking Context', style: TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
+                      SizedBox(height: 16),
+                      Text('This card intentionally overlaps the background image.', style: TextStyle(color: Colors.grey)),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- The `Stack` widget with `Positioned` children is required.
+- You can use negative values in `Positioned` (e.g., `right: -40`) to bleed layers off the edge of the screen, which is a common trope in layered design.
+
+### React Native
+```jsx
+const LayeredDesignScreen = () => {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#F8F8F8' }}>
+      <View style={{ height: 600 }}>
+        
+        {/* Background Image Layer */}
+        <Image 
+          source={{ uri: 'https://example.com/architectural-bg.jpg' }}
+          style={{
+            position: 'absolute',
+            top: 0,
+            right: -40,
+            width: '80%',
+            height: 400,
+            zIndex: 1,
+          }}
+        />
+
+        {/* Content Card Layer */}
+        <View style={{
+          position: 'absolute',
+          top: 250,
+          left: 20,
+          width: '70%',
+          backgroundColor: '#FFF',
+          padding: 40,
+          zIndex: 2,
+          // Deep shadow to separate the layers
+          shadowColor: '#000', shadowOffset: { width: 0, height: 20 },
+          shadowOpacity: 0.1, shadowRadius: 30, elevation: 15,
+        }}>
+          <Text style={{ fontSize: 32, fontWeight: 'bold', marginBottom: 16 }}>Stacking Context</Text>
+          <Text style={{ color: '#666' }}>This card intentionally overlaps the background image.</Text>
+        </View>
+
+      </View>
+    </ScrollView>
+  );
+};
+```
+- Heavy use of `position: 'absolute'` inside a relative container.
+- Manage `zIndex` explicitly. Note that on Android, `elevation` also controls Z-indexing, so the card must have a higher `elevation` than the image.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun LayeredDesignScreen() {
+    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+        Box(modifier = Modifier.height(600.dp).fillMaxWidth()) {
+            
+            // Background Image Layer
+            Image(
+                painter = painterResource(id = R.drawable.architectural_bg),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .align(Alignment.TopEnd)
+                    .offset(x = 40.dp) // Bleed off right edge
+                    .width(300.dp)
+                    .height(400.dp)
+                    .zIndex(1f)
+            )
+            
+            // Content Card Layer
+            Box(
+                modifier = Modifier
+                    .align(Alignment.TopStart)
+                    .offset(x = 20.dp, y = 250.dp) // Overlap the image
+                    .width(280.dp)
+                    .zIndex(2f)
+                    .shadow(30.dp)
+                    .background(Color.White)
+                    .padding(40.dp)
+            ) {
+                Column {
+                    Text("Stacking Context", fontSize = 32.sp, fontWeight = FontWeight.Bold)
+                    Spacer(Modifier.height(16.dp))
+                    Text("This card intentionally overlaps the background image.", color = Color.Gray)
+                }
+            }
+        }
+    }
+}
+```
+- `Box` acts as your stack.
+- Use `Modifier.align()` to set the baseline position, then `Modifier.offset()` to push it out of grid alignment.
+- `Modifier.zIndex()` ensures the content card always renders on top of the image.
+
+## Do's and Don'ts
+- **DO**: Use contrasting colors or drop shadows where layers intersect so the boundary is clear.
+- **DON'T**: Trap interactive elements (like buttons) underneath other layers where they cannot be clicked.
+
+## 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/material-design/SKILL.md

@@ -0,0 +1,275 @@
+---
+name: material-design
+description: Web and App implementation guide for Material Design. Trigger when user wants Google's aesthetic, elevation, motion, and consistent components.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Material Design
+
+> "Digital paper and ink. Interfaces built on the physical properties of stacked material."
+
+
+## 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. **Z-Axis Elevation**: Everything exists on a specific layer. Shadows communicate hierarchy and state.
+2. **Meaningful Motion**: Animations are continuous, guiding the user's focus from one state to the next (e.g., ripple effects, shared element transitions).
+3. **Structured Layout**: Strict adherence to an 8dp baseline grid and specific component anatomies (cards, FABs, app bars).
+
+## Visual DNA
+- **Colors**: Works excellently with **Desert Mirage** or **Minimalist Slate**. Utilize primary, secondary, surface, and error semantic mapping.
+- **Typography**: `Roboto` or `Google Sans` (or equivalent clean geometric sans). Stick strictly to the Material Type Scale (H1-H6, Subtitle, Body, Caption, Overline).
+- **Shapes**: Moderately rounded corners (4px to 16px).
+
+## Web Implementation
+- Do not reinvent the wheel: mimic standard Material elevations.
+- **CSS Example**:
+```css
+.material-card {
+  background: var(--bg-surface);
+  border-radius: 8px;
+  padding: 16px;
+  /* Material Elevation 2 */
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 
+              0 2px 2px 0 rgba(0,0,0,0.14), 
+              0 1px 5px 0 rgba(0,0,0,0.12);
+  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.material-btn {
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 1.25px;
+  padding: 0 16px;
+  height: 36px;
+  border-radius: 4px;
+  background: var(--cta-highlight);
+  color: #fff;
+  border: none;
+  /* Ripple effect is usually handled via JS, but structure is key */
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct MaterialCard: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 12) {
+            Text("Material Card")
+                .font(.system(size: 20, weight: .medium))
+            Text("Digital paper and ink. Shadows communicate where this surface sits.")
+                .font(.system(size: 14))
+                .foregroundColor(.secondary)
+            HStack {
+                Spacer()
+                Button("ACTION") {}
+                    .font(.system(size: 14, weight: .medium))
+                    .foregroundColor(.accentColor)
+                    .padding(.horizontal, 12)
+                    .padding(.vertical, 8)
+            }
+        }
+        .padding(16)
+        .background(Color(.systemBackground))
+        .cornerRadius(8)
+        // Material Elevation 2 equivalent
+        .shadow(color: Color.black.opacity(0.12), radius: 3, x: 0, y: 1)
+        .shadow(color: Color.black.opacity(0.08), radius: 2, x: 0, y: 2)
+    }
+}
+
+// Material FAB
+struct MaterialFAB: View {
+    var body: some View {
+        Button(action: {}) {
+            Image(systemName: "plus")
+                .font(.system(size: 24))
+                .foregroundColor(.white)
+                .frame(width: 56, height: 56)
+                .background(Color.accentColor)
+                .cornerRadius(16)
+                .shadow(color: Color.black.opacity(0.2), radius: 6, x: 0, y: 3)
+                .shadow(color: Color.black.opacity(0.14), radius: 4, x: 0, y: 2)
+        }
+    }
+}
+```
+- Emulate Material elevation levels by stacking multiple `.shadow()` modifiers at different blur/offset values.
+- Use `.cornerRadius(8...16)` — Material Design 3 uses more rounded shapes than M2.
+- Animate shadow changes using `.animation(.easeInOut(duration: 0.28))` — Material uses 280ms transitions.
+
+### Flutter
+```dart
+// Flutter IS Material Design — use it natively
+class MaterialScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      theme: ThemeData(
+        useMaterial3: true,
+        colorSchemeSeed: const Color(0xFF6750A4), // Material You seed
+        // Map your universal palette here
+      ),
+      home: Scaffold(
+        appBar: AppBar(
+          title: const Text('Material Design'),
+          // M3 appbar elevation is 0 by default, scrolled = 3
+        ),
+        body: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Card(
+            elevation: 2,
+            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+            child: Padding(
+              padding: const EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Text('Material Card',
+                    style: Theme.of(context).textTheme.titleLarge),
+                  const SizedBox(height: 8),
+                  Text('Digital paper and ink.',
+                    style: Theme.of(context).textTheme.bodyMedium),
+                  const SizedBox(height: 16),
+                  Align(
+                    alignment: Alignment.centerRight,
+                    child: TextButton(
+                      onPressed: () {},
+                      child: const Text('ACTION'),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+        floatingActionButton: FloatingActionButton(
+          onPressed: () {},
+          child: const Icon(Icons.add),
+          // M3 FAB automatically gets correct elevation & shape
+        ),
+      ),
+    );
+  }
+}
+```
+- **Flutter is the native home of Material Design.** Use `MaterialApp`, `ThemeData(useMaterial3: true)`, and standard widgets.
+- Map the universal palette via `colorSchemeSeed` or manually build a `ColorScheme`.
+- Use the Material type scale via `Theme.of(context).textTheme`.
+- Ripple effects come free with `InkWell` and `ElevatedButton`.
+
+### React Native
+```jsx
+import { Provider as PaperProvider, Card, Button, Title, Paragraph } from 'react-native-paper';
+
+const materialTheme = {
+  ...DefaultTheme,
+  roundness: 8,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: '#6750A4',    // Material You purple
+    surface: '#FFFBFE',
+    background: '#FFFBFE',
+  },
+};
+
+const MaterialScreen = () => (
+  <PaperProvider theme={materialTheme}>
+    <ScrollView style={{ flex: 1, padding: 16 }}>
+      <Card style={{ marginBottom: 16 }} elevation={2}>
+        <Card.Content>
+          <Title>Material Card</Title>
+          <Paragraph>Digital paper and ink. Shadows communicate hierarchy.</Paragraph>
+        </Card.Content>
+        <Card.Actions>
+          <Button mode="text" onPress={() => {}}>ACTION</Button>
+        </Card.Actions>
+      </Card>
+
+      {/* Filled button — Material M3 style */}
+      <Button
+        mode="contained"
+        onPress={() => {}}
+        style={{ alignSelf: 'flex-start', borderRadius: 20 }}
+        labelStyle={{ fontWeight: '500', letterSpacing: 1.25 }}
+      >
+        Filled Button
+      </Button>
+    </ScrollView>
+  </PaperProvider>
+);
+```
+- Use `react-native-paper` — it implements Material Design 3 natively for React Native.
+- Configure the theme to map your universal palettes to Material semantic colors.
+- Use `Card` (with `elevation` prop), `Button` (with `mode` prop), and `TextInput` for correct Material behavior.
+- Ripple effects on Android come free via `Pressable`; on iOS, use `react-native-paper`'s `TouchableRipple`.
+
+### Jetpack Compose
+```kotlin
+// Jetpack Compose IS Material Design — use it natively
+@Composable
+fun MaterialScreen() {
+    MaterialTheme(
+        colorScheme = lightColorScheme(
+            primary = Color(0xFF6750A4),
+            onPrimary = Color.White,
+            surface = Color(0xFFFFFBFE),
+        ),
+        typography = Typography(
+            titleLarge = TextStyle(fontSize = 22.sp, fontWeight = FontWeight.Medium),
+            bodyMedium = TextStyle(fontSize = 14.sp, lineHeight = 20.sp),
+        ),
+    ) {
+        Scaffold(
+            topBar = {
+                TopAppBar(title = { Text("Material Design") })
+            },
+            floatingActionButton = {
+                FloatingActionButton(onClick = {}) {
+                    Icon(Icons.Default.Add, contentDescription = "Add")
+                }
+            },
+        ) { padding ->
+            Column(modifier = Modifier.padding(padding).padding(16.dp)) {
+                Card(
+                    modifier = Modifier.fillMaxWidth(),
+                    elevation = CardDefaults.cardElevation(defaultElevation = 2.dp),
+                    shape = RoundedCornerShape(12.dp),
+                ) {
+                    Column(modifier = Modifier.padding(16.dp)) {
+                        Text("Material Card",
+                            style = MaterialTheme.typography.titleLarge)
+                        Spacer(Modifier.height(8.dp))
+                        Text("Digital paper and ink.",
+                            style = MaterialTheme.typography.bodyMedium)
+                        Spacer(Modifier.height(16.dp))
+                        TextButton(
+                            onClick = {},
+                            modifier = Modifier.align(Alignment.End),
+                        ) { Text("ACTION") }
+                    }
+                }
+            }
+        }
+    }
+}
+```
+- **Jetpack Compose is Material Design.** Use `MaterialTheme`, `Card`, `Scaffold`, `TopAppBar`, and `FloatingActionButton` as-is.
+- Map the universal palette into `lightColorScheme()` or `darkColorScheme()`.
+- Use `MaterialTheme.typography` for the complete type scale.
+- Motion uses `animateFloatAsState` with Material easing: `FastOutSlowInEasing` (equivalent to `cubic-bezier(0.4, 0.0, 0.2, 1)`).
+
+## Do's and Don'ts
+- **DO**: Use the standard Material easing curves for animations (`cubic-bezier(0.4, 0.0, 0.2, 1)`).
+- **DON'T**: Mix overlapping shadows arbitrarily. Elements should clearly sit 'above' or 'below' others.
+
+## 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.