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)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

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

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

manifest: skills/HoangNguyen0403/agent-skills-standard/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 any UI refactoring, you MUST identify the project's Theme Archetype:

Check
main.dart
: Look for
```
MaterialApp
```
theme configuration.
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...)

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.