Use these guidelines to maintain a consistent high-quality UI and infrastructure across the monorepo.
1. Visual Design & Theming (Material 3)
Visual Design: Build beautiful and intuitive user interfaces that follow modern design guidelines.
Typography: Stress and emphasize font sizes to ease understanding, e.g., hero text, section headlines.
Background: Apply subtle noise texture to the main background to add a premium, tactile feel.
Shadows: Multi-layered drop shadows create a strong sense of depth; cards have a soft, deep shadow to look "lifted."
Icons: Incorporate icons to enhance the user’s understanding and the logical navigation of the app.
Interactive Elements: Buttons, checkboxes, sliders, lists, charts, graphs, and other interactive elements have a shadow with elegant use of color to create a "glow" effect.
Centralized Theme: Define a centralized ThemeData object to ensure a consistent application-wide style.
Light and Dark Themes: Implement support for both light and dark themes using theme and darkTheme.
Color Scheme Generation: Generate harmonious color palettes from a single color using ColorScheme.fromSeed.
[!IMPORTANT]
This project uses code-generation (json_serializable + json_annotation) for JSON serialization.
Do not use the manual dart:convert approach shown in the flutter-implement-json-serialization
skill — that skill is a generic Flutter reference and conflicts with the pattern used here.
JSON: Use json_serializable and json_annotation (never manual fromJson/toJson maps).
Naming: Use fieldRename: FieldRename.snake so JSON snake_case keys map to Dart camelCase fields automatically.
Code-gen: Run fvm flutter pub run build_runner build --delete-conflicting-outputs to regenerate after any model change.
toJson opt-in: Add includeIfNull: false to omit null fields from serialized output.
import 'package:json_annotation/json_annotation.dart';
part 'user.g.dart';
@JsonSerializable(fieldRename: FieldRename.snake)
class User {
const User({required this.firstName, required this.lastName});
final String firstName;
final String lastName;
factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}
1---2name: freemansoft-flutter-adaptivecards-flutter-standard-practices3description: Flutter Standard Practices4---56# Flutter Standard Practices78Use these guidelines to maintain a consistent high-quality UI and infrastructure across the monorepo.910---1112## 1. Visual Design & Theming (Material 3)1314- **Visual Design:** Build beautiful and intuitive user interfaces that follow modern design guidelines.15- **Typography:** Stress and emphasize font sizes to ease understanding, e.g., hero text, section headlines.16- **Background:** Apply subtle noise texture to the main background to add a premium, tactile feel.17- **Shadows:** Multi-layered drop shadows create a strong sense of depth; cards have a soft, deep shadow to look "lifted."18- **Icons:** Incorporate icons to enhance the user’s understanding and the logical navigation of the app.19- **Interactive Elements:** Buttons, checkboxes, sliders, lists, charts, graphs, and other interactive elements have a shadow with elegant use of color to create a "glow" effect.20- **Centralized Theme:** Define a centralized `ThemeData` object to ensure a consistent application-wide style.21- **Light and Dark Themes:** Implement support for both light and dark themes using `theme` and `darkTheme`.22- **Color Scheme Generation:** Generate harmonious color palettes from a single color using `ColorScheme.fromSeed`.2324```dart25final ThemeData lightTheme = ThemeData(26 colorScheme: ColorScheme.fromSeed(27 seedColor: Colors.deepPurple,28 brightness: Brightness.light,29 ),30 textTheme: GoogleFonts.outfitTextTheme(),31);32```3334---3536## 2. Data Handling & Serialization3738> [!IMPORTANT]39> This project uses **code-generation** (`json_serializable` + `json_annotation`) for JSON serialization.40> Do **not** use the manual `dart:convert` approach shown in the `flutter-implement-json-serialization`41> skill — that skill is a generic Flutter reference and conflicts with the pattern used here.4243- **JSON:** Use `json_serializable` and `json_annotation` (never manual `fromJson`/`toJson` maps).44- **Naming:** Use `fieldRename: FieldRename.snake` so JSON `snake_case` keys map to Dart `camelCase` fields automatically.45- **Code-gen:** Run `fvm flutter pub run build_runner build --delete-conflicting-outputs` to regenerate after any model change.46- **`toJson` opt-in:** Add `includeIfNull: false` to omit null fields from serialized output.4748```dart49import 'package:json_annotation/json_annotation.dart';5051part 'user.g.dart';5253@JsonSerializable(fieldRename: FieldRename.snake)54class User {55 const User({required this.firstName, required this.lastName});5657 final String firstName;58 final String lastName;5960 factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);61 Map<String, dynamic> toJson() => _$UserToJson(this);62}63```6465---66> Source: [freemansoft/Flutter-AdaptiveCards](https://github.com/freemansoft/Flutter-AdaptiveCards) — distributed by [TomeVault](https://tomevault.io).67<!-- tomevault:4.0:skill_md:2026-06-16 -->
Run npx get-skill add tomevault-io/freemansoft-flutter-adaptivecards-flutter-standard-practices in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Flutter Standard Practices It is listed under Coding & Dev Tools on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.