opencode-skills-collection 3.1.0 → 3.1.2

package/bundled-skills/design-it/monochromatic-ui/SKILL.md

@@ -0,0 +1,296 @@
+---
+name: monochromatic-ui
+description: Web and App implementation guide for Monochromatic UI. Trigger when user wants a single-color palette, high elegance, and strict color discipline.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Monochromatic UI
+
+> "Elegance through constraint. A single hue, explored through all its tints, tones, and shades."
+
+
+## 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. **Single Hue**: Choose one base color (e.g., deep blue). The entire UI is built using lighter (tints) and darker (shades) versions of that exact hue.
+2. **High Contrast for Legibility**: The darkest shade and the lightest tint must have enough contrast to pass accessibility standards when placed together.
+3. **Texture over Color**: Since color is restricted, use subtle textures, patterns, or varying opacities to differentiate sections.
+
+## Visual DNA
+- **Colors**: **Monochromatic Brown** or pick one dominant hue from **Earth-Grounded Elegance** and extrapolate it.
+- **Typography**: Clean and unobtrusive. The layout relies heavily on font weights to establish hierarchy since color cannot.
+- **Shadows**: Shadows must be tinted with the base hue, never pure black.
+
+## Web Implementation
+- Use HSL (Hue, Saturation, Lightness) heavily in CSS to make building the palette easy.
+- **CSS Example**:
+```css
+:root {
+  /* Base Hue: Deep Blue (210) */
+  --mono-900: hsl(210, 80%, 10%); /* Very dark */
+  --mono-700: hsl(210, 70%, 30%); /* Dark */
+  --mono-500: hsl(210, 60%, 50%); /* Base */
+  --mono-300: hsl(210, 50%, 80%); /* Light */
+  --mono-100: hsl(210, 40%, 95%); /* Very light background */
+}
+
+body {
+  background-color: var(--mono-100);
+  color: var(--mono-900);
+  font-family: 'Inter', sans-serif;
+}
+
+.mono-card {
+  background-color: #ffffff; /* Or mono-100 */
+  border: 1px solid var(--mono-300);
+  border-radius: 8px;
+  padding: 32px;
+  /* Tinted shadow */
+  box-shadow: 0 10px 25px hsla(210, 80%, 10%, 0.05);
+}
+
+.mono-btn {
+  background-color: var(--mono-500);
+  color: #ffffff;
+  border: none;
+  border-radius: 4px;
+  padding: 12px 24px;
+  transition: background-color 0.2s;
+}
+
+.mono-btn:hover {
+  background-color: var(--mono-700);
+}
+
+.mono-subtext {
+  color: var(--mono-500); /* Use mid-tones for secondary text */
+  font-weight: 500;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct MonochromaticView: View {
+    // Base Hue: Deep Blue (210 in 360-degree HSB/HSL)
+    // In SwiftUI, hue is 0.0 to 1.0 (210/360 = 0.58)
+    let mono900 = Color(hue: 0.58, saturation: 0.80, brightness: 0.10)
+    let mono700 = Color(hue: 0.58, saturation: 0.70, brightness: 0.30)
+    let mono500 = Color(hue: 0.58, saturation: 0.60, brightness: 0.50)
+    let mono300 = Color(hue: 0.58, saturation: 0.50, brightness: 0.80)
+    let mono100 = Color(hue: 0.58, saturation: 0.40, brightness: 0.95)
+    
+    var body: some View {
+        VStack(spacing: 24) {
+            // Card
+            VStack(alignment: .leading, spacing: 12) {
+                Text("Monochromatic Elegance")
+                    .font(.title2).fontWeight(.semibold)
+                    .foregroundColor(mono900)
+                
+                Text("Using only variations in saturation and brightness of a single hue.")
+                    .foregroundColor(mono500)
+            }
+            .padding(32)
+            .background(Color.white)
+            .border(mono300, width: 1)
+            .shadow(color: mono900.opacity(0.1), radius: 15, y: 5) // Tinted shadow
+            
+            // Button
+            Button(action: {}) {
+                Text("Primary Action")
+                    .fontWeight(.bold)
+                    .foregroundColor(.white)
+                    .frame(maxWidth: .infinity)
+                    .padding()
+                    .background(mono500)
+                    .cornerRadius(8)
+            }
+        }
+        .padding()
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(mono100)
+    }
+}
+```
+- Define your colors using `Color(hue: saturation: brightness:)`. This ensures math-perfect monochromatic harmony.
+- *Always* tint your drop shadows with your `mono900` color. Pure black shadows look dirty in a strict monochromatic UI.
+
+### Flutter
+```dart
+class MonochromaticScreen extends StatelessWidget {
+  // Base Hue: Deep Blue (210)
+  // Flutter HSVColor uses Hue 0-360, Saturation 0.0-1.0, Value 0.0-1.0
+  final Color mono900 = const HSVColor.fromAHSV(1.0, 210, 0.80, 0.10).toColor();
+  final Color mono500 = const HSVColor.fromAHSV(1.0, 210, 0.60, 0.50).toColor();
+  final Color mono300 = const HSVColor.fromAHSV(1.0, 210, 0.50, 0.80).toColor();
+  final Color mono100 = const HSVColor.fromAHSV(1.0, 210, 0.40, 0.95).toColor();
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: mono100,
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(24.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              // Card
+              Container(
+                width: double.infinity,
+                padding: const EdgeInsets.all(32),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  border: Border.all(color: mono300),
+                  borderRadius: BorderRadius.circular(8),
+                  boxShadow: [
+                    BoxShadow(color: mono900.withOpacity(0.1), blurRadius: 15, offset: const Offset(0, 5))
+                  ],
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text('Monochromatic', style: TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: mono900)),
+                    const SizedBox(height: 12),
+                    Text('Variations of a single hue.', style: TextStyle(fontSize: 16, color: mono500)),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 24),
+              // Button
+              ElevatedButton(
+                onPressed: () {},
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: mono500,
+                  foregroundColor: Colors.white,
+                  minimumSize: const Size(double.infinity, 56),
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+                  elevation: 0,
+                ),
+                child: const Text('Primary Action', style: TextStyle(fontWeight: FontWeight.bold)),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Flutter's `HSVColor.fromAHSV()` is the best way to explicitly code a monochromatic palette without guessing hex codes.
+
+### React Native
+```jsx
+// Base Hue: Deep Blue (210)
+const theme = {
+  mono900: 'hsl(210, 80%, 10%)',
+  mono700: 'hsl(210, 70%, 30%)',
+  mono500: 'hsl(210, 60%, 50%)',
+  mono300: 'hsl(210, 50%, 80%)',
+  mono100: 'hsl(210, 40%, 95%)',
+};
+
+const MonochromaticScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: theme.mono100, padding: 24, justifyContent: 'center' }}>
+      
+      <View style={{
+        backgroundColor: '#FFFFFF',
+        borderColor: theme.mono300,
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 32,
+        marginBottom: 24,
+        // Tinted shadow (iOS)
+        shadowColor: theme.mono900, shadowOffset: { width: 0, height: 5 },
+        shadowOpacity: 0.1, shadowRadius: 15,
+      }}>
+        <Text style={{ fontSize: 24, fontWeight: '600', color: theme.mono900, marginBottom: 12 }}>
+          Monochromatic
+        </Text>
+        <Text style={{ fontSize: 16, color: theme.mono500 }}>
+          Using HSL strings in React Native makes palette generation trivial.
+        </Text>
+      </View>
+
+      <TouchableOpacity style={{
+        backgroundColor: theme.mono500,
+        padding: 16,
+        borderRadius: 8,
+        alignItems: 'center'
+      }}>
+        <Text style={{ fontWeight: 'bold', color: '#FFFFFF', fontSize: 16 }}>
+          Primary Action
+        </Text>
+      </TouchableOpacity>
+      
+    </View>
+  );
+};
+```
+- React Native's StyleSheet accepts CSS `hsl()` strings natively. Use them! It makes debugging and tweaking a monochromatic palette a million times easier than using hex codes.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun MonochromaticScreen() {
+    // Base Hue: Deep Blue (210)
+    // Compose Color.hsv requires Hue 0-360f, Saturation 0-1f, Value 0-1f
+    val mono900 = Color.hsv(210f, 0.80f, 0.10f)
+    val mono500 = Color.hsv(210f, 0.60f, 0.50f)
+    val mono300 = Color.hsv(210f, 0.50f, 0.80f)
+    val mono100 = Color.hsv(210f, 0.40f, 0.95f)
+
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(mono100)
+            .padding(24.dp),
+        verticalArrangement = Arrangement.Center
+    ) {
+        // Card
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .shadow(15.dp, RoundedCornerShape(8.dp), spotColor = mono900.copy(alpha = 0.2f))
+                .background(Color.White, RoundedCornerShape(8.dp))
+                .border(1.dp, mono300, RoundedCornerShape(8.dp))
+                .padding(32.dp)
+        ) {
+            Column {
+                Text("Monochromatic", fontSize = 24.sp, fontWeight = FontWeight.SemiBold, color = mono900)
+                Spacer(Modifier.height(12.dp))
+                Text("Strictly enforced hue discipline.", color = mono500)
+            }
+        }
+        
+        Spacer(Modifier.height(24.dp))
+        
+        // Button
+        Button(
+            onClick = { },
+            colors = ButtonDefaults.buttonColors(containerColor = mono500, contentColor = Color.White),
+            shape = RoundedCornerShape(8.dp),
+            modifier = Modifier.fillMaxWidth().height(56.dp)
+        ) {
+            Text("Primary Action", fontWeight = FontWeight.Bold)
+        }
+    }
+}
+```
+- Use `Color.hsv()` to define the palette.
+- Set the `spotColor` in your `Modifier.shadow` to `mono900` to keep the shadows from looking muddy or disjointed from the design system.
+
+## Do's and Don'ts
+- **DO**: Use pure white or pure black as absolute extremes if needed for text legibility.
+- **DON'T**: Sneak in an accent color. If you add a red error button to a blue monochromatic UI, it immediately breaks the aesthetic and becomes "duotone" or standard UI. Find a way to signify errors using bold text or dark shades of the base hue.
+
+## 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/neo-brutalism/SKILL.md

