How do I install the Flutter Design System skill?

Run npx skillmds@latest add comeonoliver/flutter-design-system in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Flutter Design System safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Flutter Design System?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Flutter Design System free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Flutter Design System?

ComeOnOliver (@comeonoliver) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Flutter Design System by comeonoliver

Name: Flutter Design System
Rating: 4.666666666666667 (3 reviews)
Author: ComeOnOliver

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)

ComeOnOliver Updated Sep 8, 2026 61 repo stars

File contents

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...) 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

---name: flutter-design-systemdescription: 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 Topicsmobile-ux-core | flutter/widgets | idiomatic-flutter

Frequently asked questions