opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,270 @@
+---
+name: brutalism
+description: Web and App implementation guide for Brutalism. Trigger when user wants a raw appearance, intentionally unfinished look, and rejection of standard design conventions.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Brutalism
+
+> "Raw materials exposed. An intentional rejection of polish, gradients, and soft shadows."
+
+
+## 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. **Unstyled Components**: Default browser styling for buttons, inputs, and links is celebrated.
+2. **Exposed Structure**: Grid lines, tables with visible borders, and stark boundaries are used instead of whitespace to separate content.
+3. **Anti-Aesthetic**: Intentional awkwardness. Elements might slightly overlap in a way that feels broken, or use system default fonts.
+
+## Visual DNA
+- **Colors**: High contrast, often clashing. Pure `#0000FF` blue for links, `#FF0000` red for accents, on stark white or `#C0C0C0` grey backgrounds. **Industrial Chic** palette fits best.
+- **Typography**: Courier New, Times New Roman, Comic Sans, or default sans-serifs. No web fonts.
+- **Visuals**: Dithered images, pixelated graphics, or heavily compressed jpegs.
+
+## Web Implementation
+- Use standard HTML tags without overriding their default appearance whenever possible.
+- **CSS Example**:
+```css
+body {
+  background-color: #ffffff;
+  color: #000000;
+  font-family: monospace;
+}
+
+/* Expose the structure */
+.brutalist-container {
+  border: 1px solid #000;
+  padding: 10px;
+}
+
+.brutalist-section {
+  border-bottom: 2px dashed #000;
+  margin-bottom: 20px;
+  padding-bottom: 20px;
+}
+
+/* Default-looking button but massive */
+.brutalist-btn {
+  background-color: #c0c0c0;
+  border: 2px outset #ffffff;
+  border-right-color: #000000;
+  border-bottom-color: #000000;
+  color: #000000;
+  font-family: sans-serif;
+  font-size: 24px;
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.brutalist-btn:active {
+  border-style: inset;
+}
+
+/* System link blue */
+a {
+  color: #0000FF;
+  text-decoration: underline;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct BrutalistView: View {
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            Text("BRUTALISM")
+                .font(.custom("Courier New", size: 32))
+                .foregroundColor(.black)
+                .padding(10)
+                .border(Color.black, width: 2)
+            
+            Divider().background(Color.black).padding(.vertical, 20)
+            
+            Button(action: {}) {
+                Text("CLICK_HERE")
+                    .font(.custom("Courier New", size: 24))
+                    .foregroundColor(.blue)
+                    .underline()
+            }
+            .padding(10)
+            
+            // Raw structural container
+            VStack(alignment: .leading) {
+                Text("System Status: RAW").font(.custom("Courier New", size: 14))
+            }
+            .padding()
+            .border(Color.black, width: 1)
+        }
+        .padding()
+        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
+        .background(Color.white)
+    }
+}
+```
+- Avoid all native `ButtonStyle` components. Use `Text` with `.underline()` mapped to system blue.
+- Use `.border(Color.black, width: 1)` instead of backgrounds or shadows.
+- Force monospace fonts like Courier New or Menlo.
+
+### Flutter
+```dart
+class BrutalistScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // DO NOT use MaterialApp theme or Scaffold if possible,
+    // or strip them down completely.
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: SafeArea(
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                padding: const EdgeInsets.all(8),
+                decoration: BoxDecoration(
+                  border: Border.all(color: Colors.black, width: 2),
+                ),
+                child: const Text(
+                  'BRUTALISM',
+                  style: TextStyle(
+                    fontFamily: 'Courier',
+                    fontSize: 32,
+                    color: Colors.black,
+                  ),
+                ),
+              ),
+              const Padding(
+                padding: EdgeInsets.symmetric(vertical: 20),
+                child: Divider(color: Colors.black, thickness: 2),
+              ),
+              GestureDetector(
+                onTap: () {},
+                child: const Text(
+                  'CLICK_HERE',
+                  style: TextStyle(
+                    fontFamily: 'Courier',
+                    fontSize: 24,
+                    color: Colors.blue,
+                    decoration: TextDecoration.underline,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Avoid `ElevatedButton`, `Card`, or `AppBar`.
+- Build UI out of raw `Container`s with `Border.all(color: Colors.black)` and `Text` widgets.
+- Use `TextDecoration.underline` to indicate interactivity.
+
+### React Native
+```jsx
+const BrutalistScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFFFFF', padding: 16 }}>
+      <View style={{
+        borderWidth: 2,
+        borderColor: '#000000',
+        padding: 10,
+        alignSelf: 'flex-start'
+      }}>
+        <Text style={{ fontFamily: 'monospace', fontSize: 32, color: '#000' }}>
+          BRUTALISM
+        </Text>
+      </View>
+      
+      <View style={{ height: 2, backgroundColor: '#000', marginVertical: 20 }} />
+      
+      <TouchableOpacity activeOpacity={1}>
+        <Text style={{
+          fontFamily: 'monospace',
+          fontSize: 24,
+          color: '#0000FF',
+          textDecorationLine: 'underline'
+        }}>
+          CLICK_HERE
+        </Text>
+      </TouchableOpacity>
+
+      <View style={{
+        borderWidth: 1,
+        borderColor: '#000',
+        padding: 16,
+        marginTop: 40
+      }}>
+        <Text style={{ fontFamily: 'monospace', color: '#000' }}>
+          System Status: RAW
+        </Text>
+      </View>
+    </View>
+  );
+};
+```
+- Strip away all native feel. Do not use `react-native-elements` or `react-native-paper`.
+- Set `activeOpacity={1}` on `TouchableOpacity` so there is no smooth fade — it should just click instantly.
+- Use pure hex colors: `#FFFFFF`, `#000000`, `#0000FF`.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun BrutalistScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+            .padding(16.dp)
+    ) {
+        Box(
+            modifier = Modifier
+                .border(2.dp, Color.Black)
+                .padding(10.dp)
+        ) {
+            BasicText(
+                text = "BRUTALISM",
+                style = TextStyle(
+                    fontFamily = FontFamily.Monospace,
+                    fontSize = 32.sp,
+                    color = Color.Black
+                )
+            )
+        }
+        
+        Spacer(Modifier.height(20.dp))
+        Box(modifier = Modifier.fillMaxWidth().height(2.dp).background(Color.Black))
+        Spacer(Modifier.height(20.dp))
+        
+        BasicText(
+            text = "CLICK_HERE",
+            modifier = Modifier.clickable { },
+            style = TextStyle(
+                fontFamily = FontFamily.Monospace,
+                fontSize = 24.sp,
+                color = Color.Blue,
+                textDecoration = TextDecoration.Underline
+            )
+        )
+    }
+}
+```
+- Use `BasicText` instead of `Text` to bypass Material theme defaults.
+- Build structural lines using `Box` with `.background(Color.Black)`.
+- **Do not** use `Button` or `Card` or any Material composables. Raw layouts only.
+
+## Do's and Don'ts
+- **DO**: Use harsh, high-contrast borders (1px solid black) around everything.
+- **DON'T**: Use border-radius, drop shadows, or smooth transitions. If it animates, it should pop instantly (0s transition).
+
+## 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/brutalist-typography/SKILL.md

@@ -0,0 +1,287 @@
+---
+name: brutalist-typography
+description: Web and App implementation guide for Brutalist Typography. Trigger when user wants huge fonts, raw presentation, and aggressive layout decisions.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Brutalist Typography
+
+> "Aggressive, unpolished, and unapologetic. Text that demands attention by breaking the rules."
+
+
+## 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. **Rule Breaking**: Text that overlaps, ignores margins, or deliberately clips off the edge of the screen.
+2. **Anti-Design**: Intentional use of system fonts or "ugly" fonts (Times New Roman, Courier) in massive sizes.
+3. **Harsh Contrast**: Clashing colors or stark monochrome.
+
+## Visual DNA
+- **Colors**: **Industrial Chic** (Black, White, Red) or aggressive neon clashing (e.g., pure blue on pure red).
+- **Typography**: System default fonts (`Times New Roman`, `Arial`, `Courier New`) blown up to 150px.
+- **Styling**: Marquees, blinking text, underlines that cut through descenders.
+
+## Web Implementation
+- Break the grid. Use absolute positioning or negative margins.
+- **CSS Example**:
+```css
+body {
+  background-color: #fff;
+  color: #000;
+  font-family: 'Times New Roman', serif;
+}
+
+.brutalist-headline {
+  font-size: 15vw;
+  line-height: 0.7;
+  letter-spacing: -5px;
+  margin-left: -10px; /* Bleeds off screen intentionally */
+  word-wrap: break-word; /* Let words break awkwardly */
+}
+
+.brutalist-highlight {
+  background-color: #ff0000;
+  color: #fff;
+  padding: 0 10px;
+}
+
+.marquee-container {
+  border-top: 5px solid #000;
+  border-bottom: 5px solid #000;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: 'Courier New', monospace;
+  font-size: 2rem;
+  font-weight: bold;
+  padding: 10px 0;
+}
+
+/* A nod to early 90s web */
+.brutalist-link {
+  color: #0000ee;
+  text-decoration: underline;
+  text-transform: uppercase;
+}
+.brutalist-link:hover {
+  background-color: #0000ee;
+  color: #fff;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct BrutalistTypeView: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: -20) {
+                // Bleeds off the edge intentionally
+                Text("BREAK")
+                    .font(.custom("Times New Roman", size: 120))
+                    .padding(.leading, -20) 
+                
+                Text("THE")
+                    .font(.custom("Arial", size: 140))
+                    .fontWeight(.black)
+                    .foregroundColor(.clear)
+                    .overlay(
+                        Text("THE").stroke(Color.red, lineWidth: 3)
+                    )
+                    .offset(x: 40)
+                
+                Text("GRID.")
+                    .font(.custom("Courier New", size: 100))
+                    .background(Color.blue)
+                    .foregroundColor(.white)
+                    .rotationEffect(.degrees(-5))
+                    .offset(y: -40)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .padding(.top, 50)
+        }
+        .ignoresSafeArea() // Critical for Brutalist type
+        .background(Color.white)
+    }
+}
+```
+- `.ignoresSafeArea()` is mandatory. Text must be allowed to clip into the notch and status bar.
+- Use negative `spacing` in `VStack` or explicit negative `.offset()` to force text elements to overlap each other aggressively.
+- Outline text is achieved by setting `.foregroundColor(.clear)` and overlaying a `.stroke()`.
+
+### Flutter
+```dart
+class BrutalistTypeScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    // Scaffold without SafeArea
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Stack(
+        children: [
+          Positioned(
+            top: -20,
+            left: -20,
+            child: const Text(
+              'BREAK',
+              style: TextStyle(
+                fontFamily: 'Times New Roman',
+                fontSize: 150,
+                height: 0.8, // Negative line-spacing
+                color: Colors.black,
+              ),
+            ),
+          ),
+          Positioned(
+            top: 100,
+            left: 40,
+            child: Text(
+              'THE',
+              style: TextStyle(
+                fontFamily: 'Arial',
+                fontSize: 140,
+                fontWeight: FontWeight.w900,
+                foreground: Paint()
+                  ..style = PaintingStyle.stroke
+                  ..strokeWidth = 3
+                  ..color = Colors.red,
+              ),
+            ),
+          ),
+          Positioned(
+            top: 220,
+            left: 10,
+            child: Transform.rotate(
+              angle: -0.1,
+              child: Container(
+                color: Colors.blue,
+                child: const Text(
+                  'GRID.',
+                  style: TextStyle(
+                    fontFamily: 'Courier',
+                    fontSize: 120,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- Do not use `SafeArea`.
+- Absolute positioning via `Stack` and `Positioned` is the easiest way to break the grid and force overlaps.
+- Use `height: 0.8` (or less than 1.0) in `TextStyle` to smash lines of text together.
+
+### React Native
+```jsx
+const BrutalistTypeScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFF' }}>
+      {/* 
+        Note: React Native text clipping can be tricky on Android. 
+        Ensure parent views don't have overflow: 'hidden'.
+      */}
+      <Text style={{
+        fontFamily: 'Times New Roman',
+        fontSize: 130,
+        lineHeight: 110,
+        color: '#000',
+        marginLeft: -15, // Bleed off edge
+        marginTop: 40
+      }}>
+        BREAK
+      </Text>
+      
+      <Text style={{
+        fontFamily: 'Arial',
+        fontSize: 140,
+        fontWeight: '900',
+        color: 'transparent',
+        textShadowColor: '#FF0000',
+        textShadowRadius: 1, // Fake stroke effect
+        marginLeft: 40,
+        marginTop: -30 // Overlap previous text
+      }}>
+        THE
+      </Text>
+      
+      <Text style={{
+        fontFamily: 'monospace',
+        fontSize: 100,
+        backgroundColor: '#0000FF',
+        color: '#FFF',
+        transform: [{ rotate: '-5deg' }],
+        marginTop: -20,
+        alignSelf: 'flex-start'
+      }}>
+        GRID.
+      </Text>
+    </View>
+  );
+};
+```
+- React Native doesn't have a native text-stroke property, so you either simulate it with text shadows or use `@shopify/react-native-skia` for true stroked text.
+- Use negative `marginTop` and `marginLeft` to force the layout chaos.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun BrutalistTypeScreen() {
+    // Use Box for absolute overlapping layouts
+    Box(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+    ) {
+        Text(
+            text = "BREAK",
+            fontFamily = FontFamily.Serif, // Times New Roman equivalent
+            fontSize = 130.sp,
+            color = Color.Black,
+            lineHeight = 100.sp,
+            modifier = Modifier.offset(x = (-15).dp, y = (-20).dp)
+        )
+        
+        Text(
+            text = "THE",
+            fontFamily = FontFamily.SansSerif,
+            fontSize = 140.sp,
+            fontWeight = FontWeight.Black,
+            style = TextStyle(
+                drawStyle = Stroke(width = 5f)
+            ),
+            color = Color.Red,
+            modifier = Modifier.offset(x = 40.dp, y = 100.dp)
+        )
+        
+        Text(
+            text = "GRID.",
+            fontFamily = FontFamily.Monospace,
+            fontSize = 100.sp,
+            color = Color.White,
+            modifier = Modifier
+                .offset(x = 10.dp, y = 220.dp)
+                .rotate(-5f)
+                .background(Color.Blue)
+        )
+    }
+}
+```
+- A `Box` with explicit `Modifier.offset(x, y)` allows freeform overlapping placement, breaking away from standard `Column`/`Row` grids.
+- Compose `TextStyle` supports `drawStyle = Stroke(width = 5f)`, making outline typography incredibly simple.
+
+## Do's and Don'ts
+- **DO**: Mix serif and monospace fonts aggressively.
+- **DON'T**: Add drop shadows, gradients, or rounded corners. The design must look raw and unstyled.
+
+## 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.