skills.rest
hunmer
hunmerCOMMUNITY
Explore all skills by this author →
GitHub

Material Design 3 配色规范守护者

Enforce Material Design 3 colorScheme tokens across Flutter apps.

70|12|Updated Apr 1, 2025
Search Tags:#theming#Flutter#color scheme#dark mode#enforce#Material Design 3
One-click install
npx skills add https://github.com/hunmer/Memento --skill material-design-3
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Material Design 3 配色规范守护者
Source: https://github.com/hunmer/Memento/tree/main/.claude/skills/material3-color-guardian
Command: npx skills add https://github.com/hunmer/Memento --skill material-design-3

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill ensures consistent Material Design 3 color usage across Flutter apps by enforcing a theme-driven approach.

Core Features & Use Cases

  • Color system enforcement: Standardizes colors via ColorScheme tokens (surface, onSurface, primary, etc.) across light and dark themes.
  • UI consistency: Guides widgets, typography, and surfaces to align with Material Design 3 semantics.
  • Use Case: Apply the guidelines to a new Flutter project or refactor an existing one to achieve cohesive, accessible theming.

Quick Start

Apply Material Design 3 color rules to a Flutter app by enabling useMaterial3 and consistently using colorScheme tokens for background, surfaces, text, and primary actions.

Frequently Asked Questions about Material Design 3 配色规范守护者

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent Material Design 3 colors across a Flutter app?▼

To enforce Material Design 3 colors in Flutter, enable ThemeData(useMaterial3: true) and apply a colorScheme-driven approach so all widgets inherit correct colors for surfaces, typography, and controls.

What is a colorScheme-driven approach for Flutter theming?▼

A colorScheme-driven approach in Flutter standardizes UI colors via ColorScheme tokens like surface, onSurface, and primary, ensuring semantic color usage for widgets in both light and dark themes.

Does Material Design 3 theming support both light and dark mode in Flutter?▼

Yes, Material Design 3 theming supports both light and dark mode in Flutter by targeting colorScheme tokens for backgrounds, surfaces, and controls across both scenarios.

How to refactor an existing Flutter project for Material Design 3 color usage?▼

Refactor a Flutter project for Material Design 3 by enabling useMaterial3 in ThemeData and replacing hardcoded colors with colorScheme tokens to achieve cohesive and accessible theming.

Why use Material Design 3 color tokens instead of hardcoded colors in Flutter?▼

Using Material Design 3 color tokens instead of hardcoded colors ensures UI consistency, aligns widgets with Material semantics, and automatically supports both light and dark themes.

Related Skills

Explore More Software Engineering Skills→
tiantangcao1980-webtiantangcao1980-web
4

flutter-material

Enable Flutter Material 3 UI with ThemeData and dynamic color themes.

Community
Intermediate
wildbitcawildbitca
1

flutter-theme-colors

Enforces Theme.of(context).colorScheme and textTheme usage across Flutter widgets.

Official
Intermediate
dangdungvndangdungvn

flutter-theming-apps

Implements Material 3 and adaptive theming for Flutter applications.

Community
Intermediate
vertivolatamvertivolatam
1

🎨 Skill: Theming Avanzado

Implement Material 3 theming with light, dark, and system modes in Flutter.

Official
Intermediate