>_SkillsHub▋

> flutter-design-system

Enforce Design Language System adherence in Flutter. Use when enforcing design tokens, preventing hardcoded colors/spacing, or implementing a DLS in Flutter. (triggers: **/theme/**, **/*_theme.dart, **/*_colors.dart, **/*_dls/**, **/foundation/**, **/presentation/**, **/ui/**, **/widgets/**, ThemeData, ColorScheme, AppColors, VColors, VSpacing, AppTheme, design token)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/flutter-design-system?format=md"
SKILL.md•flutter-design-system

Flutter Design System Enforcement

Priority: P0 (CRITICAL)

Zero tolerance for hardcoded design values.

Phase 0: Context Discovery (MANDATORY)

Before any UI refactoring, you MUST identify the project's Theme Archetype:

  1. Check main.dart: Look for MaterialApp theme configuration.
  2. Determine Pattern:
    • Theme-Driven (Adaptive): If you see VThemeData(...).toThemeData() or extensive ThemeData overrides, you MUST use Theme.of(context).textTheme or theme.textTheme for feature code.
    • Token-Driven (Static): Only use static tokens (VTypography.*) if there is no global theme bridge or if you are defining the theme itself.

Guidelines

  • Colors: Use tokens (VColors.*, AppColors.*), never Color(0xFF...) or Colors.red.
  • Spacing: Use tokens (VSpacing.*), never magic numbers like 16 or 24.
  • Typography: Prioritize theme.textTheme.* for adaptive UI. Use VTypography.* tokens only for theme definitions or non-contextual logic. Never use inline TextStyle.
  • Borders: Use tokens (VBorders.*), never raw BorderRadius.
  • Components: Use DLS widgets (VButton) over raw Material widgets (ElevatedButton) if available.

Detailed Examples

Anti-Patterns

  • No Hex Colors: Color(0xFF...) is strictly forbidden.
  • No Color Enums: Colors.blue is forbidden in UI code.
  • No Magic Spacing: SizedBox(height: 10) is forbidden.
  • No Inline Styles: TextStyle(fontSize: 14) is forbidden.
  • No Raw Widgets: Don't use ElevatedButton when VButton exists.

Related Topics

mobile-ux-core | flutter/widgets | idiomatic-flutter

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#data#design#mobile#pdf
└────────────