opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/data-dense-design/SKILL.md

@@ -0,0 +1,322 @@
+---
+name: data-dense-design
+description: Web and App implementation guide for Data-Dense Design. Trigger when user wants professional tools, maximum information density, and expert interfaces (like Bloomberg terminals or IDEs).
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Data-Dense Design
+
+> "Density is a feature. For expert users, reducing clicks is more important than whitespace."
+
+
+## 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. **Compact Layouts**: Extremely tight margins and padding (often 2px to 4px).
+2. **Monospace & Tabular Data**: Numbers must align vertically perfectly. 
+3. **High Utility**: Every pixel serves a functional purpose. Minimal purely decorative elements.
+
+## Visual DNA
+- **Colors**: **Industrial Chic** (high contrast) or **Minimalist Slate**. Avoid bright backgrounds. Dark themes are heavily preferred to reduce eye strain over 8-hour sessions.
+- **Typography**: Small base sizes (`11px` - `13px`). Strict use of monospace fonts (`Fira Code`, `JetBrains Mono`) for data.
+- **Borders**: Thin `1px` borders (`#333` or `#e0e0e0`) are used extensively to separate tiny cells of data.
+
+## Web Implementation
+- Tables, CSS Grid, and Flexbox with zero gap.
+- **CSS Example**:
+```css
+body {
+  background-color: #1e1e1e; /* IDE Dark */
+  color: #cccccc;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 12px; /* Very small */
+  margin: 0;
+}
+
+.dense-toolbar {
+  display: flex;
+  background-color: #2d2d2d;
+  border-bottom: 1px solid #3c3c3c;
+  padding: 2px 4px;
+}
+
+.dense-btn {
+  background: transparent;
+  color: #ccc;
+  border: 1px solid transparent;
+  padding: 2px 8px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.dense-btn:hover {
+  background-color: #3c3c3c;
+  border-color: #555;
+}
+
+/* Dense Data Table */
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+.data-table th, .data-table td {
+  padding: 4px 8px;
+  border: 1px solid #3c3c3c;
+  text-align: right; /* Numbers align right */
+}
+
+.data-table tr:nth-child(even) { background-color: #252526; }
+.data-table tr:hover { background-color: #094771; color: #fff; } /* Selection highlight */
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct DataDenseView: View {
+    var body: some View {
+        ScrollView([.horizontal, .vertical]) {
+            Grid(horizontalSpacing: 0, verticalSpacing: 0) {
+                // Header Row
+                GridRow {
+                    HeaderCell("SYM")
+                    HeaderCell("BID")
+                    HeaderCell("ASK")
+                    HeaderCell("CHG")
+                }
+                
+                // Data Rows
+                DataRow(sym: "AAPL", bid: "173.40", ask: "173.45", chg: "+0.12", isPos: true)
+                DataRow(sym: "MSFT", bid: "320.10", ask: "320.15", chg: "-0.45", isPos: false)
+                DataRow(sym: "GOOG", bid: "135.20", ask: "135.30", chg: "+0.02", isPos: true)
+            }
+            .border(Color.gray.opacity(0.3), width: 1)
+        }
+        .background(Color(white: 0.12)) // Dark IDE background
+    }
+}
+
+struct HeaderCell: View {
+    let text: String
+    init(_ text: String) { self.text = text }
+    var body: some View {
+        Text(text)
+            .font(.system(size: 11, weight: .bold, design: .monospaced))
+            .foregroundColor(.gray)
+            .padding(4)
+            .frame(minWidth: 60, alignment: .leading)
+            .border(Color.gray.opacity(0.3), width: 0.5)
+            .background(Color(white: 0.18))
+    }
+}
+
+struct DataRow: View {
+    let sym, bid, ask, chg: String
+    let isPos: Bool
+    var body: some View {
+        GridRow {
+            Cell(sym, color: .white)
+            Cell(bid, color: .white, align: .trailing)
+            Cell(ask, color: .white, align: .trailing)
+            Cell(chg, color: isPos ? .green : .red, align: .trailing)
+        }
+    }
+}
+
+struct Cell: View {
+    let text: String
+    let color: Color
+    let align: Alignment
+    init(_ text: String, color: Color, align: Alignment = .leading) {
+        self.text = text; self.color = color; self.align = align
+    }
+    var body: some View {
+        Text(text)
+            .font(.system(size: 12, design: .monospaced))
+            .foregroundColor(color)
+            .padding(4)
+            .frame(minWidth: 60, alignment: align)
+            .border(Color.gray.opacity(0.3), width: 0.5)
+    }
+}
+```
+- Use `Grid` with `0` spacing.
+- Font must be `.system(..., design: .monospaced)`.
+- Use a `.border()` with `0.5` width on every single cell to recreate the dense spreadsheet look.
+
+### Flutter
+```dart
+class DataDenseScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFF1E1E1E),
+      body: SingleChildScrollView(
+        scrollDirection: Axis.vertical,
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          child: Theme(
+            // Override theme specifically to make the table hyper-dense
+            data: Theme.of(context).copyWith(
+              dividerColor: Colors.grey[800],
+            ),
+            child: DataTable(
+              headingRowHeight: 28, // Extremely dense
+              dataRowMinHeight: 24,
+              dataRowMaxHeight: 24, // Extremely dense
+              columnSpacing: 16,
+              border: TableBorder.all(color: Colors.grey[800]!, width: 1),
+              columns: const [
+                DataColumn(label: Text('SYM', style: TextStyle(color: Colors.grey, fontSize: 11, fontFamily: 'RobotoMono'))),
+                DataColumn(label: Text('BID', style: TextStyle(color: Colors.grey, fontSize: 11, fontFamily: 'RobotoMono')), numeric: true),
+                DataColumn(label: Text('ASK', style: TextStyle(color: Colors.grey, fontSize: 11, fontFamily: 'RobotoMono')), numeric: true),
+              ],
+              rows: [
+                _buildRow('AAPL', '173.40', '173.45'),
+                _buildRow('MSFT', '320.10', '320.15'),
+                _buildRow('GOOG', '135.20', '135.30'),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  DataRow _buildRow(String sym, String bid, String ask) {
+    const style = TextStyle(color: Colors.white, fontSize: 12, fontFamily: 'RobotoMono');
+    return DataRow(
+      cells: [
+        DataCell(Text(sym, style: style)),
+        DataCell(Text(bid, style: style)),
+        DataCell(Text(ask, style: style)),
+      ],
+    );
+  }
+}
+```
+- Flutter's `DataTable` is perfect, but you must manually crush the `headingRowHeight` and `dataRowHeight` down from their Material defaults (which are huge).
+- Wrap in dual `SingleChildScrollView` to allow panning around large data sets.
+
+### React Native
+```jsx
+const DataDenseScreen = () => {
+  return (
+    <ScrollView style={{ backgroundColor: '#1E1E1E', flex: 1 }}>
+      <ScrollView horizontal>
+        <View style={{ borderWidth: 1, borderColor: '#333' }}>
+          {/* Header */}
+          <View style={{ flexDirection: 'row', backgroundColor: '#2D2D2D' }}>
+            <HeaderCell text="SYM" width={60} />
+            <HeaderCell text="BID" width={80} align="right" />
+            <HeaderCell text="ASK" width={80} align="right" />
+            <HeaderCell text="CHG" width={60} align="right" />
+          </View>
+          
+          {/* Rows */}
+          <DataRow sym="AAPL" bid="173.40" ask="173.45" chg="+0.12" isPos={true} />
+          <DataRow sym="MSFT" bid="320.10" ask="320.15" chg="-0.45" isPos={false} />
+        </View>
+      </ScrollView>
+    </ScrollView>
+  );
+};
+
+const HeaderCell = ({ text, width, align = 'left' }) => (
+  <View style={{ width, padding: 4, borderWidth: 0.5, borderColor: '#333' }}>
+    <Text style={{ color: '#999', fontSize: 11, fontFamily: 'monospace', textAlign: align, fontWeight: 'bold' }}>
+      {text}
+    </Text>
+  </View>
+);
+
+const DataRow = ({ sym, bid, ask, chg, isPos }) => (
+  <View style={{ flexDirection: 'row' }}>
+    <Cell text={sym} width={60} />
+    <Cell text={bid} width={80} align="right" />
+    <Cell text={ask} width={80} align="right" />
+    <Cell text={chg} width={60} align="right" color={isPos ? '#4CAF50' : '#F44336'} />
+  </View>
+);
+
+const Cell = ({ text, width, align = 'left', color = '#CCC' }) => (
+  <View style={{ width, padding: 4, borderWidth: 0.5, borderColor: '#333' }}>
+    <Text style={{ color, fontSize: 12, fontFamily: 'monospace', textAlign: align }}>
+      {text}
+    </Text>
+  </View>
+);
+```
+- React Native doesn't have a native Table component, so you must construct a grid using `flexDirection: 'row'` and strict `width` properties on cells.
+- Double scroll views (one vertical, one horizontal inside it) are standard for mobile data tables.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun DataDenseScreen() {
+    val scrollStateHorizontal = rememberScrollState()
+    val scrollStateVertical = rememberScrollState()
+
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color(0xFF1E1E1E))
+            .verticalScroll(scrollStateVertical)
+            .horizontalScroll(scrollStateHorizontal)
+            .padding(8.dp)
+    ) {
+        Column(modifier = Modifier.border(1.dp, Color(0xFF333333))) {
+            // Header
+            Row(modifier = Modifier.background(Color(0xFF2D2D2D))) {
+                Cell("SYM", 60.dp, Color.Gray, true)
+                Cell("BID", 80.dp, Color.Gray, true, TextAlign.End)
+                Cell("ASK", 80.dp, Color.Gray, true, TextAlign.End)
+            }
+            
+            // Rows
+            DataRow("AAPL", "173.40", "173.45")
+            DataRow("MSFT", "320.10", "320.15")
+        }
+    }
+}
+
+@Composable
+fun DataRow(sym: String, bid: String, ask: String) {
+    Row {
+        Cell(sym, 60.dp, Color.White, false)
+        Cell(bid, 80.dp, Color.White, false, TextAlign.End)
+        Cell(ask, 80.dp, Color.White, false, TextAlign.End)
+    }
+}
+
+@Composable
+fun Cell(text: String, width: Dp, color: Color, isHeader: Boolean, align: TextAlign = TextAlign.Start) {
+    Text(
+        text = text,
+        color = color,
+        fontSize = if (isHeader) 11.sp else 12.sp,
+        fontWeight = if (isHeader) FontWeight.Bold else FontWeight.Normal,
+        fontFamily = FontFamily.Monospace,
+        textAlign = align,
+        modifier = Modifier
+            .width(width)
+            .border(0.5.dp, Color(0xFF333333))
+            .padding(4.dp)
+    )
+}
+```
+- Chain `.verticalScroll()` and `.horizontalScroll()` on the root `Box`.
+- Compose allows `.border()` directly on `Text` modifiers, making spreadsheet grids very clean to implement without wrapping everything in `Box`es.
+
+## Do's and Don'ts
+- **DO**: Use color coding (red/green) for data deltas, but keep the saturation muted to prevent eye fatigue.
+- **DON'T**: Use large padding or giant H1 headers. Expert users already know what screen they are on.
+
+## 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/duotone-design/SKILL.md

@@ -0,0 +1,248 @@
+---
+name: duotone-design
+description: Web and App implementation guide for Duotone Design. Trigger when user wants two-color schemes, striking imagery, and Spotify-like playlist aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Duotone Design
+
+> "Striking contrast. Photography and UI stripped down to exactly two clashing or complementary colors."
+
+
+## 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. **Two Colors Only**: The entire design is mapped to a dark color (replacing blacks/shadows) and a light color (replacing whites/highlights).
+2. **Treated Imagery**: All photos MUST be processed into the duotone palette.
+3. **Bold, Flat Typography**: Text is usually massive, solid, and uses one of the two colors.
+
+## Visual DNA
+- **Colors**: Very high contrast pairs. Navy and Peach, Deep Purple and Neon Green, Crimson and Cream. Look at **Industrial Chic** for inspiration.
+- **Typography**: Heavy, condensed sans-serifs (e.g., `League Gothic`, `Oswald`).
+- **Imagery**: High-contrast, gritty photography works best when mapped to duotone.
+
+## Web Implementation
+- Modern CSS can achieve image duotone effects without Photoshop, using `mix-blend-mode` and filters.
+- **CSS Example**:
+```css
+:root {
+  --duo-dark: #1E0045; /* Deep Purple */
+  --duo-light: #CCFF00; /* Neon Lime */
+}
+
+body {
+  background-color: var(--duo-dark);
+  color: var(--duo-light);
+}
+
+/* CSS Duotone Image Effect */
+.duotone-container {
+  position: relative;
+  width: 100%;
+  height: 400px;
+  background-color: var(--duo-light); /* Base color */
+}
+
+.duotone-container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  /* Convert image to grayscale, increase contrast */
+  filter: grayscale(100%) contrast(1.5); 
+  /* Multiply the grayscale image against the light background */
+  mix-blend-mode: multiply;
+}
+
+.duotone-container::after {
+  /* Overlay the dark color using screen/lighten */
+  content: '';
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background-color: var(--duo-dark);
+  mix-blend-mode: screen;
+}
+
+.duotone-btn {
+  background: var(--duo-light);
+  color: var(--duo-dark);
+  border: none;
+  font-weight: 900;
+  text-transform: uppercase;
+  padding: 16px 32px;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct DuotoneImage: View {
+    let duoDark = Color(red: 0.12, green: 0.0, blue: 0.27)  // #1E0045
+    let duoLight = Color(red: 0.8, green: 1.0, blue: 0.0)   // #CCFF00
+    
+    var body: some View {
+        ZStack {
+            // Background base color
+            duoLight.ignoresSafeArea()
+            
+            // Image processing
+            Image("sample_photo")
+                .resizable()
+                .scaledToFill()
+                .grayscale(1.0)
+                .contrast(1.5)
+                .colorMultiply(duoLight) // Multiplies the light color into the grays
+            
+            // Dark color overlay
+            duoDark
+                .blendMode(.screen) // Equivalent to CSS screen blend mode
+                .allowsHitTesting(false)
+        }
+        .frame(height: 400)
+        .clipped()
+    }
+}
+```
+- Real-time image processing is easy in SwiftUI.
+- Convert to `.grayscale()`, boost `.contrast()`, then use `.colorMultiply()` and `.blendMode(.screen)` layers to map the two colors exactly like CSS `mix-blend-mode`.
+
+### Flutter
+```dart
+class DuotoneImage extends StatelessWidget {
+  final Color duoDark = const Color(0xFF1E0045);
+  final Color duoLight = const Color(0xFFCCFF00);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 400,
+      width: double.infinity,
+      color: duoLight,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // 1. Grayscale & Contrast (using ColorFilter matrix)
+          // 2. Light Color Multiply
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(duoLight, BlendMode.multiply),
+            child: ColorFiltered(
+              // Simple grayscale matrix
+              colorFilter: const ColorFilter.matrix([
+                0.2126, 0.7152, 0.0722, 0, 0,
+                0.2126, 0.7152, 0.0722, 0, 0,
+                0.2126, 0.7152, 0.0722, 0, 0,
+                0,      0,      0,      1, 0,
+              ]),
+              child: Image.asset('assets/sample_photo.jpg', fit: BoxFit.cover),
+            ),
+          ),
+          // 3. Dark Color Screen Overlay
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(duoDark, BlendMode.screen),
+            child: Container(color: Colors.transparent), // Applies filter to stack below
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Flutter requires stacking `ColorFiltered` widgets.
+- Use a `ColorFilter.matrix` to convert the image to grayscale first.
+- Apply `BlendMode.multiply` with the light color, then overlay the dark color using `BlendMode.screen`.
+
+### React Native
+```jsx
+// Real-time CSS-like blend modes do NOT exist natively in React Native.
+// You must use react-native-skia or pre-process images.
+
+import { Canvas, Image, useImage, ColorMatrix } from "@shopify/react-native-skia";
+
+const DuotoneImage = () => {
+  const image = useImage(require('./sample_photo.jpg'));
+  
+  if (!image) return null;
+
+  // Skia allows custom SVG/CSS style color matrices.
+  // Building a true duotone matrix requires math mapping black to duoDark
+  // and white to duoLight.
+  
+  return (
+    <View style={{ height: 400, backgroundColor: '#CCFF00' }}>
+      <Canvas style={{ flex: 1 }}>
+        <Image image={image} x={0} y={0} width={400} height={400} fit="cover">
+          {/* Note: In production, you would construct a specific 
+              ColorMatrix to map the luminance to the two hex colors. */}
+          <ColorMatrix
+            matrix={[
+              -1, 0, 0, 0, 255,
+              0, -1, 0, 0, 255,
+              0, 0, -1, 0, 255,
+              0, 0, 0, 1, 0,
+            ]}
+          />
+        </Image>
+      </Canvas>
+    </View>
+  );
+};
+```
+- **Critical Limitation**: Standard React Native `<Image>` cannot do duotone blending.
+- **Solution 1**: Use `@shopify/react-native-skia` to apply low-level color matrices and blend modes.
+- **Solution 2**: Pre-process all imagery in Photoshop/Figma before importing into the app. This is the safest and most performant route.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun DuotoneImage() {
+    val duoDark = Color(0xFF1E0045)
+    val duoLight = Color(0xFFCCFF00)
+
+    // A ColorMatrix to map luminance to the two colors is required for true duotone.
+    // For simplicity, we use BlendModes here to approximate the CSS multiply/screen effect.
+    Box(modifier = Modifier
+        .fillMaxWidth()
+        .height(400.dp)
+        .background(duoLight)
+    ) {
+        Image(
+            painter = painterResource(id = R.drawable.sample_photo),
+            contentDescription = null,
+            contentScale = ContentScale.Crop,
+            modifier = Modifier.matchParentSize(),
+            colorFilter = ColorFilter.colorMatrix(ColorMatrix().apply { 
+                setToSaturation(0f) // Grayscale
+            })
+        )
+        
+        // Multiply light color
+        Spacer(modifier = Modifier
+            .matchParentSize()
+            .background(duoLight)
+            .graphicsLayer { blendMode = BlendMode.Multiply }
+        )
+        
+        // Screen dark color
+        Spacer(modifier = Modifier
+            .matchParentSize()
+            .background(duoDark)
+            .graphicsLayer { blendMode = BlendMode.Screen }
+        )
+    }
+}
+```
+- Use `ColorFilter.colorMatrix` with `setToSaturation(0f)` to make the image grayscale.
+- Use `Spacer` overlays with `Modifier.graphicsLayer { blendMode = BlendMode... }` to apply the dual color mapping.
+- Similar to Flutter, layer `Multiply` (light) and `Screen` (dark) to achieve the effect.
+
+## Do's and Don'ts
+- **DO**: Ensure the dark color is dark enough to be legible when used as text against the light color.
+- **DON'T**: Add a third color. It instantly ruins the aesthetic.
+
+## 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.