Synthèse automatique
Ce skill guide la refactorisation de code de gestion d'état complexe en Android/KMP vers un pattern de machine à état FlowRedux, en suivant une approche structurée d'analyse, de conception pilotée par les tests et d'implémentation.
Points forts
- Approche systématique avec phases d'analyse complète, TDD et vérification par tests
- Couverture exhaustive des actions utilisateur, états et transitions via un inventaire et un diagramme d'état
- Intégration de la détection de bugs par rédaction de tests reproduisant le problème
Limites
- Nécessite une bonne familiarité avec FlowRedux et les concepts de machine à état
- La phase d'analyse peut être lourde pour des écrans simples ou peu complexes
- Ne couvre pas l'intégration avec d'autres patterns (MVI, Redux) ni la migration depuis d'autres frameworks
Utilisez ce skill lorsque vous devez remplacer une logique d'état complexe et non structurée (LiveData/StateFlow multiples, callbacks) par une architecture prévisible et testable.
Ne l'utilisez pas pour des écrans simples avec peu d'interactions ou lorsque l'équipe n'est pas prête à adopter une machine à état.
Analyse de sécurité
SûrThis skill provides guidance on refactoring code to use a state machine pattern, with no executable commands or access to system resources. It is purely instructional.
Aucun point d'attention détecté
Comment cette analyse est faiteExemples
I have an Android ViewModel with three LiveData sources for loading, data, and error states, plus callbacks for button clicks. Refactor it using FlowRedux state machine following the comprehensive analysis and TDD approach described in this skill.My login screen uses multiple callbacks and a MutableStateFlow for state. Help me refactor it into a FlowRedux state machine, including test cases for all transitions like login success, failure, and loading.name: flowredux-refactoring description: Refactor complex Android/KMP state management code to use FlowRedux state machine pattern. Use this when developers need to transform tangled state logic, multiple LiveData/StateFlow sources, or callback-heavy code into a clean, testable state machine architecture.
FlowRedux State Management Refactoring
For concrete examples and code samples, see examples.md.
Instructions
When a developer provides Android/KMP code with complex state management, follow these steps:
Phase 1: Comprehensive Feature Analysis (CRITICAL - DO NOT SKIP)
1.1 UI Inventory - Map All Interactive Elements Before any refactoring, create a complete inventory:
- ✅ List every button, toggle, input field, and clickable element
- ✅ Document every menu option, dropdown, dialog, and bottom sheet
- ✅ Identify swipe gestures, long-press actions, and other interactions
- ✅ Note system events (lifecycle, network changes, permissions)
Output: A checklist of ALL user actions this screen supports.
1.2 Data Flow Mapping
- Map all data sources (API, database, cache, shared preferences)
- Trace data transformations and business logic
- Identify all async operations and their dependencies
- Document error scenarios for each data operation
1.3 State Transition Graph Create a comprehensive state diagram showing:
- All possible states the screen can be in
- Triggers for each state transition (user actions, events, responses)
- Invalid state transitions that should be prevented
- Edge cases and race conditions
Output: A complete state machine diagram or table.
Phase 2: Test-Driven Design (TDD Approach)
2.1 Design Test Cases First Before writing ANY implementation code:
- Write test cases for EVERY user action identified in Phase 1
- Write test cases for EVERY state transition
- Write test cases for error scenarios and edge cases
- Write test cases for concurrent actions (e.g., delete while loading)
2.2 Test Case Format
@Test
fun `when [action] in [current state], should transition to [expected state]`() {
// Given: initial state
// When: action occurs
// Then: verify new state
}
2.3 Leverage MVI Observability Use the state machine's deterministic nature:
- Every action → state transition is predictable and testable
- No hidden state or side effects
- Time-travel debugging possible
- Easy to reproduce bugs by replaying actions
Output: Complete test suite BEFORE implementation.
Phase 3: Implement State Machine
3.1 Define Components Based on Analysis
- Create State sealed class covering ALL states from Phase 1
- Create Action sealed class for ALL user actions and events
- Create SideEffect handlers for async operations
- Ensure every test case from Phase 2 is covered
3.2 Implement State Transitions
- Write reducers for each state transition
- Implement side effect handlers with proper error handling
- Ensure all edge cases from test suite are handled
3.3 Verify Against Tests
- Run test suite continuously during implementation
- Use failing tests to discover missing functionality
- Refactor until all tests pass
Phase 4: Bug Detection via Tests
4.1 Test-Driven Bug Finding When bugs are discovered:
- Write a failing test that reproduces the bug
- Fix the state machine to make the test pass
- Verify no regression in existing tests
4.2 Missing Functionality Detection Use test coverage to find:
- Unhandled user actions
- Missing state transitions
- Unhandled error cases
- Race conditions
Phase 5: Code Generation & Documentation
5.1 Generate Complete Implementation
- All State, Action, and SideEffect sealed classes
- Complete state machine with all transitions
- Full test suite with explanations
- Integration guide for ViewModel
5.2 Provide Traceability
- Map each test case back to original requirements
- Document which states/actions handle which UI elements
- Create a state transition reference table
Examples
See examples.md for detailed code examples including:
- Simple list loading (before/after comparison)
- Complex multi-action scenarios (pagination, deletion, sorting)
- Complete test suites
- Common patterns and anti-patterns
- Migration guide
Key Principles
- Feature-First Analysis: Map ALL UI elements and interactions before coding
- State Machine Design: Create complete state transition graph upfront
- Test-Driven Development: Write tests BEFORE implementation
- MVI Observability: Leverage deterministic state transitions for testing
- Bug Prevention: Use failing tests to drive bug fixes and find missing features
- Single Source of Truth: All state in one place
- Immutability: States are immutable data classes
- Type Safety: Sealed classes prevent invalid states
Engineering Best Practices
Practice 1: Comprehensive Feature Inventory
Before writing any code:
## Feature Checklist
- [ ] Load videos button
- [ ] Pull to refresh
- [ ] Delete video (with swipe)
- [ ] Undo delete
- [ ] Play video
- [ ] Sort options (date, title)
- [ ] Filter (watched/unwatched)
- [ ] Empty state
- [ ] Error retry
- [ ] Offline mode indicator
Why: Ensures no functionality is missed in refactoring.
Practice 2: State Transition Table
Create before implementation:
| Current State | Action | Next State | Side Effect |
|---------------|----------------|-----------------|-------------------|
| Initial | Load | Loading | Fetch from API |
| Loading | Success | Content | None |
| Loading | Error | Error | None |
| Content | Refresh | Refreshing | Fetch from API |
| Content | Delete(id) | Content | Delete from DB |
| Content | Sort(type) | Content | Resort locally |
Why: Makes state machine design explicit and reviewable.
Practice 3: Test-First Development
Write tests before implementation:
class WatchLaterStateMachineTest {
@Test
fun `given Initial, when Load action, should transition to Loading`() {
val machine = createStateMachine()
machine.dispatchAction(Action.Load)
assertEquals(State.Loading, machine.state.value)
}
@Test
fun `given Loading, when data arrives, should transition to Content`() {
// Test the actual behavior
}
@Test
fun `given Content with items, when Delete action, should remove item optimistically`() {
// Test optimistic update
}
@Test
fun `given two simultaneous Delete actions, should handle race condition`() {
// Test edge cases
}
}
Why: Tests document expected behavior and catch regressions.
Practice 4: Use Tests to Find Missing Features
When reviewing implementation:
// Run test coverage report
// Missing coverage = missing functionality
@Test
fun `when offline and user triggers refresh, should show offline message`() {
// This test fails? → Feature is missing!
}
@Test
fun `when deleting last item, should show empty state`() {
// This test fails? → Edge case not handled!
}
Why: Test-driven approach reveals gaps in requirements.
Common Patterns
Pattern: Retry Logic
See examples.md for detailed pattern implementations.
Pattern: Optimistic Updates
See examples.md for detailed pattern implementations.
Pattern: Side Effect with Error Handling
See examples.md for detailed pattern implementations.
Output Format
For each refactoring request, provide:
-
Feature Analysis:
- Complete UI element inventory
- User action checklist
- System event list
-
Data Flow Diagram:
- All data sources and destinations
- Transformation pipeline
- Error scenarios
-
State Machine Design:
- State transition table or diagram
- All states, actions, and side effects listed
- Edge cases and race conditions identified
-
Test Suite (MUST PROVIDE BEFORE IMPLEMENTATION):
- Test cases for every user action
- Test cases for every state transition
- Test cases for error scenarios
- Test cases for edge cases and race conditions
-
Implementation Code:
- All sealed classes (State, Action, SideEffect)
- Complete state machine implementation
- Proper error handling and coroutine management
-
Integration Guide:
- How to use in ViewModel
- How to collect state in UI
- Migration steps if needed
-
Test Execution Plan:
- How to run tests
- How to use tests to find bugs
- How to add tests for new features
Workflow Summary
1. Analyze → List ALL features and interactions
↓
2. Design → Create state transition graph
↓
3. Test → Write test cases for EVERYTHING
↓
4. Verify → Check test coverage matches feature list
↓
5. Implement → Write state machine to pass tests
↓
6. Debug → Use failing tests to find/fix bugs
↓
7. Deliver → Provide complete, tested code
Always prefer clarity and completeness over brevity. Include proper error handling and coroutine scope management. Emphasize the test-driven approach and use of MVI's observability for quality assurance.
Du fichier au premier essai
Le téléchargement contient exactement le contenu affiché sur cette fiche. Cette copie peut différer de la dernière version du dépôt source.
Consulter la source et ses fichiers annexesCe téléchargement contient uniquement SKILL.md. Les scripts, références, modèles et dépendances éventuels ne sont pas inclus. Récupérez les fichiers nécessaires depuis la source en conservant leur arborescence avant de poursuivre.
1. Télécharger le fichier
Télécharger SKILL.mdDepuis la racine d’un projet de test, enregistrez le fichier sous .skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md, ou utilisez la commande suivante. Ce dossier sert à examiner la skill avant son installation.
Commande pour macOS/Linux ou WSL : un shell POSIX et curl sont nécessaires. Sous Windows sans WSL, utilisez le bouton de téléchargement et créez le dossier manuellement.
mkdir -p '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b' && curl --fail --show-error --location 'https://skills-guides.com/api/skills/flowredux-state-management-refactoring-ms1aw51b/download' --output '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md.part' && mv '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md.part' '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md'2. Vérifier les prérequis
Lisez SKILL.md avant de l’utiliser. Si le fichier cite des scripts ou services externes, examinez-les et préparez les accès nécessaires dans votre environnement de test.
Aucune section de prérequis reconnue dans ce fichier. Cela ne signifie pas qu’il est autonome : les bibliothèques, outils et accès peuvent être cités ailleurs dans le contenu ou dans le dépôt source.
Les plateformes de la fiche sont des indications du catalogue. Les chemins ci-dessous suivent la documentation des outils ; ils ne prouvent pas que cette skill y a été exécutée. Aucune version minimale de ces outils n’est attestée pour cette fiche.
3. Charger la skill
Après vérification, copiez le dossier complet dans le projet avec l’une des commandes ci-dessous, puis ouvrez une nouvelle session de l’outil. La commande s’arrête si un dossier du même nom existe déjà : comparez les fichiers avant de le remplacer.
Claude Code
test -f '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md' && test -s '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md' && mkdir -p '.claude/skills' && test ! -e '.claude/skills/flowredux-refactoring' && cp -R '.skill-downloads/flowredux-state-management-refactoring-ms1aw51b' '.claude/skills/flowredux-refactoring'OpenSkills
OpenSkills doit déjà être installé. La procédure locale install/read est contrôlée avec OpenSkills 1.5.0, qui exige Node.js ≥ 20.6.0. Aucun slug du catalogue n’est résolu automatiquement.
Installation officielle d’OpenSkillsopenskills install './.skill-downloads/flowredux-state-management-refactoring-ms1aw51b'openskills read 'flowredux-state-management-refactoring-ms1aw51b'La lecture doit afficher le contenu du fichier installé et son dossier de base. Elle ne lance ni la skill ni ses dépendances.
Pour un agent qui lit AGENTS.md, synchronisez ensuite l’index. Cette commande modifie AGENTS.md : relisez le diff avant de l’utiliser.
openskills syncMode manuel ou autre outil : joignez SKILL.md à une conversation, ou ouvrez-le dans un agent capable de lire les fichiers. Ajoutez les ressources annexes nécessaires. Il n’existe pas de dossier universel reconnu par tous les outils.
4. Faire un premier essai
Utilisez une entrée courte et fictive : un endpoint d’API, un petit document ou un brief d’interface. Dans une nouvelle conversation, joignez le fichier ou donnez son chemin à l’agent, puis adaptez cette demande :
Lis .skill-downloads/flowredux-state-management-refactoring-ms1aw51b/SKILL.md et applique ses instructions à cet exemple : [décrire une entrée de test]. Indique les fichiers, dépendances ou accès qui manquent. Produis le résultat demandé par la skill sans inventer de données ni exécuter de script non examiné.Résultat attendu : une sortie correspondant aux instructions de la skill, ou une liste précise des prérequis manquants. Une simple confirmation de lecture ne valide pas le premier usage. Si une ressource externe est indisponible, ce parcours reste à tester.
Bonnes pratiques React Hook Form
Developpement
Maîtrisez React Hook Form : évitez les anti-patterns, gérez les abonnements, et traitez correctement reset, dirty state et entrées contrôlées.
Migration Emotion vers Mantine
Developpement
Migrer les styled-components Emotion vers des composants Mantine avec style props et modules CSS. Pour convertir .styled.tsx ou supprimer les imports @emotion.
Détecteur de dérive de périmètre
Developpement
Analyse les diffs git par rapport à une intention pour détecter la dérive de périmètre, fichiers non liés et PR trop larges, puis suggère de garder, diviser ou justifier.