Process for building, exporting, and registering reusable UI components in the packages/app_ui package. References design-to-code.md for design tokens (typography, colors, spacing).

2026-06-162

design-to-code

anoopsg/agent_rules

Outlines the process for converting Figma designs into a structured, platform-aware Flutter implementation.

2026-06-162

remove-web-platform

anoopsg/agent_rules

Use when completely removing the web platform from the project. Details how to delete directories/configurations, clean up app_ui web components, remove web-specific feature views (*_view_web.dart), prune conditional imports/logic, and run validation.

2026-06-162

manage-routes

anoopsg/agent_rules

Use when asked to add, update, or group routes using GoRouter, or manage redirection guards.

2026-06-122

create-feature

anoopsg/agent_rules

Use when asked to create a new feature or sub-feature following the DDD-lite architecture, or set up state, view, and page layers for a domain.

2026-06-052

name	flutter-golden-testing
description	Step-by-step workflow for creating, configuring, and updating Flutter golden tests using the Alchemist package.

Flutter Golden Testing Skill

This skill outlines the step-by-step process for implementing and updating golden tests for Flutter widgets.

Step 1: Validation & Setup

Check Dependencies: Ensure alchemist is present in the dev_dependencies of pubspec.yaml. If it is missing, install it:
```
flutter pub add --dev alchemist
```
Directory Structure: Create a goldens/ directory adjacent to your target test file to store the generated .png reference files.

Step 2: Test Scaffolding

Create the test file named [widget_name]_test.dart (or [widget_name]_golden_test.dart).

Imports: Import the necessary packages (package:flutter_test/flutter_test.dart and package:alchemist/alchemist.dart).
Setup Fonts/Assets: Call loadAppFonts() (if applicable) before running the tests to prevent text from rendering as the Ahem font.

Step 3: Implementation

Implement the test using alchemist APIs instead of the standard testWidgets.

Use goldenTest: Define your test using the goldenTest function.
Mock Externalities:
- Disable or replace infinite animations (e.g., CircularProgressIndicator).
- Mock network image requests (e.g., using mocktail_image_network or network_image_mock).
Matrix Testing: Use GoldenTestGroup and GoldenTestScenario to lay out all possible widget states (e.g., loading, success, error) and variations (light/dark mode, text scaling) within a single test execution.

Step 4: Generation and Verification

Generate Goldens: Run the following command to generate or update the reference images:
```
flutter test --update-goldens
```
Verify Output: Check that the .png files were correctly generated in the goldens/ directory.
Gitignore Failures: Ensure **/failures/ is in the project's .gitignore so test failure artifacts are not accidentally committed.

Step 5: Updating Existing Goldens

If you are modifying an existing widget that already has golden tests, run the update command (flutter test --update-goldens) to regenerate the images. Never modify the .png files manually.