Flutter UI & Asset Implementation Standard

This skill defines the STRICT rules for implementing UI and handling assets to ensure consistency and prevent errors.

1. Asset Management (CRITICAL)

Goal: Prevent "random string" filenames and ensure design fidelity.

• Rule 1.1: Rename on Ingestion: NEVER leave assets with raw Figma export names (e.g., mkl6t7hq...svg).

- Action: You MUST rename assets to semantic snakecase names before using them. - Prefixes: - Icons: icon<name>.svg (e.g., iconuser.svg, iconback.svg) - Navigation: nav<name>.svg (e.g., navhome.svg) - Images: img<name>.png - Backgrounds: bg<name>.png

• Rule 1.2: Design Fidelity: ALWAYS use the provided SVG/PNG assets from the design.

- FORBIDDEN: Do NOT substitute design assets with Flutter's built-in Icons.* unless explicitly requested or if the asset is missing.

• Rule 1.3: SvgPicture: Use flutter_svg package and SvgPicture.asset() for all vector icons.

2. Coding Standards

Goal: Prevent common lint errors (like constwithnon_const) and ensure clean code.

• Rule 2.1: Const Correctness:

- BorderRadius.circular(N) is NOT CONST. - Correct (Const): BorderRadius.all(Radius.circular(N)) - Correct (Non-Const): Remove const keyword if using BorderRadius.circular.

• Rule 2.2: Theming:

- Define all colors and gradients in AppTheme / AppColors first. - Use ShaderMask for gradient text. - Use Container with BoxDecoration for gradient backgrounds.

3. Implementation Process

1. Analyze: Review design screenshots and raw asset files.
2. Prepare Assets: Rename and move all required assets to assets/images/.
3. Prepare Theme: Update AppTheme with necessary colors and styles.
4. Implement: Build Widgets using the renamed assets and theme.

4. PAGE Components (CRITICAL)

Goal: Keep each screen maintainable by splitting page-specific UI blocks into components/.

• PAGE component path (this repo): lib/src/features/<feature>/presentation/components/
• PAGE components: layout blocks and UI pieces only used by that page
• Rule: Page file is a composition root; delegate blocks to components/ widgets