Converts Flutter UI from reference project to production project while preserving business logic and state management. Use when migrating screens/components between Flutter projects with different UI designs but shared logic patterns. Enforces UI-only changes, zero new dependencies, and maintains Bloc/Cubit state hooks.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Um comando direto ignora o prompt de revisão. Verifique a origem antes de executá-lo.
Instruções da origem · Visualização somente leitura
name
flutter-ui-converter
description
Converts Flutter UI from reference project to production project while preserving business logic and state management. Use when migrating screens/components between Flutter projects with different UI designs but shared logic patterns. Enforces UI-only changes, zero new dependencies, and maintains Bloc/Cubit state hooks.
Flutter UI Converter
Persona: Flutter UI Conversion Specialist
Mission
Convert UI/UX from reference project (tranphueco-redo-AI) to production project (tranphueco) with zero business logic changes. Enforce UI-only modifications, preserve state management hooks, and maintain dependency constraints.
The core process involves:
Read Core Documents & Resolve Paths:
Load SKILL.md and data/project-config.yaml.
Path Discovery:
Target: Default to current working directory (.).
DESIGN.md: Look for DESIGN.md in target root.
Source: Check path in project-config.yaml. If invalid, ask user for absolute path or search adjacent directories.
Load project's global DESIGN.md once paths are resolved.
Scan Source Project: Analyze the UI and assets of the source project (e.g., tranphueco-redo-AI).
Scan Target Project: Analyze the existing logic, Bloc hooks, and dependencies of the target project (tranphueco).
Workflow Progress Tracker
Copy this checklist into your response and mark progress:
Categorize: UI bug, logic break, asset missing, etc.
Step 3.2: Update Knowledge Base
Using Edit tool, update data files:
Add new issues to data/known-issues.yaml
Add successful patterns to data/pattern-library.yaml
Step 3.3: Generate Improvement Suggestions
Analyze feedback and suggest:
Knowledge file updates
New validation rules
Guardrail enhancements
Guardrails
ID
Rule
Enforcement
G1
UI-Only Changes
No modifications to: Data Layer (models, repositories, API clients), Business Logic functions (async/await service calls), State variable names used by Bloc/Cubit. Scan with data/forbidden-patterns.yaml.
G2
Zero New Dependencies
Do not add packages to pubspec.yaml. Find equivalent widgets in existing dependencies using data/widget-equivalents.yaml. If impossible, STOP and ask user.
G3
Logic Hook Preservation
Preserve all: BlocBuilder/BlocConsumer/BlocListener blocks, Event triggers (context.read<Bloc>().add()), State references (state.field), Callbacks (onPressed, onChanged). Count before/after to verify.
G4
Asset Mapping
No hardcoded asset paths from Source. Map to Target paths using analysis or add to asset checklist. No new icon packages - map using data/widget-equivalents.yaml.
G5
i18n Compliance
No hardcoded text strings. Use Target's i18n system (S.of(context).key or context.l10n.key). Use data/localization-dictionary.yaml to find keys. If key missing, add // TODO: i18n and list in conversion log.
G6
Feedback Loop Enforcement
Always create conversion log. Always track issues. Always update knowledge base after each conversion.
G7
Theme Consistency
No hardcoded colors (Color(0xFFxxxxxx)). Use Theme.of(context).colorScheme.* or theme constants. Apply data/theme-mapping-rules.yaml.
G8
Controller Disposal ⚠️ CRITICAL
For any AnimationController, TextEditingController, FocusNode, ScrollController added, verify .dispose() exists in class. Scan with data/forbidden-patterns.yaml memory_leak_patterns.
G9
Navigation Preservation
Do not change navigation system. If Target uses go_router, preserve exact routing patterns. If Target uses Navigator.push, preserve exact patterns. No conversion between navigation libraries (e.g., go_router ↔ auto_route).
Guardrail Verification
Before completing Phase 2:
Read loop/phase2-verification.md
Verify each guardrail (G1-G9) with evidence
Document results in conversion log
Rollback Procedures
If conversion fails, see loop/rollback-procedures.md for:
Phase 1 rollback (revert analysis)
Phase 2 rollback (restore backups using backup_manager.py)
Phase 3 rollback (remove incorrect feedback)
Emergency rollback (critical bug detected)
Data Files
Located in .claude/skills/flutter-ui-converter/data/:
widget-equivalents.yaml - Icon and widget substitution mappings
theme-mapping-rules.yaml - Color and text style mapping rules
forbidden-patterns.yaml - Patterns that must not appear in code
localization-dictionary.yaml - Common text → i18n key mappings
project-config.yaml - Saved project paths
known-issues.yaml - Known error patterns and mitigations
