opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,293 @@
+---
+name: swiss-design
+description: Web and App implementation guide for Swiss Design (International Typographic Style). Trigger when user wants strict grid systems, strong typography, and clean, asymmetrical alignment.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Swiss Design (International Typographic Style)
+
+> "Form follows function. The grid is absolute. Typography is the primary visual element."
+
+
+## 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. **Mathematical Grids**: Everything aligns to a strict underlying grid. Asymmetry is preferred over centered text.
+2. **Sans-Serif Typography**: Helvetica is the king, but any clean, neutral sans-serif works. Flush left, ragged right text alignment.
+3. **Objective Photography**: If images are used, they should be objective, documentary-style photos, not stylized illustrations.
+
+## Visual DNA
+- **Colors**: Very limited. Usually just black, white, and ONE highly saturated accent color (often primary red, blue, or yellow). The **Industrial Chic** palette works perfectly.
+- **Typography**: `Helvetica Neue`, `Inter`, or `Roboto`. Huge contrast in font sizes (e.g., massive 6rem headers paired with 1rem body text).
+- **Layout**: Do NOT center text. Ever.
+
+## Web Implementation
+- Use CSS Grid extensively. Let columns dictate the layout.
+- **CSS Example**:
+```css
+body {
+  background-color: #f4f4f4;
+  color: #111;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  line-height: 1.4;
+}
+
+.swiss-grid {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 20px;
+  padding: 40px;
+}
+
+.swiss-header {
+  grid-column: 1 / 11; /* spans across multiple columns, leaving right side empty */
+  font-size: 6vw;
+  font-weight: 700;
+  text-transform: lowercase; /* Optional, but common in brutalist/swiss */
+  margin-bottom: 2rem;
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+}
+
+.swiss-content {
+  grid-column: 4 / 9; /* Indented alignment */
+  font-size: 1.25rem;
+  text-align: left; /* Flush left, ragged right */
+}
+
+.swiss-accent {
+  color: #E2001A; /* Classic Swiss Red */
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct SwissDesignView: View {
+    var body: some View {
+        ScrollView {
+            VStack(alignment: .leading, spacing: 0) {
+                // Header Block
+                VStack(alignment: .leading, spacing: 8) {
+                    Text("the grid")
+                        .font(.custom("Helvetica Neue", size: 60))
+                        .fontWeight(.heavy)
+                        .tracking(-2) // Tight letter spacing
+                    Text("is absolute.")
+                        .font(.custom("Helvetica Neue", size: 60))
+                        .fontWeight(.heavy)
+                        .tracking(-2)
+                        .foregroundColor(Color(hex: "E2001A")) // Swiss Red
+                }
+                .padding(.horizontal, 24)
+                .padding(.top, 60)
+                .padding(.bottom, 40)
+                
+                Divider().background(Color.black)
+                
+                // Asymmetrical Content Block
+                HStack(alignment: .top, spacing: 20) {
+                    // Empty left column (negative space is structural)
+                    Spacer().frame(width: 40)
+                    
+                    VStack(alignment: .leading, spacing: 16) {
+                        Text("Form follows function.")
+                            .font(.custom("Helvetica Neue", size: 24))
+                            .fontWeight(.bold)
+                        
+                        Text("Typography is the primary visual element. Everything aligns to a strict underlying grid. Asymmetry is preferred over centered text.")
+                            .font(.custom("Helvetica Neue", size: 16))
+                            .lineSpacing(6)
+                    }
+                    .padding(.vertical, 40)
+                    .padding(.trailing, 24)
+                }
+                
+                Divider().background(Color.black)
+            }
+            .frame(maxWidth: .infinity, alignment: .leading)
+        }
+        .background(Color(white: 0.96))
+        .foregroundColor(.black)
+    }
+}
+```
+- Strict `alignment: .leading` everywhere. Never use `.center`.
+- Use `Spacer().frame(width: X)` in `HStack`s to intentionally push content off the left margin, creating the classic Swiss indented asymmetrical grid.
+
+### Flutter
+```dart
+class SwissDesignScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF4F4F4),
+      body: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 80),
+            // Header
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: const [
+                  Text('the grid', style: TextStyle(fontFamily: 'Helvetica', fontSize: 60, fontWeight: FontWeight.w900, height: 0.9, letterSpacing: -2)),
+                  Text('is absolute.', style: TextStyle(fontFamily: 'Helvetica', fontSize: 60, fontWeight: FontWeight.w900, height: 0.9, letterSpacing: -2, color: Color(0xFFE2001A))),
+                ],
+              ),
+            ),
+            const SizedBox(height: 40),
+            const Divider(color: Colors.black, thickness: 1, height: 1),
+            
+            // Asymmetrical Content
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Structural empty column
+                const SizedBox(width: 64),
+                // Content column
+                Expanded(
+                  child: Padding(
+                    padding: const EdgeInsets.only(top: 40.0, bottom: 40.0, right: 24.0),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: const [
+                        Text('Form follows function.', style: TextStyle(fontFamily: 'Helvetica', fontSize: 24, fontWeight: FontWeight.bold)),
+                        SizedBox(height: 16),
+                        Text('Typography is the primary visual element. Everything aligns to a strict underlying grid.', style: TextStyle(fontFamily: 'Helvetica', fontSize: 16, height: 1.4)),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            const Divider(color: Colors.black, thickness: 1, height: 1),
+          ],
+        ),
+      ),
+    );
+  }
+}
+```
+- `CrossAxisAlignment.start` is mandatory on all Columns.
+- Use a `Row` with a fixed `SizedBox` width on the left and an `Expanded` widget on the right to enforce the asymmetrical grid column.
+
+### React Native
+```jsx
+const SwissDesignScreen = () => {
+  return (
+    <ScrollView style={{ flex: 1, backgroundColor: '#F4F4F4' }}>
+      
+      {/* Header */}
+      <View style={{ paddingHorizontal: 24, paddingTop: 80, paddingBottom: 40 }}>
+        <Text style={{ fontFamily: 'HelveticaNeue-CondensedBlack', fontSize: 60, lineHeight: 60, letterSpacing: -2, color: '#111' }}>
+          the grid
+        </Text>
+        <Text style={{ fontFamily: 'HelveticaNeue-CondensedBlack', fontSize: 60, lineHeight: 60, letterSpacing: -2, color: '#E2001A' }}>
+          is absolute.
+        </Text>
+      </View>
+
+      <View style={{ height: 1, backgroundColor: '#111' }} />
+
+      {/* Asymmetrical Layout */}
+      <View style={{ flexDirection: 'row', paddingVertical: 40 }}>
+        {/* Empty left column */}
+        <View style={{ width: 64 }} />
+        
+        {/* Content */}
+        <View style={{ flex: 1, paddingRight: 24 }}>
+          <Text style={{ fontFamily: 'HelveticaNeue-Bold', fontSize: 24, color: '#111', marginBottom: 16 }}>
+            Form follows function.
+          </Text>
+          <Text style={{ fontFamily: 'HelveticaNeue-Regular', fontSize: 16, lineHeight: 24, color: '#111' }}>
+            Typography is the primary visual element. Everything aligns to a strict underlying grid.
+          </Text>
+        </View>
+      </View>
+
+      <View style={{ height: 1, backgroundColor: '#111' }} />
+
+    </ScrollView>
+  );
+};
+```
+- Link the Helvetica Neue font family. The contrast between `HelveticaNeue-CondensedBlack` for headers and `HelveticaNeue-Regular` for body copy defines this style.
+- Use `flexDirection: 'row'` to build the strict column structure.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun SwissDesignScreen() {
+    Column(
+        modifier = Modifier.fillMaxSize().background(Color(0xFFF4F4F4)).verticalScroll(rememberScrollState())
+    ) {
+        Spacer(Modifier.height(80.dp))
+        
+        // Header
+        Column(modifier = Modifier.padding(horizontal = 24.dp, vertical = 40.dp)) {
+            Text(
+                text = "the grid",
+                fontFamily = FontFamily.SansSerif, // Replace with Helvetica
+                fontSize = 60.sp,
+                fontWeight = FontWeight.Black,
+                letterSpacing = (-2).sp,
+                lineHeight = 60.sp,
+                color = Color.Black
+            )
+            Text(
+                text = "is absolute.",
+                fontFamily = FontFamily.SansSerif,
+                fontSize = 60.sp,
+                fontWeight = FontWeight.Black,
+                letterSpacing = (-2).sp,
+                lineHeight = 60.sp,
+                color = Color(0xFFE2001A)
+            )
+        }
+        
+        Divider(color = Color.Black, thickness = 1.dp)
+        
+        // Asymmetrical Grid Row
+        Row(modifier = Modifier.fillMaxWidth().padding(vertical = 40.dp)) {
+            // Empty grid column
+            Spacer(modifier = Modifier.width(64.dp))
+            
+            // Content
+            Column(modifier = Modifier.weight(1f).padding(right = 24.dp)) {
+                Text(
+                    text = "Form follows function.",
+                    fontSize = 24.sp,
+                    fontWeight = FontWeight.Bold,
+                    color = Color.Black
+                )
+                Spacer(Modifier.height(16.dp))
+                Text(
+                    text = "Typography is the primary visual element. Everything aligns to a strict underlying grid.",
+                    fontSize = 16.sp,
+                    color = Color.Black
+                )
+            }
+        }
+        
+        Divider(color = Color.Black, thickness = 1.dp)
+    }
+}
+```
+- Use `Divider(color = Color.Black, thickness = 1.dp)` to create the harsh horizontal structural rules.
+- Combine `Row`, a fixed `Spacer` width, and a `Column` with `Modifier.weight(1f)` to enforce the asymmetrical design.
+
+## Do's and Don'ts
+- **DO**: Use negative space as a structural element. Empty columns are just as important as filled ones.
+- **DON'T**: Center align text. Do not use serif fonts. Do not use drop shadows.
+
+## 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/synthwave/SKILL.md

@@ -0,0 +1,257 @@
+---
+name: synthwave
+description: Web and App implementation guide for Synthwave. Trigger when user wants 80s-inspired neon, dark backgrounds, outrun grids, and Miami Vice aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# Synthwave (Outrun)
+
+> "Driving a Ferrari through a neon-lit digital grid at midnight."
+
+
+## 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. **Dark Mode by Default**: Absolute pitch-black or deep purple backgrounds.
+2. **Neon Glowing Vectors**: Bright magenta, cyan, and yellow wireframes, text, and grids. Heavy use of `box-shadow` and `text-shadow` for glow effects.
+3. **The Perspective Grid**: The defining visual is a glowing grid that fades into a vanishing point on the horizon.
+
+## Visual DNA
+- **Colors**: Deep space backgrounds (`#0B0C10`, `#110022`). Glowing neon accents: Cyan (`#00FFFF`), Hot Pink (`#FF00FF`), Electric Yellow (`#FFFF00`).
+- **Typography**: 80s chrome text, brush script (like a neon sign), and heavy italicized sans-serifs.
+- **Shadows**: Drop shadows are not black; they are the same color as the element, heavily blurred, to create light emission.
+
+## Web Implementation
+- Rely on `text-shadow` for neon signs and 3D transforms for the floor grid.
+- **CSS Example**:
+```css
+body {
+  background-color: #090014;
+  color: #fff;
+  font-family: 'Montserrat', sans-serif;
+  overflow-x: hidden;
+}
+
+/* Neon Text Glow */
+.synth-neon-text {
+  font-family: 'Mr Dafoe', cursive; /* A classic 80s script */
+  font-size: 4rem;
+  color: #fff;
+  text-shadow: 
+    0 0 5px #fff,
+    0 0 10px #fff,
+    0 0 20px #FF00FF,
+    0 0 40px #FF00FF,
+    0 0 80px #FF00FF;
+}
+
+/* The Perspective Grid Floor */
+.synth-grid {
+  position: absolute;
+  bottom: 0; left: -50%;
+  width: 200%; height: 50vh;
+  background-image: 
+    linear-gradient(rgba(0, 255, 255, 0.8) 2px, transparent 2px),
+    linear-gradient(90deg, rgba(0, 255, 255, 0.8) 2px, transparent 2px);
+  background-size: 50px 50px;
+  
+  /* Create the 3D horizon effect */
+  transform: perspective(500px) rotateX(60deg);
+  transform-origin: top center;
+  
+  /* Fade out towards the horizon */
+  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
+  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct NeonText: View {
+    let text: String
+    
+    var body: some View {
+        Text(text)
+            .font(.custom("Mr Dafoe", size: 64))
+            .foregroundColor(.white)
+            // Layering shadows to create a glowing bloom
+            .shadow(color: .white, radius: 2)
+            .shadow(color: .pink, radius: 5)
+            .shadow(color: .pink, radius: 10)
+            .shadow(color: .pink, radius: 20)
+    }
+}
+
+struct SynthwaveScreen: View {
+    var body: some View {
+        ZStack {
+            Color(red: 0.03, green: 0.0, blue: 0.08).ignoresSafeArea() // #090014
+            
+            VStack {
+                NeonText(text: "Outrun")
+                Spacer()
+            }
+            
+            // Note: A 3D perspective grid requires SceneKit or a pre-rendered image
+            // Native SwiftUI 3D transforms apply to the view, but won't draw an infinite floor grid easily.
+            Image("synth_grid")
+                .resizable()
+                .scaledToFill()
+                .frame(height: 300)
+                .offset(y: 200)
+        }
+    }
+}
+```
+- Stack multiple `.shadow(color:radius:)` modifiers directly on the text to create a vibrant neon bloom effect.
+- The 3D wireframe horizon grid is best achieved via a pre-rendered image background.
+
+### Flutter
+```dart
+class NeonText extends StatelessWidget {
+  final String text;
+  const NeonText(this.text);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text,
+      style: const TextStyle(
+        fontFamily: 'Mr Dafoe', // Or any cursive 80s font
+        fontSize: 64,
+        color: Colors.white,
+        shadows: [
+          Shadow(color: Colors.white, blurRadius: 2),
+          Shadow(color: Colors.pinkAccent, blurRadius: 5),
+          Shadow(color: Colors.pinkAccent, blurRadius: 15),
+          Shadow(color: Colors.pinkAccent, blurRadius: 30),
+        ],
+      ),
+    );
+  }
+}
+
+class SynthwaveScreen extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFF090014),
+      body: Stack(
+        children: [
+          // Background grid asset
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 300,
+            child: Image.asset('assets/synth_grid.png', fit: BoxFit.cover),
+          ),
+          // Foreground UI
+          const Center(child: NeonText('Outrun')),
+        ],
+      ),
+    );
+  }
+}
+```
+- `TextStyle` accepts a list of `Shadow` objects. Stack them with exponentially increasing `blurRadius` values (e.g., 2, 5, 15, 30) to simulate light dispersal.
+- Avoid rendering the perspective grid programmatically using `CustomPaint` unless you want to do the 3D math manually. Use an asset.
+
+### React Native
+```jsx
+// React Native only supports ONE textShadow per Text element natively.
+// To create a true neon glow, you must stack identical Text components.
+
+const NeonText = ({ text }) => {
+  const baseStyle = {
+    fontFamily: 'MrDafoe',
+    fontSize: 64,
+    color: '#FFF',
+    position: 'absolute',
+  };
+
+  return (
+    <View style={{ alignItems: 'center', height: 80 }}>
+      {/* Outer Glow */}
+      <Text style={[baseStyle, { textShadowColor: '#FF00FF', textShadowRadius: 30 }]}>{text}</Text>
+      {/* Mid Glow */}
+      <Text style={[baseStyle, { textShadowColor: '#FF00FF', textShadowRadius: 15 }]}>{text}</Text>
+      {/* Core Glow */}
+      <Text style={[baseStyle, { textShadowColor: '#FFF', textShadowRadius: 5 }]}>{text}</Text>
+      {/* Crisp White Core */}
+      <Text style={baseStyle}>{text}</Text>
+    </View>
+  );
+};
+
+const SynthwaveScreen = () => (
+  <View style={{ flex: 1, backgroundColor: '#090014', justifyContent: 'center' }}>
+    <NeonText text="Outrun" />
+    
+    <Image 
+      source={require('./synth_grid.png')}
+      style={{ position: 'absolute', bottom: 0, width: '100%', height: 300, resizeMode: 'cover' }}
+    />
+  </View>
+);
+```
+- **React Native limitation**: You cannot pass an array of shadows to `textShadow`.
+- **Workaround**: Render the exact same `<Text>` component 3-4 times on top of each other using `position: 'absolute'`, each with a different `textShadowRadius` to build the bloom.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun NeonText(text: String) {
+    Text(
+        text = text,
+        fontSize = 64.sp,
+        color = Color.White,
+        fontFamily = FontFamily.Cursive,
+        // Compose only supports a single Shadow natively on TextStyle
+        style = TextStyle(
+            shadow = Shadow(
+                color = Color(0xFFFF00FF),
+                offset = Offset.Zero,
+                blurRadius = 30f // Single large blur as fallback
+            )
+        ),
+        // To get stacked blurs, we use Modifier.drawBehind to draw the text repeatedly
+    )
+}
+
+// Advanced stacked glow approach
+@Composable
+fun AdvancedNeonText(text: String) {
+    Box(contentAlignment = Alignment.Center) {
+        // Render layers of text to build the glow
+        val blurs = listOf(30f, 15f, 5f)
+        blurs.forEach { blur ->
+            Text(
+                text = text,
+                color = Color.Transparent,
+                style = TextStyle(
+                    shadow = Shadow(Color(0xFFFF00FF), Offset.Zero, blur)
+                )
+            )
+        }
+        // Top solid layer
+        Text(text = text, color = Color.White)
+    }
+}
+```
+- **Compose Limitation**: Like React Native, `TextStyle` only accepts a single `Shadow`.
+- **Workaround**: Stack multiple transparent `Text` composables inside a `Box`, each casting a shadow of varying size, topped by the solid white core text.
+
+## Do's and Don'ts
+- **DO**: Italicize fonts to give a sense of speed and forward momentum.
+- **DON'T**: Use standard, subtle box shadows. If it casts a shadow, it must cast a neon glow instead.
+
+## 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.