opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,309 @@
+---
+name: gradient-design
+description: Web and App implementation guide for Gradient Design. Trigger when user wants heavy gradient usage, vibrant transitions, and modern energetic feels.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Gradient Design
+
+> "Color in motion. Fluid transitions that add energy and depth to flat surfaces."
+
+
+## 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. **Gradients are the Primary Visual**: Backgrounds, buttons, text, and borders all use gradients instead of solid colors.
+2. **Analogous or Complementary Blends**: Gradients must be carefully chosen so the transition colors don't become muddy (e.g., blending red to green creates a muddy brown in the middle. Blend red to yellow to green instead).
+3. **Subtle Animation**: Background gradients should slowly shift and rotate.
+
+## Visual DNA
+- **Colors**: **Warm Tech** (blues to oranges) or create custom vibrant pairs (e.g., Purple to Coral, Deep Blue to Cyan).
+- **Typography**: Clean, heavy sans-serifs that can be easily masked with a gradient fill.
+- **Layout**: Keep the UI structure minimal (glass panels or white/black cards) to let the gradients breathe.
+
+## Web Implementation
+- **CSS Example**:
+```css
+body {
+  /* Complex mesh-like animated gradient */
+  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
+  background-size: 400% 400%;
+  animation: gradientBG 15s ease infinite;
+  color: #fff;
+}
+
+@keyframes gradientBG {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+.gradient-text {
+  background: linear-gradient(90deg, #F9D423 0%, #FF4E50 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 4rem;
+  font-weight: 900;
+}
+
+.gradient-border-card {
+  background: #ffffff;
+  color: #333;
+  padding: 32px;
+  border-radius: 12px;
+  position: relative;
+  /* Use a pseudo-element for the gradient border */
+}
+.gradient-border-card::before {
+  content: '';
+  position: absolute;
+  top: -3px; left: -3px; right: -3px; bottom: -3px;
+  background: linear-gradient(90deg, #8A2387, #E94057, #F27121);
+  z-index: -1;
+  border-radius: 15px;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct GradientDesignView: View {
+    @State private var animateGradient = false
+    
+    var body: some View {
+        ZStack {
+            // Animated Background Gradient
+            LinearGradient(
+                colors: [Color(hex: "ee7752"), Color(hex: "e73c7e"), Color(hex: "23a6d5"), Color(hex: "23d5ab")],
+                startPoint: animateGradient ? .topLeading : .bottomLeading,
+                endPoint: animateGradient ? .bottomTrailing : .topTrailing
+            )
+            .ignoresSafeArea()
+            .onAppear {
+                withAnimation(.linear(duration: 5.0).repeatForever(autoreverses: true)) {
+                    animateGradient.toggle()
+                }
+            }
+            
+            VStack(spacing: 40) {
+                // Gradient Text
+                Text("VIBRANT")
+                    .font(.system(size: 60, weight: .black))
+                    .foregroundStyle(
+                        LinearGradient(
+                            colors: [Color(hex: "F9D423"), Color(hex: "FF4E50")],
+                            startPoint: .leading,
+                            endPoint: .trailing
+                        )
+                    )
+                
+                // Gradient Border Card
+                Text("Gradient Border")
+                    .padding()
+                    .frame(width: 250, height: 150)
+                    .background(Color.white)
+                    .cornerRadius(12)
+                    .overlay(
+                        RoundedRectangle(cornerRadius: 12)
+                            .stroke(
+                                LinearGradient(
+                                    colors: [Color(hex: "8A2387"), Color(hex: "E94057"), Color(hex: "F27121")],
+                                    startPoint: .leading, endPoint: .trailing
+                                ),
+                                lineWidth: 3
+                            )
+                    )
+            }
+        }
+    }
+}
+```
+- `.foregroundStyle(LinearGradient(...))` makes gradient text incredibly easy in modern SwiftUI.
+- Use `.stroke(LinearGradient(...))` inside an `.overlay` to create gradient borders.
+
+### Flutter
+```dart
+class GradientDesignScreen extends StatefulWidget {
+  @override
+  State<GradientDesignScreen> createState() => _GradientDesignScreenState();
+}
+
+class _GradientDesignScreenState extends State<GradientDesignScreen> with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<Alignment> _topAlignment;
+  late Animation<Alignment> _bottomAlignment;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 5))..repeat(reverse: true);
+    _topAlignment = TweenSequence<Alignment>([
+      TweenSequenceItem(tween: AlignmentTween(begin: Alignment.topLeft, end: Alignment.topRight), weight: 1),
+    ]).animate(_controller);
+    _bottomAlignment = TweenSequence<Alignment>([
+      TweenSequenceItem(tween: AlignmentTween(begin: Alignment.bottomRight, end: Alignment.bottomLeft), weight: 1),
+    ]).animate(_controller);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: AnimatedBuilder(
+        animation: _controller,
+        builder: (context, _) {
+          return Container(
+            width: double.infinity,
+            decoration: BoxDecoration(
+              // Animated Background Gradient
+              gradient: LinearGradient(
+                begin: _topAlignment.value,
+                end: _bottomAlignment.value,
+                colors: const [Color(0xFFee7752), Color(0xFFe73c7e), Color(0xFF23a6d5), Color(0xFF23d5ab)],
+              ),
+            ),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                // Gradient Text
+                ShaderMask(
+                  blendMode: BlendMode.srcIn,
+                  shaderCallback: (bounds) => const LinearGradient(
+                    colors: [Color(0xFFF9D423), Color(0xFFFF4E50)],
+                  ).createShader(Rect.fromLTWH(0, 0, bounds.width, bounds.height)),
+                  child: const Text('VIBRANT', style: TextStyle(fontSize: 60, fontWeight: FontWeight.w900, color: Colors.white)),
+                ),
+                const SizedBox(height: 40),
+                // Gradient Border Card
+                Container(
+                  width: 250, height: 150,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(15),
+                    gradient: const LinearGradient(colors: [Color(0xFF8A2387), Color(0xFFE94057), Color(0xFFF27121)]),
+                  ),
+                  padding: const EdgeInsets.all(3), // Border width
+                  child: Container(
+                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(12)),
+                    alignment: Alignment.center,
+                    child: const Text('Gradient Border'),
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+```
+- Flutter text gradients require `ShaderMask` with `BlendMode.srcIn`.
+- To animate a gradient background, animate the `Alignment` values of the `LinearGradient`.
+
+### React Native
+```jsx
+// REQUIRES: expo-linear-gradient OR react-native-linear-gradient
+import { LinearGradient } from 'expo-linear-gradient';
+import MaskedView from '@react-native-masked-view/masked-view';
+
+const GradientDesignScreen = () => {
+  return (
+    <LinearGradient
+      colors={['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab']}
+      start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
+      style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
+    >
+      {/* Gradient Text */}
+      <MaskedView
+        style={{ height: 80, width: '100%', flexDirection: 'row' }}
+        maskElement={
+          <View style={{ backgroundColor: 'transparent', flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <Text style={{ fontSize: 60, fontWeight: '900', color: 'black' }}>VIBRANT</Text>
+          </View>
+        }
+      >
+        <LinearGradient
+          colors={['#F9D423', '#FF4E50']}
+          start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
+          style={{ flex: 1 }}
+        />
+      </MaskedView>
+
+      <View style={{ marginTop: 40 }}>
+        {/* Gradient Border Card */}
+        <LinearGradient
+          colors={['#8A2387', '#E94057', '#F27121']}
+          start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}
+          style={{ padding: 3, borderRadius: 15 }}
+        >
+          <View style={{ backgroundColor: '#FFF', width: 250, height: 150, borderRadius: 12, justifyContent: 'center', alignItems: 'center' }}>
+            <Text>Gradient Border</Text>
+          </View>
+        </LinearGradient>
+      </View>
+    </LinearGradient>
+  );
+};
+```
+- Gradient text in React Native is notoriously annoying. You must use `@react-native-masked-view/masked-view` to mask a `LinearGradient` with a `<Text>` node.
+- Gradient borders are achieved by nesting a solid view inside a `LinearGradient` with a small padding (e.g., `padding: 3`).
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun GradientDesignScreen() {
+    // Animated Background
+    val infiniteTransition = rememberInfiniteTransition()
+    val offset by infiniteTransition.animateFloat(
+        initialValue = 0f, targetValue = 1000f,
+        animationSpec = infiniteRepeatable(tween(5000, easing = LinearEasing), RepeatMode.Reverse)
+    )
+
+    val bgBrush = Brush.linearGradient(
+        colors = listOf(Color(0xFFee7752), Color(0xFFe73c7e), Color(0xFF23a6d5), Color(0xFF23d5ab)),
+        start = Offset(offset, 0f), end = Offset(offset + 500f, 1000f)
+    )
+
+    Box(
+        modifier = Modifier.fillMaxSize().background(bgBrush),
+        contentAlignment = Alignment.Center
+    ) {
+        Column(horizontalAlignment = Alignment.CenterHorizontally) {
+            // Gradient Text
+            val textBrush = Brush.horizontalGradient(listOf(Color(0xFFF9D423), Color(0xFFFF4E50)))
+            Text(
+                text = "VIBRANT",
+                style = TextStyle(brush = textBrush, fontSize = 60.sp, fontWeight = FontWeight.Black)
+            )
+
+            Spacer(Modifier.height(40.dp))
+
+            // Gradient Border Card
+            val borderBrush = Brush.horizontalGradient(listOf(Color(0xFF8A2387), Color(0xFFE94057), Color(0xFFF27121)))
+            Box(
+                modifier = Modifier
+                    .size(250.dp, 150.dp)
+                    .border(3.dp, borderBrush, RoundedCornerShape(12.dp))
+                    .background(Color.White, RoundedCornerShape(12.dp)),
+                contentAlignment = Alignment.Center
+            ) {
+                Text("Gradient Border")
+            }
+        }
+    }
+}
+```
+- Compose handles gradients beautifully via `Brush`.
+- You can pass a `Brush` directly into a `TextStyle` for gradient text, or into a `Modifier.border()` for gradient borders.
+
+## Do's and Don'ts
+- **DO**: Use multi-stop gradients (3 or 4 colors) rather than just simple A-to-B gradients for a more modern, rich look.
+- **DON'T**: Apply gradients to tiny text or thin icons, they will lose legibility immediately.
+
+## 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/high-contrast/SKILL.md

@@ -0,0 +1,288 @@
+---
+name: high-contrast
+description: Web and App implementation guide for High Contrast Design. Trigger when user wants accessibility-focused design, extreme legibility, or stark visual impact.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# High Contrast Design
+
+> "Maximum legibility. Stark, powerful, and universally accessible."
+
+
+## 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. **WCAG AAA Compliance**: Every color pairing must exceed a 7:1 contrast ratio.
+2. **Clear Boundaries**: Interactive elements have highly visible borders and focus states.
+3. **No Ambiguity**: Avoid subtle greys, low-opacity text, or purely decorative elements that distract from the core content.
+
+## Visual DNA
+- **Colors**: **Industrial Chic** (Black and White) or **Modern Editorial**. Often uses a single, highly luminous accent color (like pure Yellow `#FFFF00` or Cyan `#00FFFF`) against black.
+- **Typography**: Highly legible, robust sans-serifs (`Atkinson Hyperlegible`, `Inter`, `Roboto`). Large base font sizes (18px+).
+- **Styling**: Solid 2px borders around cards and buttons. Avoid drop shadows as they reduce edge clarity.
+
+## Web Implementation
+- Focus heavily on focus states (`:focus-visible`) and clear active states.
+- **CSS Example**:
+```css
+:root {
+  --hc-bg: #ffffff;
+  --hc-text: #000000;
+  --hc-accent: #0000FF; /* Pure blue */
+  --hc-focus: #FF00FF; /* High visibility focus ring */
+}
+
+body {
+  background-color: var(--hc-bg);
+  color: var(--hc-text);
+  font-family: 'Atkinson Hyperlegible', sans-serif;
+  font-size: 18px; /* Larger default */
+}
+
+.hc-card {
+  background-color: #ffffff;
+  border: 3px solid #000000; /* Unmissable boundary */
+  padding: 32px;
+  border-radius: 8px;
+}
+
+.hc-btn {
+  background-color: var(--hc-accent);
+  color: #ffffff;
+  border: 3px solid transparent; /* Reserve space for focus */
+  border-radius: 4px;
+  padding: 16px 32px;
+  font-weight: 700;
+  font-size: 1.1rem;
+  cursor: pointer;
+}
+
+/* Crucial for high contrast / accessibility */
+.hc-btn:focus-visible, a:focus-visible {
+  outline: 4px solid var(--hc-focus);
+  outline-offset: 4px;
+}
+
+a {
+  color: var(--hc-accent);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct HighContrastView: View {
+    var body: some View {
+        VStack(spacing: 32) {
+            // High Contrast Card
+            VStack(alignment: .leading, spacing: 16) {
+                Text("Maximum Legibility")
+                    .font(.custom("Atkinson Hyperlegible", size: 24))
+                    .fontWeight(.bold)
+                    .foregroundColor(.black)
+                
+                Text("Content is king. Borders are stark. Contrast ratios exceed 7:1.")
+                    .font(.custom("Atkinson Hyperlegible", size: 18))
+                    .foregroundColor(.black)
+            }
+            .padding(32)
+            .background(Color.white)
+            .overlay(
+                RoundedRectangle(cornerRadius: 8)
+                    .stroke(Color.black, lineWidth: 3)
+            )
+            
+            // High Contrast Action Button
+            Button(action: {}) {
+                Text("CONFIRM ACTION")
+                    .font(.custom("Atkinson Hyperlegible", size: 18))
+                    .fontWeight(.black)
+                    .foregroundColor(.white)
+                    .padding(.vertical, 16)
+                    .padding(.horizontal, 32)
+                    .background(Color.blue) // Must be a high-contrast blue, e.g., #0000FF
+                    .cornerRadius(4)
+            }
+        }
+        .padding()
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(Color.white)
+    }
+}
+```
+- Rely on thick `.stroke(Color.black, lineWidth: 3)` overlays.
+- Ensure text is pure `.black` on pure `.white`. Do not use `.secondary` colors if they drop below a 7:1 contrast ratio.
+- Use fonts specifically designed for legibility, like Atkinson Hyperlegible.
+
+### Flutter
+```dart
+class HighContrastScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.white,
+      body: Center(
+        child: Padding(
+          padding: const EdgeInsets.all(24.0),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              // High Contrast Card
+              Container(
+                width: double.infinity,
+                padding: const EdgeInsets.all(32),
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(color: Colors.black, width: 3), // Unmissable boundary
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: const [
+                    Text('Maximum Legibility', 
+                      style: TextStyle(fontFamily: 'Atkinson', fontSize: 24, fontWeight: FontWeight.bold, color: Colors.black)),
+                    SizedBox(height: 16),
+                    Text('Content is king. Borders are stark. Contrast ratios exceed 7:1.', 
+                      style: TextStyle(fontFamily: 'Atkinson', fontSize: 18, color: Colors.black)),
+                  ],
+                ),
+              ),
+              const SizedBox(height: 32),
+              
+              // High Contrast Button
+              ElevatedButton(
+                onPressed: () {},
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: const Color(0xFF0000FF), // Pure blue
+                  foregroundColor: Colors.white,
+                  padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
+                  elevation: 0, // No shadows
+                ),
+                child: const Text('CONFIRM ACTION', 
+                  style: TextStyle(fontFamily: 'Atkinson', fontSize: 18, fontWeight: FontWeight.w900)),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+```
+- Disable `elevation` on buttons; shadows blur the edges and reduce contrast.
+- Use `Border.all(color: Colors.black, width: 3)` on containers to explicitly define spatial boundaries for users with low vision.
+
+### React Native
+```jsx
+const HighContrastScreen = () => {
+  return (
+    <View style={{ flex: 1, backgroundColor: '#FFFFFF', padding: 24, justifyContent: 'center' }}>
+      
+      {/* High Contrast Card */}
+      <View style={{
+        backgroundColor: '#FFFFFF',
+        borderColor: '#000000',
+        borderWidth: 3,
+        borderRadius: 8,
+        padding: 32,
+        marginBottom: 32
+      }}>
+        <Text style={{ fontFamily: 'Atkinson-Bold', fontSize: 24, color: '#000000', marginBottom: 16 }}>
+          Maximum Legibility
+        </Text>
+        <Text style={{ fontFamily: 'Atkinson-Regular', fontSize: 18, color: '#000000' }}>
+          Content is king. Borders are stark. Contrast ratios exceed 7:1.
+        </Text>
+      </View>
+
+      {/* High Contrast Button */}
+      <TouchableOpacity style={{
+        backgroundColor: '#0000FF',
+        paddingVertical: 16,
+        paddingHorizontal: 32,
+        borderRadius: 4,
+        alignItems: 'center'
+      }}>
+        <Text style={{ fontFamily: 'Atkinson-Bold', fontSize: 18, color: '#FFFFFF', fontWeight: '900' }}>
+          CONFIRM ACTION
+        </Text>
+      </TouchableOpacity>
+      
+    </View>
+  );
+};
+```
+- In React Native, accessibility relies heavily on high contrast. Ensure `borderWidth: 3` and explicit pure `#000000` text colors.
+- Make sure to use accessible `<TouchableOpacity>` areas (minimum 48x48 padding for hit slop).
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun HighContrastScreen() {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(Color.White)
+            .padding(24.dp),
+        verticalArrangement = Arrangement.Center
+    ) {
+        // High Contrast Card
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .background(Color.White, RoundedCornerShape(8.dp))
+                .border(3.dp, Color.Black, RoundedCornerShape(8.dp))
+                .padding(32.dp)
+        ) {
+            Column {
+                Text(
+                    text = "Maximum Legibility",
+                    fontSize = 24.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = Color.Black
+                )
+                Spacer(Modifier.height(16.dp))
+                Text(
+                    text = "Content is king. Borders are stark. Contrast ratios exceed 7:1.",
+                    fontSize = 18.sp,
+                    color = Color.Black
+                )
+            }
+        }
+        
+        Spacer(Modifier.height(32.dp))
+        
+        // High Contrast Button
+        Button(
+            onClick = { },
+            colors = ButtonDefaults.buttonColors(
+                containerColor = Color(0xFF0000FF),
+                contentColor = Color.White
+            ),
+            shape = RoundedCornerShape(4.dp),
+            elevation = null, // Disable shadows for stark look
+            modifier = Modifier.fillMaxWidth().height(56.dp)
+        ) {
+            Text("CONFIRM ACTION", fontSize = 18.sp, fontWeight = FontWeight.Black)
+        }
+    }
+}
+```
+- Use `Modifier.border(3.dp, Color.Black)` around containers.
+- Disable button elevations (`elevation = null`) to keep the design perfectly flat and sharp.
+
+## Do's and Don'ts
+- **DO**: Run your colors through a contrast checker. If it's below 7:1, adjust it.
+- **DON'T**: Rely on color alone to convey meaning (e.g., don't just make an error state red; make it red AND add an error icon AND bold the text).
+
+## 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.