opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,328 @@
+---
+name: editorial-design
+description: Web and App implementation guide for Editorial Design. Trigger when user wants a magazine-inspired layout, large headlines, and elegant typography pairing.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Editorial Design
+
+> "The digital magazine. Sophisticated typography pairings and deliberate, elegant pacing."
+
+
+## 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. **Serif & Sans-Serif Pairing**: The hallmark of editorial design. A beautiful, high-contrast serif for headings, paired with a clean sans-serif for body copy.
+2. **Large Drop Caps & Pull Quotes**: Typographic flourishes that guide the eye and break up long blocks of text.
+3. **Columnar Layouts**: Content flows in distinct columns, often with fine lines (rules) separating them.
+
+## Visual DNA
+- **Colors**: **Modern Editorial** or **Yacht Club**. Warm, paper-like backgrounds with deep, ink-like blacks or navy blues.
+- **Typography**: 
+  - Headlines: `Playfair Display`, `Merriweather`, `Bodoni`.
+  - Body: `Lato`, `Open Sans`, `Source Sans Pro`.
+- **Borders**: Thin, elegant horizontal lines (hairlines) used to separate sections.
+
+## Web Implementation
+- **CSS Example**:
+```css
+body {
+  background-color: #F9F9F9; /* Paper white */
+  color: #121212; /* Ink black */
+}
+
+/* Typography Pairing */
+.editorial-headline {
+  font-family: 'Playfair Display', serif;
+  font-size: 4rem;
+  font-weight: 700;
+  font-style: italic;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #121212;
+  padding-bottom: 24px;
+}
+
+.editorial-body {
+  font-family: 'Lato', sans-serif;
+  font-size: 1.1rem;
+  line-height: 1.8;
+  column-count: 2; /* Magazine columns */
+  column-gap: 40px;
+}
+
+/* Drop Cap */
+.editorial-body::first-letter {
+  font-family: 'Playfair Display', serif;
+  font-size: 4rem;
+  float: left;
+  line-height: 0.8;
+  padding-right: 12px;
+  color: var(--cta-highlight);
+}
+
+.pull-quote {
+  font-family: 'Playfair Display', serif;
+  font-size: 2rem;
+  text-align: center;
+  margin: 48px 0;
+  padding: 24px 0;
+  border-top: 2px solid #121212;
+  border-bottom: 2px solid #121212;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct EditorialView: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 24) {
+                // Editorial Headline
+                Text("The Digital\nMagazine")
+                    .font(.custom("Playfair Display", size: 48))
+                    .fontWeight(.bold)
+                    .italic()
+                    .foregroundColor(Color(white: 0.05))
+                    .padding(.bottom, 16)
+                
+                Divider().background(Color.black)
+                
+                // Drop Cap and Body
+                HStack(alignment: .top, spacing: 8) {
+                    Text("I")
+                        .font(.custom("Playfair Display", size: 64))
+                        .foregroundColor(Color(red: 0.7, green: 0.2, blue: 0.2))
+                        // Negative padding to pull the body text tighter to the drop cap
+                        .padding(.top, -10) 
+                    
+                    Text("n an era of sterile, flat interfaces, the return to elegant typography feels like a breath of fresh air. The interplay of serif and sans-serif...")
+                        .font(.custom("Lato", size: 16))
+                        .lineSpacing(6)
+                        .foregroundColor(Color(white: 0.1))
+                }
+                
+                // Pull Quote
+                VStack {
+                    Divider().background(Color.black)
+                    Text("“Sophistication is in the spacing.”")
+                        .font(.custom("Playfair Display", size: 28))
+                        .italic()
+                        .multilineTextAlignment(.center)
+                        .padding(.vertical, 24)
+                    Divider().background(Color.black)
+                }
+                .padding(.vertical, 24)
+            }
+            .padding(24)
+        }
+        .background(Color(red: 0.98, green: 0.98, blue: 0.96)) // Warm paper white
+    }
+}
+```
+- Extensive use of `.font(.custom())` is mandatory. System fonts look too app-like.
+- Use `Divider()` to create the hairlines that are so common in print design.
+- A fake "drop cap" can be achieved with an `HStack` aligning top.
+
+### Flutter
+```dart
+class EditorialScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF9F9F8), // Paper background
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(24.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 40),
+            const Text(
+              'The Digital\nMagazine',
+              style: TextStyle(fontFamily: 'PlayfairDisplay', fontSize: 48, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, height: 1.1),
+            ),
+            const SizedBox(height: 24),
+            const Divider(color: Colors.black, thickness: 1),
+            const SizedBox(height: 24),
+            // Body with Drop Cap simulation using RichText is complex, 
+            // a simpler Row approach works well enough for mobile.
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const Text(
+                  'I',
+                  style: TextStyle(fontFamily: 'PlayfairDisplay', fontSize: 72, height: 1.0, color: Color(0xFF8B0000)),
+                ),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: const Text(
+                    'n an era of sterile, flat interfaces, the return to elegant typography feels like a breath of fresh air. The interplay of serif and sans-serif brings humanity back to the screen.',
+                    style: TextStyle(fontFamily: 'Lato', fontSize: 16, height: 1.6, color: Colors.black87),
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 48),
+            // Pull Quote
+            const Divider(color: Colors.black, thickness: 2),
+            const Padding(
+              padding: EdgeInsets.symmetric(vertical: 32.0),
+              child: Center(
+                child: Text(
+                  '“Sophistication is in the spacing.”',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(fontFamily: 'PlayfairDisplay', fontSize: 28, fontStyle: FontStyle.italic),
+                ),
+              ),
+            ),
+            const Divider(color: Colors.black, thickness: 2),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- Set `height` parameters in `TextStyle` (line-height). `1.6` is a good editorial body height.
+- Use `Divider` with `thickness: 2` for the heavy rules around pull quotes.
+
+### React Native
+```jsx
+const EditorialScreen = () => {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#F9F9F8', padding: 24 }}>
+      <Text style={{ 
+        fontFamily: 'PlayfairDisplay-BoldItalic', 
+        fontSize: 48, 
+        color: '#121212', 
+        lineHeight: 52,
+        marginTop: 40,
+        marginBottom: 24 
+      }}>
+        The Digital{'\n'}Magazine
+      </Text>
+      
+      <View style={{ height: 1, backgroundColor: '#121212', marginBottom: 24 }} />
+      
+      <View style={{ flexDirection: 'row' }}>
+        <Text style={{ 
+          fontFamily: 'PlayfairDisplay-Bold', 
+          fontSize: 72, 
+          color: '#8B0000',
+          lineHeight: 80,
+          marginTop: -10, // Adjust alignment
+          marginRight: 8
+        }}>
+          I
+        </Text>
+        <Text style={{ 
+          flex: 1, 
+          fontFamily: 'Lato-Regular', 
+          fontSize: 16, 
+          lineHeight: 26, 
+          color: '#333' 
+        }}>
+          n an era of sterile, flat interfaces, the return to elegant typography feels like a breath of fresh air. The interplay of serif and sans-serif brings humanity.
+        </Text>
+      </View>
+      
+      {/* Pull Quote */}
+      <View style={{ 
+        borderTopWidth: 2, borderBottomWidth: 2, borderColor: '#121212', 
+        marginTop: 48, paddingVertical: 32 
+      }}>
+        <Text style={{ 
+          fontFamily: 'PlayfairDisplay-Italic', 
+          fontSize: 28, 
+          textAlign: 'center', 
+          color: '#121212' 
+        }}>
+          “Sophistication is in the spacing.”
+        </Text>
+      </View>
+    </ScrollView>
+  );
+};
+```
+- Line heights and fonts are everything. You must have custom fonts linked in your React Native project for this style to work.
+- Use `borderTopWidth` and `borderBottomWidth` on a container `View` to create the pull quote styling.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun EditorialScreen() {
+    // Assuming Playfair and Lato are defined in FontFamily
+    val playfair = FontFamily.Serif 
+    val lato = FontFamily.SansSerif
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFFF9F9F8))
+            .verticalScroll(rememberScrollState())
+            .padding(24.dp)
+    ) {
+        Spacer(Modifier.height(40.dp))
+        
+        Text(
+            text = "The Digital\nMagazine",
+            fontFamily = playfair,
+            fontSize = 48.sp,
+            fontWeight = FontWeight.Bold,
+            fontStyle = FontStyle.Italic,
+            lineHeight = 52.sp,
+            color = Color(0xFF121212)
+        )
+        
+        Spacer(Modifier.height(24.dp))
+        Divider(color = Color(0xFF121212), thickness = 1.dp)
+        Spacer(Modifier.height(24.dp))
+        
+        Row(verticalAlignment = Alignment.Top) {
+            Text(
+                text = "I",
+                fontFamily = playfair,
+                fontSize = 72.sp,
+                color = Color(0xFF8B0000),
+                modifier = Modifier.offset(y = (-10).dp).padding(end = 8.dp)
+            )
+            Text(
+                text = "n an era of sterile, flat interfaces, the return to elegant typography feels like a breath of fresh air. The interplay of serif and sans-serif.",
+                fontFamily = lato,
+                fontSize = 16.sp,
+                lineHeight = 26.sp,
+                color = Color(0xFF333333)
+            )
+        }
+        
+        Spacer(Modifier.height(48.dp))
+        
+        // Pull Quote
+        Divider(color = Color(0xFF121212), thickness = 2.dp)
+        Text(
+            text = "“Sophistication is in the spacing.”",
+            fontFamily = playfair,
+            fontSize = 28.sp,
+            fontStyle = FontStyle.Italic,
+            textAlign = TextAlign.Center,
+            modifier = Modifier.fillMaxWidth().padding(vertical = 32.dp)
+        )
+        Divider(color = Color(0xFF121212), thickness = 2.dp)
+    }
+}
+```
+- Compose handles custom fonts and line heights (`26.sp`) very elegantly.
+- Use `Divider()` for the hairlines. Adjust thickness as needed for headers vs pull quotes.
+
+## Do's and Don'ts
+- **DO**: Treat the interface like a printed page. Margins should be generous.
+- **DON'T**: Clutter the UI with typical app components like floating action buttons or heavy navigation bars. Keep it 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/flat-design/SKILL.md

