sdd-full 4.6.2 → 4.8.0

package/bin.js

@@ -6,7 +6,7 @@ const fs = require('fs');
 const path = require('path');
 
 const SDD = {
-  version: '4.6.2',
+  version: '4.8.0',
   name: 'sdd-full',
   description: '完整的软件设计开发技能包'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sdd-full",
-  "version": "4.6.2",
+  "version": "4.8.0",
   "description": "SDD Full - 完整的软件设计开发技能包",
   "main": "index.js",
   "bin": "./bin.js",

package/skills/.agents/skills/flutter-add-integration-test/SKILL.md

@@ -0,0 +1,165 @@
+【claude code调用标识：flutter-add-integration-test】【trae调用标识：flutter-add-integration-test+Flutter开发】【流程场景：1.完整3阶段SDD流程、3.小型功能迭代】
+
+---
+name: flutter-add-integration-test
+description: Configures Flutter Driver for app interaction and converts MCP actions into permanent integration tests. Use when adding integration testing to a project, exploring UI components via MCP, or automating user flows with the integration_test package.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 18:29:20 GMT
+---
+# Implementing Flutter Integration Tests
+
+## Contents
+- [Project Setup and Dependencies](#project-setup-and-dependencies)
+- [Interactive Exploration via MCP](#interactive-exploration-via-mcp)
+- [Test Authoring Guidelines](#test-authoring-guidelines)
+- [Execution and Profiling](#execution-and-profiling)
+- [Workflow: End-to-End Integration Testing](#workflow-end-to-end-integration-testing)
+- [Examples](#examples)
+
+## Project Setup and Dependencies
+
+Configure the project to support integration testing and Flutter Driver extensions.
+
+1. Add required development dependencies to `pubspec.yaml`:
+   ```bash
+   flutter pub add 'dev:integration_test:{"sdk":"flutter"}'
+   flutter pub add 'dev:flutter_test:{"sdk":"flutter"}'
+   ```
+2. Enable the Flutter Driver extension in your application entry point (typically `lib/main.dart` or a dedicated `lib/main_test.dart`):
+   - Import `package:flutter_driver/driver_extension.dart`.
+   - Call `enableFlutterDriverExtension();` before `runApp()`.
+3. Add `Key` parameters (e.g., `ValueKey('login_button')`) to critical widgets in the application code to ensure reliable targeting during tests.
+
+## Interactive Exploration via MCP
+
+Use the Dart/Flutter MCP server tools to interactively explore and manipulate the application state before writing static tests.
+
+- **Launch**: Execute `launch_app` with `target: "lib/main_test.dart"` to start the application and acquire the DTD URI.
+- **Inspect**: Execute `get_widget_tree` to discover available `Key`s, `Text` nodes, and widget `Type`s.
+- **Interact**: Execute `tap`, `enter_text`, and `scroll` to simulate user flows.
+- **Wait**: Always execute `waitFor` or verify state with `get_health` when navigating or triggering animations.
+- **Troubleshoot Unmounted Widgets**: If a widget is not found in the tree, it may be lazily loaded in a `SliverList` or `ListView`. Execute `scroll` or `scrollIntoView` to force the widget to mount before interacting with it.
+
+## Test Authoring Guidelines
+
+Structure integration tests using the `flutter_test` API paradigm. 
+
+- Create a dedicated `integration_test/` directory at the project root.
+- Name all test files using the `<name>_test.dart` convention.
+- Initialize the binding by calling `IntegrationTestWidgetsFlutterBinding.ensureInitialized();` at the start of `main()`.
+- Load the application UI using `await tester.pumpWidget(MyApp());`.
+- Trigger frames and wait for animations to complete using `await tester.pumpAndSettle();` after interactions like `tester.tap()`.
+- Assert widget visibility using `expect(find.byKey(ValueKey('foo')), findsOneWidget);` or `findsNothing`.
+- Scroll to specific off-screen widgets using `await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder);`.
+
+**Conditional Logic for Legacy `flutter_driver`:**
+- If maintaining or migrating legacy `flutter_driver` tests, use `driver.waitFor()`, `driver.waitForAbsent()`, `driver.tap()`, and `driver.scroll()` instead of the `WidgetTester` APIs.
+
+## Execution and Profiling
+
+Execute tests using the `flutter drive` command. Require a host driver script located in `test_driver/integration_test.dart` that calls `integrationDriver()`.
+
+**Conditional Execution Targets:**
+- **If testing on Chrome:** Launch `chromedriver --port=4444` in a separate terminal, then run:
+  `flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart -d chrome`
+- **If testing headless web:** Run with `-d web-server`.
+- **If testing on Android (Local):** Run `flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart`.
+- **If testing on Firebase Test Lab (Android):** 
+  1. Build debug APK: `flutter build apk --debug`
+  2. Build test APK: `./gradlew app:assembleAndroidTest`
+  3. Upload both APKs to the Firebase Test Lab console.
+
+## Workflow: End-to-End Integration Testing
+
+Copy and follow this checklist to implement and verify integration tests.
+
+- [ ] **Task Progress: Setup**
+  - [ ] Add `integration_test` and `flutter_test` to `pubspec.yaml`.
+  - [ ] Inject `enableFlutterDriverExtension()` into the app entry point.
+  - [ ] Assign `ValueKey`s to target widgets.
+- [ ] **Task Progress: Exploration**
+  - [ ] Run `launch_app` via MCP.
+  - [ ] Map the widget tree using `get_widget_tree`.
+  - [ ] Validate interaction paths using MCP tools (`tap`, `enter_text`).
+- [ ] **Task Progress: Authoring**
+  - [ ] Create `integration_test/app_test.dart`.
+  - [ ] Write test cases using `WidgetTester` APIs.
+  - [ ] Create `test_driver/integration_test.dart` with `integrationDriver()`.
+- [ ] **Task Progress: Execution & Feedback Loop**
+  - [ ] Run `flutter drive --driver=test_driver/integration_test.dart --target=integration_test/app_test.dart`.
+  - [ ] **Feedback Loop**: Review test output -> If `PumpAndSettleTimedOutException` occurs, check for infinite animations -> If widget not found, add `scrollUntilVisible` -> Re-run test until passing.
+
+## Examples
+
+### Standard Integration Test (`integration_test/app_test.dart`)
+
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+import 'package:my_app/main.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('End-to-end test', () {
+    testWidgets('tap on the floating action button, verify counter', (tester) async {
+      // Load app widget.
+      await tester.pumpWidget(const MyApp());
+
+      // Verify the counter starts at 0.
+      expect(find.text('0'), findsOneWidget);
+
+      // Find the floating action button to tap on.
+      final fab = find.byKey(const ValueKey('increment'));
+
+      // Emulate a tap on the floating action button.
+      await tester.tap(fab);
+
+      // Trigger a frame and wait for animations.
+      await tester.pumpAndSettle();
+
+      // Verify the counter increments by 1.
+      expect(find.text('1'), findsOneWidget);
+    });
+  });
+}
+```
+
+### Host Driver Script (`test_driver/integration_test.dart`)
+
+```dart
+import 'package:integration_test/integration_test_driver.dart';
+
+Future<void> main() => integrationDriver();
+```
+
+### Performance Profiling Driver Script (`test_driver/perf_driver.dart`)
+
+Use this driver script if you wrap your test actions in `binding.traceAction()` to capture performance metrics.
+
+```dart
+import 'package:flutter_driver/flutter_driver.dart' as driver;
+import 'package:integration_test/integration_test_driver.dart';
+
+Future<void> main() {
+  return integrationDriver(
+    responseDataCallback: (data) async {
+      if (data != null) {
+        final timeline = driver.Timeline.fromJson(
+          data['scrolling_timeline'] as Map<String, dynamic>,
+        );
+
+        final summary = driver.TimelineSummary.summarize(timeline);
+
+        await summary.writeTimelineToFile(
+          'scrolling_timeline',
+          pretty: true,
+          includeSummary: true,
+        );
+      }
+    },
+  );
+}
+```

package/skills/.agents/skills/flutter-add-widget-preview/SKILL.md

@@ -0,0 +1,147 @@
+【claude code调用标识：flutter-add-widget-preview】【trae调用标识：flutter-add-widget-preview+Flutter开发】【流程场景：1.完整3阶段SDD流程、3.小型功能迭代】
+
+---
+name: flutter-add-widget-preview
+description: Adds interactive widget previews to the project using the previews.dart system. Use when creating new UI components or updating existing screens to ensure consistent design and interactive testing.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 20:05:23 GMT
+---
+# Previewing Flutter Widgets
+
+## Contents
+- [Preview Guidelines](#preview-guidelines)
+- [Handling Limitations](#handling-limitations)
+- [Workflows](#workflows)
+- [Examples](#examples)
+
+## Preview Guidelines
+
+Use the Flutter Widget Previewer to render widgets in real-time, isolated from the full application context. 
+
+- **Target Elements:** Apply the `@Preview` annotation to top-level functions, static methods within a class, or public widget constructors/factories that have no required arguments and return a `Widget` or `WidgetBuilder`.
+- **Imports:** Always import `package:flutter/widget_previews.dart` to access the preview annotations.
+- **Custom Annotations:** Extend the `Preview` class to create custom annotations that inject common properties (e.g., themes, wrappers) across multiple widgets.
+- **Multiple Configurations:** Apply multiple `@Preview` annotations to a single target to generate multiple preview instances. Alternatively, extend `MultiPreview` to encapsulate common multi-preview configurations.
+- **Runtime Transformations:** Override the `transform()` method in custom `Preview` or `MultiPreview` classes to modify preview configurations dynamically at runtime (e.g., generating names based on dynamic values, which is impossible in a `const` context).
+
+## Handling Limitations
+
+Adhere to the following constraints when authoring previewable widgets, as the Widget Previewer runs in a web environment:
+
+- **No Native APIs:** Do not use native plugins or APIs from `dart:io` or `dart:ffi`. Widgets with transitive dependencies on `dart:io` or `dart:ffi` will throw exceptions upon invocation. Use conditional imports to mock or bypass these in preview mode.
+- **Asset Paths:** Use package-based paths for assets loaded via `dart:ui` `fromAsset` APIs (e.g., `packages/my_package_name/assets/my_image.png` instead of `assets/my_image.png`).
+- **Public Callbacks:** Ensure all callback arguments provided to preview annotations are public and constant to satisfy code generation requirements.
+- **Constraints:** Apply explicit constraints using the `size` parameter in the `@Preview` annotation if your widget is unconstrained, as the previewer defaults to constraining them to approximately half the viewport.
+
+## Workflows
+
+### Creating a Widget Preview
+Copy and track this checklist when implementing a new widget preview:
+
+- [ ] Import `package:flutter/widget_previews.dart`.
+- [ ] Identify a valid target (top-level function, static method, or parameter-less public constructor).
+- [ ] Apply the `@Preview` annotation to the target.
+- [ ] Configure preview parameters (`name`, `group`, `size`, `theme`, `brightness`, etc.) as needed.
+- [ ] If applying the same configuration to multiple widgets, extract the configuration into a custom class extending `Preview`.
+
+### Interacting with Previews
+Follow the appropriate conditional workflow to launch and interact with the Widget Previewer:
+
+**If using a supported IDE (Android Studio, IntelliJ, VS Code with Flutter 3.38+):**
+1. Launch the IDE. The Widget Previewer starts automatically.
+2. Open the "Flutter Widget Preview" tab in the sidebar.
+3. Toggle "Filter previews by selected file" at the bottom left if you want to view previews outside the currently active file.
+
+**If using the Command Line:**
+1. Navigate to the Flutter project's root directory.
+2. Run `flutter widget-preview start`.
+3. View the automatically opened Chrome environment.
+
+**Feedback Loop: Preview Iteration**
+1. Modify the widget code or preview configuration.
+2. Observe the automatic update in the Widget Previewer.
+3. If global state (e.g., static initializers) was modified: Click the global hot restart button at the bottom right.
+4. If only the local widget state needs resetting: Click the individual hot restart button on the specific preview card.
+5. Review errors in the IDE/CLI console -> fix -> repeat.
+
+## Examples
+
+### Basic Preview
+```dart
+import 'package:flutter/widget_previews.dart';
+import 'package:flutter/material.dart';
+
+@Preview(name: 'My Sample Text', group: 'Typography')
+Widget mySampleText() {
+  return const Text('Hello, World!');
+}
+```
+
+### Custom Preview with Runtime Transformation
+```dart
+import 'package:flutter/widget_previews.dart';
+import 'package:flutter/material.dart';
+
+final class TransformativePreview extends Preview {
+  const TransformativePreview({
+    super.name,
+    super.group,
+  });
+
+  PreviewThemeData _themeBuilder() {
+    return PreviewThemeData(
+      materialLight: ThemeData.light(),
+      materialDark: ThemeData.dark(),
+    );
+  }
+
+  @override
+  Preview transform() {
+    final originalPreview = super.transform();
+    final builder = originalPreview.toBuilder();
+    
+    builder
+      ..name = 'Transformed - ${originalPreview.name}'
+      ..theme = _themeBuilder;
+
+    return builder.toPreview();
+  }
+}
+
+@TransformativePreview(name: 'Custom Themed Button')
+Widget myButton() => const ElevatedButton(onPressed: null, child: Text('Click'));
+```
+
+### MultiPreview Implementation
+```dart
+import 'package:flutter/widget_previews.dart';
+import 'package:flutter/material.dart';
+
+/// Creates light and dark mode previews automatically.
+final class MultiBrightnessPreview extends MultiPreview {
+  const MultiBrightnessPreview({required this.name});
+
+  final String name;
+
+  @override
+  List<Preview> get previews => const [
+        Preview(brightness: Brightness.light),
+        Preview(brightness: Brightness.dark),
+      ];
+
+  @override
+  List<Preview> transform() {
+    final previews = super.transform();
+    return previews.map((preview) {
+      final builder = preview.toBuilder()
+        ..group = 'Brightness'
+        ..name = '$name - ${preview.brightness!.name}';
+      return builder.toPreview();
+    }).toList();
+  }
+}
+
+@MultiBrightnessPreview(name: 'Primary Card')
+Widget cardPreview() => const Card(child: Padding(padding: EdgeInsets.all(8.0), child: Text('Content')));
+```

package/skills/.agents/skills/flutter-add-widget-test/SKILL.md

@@ -0,0 +1,156 @@
+【claude code调用标识：flutter-add-widget-test】【trae调用标识：flutter-add-widget-test+Flutter开发】【流程场景：1.完整3阶段SDD流程、3.小型功能迭代、4.Bug处理】
+
+---
+name: flutter-add-widget-test
+description: Implement a component-level test using `WidgetTester` to verify UI rendering and user interactions (tapping, scrolling, entering text). Use when validating that a specific widget displays correct data and responds to events as expected.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 21:15:41 GMT
+---
+# Writing Flutter Widget Tests
+
+## Contents
+- [Setup & Configuration](#setup--configuration)
+- [Core Components](#core-components)
+- [Workflow: Implementing a Widget Test](#workflow-implementing-a-widget-test)
+- [Interaction & State Management](#interaction--state-management)
+- [Examples](#examples)
+
+## Setup & Configuration
+
+Ensure the testing environment is properly configured before authoring widget tests.
+
+1. Add the `flutter_test` dependency to the `dev_dependencies` section of `pubspec.yaml`.
+2. Place all test files in the `test/` directory at the root of the project.
+3. Suffix all test file names with `_test.dart` (e.g., `widget_test.dart`).
+
+## Core Components
+
+Utilize the following `flutter_test` components to interact with and validate the widget tree:
+
+*   **`WidgetTester`**: The primary interface for building and interacting with widgets in the test environment. Provided automatically by the `testWidgets()` function.
+*   **`Finder`**: Locates widgets in the test environment (e.g., `find.text('Submit')`, `find.byType(TextField)`, `find.byKey(Key('submit_btn'))`).
+*   **`Matcher`**: Verifies the presence or state of widgets located by a `Finder` (e.g., `findsOneWidget`, `findsNothing`, `findsNWidgets(2)`, `matchesGoldenFile`).
+
+## Workflow: Implementing a Widget Test
+
+Copy the following checklist to track progress when implementing a new widget test.
+
+### Task Progress
+- [ ] **Step 1: Define the test.** Use `testWidgets('description', (WidgetTester tester) async { ... })`.
+- [ ] **Step 2: Build the widget.** Call `await tester.pumpWidget(MyWidget())` to render the UI. Wrap the widget in a `MaterialApp` or `Directionality` widget if it requires inherited directional or theme data.
+- [ ] **Step 3: Locate elements.** Instantiate `Finder` objects for the target widgets.
+- [ ] **Step 4: Verify initial state.** Use `expect(finder, matcher)` to validate the initial render.
+- [ ] **Step 5: Simulate interactions.** Execute gestures or inputs (e.g., `await tester.tap(buttonFinder)`).
+- [ ] **Step 6: Rebuild the tree.** Call `await tester.pump()` or `await tester.pumpAndSettle()` to process state changes.
+- [ ] **Step 7: Verify updated state.** Use `expect()` to validate the UI after the interaction.
+- [ ] **Step 8: Run and validate.** Execute `flutter test test/your_test_file_test.dart`.
+- [ ] **Step 9: Feedback Loop.** Review test output -> identify failing matchers -> adjust widget logic or test assertions -> re-run until passing.
+
+## Interaction & State Management
+
+Apply the following conditional logic based on the type of interaction or state change being tested:
+
+*   **If testing static rendering:** Call `await tester.pumpWidget()` once, then immediately run `expect()` assertions.
+*   **If testing standard state changes (e.g., button taps):** 
+    1. Call `await tester.tap(finder)`.
+    2. Call `await tester.pump()` to trigger a single frame rebuild.
+*   **If testing animations, transitions, or asynchronous UI updates:** 
+    1. Trigger the action (e.g., `await tester.drag(finder, Offset(500, 0))`).
+    2. Call `await tester.pumpAndSettle()` to repeatedly pump frames until no more frames are scheduled (animation completes).
+*   **If testing text input:** Call `await tester.enterText(textFieldFinder, 'Input string')`.
+*   **If testing items in a dynamic or long list:** Call `await tester.scrollUntilVisible(itemFinder, 500.0, scrollable: listFinder)` to ensure the target widget is rendered before interacting with it.
+
+## Examples
+
+### High-Fidelity Widget Test Implementation
+
+**Target Widget (`lib/todo_list.dart`):**
+```dart
+import 'package:flutter/material.dart';
+
+class TodoList extends StatefulWidget {
+  const TodoList({super.key});
+
+  @override
+  State<TodoList> createState() => _TodoListState();
+}
+
+class _TodoListState extends State<TodoList> {
+  final todos = <String>[];
+  final controller = TextEditingController();
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        body: Column(
+          children: [
+            TextField(controller: controller),
+            Expanded(
+              child: ListView.builder(
+                itemCount: todos.length,
+                itemBuilder: (context, index) {
+                  final todo = todos[index];
+                  return Dismissible(
+                    key: Key('$todo$index'),
+                    onDismissed: (_) => setState(() => todos.removeAt(index)),
+                    child: ListTile(title: Text(todo)),
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+        floatingActionButton: FloatingActionButton(
+          onPressed: () {
+            setState(() {
+              todos.add(controller.text);
+              controller.clear();
+            });
+          },
+          child: const Icon(Icons.add),
+        ),
+      ),
+    );
+  }
+}
+```
+
+**Test Implementation (`test/todo_list_test.dart`):**
+```dart
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:my_app/todo_list.dart';
+
+void main() {
+  testWidgets('Add and remove a todo item', (WidgetTester tester) async {
+    // 1. Build the widget
+    await tester.pumpWidget(const TodoList());
+
+    // 2. Verify initial state
+    expect(find.byType(ListTile), findsNothing);
+
+    // 3. Enter text into the TextField
+    await tester.enterText(find.byType(TextField), 'Buy groceries');
+
+    // 4. Tap the add button
+    await tester.tap(find.byType(FloatingActionButton));
+
+    // 5. Rebuild the widget to reflect the new state
+    await tester.pump();
+
+    // 6. Verify the item was added
+    expect(find.text('Buy groceries'), findsOneWidget);
+
+    // 7. Swipe the item to dismiss it
+    await tester.drag(find.byType(Dismissible), const Offset(500, 0));
+
+    // 8. Build the widget until the dismiss animation ends
+    await tester.pumpAndSettle();
+
+    // 9. Verify the item was removed
+    expect(find.text('Buy groceries'), findsNothing);
+  });
+}
+```

package/skills/.agents/skills/flutter-apply-architecture-best-practices/SKILL.md

@@ -0,0 +1,164 @@
+【claude code调用标识：flutter-apply-architecture-best-practices】【trae调用标识：flutter-apply-architecture-best-practices+Flutter开发】【流程场景：1.完整3阶段SDD流程、2.从零开始新项目】
+
+---
+name: flutter-apply-architecture-best-practices
+description: Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
+metadata:
+  model: models/gemini-3.1-pro-preview
+  last_modified: Tue, 21 Apr 2026 20:11:20 GMT
+---
+# Architecting Flutter Applications
+
+## Contents
+- [Architectural Layers](#architectural-layers)
+- [Project Structure](#project-structure)
+- [Workflow: Implementing a New Feature](#workflow-implementing-a-new-feature)
+- [Examples](#examples)
+
+## Architectural Layers
+
+Enforce strict Separation of Concerns by dividing the application into distinct layers. Never mix UI rendering with business logic or data fetching.
+
+### UI Layer (Presentation)
+Implement the MVVM (Model-View-ViewModel) pattern to manage UI state and logic.
+*   **Views:** Write reusable, lean widgets. Restrict logic in Views to UI-specific operations (e.g., animations, layout constraints, simple routing). Pass all required data from the ViewModel.
+*   **ViewModels:** Manage UI state and handle user interactions. Extend `ChangeNotifier` (or use `Listenable`) to expose state. Expose immutable state snapshots to the View. Inject Repositories into ViewModels via the constructor.
+
+### Data Layer
+Implement the Repository pattern to isolate data access logic and create a single source of truth.
+*   **Services:** Create stateless classes to wrap external APIs (HTTP clients, local databases, platform plugins). Return raw API models or `Result` wrappers.
+*   **Repositories:** Consume one or more Services. Transform raw API models into clean Domain Models. Handle caching, offline synchronization, and retry logic. Expose Domain Models to ViewModels.
+
+### Logic Layer (Domain - Optional)
+*   **Use Cases:** Implement this layer only if the application contains complex business logic that clutters the ViewModel, or if logic must be reused across multiple ViewModels. Extract this logic into dedicated Use Case (interactor) classes that sit between ViewModels and Repositories.
+
+## Project Structure
+
+Organize the codebase using a hybrid approach: group UI components by feature, and group Data/Domain components by type.
+
+```text
+lib/
+├── data/
+│   ├── models/         # API models
+│   ├── repositories/   # Repository implementations
+│   └── services/       # API clients, local storage wrappers
+├── domain/
+│   ├── models/         # Clean domain models
+│   └── use_cases/      # Optional business logic classes
+└── ui/
+    ├── core/           # Shared widgets, themes, typography
+    └── features/
+        └── [feature_name]/
+            ├── view_models/
+            └── views/
+```
+
+## Workflow: Implementing a New Feature
+
+Follow this sequential workflow when adding a new feature to the application. Copy the checklist to track progress.
+
+### Task Progress
+- [ ] **Step 1: Define Domain Models.** Create immutable data classes for the feature using `freezed` or `built_value`.
+- [ ] **Step 2: Implement Services.** Create or update Service classes to handle external API communication.
+- [ ] **Step 3: Implement Repositories.** Create the Repository to consume Services and return Domain Models.
+- [ ] **Step 4: Apply Conditional Logic (Domain Layer).**
+  - *If the feature requires complex data transformation or cross-repository logic:* Create a Use Case class.
+  - *If the feature is a simple CRUD operation:* Skip to Step 5.
+- [ ] **Step 5: Implement the ViewModel.** Create the ViewModel extending `ChangeNotifier`. Inject required Repositories/Use Cases. Expose immutable state and command methods.
+- [ ] **Step 6: Implement the View.** Create the UI widget. Use `ListenableBuilder` or `AnimatedBuilder` to listen to ViewModel changes.
+- [ ] **Step 7: Inject Dependencies.** Register the new Service, Repository, and ViewModel in the dependency injection container (e.g., `provider` or `get_it`).
+- [ ] **Step 8: Run Validator.** Execute unit tests for the ViewModel and Repository.
+  - *Feedback Loop:* Run tests -> Review failures -> Fix logic -> Re-run until passing.
+
+## Examples
+
+### Data Layer: Service and Repository
+
+```dart
+// 1. Service (Raw API interaction)
+class ApiClient {
+  Future<UserApiModel> fetchUser(String id) async {
+    // HTTP GET implementation...
+  }
+}
+
+// 2. Repository (Single source of truth, returns Domain Model)
+class UserRepository {
+  UserRepository({required ApiClient apiClient}) : _apiClient = apiClient;
+  
+  final ApiClient _apiClient;
+  User? _cachedUser;
+
+  Future<User> getUser(String id) async {
+    if (_cachedUser != null) return _cachedUser!;
+    
+    final apiModel = await _apiClient.fetchUser(id);
+    _cachedUser = User(id: apiModel.id, name: apiModel.fullName); // Transform to Domain Model
+    return _cachedUser!;
+  }
+}
+```
+
+### UI Layer: ViewModel and View
+
+```dart
+// 3. ViewModel (State management and presentation logic)
+class ProfileViewModel extends ChangeNotifier {
+  ProfileViewModel({required UserRepository userRepository}) 
+      : _userRepository = userRepository;
+
+  final UserRepository _userRepository;
+
+  User? _user;
+  User? get user => _user;
+
+  bool _isLoading = false;
+  bool get isLoading => _isLoading;
+
+  Future<void> loadProfile(String id) async {
+    _isLoading = true;
+    notifyListeners();
+
+    try {
+      _user = await _userRepository.getUser(id);
+    } finally {
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+}
+
+// 4. View (Dumb UI component)
+class ProfileView extends StatelessWidget {
+  const ProfileView({super.key, required this.viewModel});
+
+  final ProfileViewModel viewModel;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: viewModel,
+      builder: (context, _) {
+        if (viewModel.isLoading) {
+          return const Center(child: CircularProgressIndicator());
+        }
+        
+        final user = viewModel.user;
+        if (user == null) {
+          return const Center(child: Text('User not found'));
+        }
+
+        return Column(
+          children: [
+            Text(user.name),
+            ElevatedButton(
+              onPressed: () => viewModel.loadProfile(user.id),
+              child: const Text('Refresh'),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}
+```