Agent-skills-standard 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)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/flutter/flutter-design-system" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-flutter-design-system && rm -rf "$T"

manifest: skills/flutter/flutter-design-system/SKILL.md

source content

Flutter Design System Enforcement

Priority: P0 (CRITICAL)

Zero tolerance for hardcoded design values.

Phase 0: Context Discovery (MANDATORY)

Before UI refactoring, identify project's Theme Archetype:

Check
main.dart
: Look for
```
MaterialApp
```
theme configuration.
Determine Pattern:

Theme-Driven (Adaptive):

VThemeData(...).toThemeData()

or extensive

ThemeData

overrides → use

Theme.of(context).textTheme

theme.textTheme

Token-Driven (Static): Use static tokens (
```
VTypography.*
```
) only when no global theme bridge exists, or when defining theme itself.

Guidelines

Colors: Use tokens (

VColors.*

AppColors.*

), never

Color(0xFF...)

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...)
```
strictly forbidden.
No Color Enums:
```
Colors.blue
```
forbidden in UI code.
No Magic Spacing:
```
SizedBox(height: 10)
```
forbidden.
No Inline Styles:
```
TextStyle(fontSize: 14)
```
forbidden.
No Raw Widgets: Don't use
```
ElevatedButton
```
when
```
VButton
```
exists.