@@ -0,0 +1,221 @@
+---
+name: flat-design
+description: Web and App implementation guide for the Flat Design style. Trigger when the user wants no shadows, simple shapes, and bold colors.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Flat Design
+
+> "Digital surfaces should look digital. Embrace the 2D plane."
+
+
+## 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. **Zero Depth**: Absolutely no drop shadows, bevels, gradients, or 3D effects. Everything sits on the same z-axis.
+2. **Sharp & Simple Geometries**: Perfect circles, sharp rectangles. No complex organic shapes.
+3. **High Contrast Solid Colors**: Rely on stark contrast between solid blocks of color to delineate space.
+
+## Visual DNA
+- **Colors**: Pairs well with **Industrial Chic** or **Modern Editorial**. Avoid gradients entirely.
+- **Typography**: Strong, highly legible sans-serifs (e.g., `Roboto`, `Open Sans`). Keep it medium to bold.
+- **Icons**: Solid, monochromatic, glyph-style icons without intricate details.
+
+## Web Implementation
+- Rely entirely on background colors and borders for structure.
+- **CSS Example**:
+```css
+.flat-card {
+  background-color: var(--secondary-base);
+  border: 2px solid var(--primary-text);
+  border-radius: 0; /* Sharp corners preferred */
+  padding: 32px;
+  /* NO box-shadow */
+}
+.flat-btn {
+  background-color: var(--cta-highlight);
+  color: #fff;
+  border: none;
+  padding: 16px 32px;
+  font-weight: 700;
+  text-transform: uppercase;
+  transition: opacity 0.2s;
+}
+.flat-btn:hover {
+  opacity: 0.8; /* Only change opacity or solid color on hover, no lifting */
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct FlatCard: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Text("Card Title")
+                .font(.system(size: 18, weight: .bold))
+            
+            Text("Content without any depth effects.")
+                .font(.system(size: 15))
+                .foregroundColor(.secondary)
+            
+            Button(action: {}) {
+                Text("ACTION")
+                    .font(.system(size: 14, weight: .bold))
+                    .foregroundColor(.white)
+                    .padding(.horizontal, 24)
+                    .padding(.vertical, 12)
+                    .background(Color.blue)
+                    // No cornerRadius — sharp edges
+            }
+        }
+        .padding(24)
+        .background(Color(.secondarySystemBackground))
+        // NO .shadow() — ever
+        // NO .cornerRadius() — sharp rectangles
+        .overlay(
+            Rectangle().stroke(Color.primary.opacity(0.2), lineWidth: 1)
+        )
+    }
+}
+```
+- Never use `.shadow()` or `.cornerRadius()`. Elements are flat rectangles.
+- Use `.overlay(Rectangle().stroke(...))` for visible borders instead of shadows to delineate space.
+- Hover/tap states should only change `opacity` or swap a solid background color.
+
+### Flutter
+```dart
+class FlatCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(24),
+      decoration: BoxDecoration(
+        color: Colors.grey[100],
+        border: Border.all(color: Colors.black26, width: 1),
+        // borderRadius: NONE — sharp corners
+        // boxShadow: NONE — zero depth
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Text('Card Title',
+            style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
+          const SizedBox(height: 16),
+          const Text('Content without any depth effects.',
+            style: TextStyle(fontSize: 15, color: Colors.black54)),
+          const SizedBox(height: 16),
+          ElevatedButton(
+            onPressed: () {},
+            style: ElevatedButton.styleFrom(
+              elevation: 0,           // Critical: no shadow
+              backgroundColor: Colors.blue,
+              foregroundColor: Colors.white,
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.zero, // Sharp corners
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            ),
+            child: const Text('ACTION',
+              style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Override `ThemeData` globally to kill all elevation:
+  ```dart
+  ThemeData(
+    cardTheme: const CardTheme(elevation: 0, shape: RoundedRectangleBorder()),
+    appBarTheme: const AppBarTheme(elevation: 0),
+    floatingActionButtonTheme: const FloatingActionButtonThemeData(elevation: 0),
+  )
+  ```
+- Use `Container` with `BoxDecoration` instead of `Card` widget to avoid default elevation.
+
+### React Native
+```jsx
+const FlatCard = () => (
+  <View style={{
+    padding: 24,
+    backgroundColor: '#F0F0F0',
+    borderWidth: 1,
+    borderColor: '#CCCCCC',
+    // NO borderRadius
+    // NO elevation or shadow properties
+  }}>
+    <Text style={{ fontSize: 18, fontWeight: '700', marginBottom: 16 }}>
+      Card Title
+    </Text>
+    <Text style={{ fontSize: 15, color: '#666', marginBottom: 16 }}>
+      Content without any depth effects.
+    </Text>
+    <TouchableOpacity
+      style={{
+        backgroundColor: '#2196F3',
+        paddingHorizontal: 24,
+        paddingVertical: 12,
+        alignSelf: 'flex-start',
+        // NO borderRadius, NO elevation
+      }}
+      activeOpacity={0.7}
+    >
+      <Text style={{ color: '#FFF', fontWeight: '700', letterSpacing: 1 }}>
+        ACTION
+      </Text>
+    </TouchableOpacity>
+  </View>
+);
+```
+- Explicitly set `elevation: 0` and remove ALL shadow properties (`shadowColor`, `shadowOffset`, etc.).
+- If using React Native Paper, override the theme: `const theme = { ...DefaultTheme, roundness: 0, }`.
+- Tap feedback should change `backgroundColor` directly, not add glow or lift.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun FlatCard() {
+    Column(
+        modifier = Modifier
+            .background(Color(0xFFF0F0F0))
+            .border(1.dp, Color(0xFFCCCCCC))
+            .padding(24.dp)
+    ) {
+        Text("Card Title", fontSize = 18.sp, fontWeight = FontWeight.Bold)
+        Spacer(Modifier.height(16.dp))
+        Text("Content without any depth effects.",
+            fontSize = 15.sp, color = Color(0xFF666666))
+        Spacer(Modifier.height(16.dp))
+        Button(
+            onClick = {},
+            shape = RectangleShape,  // Sharp corners
+            elevation = ButtonDefaults.buttonElevation(
+                defaultElevation = 0.dp,  // No shadow
+                pressedElevation = 0.dp,
+            ),
+            colors = ButtonDefaults.buttonColors(containerColor = Color(0xFF2196F3)),
+            contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp),
+        ) {
+            Text("ACTION", fontWeight = FontWeight.Bold, letterSpacing = 1.sp)
+        }
+    }
+}
+```
+- Override `MaterialTheme` shapes: `shapes = Shapes(small = RectangleShape, medium = RectangleShape, large = RectangleShape)`.
+- Set all elevation to `0.dp` on `Card`, `TopAppBar`, and `FloatingActionButton`.
+- Use `Modifier.border()` instead of elevation to separate UI regions.
+
+## Do's and Don'ts
+- **DO**: Use solid, contrasting borders to separate overlapping elements.
+- **DON'T**: Use any transparency (rgba) or blur effects.
+
+## 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.