flutter-design-system_skill

Overview

This skill enforces a strict Flutter Design Language System (DLS) to ensure consistent UI across the codebase. It prevents hardcoded colors, spacing, typography, and raw widgets, and encourages use of centralized design tokens and DLS components. The goal is uniform visual language, easier theme updates, and fewer UI regressions.

How this skill works

The skill scans Dart/Flutter source for banned patterns such as hex Color constructors, direct Colors.* enums, magic numeric spacing, inline TextStyle definitions, raw BorderRadius, and use of Material widgets when DLS widgets exist. When it detects violations it highlights the exact locations and suggests the corresponding token or DLS component (for example VColors.primary, VSpacing.x4, VTypography.body). It integrates as a rule set that can be used in CI checks or editor linting to block merges that violate the DLS.

When to use it

• During code reviews and pre-merge CI to block UI anti-patterns.
• When onboarding new team members to enforce consistent implementation.
• Refactoring legacy Flutter code to adopt the project design tokens.
• When adding features that affect look-and-feel to avoid drift.
• As a gating rule for releases that require visual consistency.

Best practices

• Always substitute hardcoded colors with provided tokens such as VColors.* or AppColors.*.
• Replace numeric spacing with VSpacing tokens instead of SizedBox or magic numbers.
• Use VTypography or textTheme tokens instead of inline TextStyle declarations.
• Prefer DLS components (VButton, VCard, etc.) over raw Material widgets when available.
• Treat the linter output as fixable guidance: map each violation to a token replacement.

Example use cases

• Reject a pull request that adds Color(0xFF123456) in a widget and point to VColors.primary.
• Automated scan that flags SizedBox(height: 12) and suggests VSpacing.x3.
• CI check that fails when TextStyle(fontSize: 14) appears, directing to VTypography.bodySmall.
• Batch refactor that replaces ElevatedButton with VButton across a feature branch.
• Pre-merge validation to ensure no BorderRadius.circular(...) remains in new UI code.