Mobile Patterns (TEMPLATE)

This is a TEMPLATE skill. Copy this directory and customize it for your mobile framework.

Quick reference for mobile development patterns. For detailed examples, see linked guides.

Skill Usage

Step 1: Choose Your Framework

Replace this section with your framework-specific requirements:

Option A: React Native

// Example: Redux with hooks
import { useSelector, useDispatch } from 'react-redux'

const MyComponent = () => {
  const data = useSelector(state => state.feature.data)
  const dispatch = useDispatch()

  return <View>...</View>
}

Option B: Flutter

// Example: Provider pattern
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = Provider.of<DataModel>(context);
    return Container(...);
  }
}

Option C: Native iOS (Swift)

// Example: SwiftUI with @State
struct ContentView: View {
    @State private var data: String = ""

    var body: some View {
        Text(data)
    }
}

Option D: Native Android (Kotlin)

// Example: Jetpack Compose
@Composable
fun MyScreen(viewModel: MyViewModel = viewModel()) {
    val data by viewModel.data.collectAsState()
    Text(text = data)
}

Critical Stack Requirements (CUSTOMIZE THIS)

Quick Patterns Reference (CUSTOMIZE THIS)

Component Structure

[Your framework's component structure example]

State Management

[Your state management pattern example]

Navigation

[Your navigation pattern example]

Testing

[Your testing pattern example]

Detailed Guides

When you need specific implementation details, read:

• component-patterns.md - Component templates and structure
• state-management.md - State management patterns
• navigation-patterns.md - Navigation flows
• testing-patterns.md - Testing strategies

Common Anti-Patterns to Avoid (CUSTOMIZE THIS)

Add framework-specific anti-patterns here:

1. ❌ [Anti-pattern 1 for your framework]
2. ❌ [Anti-pattern 2 for your framework]
3. ❌ [Anti-pattern 3 for your framework]

Dependencies Reference (CUSTOMIZE THIS)

{
  "your-framework": "Core framework",
  "your-state-library": "State management",
  "your-navigation-library": "Navigation",
  "your-testing-framework": "Testing"
}

When to Consult This Skill

• Designing mobile component architecture
• Implementing state management
• Creating navigation flows
• Setting up mobile testing
• Platform-specific implementations

Customization Instructions

1. Copy this directory to a new skill (e.g., mobile-react-native-patterns)
2. Update frontmatter with your skill name and description
3. Replace all examples with your framework's patterns
4. Create detailed guides in separate .md files
5. Update the architect subagent to reference this skill
6. Delete this template or move it to drafts/skills/

Source: CarlosDanielDev/maestro — distributed by TomeVault.