opencode-skills-collection 3.1.0 → 3.1.2

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

@@ -0,0 +1,170 @@
+---
+name: design-it
+description: "Routes frontend design tasks to 48 specific UI styles. Triggers for websites, app screens, or UI components requesting a specific aesthetic."
+category: frontend
+risk: safe
+source: self
+source_type: self
+date_added: "2026-06-17"
+author: community
+tags: [design, ui, frontend]
+tools: [claude, cursor, gemini]
+---
+
+# Design-It: Sophisticated UI Style Router
+
+This is the main entry point for the **design-it** skill system. Instead of falling back to generic "AI slop" aesthetics, you have access to 48 distinct, deeply opinionated design styles.
+
+## When to Use
+Use this skill when a user requests building any frontend interface (website, app screen, UI component) and you want to apply a specific, opinionated design aesthetic instead of generic defaults.
+
+## How to Use This Skill
+
+When a user asks you to build a frontend interface (web or app):
+1. **Identify the Style (Fuzzy Matching)**: Look for keywords in their prompt (e.g., "minimal", "glass", "retro"). You do not need an exact match. Use your semantic understanding to map their request to one of the 48 styles. For example:
+   - "Apple style" or "VisionOS" -> `spatial-design`, `bento-ui`, or `glassmorphism`
+   - "Windows 8" or "Metro" -> `tile-design`
+   - "Terminal" or "Hacker" -> `sci-fi-interface` or `brutalist-typography`
+   - "Bauhaus" or "Clean" -> `swiss-design`
+   - "Cyber" or "Matrix" -> `cyberpunk-ui`
+   If they don't specify a style, choose one that best fits the project context.
+2. **Read the Style Reference**: Check the **Style Index** below to find the correct path for the chosen style. Use the `view_file` tool to read its specific `SKILL.md`.
+3. **Pick a Palette**: If the user explicitly defined a theme or colors, **use their requested colors**. If they did NOT specify colors, you MUST choose from one of the **10 Universal Palettes** below.
+4. **Execute**: Write the code following the specific principles of the chosen style. Do not blend styles unless requested.
+
+## Universal Color Palettes
+If the user provides their own colors, use them. Otherwise, you MUST use one of these 10 award-winning, highly sophisticated palettes to avoid generic neon/purplish gradients. When picking a palette, stick to these exact hex codes and establish CSS variables for them.
+
+1. **Yacht Club** (Nautical / Classic Elegance)
+   - Backgrounds: `#F9F6F0`
+   - Primary Text/Accents: `#1B2A49`
+   - CTA/Highlights: `#C85A32`
+   - Secondary Base: `#E2D8C9`
+2. **Desert Mirage** (Warm / Organic)
+   - Backgrounds: `#F4EFEA`
+   - Primary Text/Accents: `#2D2B2A`
+   - CTA/Highlights: `#A65E44`
+   - Secondary Base: `#8C8781`
+3. **Industrial Chic** (Strong / Minimalist)
+   - Backgrounds: `#D1D1D1`
+   - Primary Text/Accents: `#111111`
+   - CTA/Highlights: `#9A3B3B`
+   - Secondary Base: `#757575`
+4. **Monochromatic Brown** (Comfort / Nostalgic)
+   - Backgrounds: `#D9CBBF`
+   - Primary Text/Accents: `#4A362D`
+   - CTA/Highlights: `#7A4C3A`
+   - Secondary Base: `#948275`
+5. **Earth-Grounded Elegance** (Calm / Sustainable)
+   - Backgrounds: `#F7F5F0`
+   - Primary Text/Accents: `#3A4B3A`
+   - CTA/Highlights: `#8A9A86`
+   - Secondary Base: `#D3CEC4`
+6. **Minimalist Slate** (Professional / Tech)
+   - Backgrounds: `#F4F4F9`
+   - Primary Text/Accents: `#2B303A`
+   - CTA/Highlights: `#5C6B73`
+   - Secondary Base: `#C0C5C1`
+7. **Midnight Luxury** (Premium / Dark Mode)
+   - Backgrounds: `#0A0A0A`
+   - Primary Text/Accents: `#F5F5F0`
+   - CTA/Highlights: `#B59A5F`
+   - Secondary Base: `#1C1C1C`
+8. **Sophisticated Neutral** (Upscale / Lifestyle)
+   - Backgrounds: `#E6E2DD`
+   - Primary Text/Accents: `#1F1C1B`
+   - CTA/Highlights: `#524036`
+   - Secondary Base: `#B8B0A8`
+9. **Warm Tech** (Corporate / Modern)
+   - Backgrounds: `#EAEAEA`
+   - Primary Text/Accents: `#1C252E`
+   - CTA/Highlights: `#C28F79`
+   - Secondary Base: `#2C3E50`
+10. **Modern Editorial** (Magazine / High Contrast)
+    - Backgrounds: `#F9F9F9`
+    - Primary Text/Accents: `#121212`
+    - CTA/Highlights: `#D44A3A`
+    - Secondary Base: `#8F8F8F`
+
+## The 60-30-10 Rule
+- **60%**: Backgrounds / Secondary Base
+- **30%**: Primary Text / Accents
+- **10%**: CTA / Highlights
+
+---
+
+## Style Index (48 Styles)
+
+To use a style, you MUST read its file at `<style-folder>/SKILL.md` relative to this file's directory.
+
+### Modern UI
+- `minimalism`
+- `flat-design`
+- `flat-design-2`
+- `material-design`
+- `glassmorphism`
+- `neumorphism`
+- `skeuomorphism`
+- `claymorphism`
+- `aurora-ui`
+- `bento-ui`
+
+### Depth & 3D
+- `3d-ui`
+- `isometric-design`
+- `layered-design`
+- `floating-ui`
+- `spatial-design`
+
+### Typography
+- `swiss-design`
+- `editorial-design`
+- `typography-first`
+- `brutalist-typography`
+
+### Retro & Historical
+- `brutalism`
+- `neo-brutalism`
+- `retro-design`
+- `y2k-design`
+- `cyber-y2k`
+- `vaporwave`
+- `synthwave`
+- `frutiger-aero`
+- `retro-futurism`
+
+### Modern Trends
+- `dark-mode`
+- `monochromatic-ui`
+- `gradient-design`
+- `duotone-design`
+- `color-blocking`
+- `soft-pastel`
+- `high-contrast`
+- `vibrant-maximalism`
+- `maximalism`
+
+### Futuristic
+- `cyberpunk-ui`
+- `sci-fi-interface`
+- `holographic-ui`
+- `ai-native-ui`
+- `spatial-computing-ui`
+
+### Data & Product
+- `dashboard-design`
+- `card-based-design`
+- `widget-based-design`
+- `tile-design`
+- `data-dense-design`
+- `command-center-ui`
+
+## Web vs App Implementation
+- **Web (React/Vue/HTML)**: Use CSS variables natively. Prioritize CSS grid/flexbox for layout. Use CSS transitions for hover states.
+- **App (React Native/Flutter/SwiftUI)**: Map the palettes to the framework's theme engine. Use platform-specific shadows (elevation) and animations instead of CSS transitions. Maintain the core visual principles while adapting to mobile constraints.
+
+## Limitations
+
+- This skill does not replace environment-specific validation, testing, or expert review.
+- Stop and ask for clarification if required inputs, permissions, or safety boundaries are missing.
+