@@ -0,0 +1,270 @@
+---
+name: neo-brutalism
+description: Web and App implementation guide for Neo-Brutalism. Trigger when user wants thick borders, hard shadows, bright colors, and a playful yet structured look.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Neo-Brutalism
+
+> "Brutalism, but make it pop. Hard lines, stark shadows, and vibrant, unashamed 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. **Hard Drop Shadows**: Solid black shadows with no blur. Usually offset by a few pixels down and to the right.
+2. **Thick Outlines**: Everything has a heavy, solid black border (usually 2px-4px).
+3. **Flat, High-Contrast Colors**: Bright, saturated pastels or primary colors contrasting against pure white or black.
+
+## Visual DNA
+- **Colors**: Start with an off-white background (like `#FDF8F5`), add stark black borders `#000000`, and use saturated accents like lemon yellow, bright cyan, or coral.
+- **Typography**: Very bold, geometric sans-serifs (e.g., `Space Grotesk`, `Archivo Black`, `Inter Black`).
+- **Shapes**: Sharp rectangles or completely rounded pill shapes, but always with a heavy stroke.
+
+## Web Implementation
+- The defining feature is the `box-shadow` with `0` blur.
+- **CSS Example**:
+```css
+:root {
+  --neo-border: 3px solid #000000;
+  --neo-shadow: 6px 6px 0px #000000;
+  --neo-bg: #F4F4F0;
+  --neo-accent: #FF3366;
+}
+
+body {
+  background-color: var(--neo-bg);
+  font-family: 'Space Grotesk', sans-serif;
+}
+
+.neo-card {
+  background-color: #ffffff;
+  border: var(--neo-border);
+  box-shadow: var(--neo-shadow);
+  border-radius: 8px; /* Optional, sharp is fine too */
+  padding: 32px;
+  transition: transform 0.1s, box-shadow 0.1s;
+}
+
+.neo-btn {
+  background-color: var(--neo-accent);
+  color: #000;
+  font-weight: 800;
+  text-transform: uppercase;
+  border: var(--neo-border);
+  box-shadow: 4px 4px 0px #000000;
+  padding: 16px 32px;
+  cursor: pointer;
+  transition: all 0.1s ease;
+}
+
+.neo-btn:active {
+  /* The "press" effect is removing the shadow and moving it down */
+  transform: translate(4px, 4px);
+  box-shadow: 0px 0px 0px #000000;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct NeoCard: View {
+    @State private var isPressed = false
+    let neoBorder: CGFloat = 3
+    let neoShadow: CGFloat = 6
+    
+    var body: some View {
+        Button(action: {}) {
+            VStack(alignment: .leading, spacing: 16) {
+                Text("NEO-BRUTALISM")
+                    .font(.system(size: 24, weight: .black, design: .default))
+                    .foregroundColor(.black)
+                Text("Stark shadows, bright colors.")
+                    .font(.system(size: 16, weight: .bold))
+                    .foregroundColor(.black)
+            }
+            .padding(24)
+            .frame(maxWidth: .infinity, alignment: .leading)
+            .background(Color(red: 1.0, green: 0.2, blue: 0.4)) // Bright Coral
+            // Neo-brutalist solid outline
+            .overlay(
+                Rectangle()
+                    .stroke(Color.black, lineWidth: neoBorder)
+            )
+        }
+        .buttonStyle(.plain)
+        // Hard drop shadow (0 blur)
+        .shadow(color: .black, radius: 0, x: isPressed ? 0 : neoShadow, y: isPressed ? 0 : neoShadow)
+        // Translate the button physically when pressed to cover the shadow
+        .offset(x: isPressed ? neoShadow : 0, y: isPressed ? neoShadow : 0)
+        .simultaneousGesture(
+            DragGesture(minimumDistance: 0)
+                .onChanged { _ in isPressed = true }
+                .onEnded { _ in isPressed = false }
+        )
+        // Instant pop, no smooth animation
+        .animation(.none, value: isPressed)
+    }
+}
+```
+- `.shadow(radius: 0)` is the secret. Set an offset (e.g. `x: 6, y: 6`).
+- For interactions, remove the shadow and translate the element by the same offset amounts using `.offset()`.
+- Ensure `.animation(.none)` — Neo-brutalism interactions should be instant, snapping like physical switches.
+
+### Flutter
+```dart
+class NeoCard extends StatefulWidget {
+  @override
+  State<NeoCard> createState() => _NeoCardState();
+}
+
+class _NeoCardState extends State<NeoCard> {
+  bool _isPressed = false;
+  final double neoOffset = 6.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTapDown: (_) => setState(() => _isPressed = true),
+      onTapUp: (_) => setState(() => _isPressed = false),
+      onTapCancel: () => setState(() => _isPressed = false),
+      child: Transform.translate(
+        // Move the container when pressed
+        offset: Offset(_isPressed ? neoOffset : 0, _isPressed ? neoOffset : 0),
+        child: Container(
+          padding: const EdgeInsets.all(24),
+          decoration: BoxDecoration(
+            color: const Color(0xFFFF3366), // Bright coral
+            border: Border.all(color: Colors.black, width: 3),
+            // Sharp shadow disappears on press
+            boxShadow: _isPressed ? [] : [
+              BoxShadow(
+                color: Colors.black,
+                blurRadius: 0,     // Critical: 0 blur
+                spreadRadius: 0,
+                offset: Offset(neoOffset, neoOffset),
+              ),
+            ],
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: const [
+              Text('NEO-BRUTALISM',
+                style: TextStyle(fontSize: 24, fontWeight: FontWeight.w900, color: Colors.black)),
+              SizedBox(height: 16),
+              Text('Stark shadows, bright colors.',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: Colors.black)),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- `blurRadius: 0` inside `BoxShadow` creates the solid block color.
+- Remove the shadow array entirely when `_isPressed` is true, and simultaneously use `Transform.translate` to shift the widget down-right.
+
+### React Native
+```jsx
+const NeoCard = () => {
+  const [pressed, setPressed] = useState(false);
+  const offset = 6;
+
+  return (
+    <Pressable
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}
+      style={{
+        backgroundColor: '#FF3366',
+        padding: 24,
+        borderWidth: 3,
+        borderColor: '#000',
+        transform: [
+          { translateX: pressed ? offset : 0 },
+          { translateY: pressed ? offset : 0 }
+        ],
+        // iOS Hard Shadow
+        shadowColor: '#000',
+        shadowOffset: { width: pressed ? 0 : offset, height: pressed ? 0 : offset },
+        shadowOpacity: pressed ? 0 : 1,
+        shadowRadius: 0,
+        // Android elevation cannot do 0-blur offset shadows natively
+        // elevation: 0
+      }}
+    >
+      <Text style={{ fontSize: 24, fontWeight: '900', color: '#000' }}>
+        NEO-BRUTALISM
+      </Text>
+    </Pressable>
+  );
+};
+```
+- **Android Limitation**: Standard `elevation` CANNOT create an unblurred, offset drop shadow. 
+- **Solution**: To make this work on Android, you MUST use the `react-native-drop-shadow` library or fake it by rendering an identical black `<View>` absolutely positioned directly behind the main card.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun NeoCard() {
+    var isPressed by remember { mutableStateOf(false) }
+    val neoOffset = 6.dp
+    
+    // Compose Modifier.shadow() always blurs. 
+    // To get a solid hard shadow, we use Modifier.drawBehind.
+    Box(
+        modifier = Modifier
+            .padding(16.dp)
+            .offset(
+                x = if (isPressed) neoOffset else 0.dp,
+                y = if (isPressed) neoOffset else 0.dp
+            )
+            .drawBehind {
+                if (!isPressed) {
+                    drawRect(
+                        color = Color.Black,
+                        topLeft = Offset(neoOffset.toPx(), neoOffset.toPx()),
+                        size = size
+                    )
+                }
+            }
+            .background(Color(0xFFFF3366))
+            .border(3.dp, Color.Black)
+            .pointerInput(Unit) {
+                detectTapGestures(
+                    onPress = {
+                        isPressed = true
+                        tryAwaitRelease()
+                        isPressed = false
+                    }
+                )
+            }
+            .padding(24.dp)
+    ) {
+        Column {
+            Text("NEO-BRUTALISM",
+                fontSize = 24.sp, fontWeight = FontWeight.Black, color = Color.Black)
+            Spacer(Modifier.height(16.dp))
+            Text("Stark shadows, bright colors.",
+                fontSize = 16.sp, fontWeight = FontWeight.Bold, color = Color.Black)
+        }
+    }
+}
+```
+- **Compose Limitation**: Native `Modifier.shadow()` applies ambient blur which breaks the neo-brutalist aesthetic.
+- Use `Modifier.drawBehind { drawRect(...) }` with an offset to manually draw the solid shadow block behind the container.
+- Shift the container using `Modifier.offset` on press, while hiding the shadow layer.
+
+## Do's and Don'ts
+- **DO**: Make the active/pressed state visually translate the button to cover its shadow, creating a physical "click" feel.
+- **DON'T**: Use gradients or blurred shadows. The aesthetic relies entirely on flat, sharp vectors.
+
+## 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.