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)
Installs into .claude/skills of the current project.
Are you the author of Flutter Design System?
Add the live security badge to your README. It updates with every re-scan.
[](https://www.skillsdirectory.com/skills/comeonoliver-flutter-design-system)
---
name: flutter-design-system
description: "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)"
---
# 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](references/usage.md)
## 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
