A comprehensive technical reference for implementing Google Material Design 3 specifications across Android, Web, and Flutter applications.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install material-design
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install material-design using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Material Design 3 Practical Reference?
Material Design 3, also known as Material You, is the latest evolution of Google's design system, focusing on personalization, adaptability, and expressiveness. This skill provides developers using Openclaw Skills with a deep dive into the technical specifications required to build modern user interfaces, including the dynamic color system, updated typography scales, and the redesigned component library.
By leveraging this technical guide, developers can ensure their applications meet the highest standards of visual hierarchy and accessibility. It synthesizes complex design tokens into actionable data for implementation in Jetpack Compose, Flutter, and web-based Material libraries.
Material Design 3 Practical Reference Use Cases
- Designing Android application UIs using Jetpack Compose or XML Views.
- Developing cross-platform mobile apps with Flutter following Material 3 guidelines.
- Building responsive web applications with MUI or Angular Material.
- Auditing existing application interfaces for Material 3 compliance.
- Configuring dark theme color schemes and elevation levels for OLED and high-contrast displays.
How Material Design 3 Practical Reference Works
- Identify the target platform and core interaction requirements for the application.
- Utilize the Tonal Palette system to generate primary, secondary, and tertiary color roles based on a source color.
- Apply the M3 Type Scale to establish a clear typography hierarchy across all screen sizes.
- Implement UI components such as FABs, Cards, and Dialogs using the specific corner radii and elevation levels defined in the shape system.
- Integrate Motion durations and easing curves to provide expressive and fluid transitions between UI states.
Material Design 3 Practical Reference Setup
To integrate this design reference into your development workflow with Openclaw Skills, ensure your project dependencies are correctly configured for Material 3.
# For Android Jetpack Compose projects
implementation "androidx.compose.material3:material3:1.2.0"
# For Web projects using Material Web Components
npm install @material/web
You can also use the Material Theme Builder to export design tokens as CSS variables or Compose code for immediate use within your agent environment.
Material Design 3 Practical Reference Data Schema & Taxonomy
The skill organizes design specifications into the following technical categories for easy reference within Openclaw Skills:
| Category | Attributes | Implementation Formats |
|---|---|---|
| Color System | Key Color Roles, Tonal Palettes | Kotlin, CSS, Figma Tokens |
| Typography | Type Scale (Display to Label) | Font Size, Weight, Line Height |
| Shape System | Corner Radii (None to Full) | DP values, Percentages |
| Elevation | Surface Tint Levels (0-5) | Opacity percentages, Elevation DP |
| Motion | Durations and Easing Curves | Cubic-Bezier, MS values |
Material Design 3 Practical Reference Advanced Features
- Dynamic Color Support: Logic for extracting colors from Android 12+ wallpapers for personalized themes.
- Adaptive Navigation Mapping: Automated selection between Navigation Bar, Rail, and Drawer based on device form factor.
- Surface Tint Implementation: Specialized elevation rendering that uses color overlays instead of shadows for better visibility in Dark Mode.
- Multi-Platform Comparison: Side-by-side technical specs comparing Material 3 with Apple Human Interface Guidelines and Microsoft Fluent Design.
SKILL.md
Loading
Related Openclaw Skills
Fluent Design Practical Reference
A technical reference for implementing Microsoft Fluent Design System 2 in Windows 11 and Electron applications.
Batch Processing Patterns
A production-grade framework for managing batch processing, task queues, and resilient long-running orchestrations.
Apple Human Interface Guidelines (HIG) Designer
A comprehensive technical reference for implementing Apple Human Interface Guidelines across macOS and iOS applications.
Software Copyright Material Generator (CN)
A specialized tool for automating the generation of mandatory Chinese software copyright registration documents, including source code PDFs and user manuals.
Zustand Patterns
A production-grade collection of practical patterns for Zustand state management focusing on scalability, persistence, and Electron integration.
CloudBase Setup for OpenClaw
A specialized configuration skill to prepare OpenClaw and Moltbot environments for automated Tencent CloudBase development and deployment.
Featured*
