@sylix/coworker 2.0.11 → 2.0.12

package/dist/skills/defaults/mobile/mobile-android-design.md

@@ -0,0 +1,440 @@
+---
+name: mobile-android-design
+description: Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
+---
+
+# Android Mobile Design
+
+Master Material Design 3 (Material You) and Jetpack Compose to build modern, adaptive Android applications that integrate seamlessly with the Android ecosystem.
+
+## When to Use This Skill
+
+- Designing Android app interfaces following Material Design 3
+- Building Jetpack Compose UI and layouts
+- Implementing Android navigation patterns (Navigation Compose)
+- Creating adaptive layouts for phones, tablets, and foldables
+- Using Material 3 theming with dynamic colors
+- Building accessible Android interfaces
+- Implementing Android-specific gestures and interactions
+- Designing for different screen configurations
+
+## Core Concepts
+
+### 1. Material Design 3 Principles
+
+**Personalization**: Dynamic color adapts UI to user's wallpaper
+**Accessibility**: Tonal palettes ensure sufficient color contrast
+**Large Screens**: Responsive layouts for tablets and foldables
+
+**Material Components:**
+
+- Cards, Buttons, FABs, Chips
+- Navigation (rail, drawer, bottom nav)
+- Text fields, Dialogs, Sheets
+- Lists, Menus, Progress indicators
+
+### 2. Jetpack Compose Layout System
+
+**Column and Row:**
+
+```kotlin
+// Vertical arrangement with alignment
+Column(
+    modifier = Modifier.padding(16.dp),
+    verticalArrangement = Arrangement.spacedBy(12.dp),
+    horizontalAlignment = Alignment.Start
+) {
+    Text(
+        text = "Title",
+        style = MaterialTheme.typography.headlineSmall
+    )
+    Text(
+        text = "Subtitle",
+        style = MaterialTheme.typography.bodyMedium,
+        color = MaterialTheme.colorScheme.onSurfaceVariant
+    )
+}
+
+// Horizontal arrangement with weight
+Row(
+    modifier = Modifier.fillMaxWidth(),
+    horizontalArrangement = Arrangement.SpaceBetween,
+    verticalAlignment = Alignment.CenterVertically
+) {
+    Icon(Icons.Default.Star, contentDescription = null)
+    Text("Featured")
+    Spacer(modifier = Modifier.weight(1f))
+    TextButton(onClick = {}) {
+        Text("View All")
+    }
+}
+```
+
+**Lazy Lists and Grids:**
+
+```kotlin
+// Lazy column with sticky headers
+LazyColumn {
+    items.groupBy { it.category }.forEach { (category, categoryItems) ->
+        stickyHeader {
+            Text(
+                text = category,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .background(MaterialTheme.colorScheme.surface)
+                    .padding(16.dp),
+                style = MaterialTheme.typography.titleMedium
+            )
+        }
+        items(categoryItems) { item ->
+            ItemRow(item = item)
+        }
+    }
+}
+
+// Adaptive grid
+LazyVerticalGrid(
+    columns = GridCells.Adaptive(minSize = 150.dp),
+    contentPadding = PaddingValues(16.dp),
+    horizontalArrangement = Arrangement.spacedBy(12.dp),
+    verticalArrangement = Arrangement.spacedBy(12.dp)
+) {
+    items(items) { item ->
+        ItemCard(item = item)
+    }
+}
+```
+
+### 3. Navigation Patterns
+
+**Bottom Navigation:**
+
+```kotlin
+@Composable
+fun MainScreen() {
+    val navController = rememberNavController()
+
+    Scaffold(
+        bottomBar = {
+            NavigationBar {
+                val navBackStackEntry by navController.currentBackStackEntryAsState()
+                val currentDestination = navBackStackEntry?.destination
+
+                NavigationDestination.entries.forEach { destination ->
+                    NavigationBarItem(
+                        icon = { Icon(destination.icon, contentDescription = null) },
+                        label = { Text(destination.label) },
+                        selected = currentDestination?.hierarchy?.any {
+                            it.route == destination.route
+                        } == true,
+                        onClick = {
+                            navController.navigate(destination.route) {
+                                popUpTo(navController.graph.findStartDestination().id) {
+                                    saveState = true
+                                }
+                                launchSingleTop = true
+                                restoreState = true
+                            }
+                        }
+                    )
+                }
+            }
+        }
+    ) { innerPadding ->
+        NavHost(
+            navController = navController,
+            startDestination = NavigationDestination.Home.route,
+            modifier = Modifier.padding(innerPadding)
+        ) {
+            composable(NavigationDestination.Home.route) { HomeScreen() }
+            composable(NavigationDestination.Search.route) { SearchScreen() }
+            composable(NavigationDestination.Profile.route) { ProfileScreen() }
+        }
+    }
+}
+```
+
+**Navigation Drawer:**
+
+```kotlin
+@Composable
+fun DrawerNavigation() {
+    val drawerState = rememberDrawerState(DrawerValue.Closed)
+    val scope = rememberCoroutineScope()
+
+    ModalNavigationDrawer(
+        drawerState = drawerState,
+        drawerContent = {
+            ModalDrawerSheet {
+                Spacer(Modifier.height(12.dp))
+                Text(
+                    "App Name",
+                    modifier = Modifier.padding(16.dp),
+                    style = MaterialTheme.typography.titleLarge
+                )
+                HorizontalDivider()
+
+                NavigationDrawerItem(
+                    icon = { Icon(Icons.Default.Home, null) },
+                    label = { Text("Home") },
+                    selected = true,
+                    onClick = { scope.launch { drawerState.close() } }
+                )
+                NavigationDrawerItem(
+                    icon = { Icon(Icons.Default.Settings, null) },
+                    label = { Text("Settings") },
+                    selected = false,
+                    onClick = { }
+                )
+            }
+        }
+    ) {
+        Scaffold(
+            topBar = {
+                TopAppBar(
+                    title = { Text("Home") },
+                    navigationIcon = {
+                        IconButton(onClick = { scope.launch { drawerState.open() } }) {
+                            Icon(Icons.Default.Menu, contentDescription = "Menu")
+                        }
+                    }
+                )
+            }
+        ) { innerPadding ->
+            Content(modifier = Modifier.padding(innerPadding))
+        }
+    }
+}
+```
+
+### 4. Material 3 Theming
+
+**Color Scheme:**
+
+```kotlin
+// Dynamic color (Android 12+)
+val dynamicColorScheme = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
+    val context = LocalContext.current
+    if (darkTheme) dynamicDarkColorScheme(context)
+    else dynamicLightColorScheme(context)
+} else {
+    if (darkTheme) DarkColorScheme else LightColorScheme
+}
+
+// Custom color scheme
+private val LightColorScheme = lightColorScheme(
+    primary = Color(0xFF6750A4),
+    onPrimary = Color.White,
+    primaryContainer = Color(0xFFEADDFF),
+    onPrimaryContainer = Color(0xFF21005D),
+    secondary = Color(0xFF625B71),
+    onSecondary = Color.White,
+    tertiary = Color(0xFF7D5260),
+    onTertiary = Color.White,
+    surface = Color(0xFFFFFBFE),
+    onSurface = Color(0xFF1C1B1F),
+)
+```
+
+**Typography:**
+
+```kotlin
+val AppTypography = Typography(
+    displayLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 57.sp,
+        lineHeight = 64.sp
+    ),
+    headlineMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 28.sp,
+        lineHeight = 36.sp
+    ),
+    titleLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 22.sp,
+        lineHeight = 28.sp
+    ),
+    bodyLarge = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Normal,
+        fontSize = 16.sp,
+        lineHeight = 24.sp
+    ),
+    labelMedium = TextStyle(
+        fontFamily = FontFamily.Default,
+        fontWeight = FontWeight.Medium,
+        fontSize = 12.sp,
+        lineHeight = 16.sp
+    )
+)
+```
+
+### 5. Component Examples
+
+**Cards:**
+
+```kotlin
+@Composable
+fun FeatureCard(
+    title: String,
+    description: String,
+    imageUrl: String,
+    onClick: () -> Unit
+) {
+    Card(
+        onClick = onClick,
+        modifier = Modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(16.dp),
+        colors = CardDefaults.cardColors(
+            containerColor = MaterialTheme.colorScheme.surfaceVariant
+        )
+    ) {
+        Column {
+            AsyncImage(
+                model = imageUrl,
+                contentDescription = null,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .height(180.dp),
+                contentScale = ContentScale.Crop
+            )
+            Column(modifier = Modifier.padding(16.dp)) {
+                Text(
+                    text = title,
+                    style = MaterialTheme.typography.titleMedium
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = description,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+            }
+        }
+    }
+}
+```
+
+**Buttons:**
+
+```kotlin
+// Filled button (primary action)
+Button(onClick = { }) {
+    Text("Continue")
+}
+
+// Filled tonal button (secondary action)
+FilledTonalButton(onClick = { }) {
+    Icon(Icons.Default.Add, null)
+    Spacer(Modifier.width(8.dp))
+    Text("Add Item")
+}
+
+// Outlined button
+OutlinedButton(onClick = { }) {
+    Text("Cancel")
+}
+
+// Text button
+TextButton(onClick = { }) {
+    Text("Learn More")
+}
+
+// FAB
+FloatingActionButton(
+    onClick = { },
+    containerColor = MaterialTheme.colorScheme.primaryContainer,
+    contentColor = MaterialTheme.colorScheme.onPrimaryContainer
+) {
+    Icon(Icons.Default.Add, contentDescription = "Add")
+}
+```
+
+## Quick Start Component
+
+```kotlin
+@Composable
+fun ItemListCard(
+    item: Item,
+    onItemClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Card(
+        onClick = onItemClick,
+        modifier = modifier.fillMaxWidth(),
+        shape = RoundedCornerShape(12.dp)
+    ) {
+        Row(
+            modifier = Modifier
+                .padding(16.dp)
+                .fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .clip(CircleShape)
+                    .background(MaterialTheme.colorScheme.primaryContainer),
+                contentAlignment = Alignment.Center
+            ) {
+                Icon(
+                    imageVector = Icons.Default.Star,
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.onPrimaryContainer
+                )
+            }
+
+            Spacer(modifier = Modifier.width(16.dp))
+
+            Column(modifier = Modifier.weight(1f)) {
+                Text(
+                    text = item.title,
+                    style = MaterialTheme.typography.titleMedium
+                )
+                Text(
+                    text = item.subtitle,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.onSurfaceVariant
+                )
+            }
+
+            Icon(
+                imageVector = Icons.Default.ChevronRight,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onSurfaceVariant
+            )
+        }
+    }
+}
+```
+
+## Best Practices
+
+1. **Use Material Theme**: Access colors via `MaterialTheme.colorScheme` for automatic dark mode support
+2. **Support Dynamic Color**: Enable dynamic color on Android 12+ for personalization
+3. **Adaptive Layouts**: Use `WindowSizeClass` for responsive designs
+4. **Content Descriptions**: Add `contentDescription` to all interactive elements
+5. **Touch Targets**: Minimum 48dp touch targets for accessibility
+6. **State Hoisting**: Hoist state to make components reusable and testable
+7. **Remember Properly**: Use `remember` and `rememberSaveable` appropriately
+8. **Preview Annotations**: Add `@Preview` with different configurations
+
+## Common Issues
+
+- **Recomposition Issues**: Avoid passing unstable lambdas; use `remember`
+- **State Loss**: Use `rememberSaveable` for configuration changes
+- **Performance**: Use `LazyColumn` instead of `Column` for long lists
+- **Theme Leaks**: Ensure `MaterialTheme` wraps all composables
+- **Navigation Crashes**: Handle back press and deep links properly
+- **Memory Leaks**: Cancel coroutines in `DisposableEffect`
+
+## Resources
+
+- [Material Design 3](https://m3.material.io/)
+- [Jetpack Compose Documentation](https://developer.android.com/jetpack/compose)
+- [Compose Samples](https://github.com/android/compose-samples)
+- [Material 3 Compose](https://developer.android.com/jetpack/compose/designsystems/material3)

package/dist/skills/defaults/mobile/mobile-ios-design.md

@@ -0,0 +1,266 @@
+---
+name: mobile-ios-design
+description: Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
+---
+
+# iOS Mobile Design
+
+Master iOS Human Interface Guidelines (HIG) and SwiftUI patterns to build polished, native iOS applications that feel at home on Apple platforms.
+
+## When to Use This Skill
+
+- Designing iOS app interfaces following Apple HIG
+- Building SwiftUI views and layouts
+- Implementing iOS navigation patterns (NavigationStack, TabView, sheets)
+- Creating adaptive layouts for iPhone and iPad
+- Using SF Symbols and system typography
+- Building accessible iOS interfaces
+- Implementing iOS-specific gestures and interactions
+- Designing for Dynamic Type and Dark Mode
+
+## Core Concepts
+
+### 1. Human Interface Guidelines Principles
+
+**Clarity**: Content is legible, icons are precise, adornments are subtle
+**Deference**: UI helps users understand content without competing with it
+**Depth**: Visual layers and motion convey hierarchy and enable navigation
+
+**Platform Considerations:**
+
+- **iOS**: Touch-first, compact displays, portrait orientation
+- **iPadOS**: Larger canvas, multitasking, pointer support
+- **visionOS**: Spatial computing, eye/hand input
+
+### 2. SwiftUI Layout System
+
+**Stack-Based Layouts:**
+
+```swift
+// Vertical stack with alignment
+VStack(alignment: .leading, spacing: 12) {
+    Text("Title")
+        .font(.headline)
+    Text("Subtitle")
+        .font(.subheadline)
+        .foregroundStyle(.secondary)
+}
+
+// Horizontal stack with flexible spacing
+HStack {
+    Image(systemName: "star.fill")
+    Text("Featured")
+    Spacer()
+    Text("View All")
+        .foregroundStyle(.blue)
+}
+```
+
+**Grid Layouts:**
+
+```swift
+// Adaptive grid that fills available width
+LazyVGrid(columns: [
+    GridItem(.adaptive(minimum: 150, maximum: 200))
+], spacing: 16) {
+    ForEach(items) { item in
+        ItemCard(item: item)
+    }
+}
+
+// Fixed column grid
+LazyVGrid(columns: [
+    GridItem(.flexible()),
+    GridItem(.flexible()),
+    GridItem(.flexible())
+], spacing: 12) {
+    ForEach(items) { item in
+        ItemThumbnail(item: item)
+    }
+}
+```
+
+### 3. Navigation Patterns
+
+**NavigationStack (iOS 16+):**
+
+```swift
+struct ContentView: View {
+    @State private var path = NavigationPath()
+
+    var body: some View {
+        NavigationStack(path: $path) {
+            List(items) { item in
+                NavigationLink(value: item) {
+                    ItemRow(item: item)
+                }
+            }
+            .navigationTitle("Items")
+            .navigationDestination(for: Item.self) { item in
+                ItemDetailView(item: item)
+            }
+        }
+    }
+}
+```
+
+**TabView (iOS 18+):**
+
+```swift
+struct MainTabView: View {
+    @State private var selectedTab = 0
+
+    var body: some View {
+        TabView(selection: $selectedTab) {
+            Tab("Home", systemImage: "house", value: 0) {
+                HomeView()
+            }
+
+            Tab("Search", systemImage: "magnifyingglass", value: 1) {
+                SearchView()
+            }
+
+            Tab("Profile", systemImage: "person", value: 2) {
+                ProfileView()
+            }
+        }
+    }
+}
+```
+
+### 4. System Integration
+
+**SF Symbols:**
+
+```swift
+// Basic symbol
+Image(systemName: "heart.fill")
+    .foregroundStyle(.red)
+
+// Symbol with rendering mode
+Image(systemName: "cloud.sun.fill")
+    .symbolRenderingMode(.multicolor)
+
+// Variable symbol (iOS 16+)
+Image(systemName: "speaker.wave.3.fill", variableValue: volume)
+
+// Symbol effect (iOS 17+)
+Image(systemName: "bell.fill")
+    .symbolEffect(.bounce, value: notificationCount)
+```
+
+**Dynamic Type:**
+
+```swift
+// Use semantic fonts
+Text("Headline")
+    .font(.headline)
+
+Text("Body text that scales with user preferences")
+    .font(.body)
+
+// Custom font that respects Dynamic Type
+Text("Custom")
+    .font(.custom("Avenir", size: 17, relativeTo: .body))
+```
+
+### 5. Visual Design
+
+**Colors and Materials:**
+
+```swift
+// Semantic colors that adapt to light/dark mode
+Text("Primary")
+    .foregroundStyle(.primary)
+Text("Secondary")
+    .foregroundStyle(.secondary)
+
+// System materials for blur effects
+Rectangle()
+    .fill(.ultraThinMaterial)
+    .frame(height: 100)
+
+// Vibrant materials for overlays
+Text("Overlay")
+    .padding()
+    .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 12))
+```
+
+**Shadows and Depth:**
+
+```swift
+// Standard card shadow
+RoundedRectangle(cornerRadius: 16)
+    .fill(.background)
+    .shadow(color: .black.opacity(0.1), radius: 8, y: 4)
+
+// Elevated appearance
+.shadow(radius: 2, y: 1)
+.shadow(radius: 8, y: 4)
+```
+
+## Quick Start Component
+
+```swift
+import SwiftUI
+
+struct FeatureCard: View {
+    let title: String
+    let description: String
+    let systemImage: String
+
+    var body: some View {
+        HStack(spacing: 16) {
+            Image(systemName: systemImage)
+                .font(.title)
+                .foregroundStyle(.blue)
+                .frame(width: 44, height: 44)
+                .background(.blue.opacity(0.1), in: Circle())
+
+            VStack(alignment: .leading, spacing: 4) {
+                Text(title)
+                    .font(.headline)
+                Text(description)
+                    .font(.subheadline)
+                    .foregroundStyle(.secondary)
+                    .lineLimit(2)
+            }
+
+            Spacer()
+
+            Image(systemName: "chevron.right")
+                .foregroundStyle(.tertiary)
+        }
+        .padding()
+        .background(.background, in: RoundedRectangle(cornerRadius: 12))
+        .shadow(color: .black.opacity(0.05), radius: 4, y: 2)
+    }
+}
+```
+
+## Best Practices
+
+1. **Use Semantic Colors**: Always use `.primary`, `.secondary`, `.background` for automatic light/dark mode support
+2. **Embrace SF Symbols**: Use system symbols for consistency and automatic accessibility
+3. **Support Dynamic Type**: Use semantic fonts (`.body`, `.headline`) instead of fixed sizes
+4. **Add Accessibility**: Include `.accessibilityLabel()` and `.accessibilityHint()` modifiers
+5. **Use Safe Areas**: Respect `safeAreaInset` and avoid hardcoded padding at screen edges
+6. **Implement State Restoration**: Use `@SceneStorage` for preserving user state
+7. **Support iPad Multitasking**: Design for split view and slide over
+8. **Test on Device**: Simulator doesn't capture full haptic and performance experience
+
+## Common Issues
+
+- **Layout Breaking**: Use `.fixedSize()` sparingly; prefer flexible layouts
+- **Performance Issues**: Use `LazyVStack`/`LazyHStack` for long scrolling lists
+- **Navigation Bugs**: Ensure `NavigationLink` values are `Hashable`
+- **Dark Mode Problems**: Avoid hardcoded colors; use semantic or asset catalog colors
+- **Accessibility Failures**: Test with VoiceOver enabled
+- **Memory Leaks**: Watch for strong reference cycles in closures
+
+## Resources
+
+- [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/)
+- [SwiftUI Documentation](https://developer.apple.com/documentation/swiftui)
+- [SF Symbols App](https://developer.apple.com/sf-symbols/)
+- [WWDC SwiftUI Sessions](https://developer.apple.com/videos/swiftui/)