package/bundled-skills/design-it/ai-native-ui/SKILL.md

@@ -0,0 +1,295 @@
+---
+name: ai-native-ui
+description: Web and App implementation guide for AI Native UI. Trigger when user wants conversational interfaces, adaptive layouts, and generative AI aesthetics.
+date_added: "2026-06-17"
+risk: safe
+source: self
+source_type: self
+---
+
+# AI Native UI
+
+> "Fluid, adaptive, and conversational. The interface morphs to serve the content."
+
+
+## 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. **Conversational First**: The chat input or voice prompt is the primary navigation method, not a sidebar of links.
+2. **Generative States**: Loading states aren't spinners; they are shimmering text, morphing gradients, or skeletal layouts that resolve smoothly into content.
+3. **Adaptive Components**: Cards and blocks size themselves dynamically based on the generated content length.
+
+## Visual DNA
+- **Colors**: **Minimalist Slate** combined with **Electric Indigo** or **Neon Pulse** gradients for the AI elements. The background is clean (white or dark grey), while the AI "presence" is represented by a shifting, iridescent gradient.
+- **Typography**: Highly readable system fonts (`Inter`, `SF Pro`).
+- **Styling**: Subtle glowing borders to indicate AI generation in progress.
+
+## Web Implementation
+- **CSS Example**:
+```css
+body {
+  background-color: #FAFAFA;
+  color: #1A1A1A;
+  font-family: 'Inter', sans-serif;
+}
+
+/* The AI Chat Input */
+.ai-prompt-box {
+  background: #ffffff;
+  border-radius: 24px;
+  padding: 16px 24px;
+  box-shadow: 0 8px 30px rgba(0,0,0,0.05);
+  border: 1px solid transparent;
+  
+  /* AI Glow Border */
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+  background-image: 
+    linear-gradient(#ffffff, #ffffff), 
+    linear-gradient(90deg, #8A2387, #E94057, #F27121);
+    
+  transition: all 0.3s ease;
+}
+
+.ai-prompt-box:focus-within {
+  box-shadow: 0 12px 40px rgba(233, 64, 87, 0.15);
+}
+
+/* Generative Shimmer Text */
+.ai-generating-text {
+  background: linear-gradient(90deg, #aaa 0%, #333 50%, #aaa 100%);
+  background-size: 200% auto;
+  color: transparent;
+  -webkit-background-clip: text;
+  animation: shine 1.5s linear infinite;
+}
+
+@keyframes shine {
+  to { background-position: 200% center; }
+}
+```
+
+## App Implementation
+
+### SwiftUI
+```swift
+struct AINativeInput: View {
+    @State private var isGenerating = true
+    @State private var gradientOffset = 0.0
+    
+    var body: some View {
+        VStack {
+            // Generative Text Shimmer
+            if isGenerating {
+                Text("Synthesizing response...")
+                    .font(.headline)
+                    .foregroundStyle(
+                        LinearGradient(
+                            colors: [.gray.opacity(0.3), .gray, .gray.opacity(0.3)],
+                            startPoint: UnitPoint(x: gradientOffset - 1, y: 0),
+                            endPoint: UnitPoint(x: gradientOffset + 1, y: 0)
+                        )
+                    )
+                    .onAppear {
+                        withAnimation(.linear(duration: 1.5).repeatForever(autoreverses: false)) {
+                            gradientOffset = 1.0
+                        }
+                    }
+            }
+            
+            // AI Input Box
+            HStack {
+                TextField("Ask anything...", text: .constant(""))
+                Image(systemName: "sparkles")
+                    .foregroundColor(.purple)
+            }
+            .padding()
+            .background(Color.white)
+            .cornerRadius(24)
+            .overlay(
+                RoundedRectangle(cornerRadius: 24)
+                    .stroke(
+                        LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing),
+                        lineWidth: 2
+                    )
+            )
+            .shadow(color: .pink.opacity(0.15), radius: 20)
+        }
+        .padding()
+    }
+}
+```
+- A shifting `LinearGradient` mask over text creates a beautiful "thinking" state.
+- Use a gradient `.stroke` on a `RoundedRectangle` overlay to create the signature AI glowing border around input fields.
+
+### Flutter
+```dart
+import 'package:shimmer/shimmer.dart';
+
+class AINativeInput extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          // Generative Shimmer
+          Shimmer.fromColors(
+            baseColor: Colors.grey[300]!,
+            highlightColor: Colors.grey[600]!,
+            child: const Text('Synthesizing response...',
+                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
+          ),
+          const SizedBox(height: 16),
+          // AI Input Box
+          Container(
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(24),
+              boxShadow: [
+                BoxShadow(color: Colors.pink.withOpacity(0.15), blurRadius: 20),
+              ],
+            ),
+            child: Container(
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(24),
+                // Gradient border simulation
+                gradient: const LinearGradient(
+                  colors: [Colors.purple, Colors.pink, Colors.orange],
+                ),
+              ),
+              padding: const EdgeInsets.all(2), // Border width
+              child: Container(
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(22),
+                ),
+                padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+                child: Row(
+                  children: const [
+                    Expanded(
+                      child: TextField(
+                        decoration: InputDecoration(
+                          hintText: 'Ask anything...',
+                          border: InputBorder.none,
+                        ),
+                      ),
+                    ),
+                    Icon(Icons.auto_awesome, color: Colors.purple),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+```
+- The `shimmer` package is the absolute standard for AI loading states in Flutter.
+- Gradient borders natively don't exist on `BoxDecoration`; simulate them by nesting containers with a gradient background and a solid white inner container.
+
+### React Native
+```jsx
+// Requires react-native-linear-gradient and react-native-shimmer-placeholder
+import LinearGradient from 'react-native-linear-gradient';
+import { createShimmerPlaceholder } from 'react-native-shimmer-placeholder';
+
+const ShimmerPlaceHolder = createShimmerPlaceholder(LinearGradient);
+
+const AINativeInput = () => {
+  return (
+    <View style={{ padding: 16 }}>
+      {/* Generative Shimmer */}
+      <ShimmerPlaceHolder 
+        style={{ width: 200, height: 20, borderRadius: 10, marginBottom: 16 }}
+        shimmerColors={['#ebebeb', '#c5c5c5', '#ebebeb']}
+      />
+      
+      {/* AI Input Box with Gradient Border */}
+      <LinearGradient
+        colors={['#8A2387', '#E94057', '#F27121']}
+        style={{ borderRadius: 24, padding: 2, shadowColor: '#E94057', shadowRadius: 20, shadowOpacity: 0.2 }}
+      >
+        <View style={{ 
+          backgroundColor: '#FFF', 
+          borderRadius: 22, 
+          flexDirection: 'row', 
+          alignItems: 'center',
+          paddingHorizontal: 16,
+          height: 50
+        }}>
+          <TextInput 
+            placeholder="Ask anything..." 
+            style={{ flex: 1, fontSize: 16 }} 
+          />
+          <Text style={{ fontSize: 20 }}>✨</Text>
+        </View>
+      </LinearGradient>
+    </View>
+  );
+};
+```
+- `react-native-shimmer-placeholder` is the best way to handle the morphing skeleton states.
+- Like Flutter, React Native doesn't have native gradient borders. Wrap the input in a `LinearGradient` view with `padding: 2` to create the stroke.
+
+### Jetpack Compose
+```kotlin
+@Composable
+fun AINativeInput() {
+    val infiniteTransition = rememberInfiniteTransition()
+    val gradientOffset by infiniteTransition.animateFloat(
+        initialValue = 0f,
+        targetValue = 1000f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(1500, easing = LinearEasing),
+            repeatMode = RepeatMode.Restart
+        )
+    )
+
+    Column(modifier = Modifier.padding(16.dp)) {
+        // Generative Shimmer Text
+        val shimmerBrush = Brush.linearGradient(
+            colors = listOf(Color.LightGray, Color.Gray, Color.LightGray),
+            start = Offset(gradientOffset - 500f, 0f),
+            end = Offset(gradientOffset, 0f)
+        )
+        Text("Synthesizing response...", style = TextStyle(brush = shimmerBrush, fontWeight = FontWeight.Bold))
+        
+        Spacer(Modifier.height(16.dp))
+        
+        // AI Input Box
+        val borderBrush = Brush.linearGradient(listOf(Color(0xFF8A2387), Color(0xFFE94057), Color(0xFFF27121)))
+        
+        Row(
+            modifier = Modifier
+                .shadow(20.dp, RoundedCornerShape(24.dp), ambientColor = Color(0xFFE94057), spotColor = Color(0xFFE94057))
+                .background(Color.White, RoundedCornerShape(24.dp))
+                .border(2.dp, borderBrush, RoundedCornerShape(24.dp))
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            BasicTextField(
+                value = "",
+                onValueChange = {},
+                modifier = Modifier.weight(1f),
+                decorationBox = { innerTextField -> Text("Ask anything...", color = Color.Gray) }
+            )
+            Icon(Icons.Default.Star, contentDescription = null, tint = Color(0xFF8A2387))
+        }
+    }
+}
+```
+- Compose allows passing a `Brush` directly into the `TextStyle`, making shimmering text incredibly easy without third-party libraries.
+- Compose's `Modifier.border()` natively accepts a `Brush`, making gradient borders a one-liner.
+
+## Do's and Don'ts
+- **DO**: Use a distinct, vibrant gradient to represent the AI "agent", contrasting with a very plain, clean background.
+- **DON'T**: Use complex navigation headers. The user should navigate by asking the AI, not by clicking deep menus.
+
+## 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.