What frameworks does this skill support?

It provides platform-agnostic design principles and specific implementation notes for Flutter, Jetpack Compose (Android), and Material Web Components.

How does M3 Expressive differ from standard Material Design?

M3 Expressive focuses on more engaging motion, shape morphing, and brand expression while maintaining the core usability of the standard M3 system.

Does it include accessibility checks?

Yes, the skill covers color contrast, minimum touch target sizes (48x48dp), and keyboard/screen reader interaction patterns.

Can it help me generate a dark mode theme?

Yes, it guides you through generating tonal palettes and mapping color roles for both light and dark variants using M3 standards.

Material Design 3 Expert

Name: Material Design 3 Expert
Author: Kurogoma4D

byKurogoma4D

•

Design Tools

Implements and reviews Material Design 3 and Expressive principles to create accessible, production-ready user interfaces.

The Material Thinking skill equips Claude with specialized knowledge of Google's Material Design 3 (M3) and M3 Expressive systems. It enables Claude to act as a design consultant that can generate design tokens, select appropriate components, audit existing UIs for M3 compliance, and apply advanced motion patterns. By leveraging comprehensive reference guides for foundations, styles, and components, this skill ensures that interfaces built across Flutter, Android, or Web are consistent, accessible, and emotionally engaging through modern design tactics like shape morphing and dynamic color.

Key Features

01Comprehensive M3 component selection and implementation guidance

02Accessibility auditing for WCAG 2.1 Level AA compliance

03Automated design token generation for colors, typography, and shapes

04Responsive layout design using window size classes and canonical patterns

05M3 Expressive motion and dynamic animation patterns

061 GitHub stars

Use Cases

01Designing a new responsive application interface using M3 layout foundations

02Implementing expressive branding elements and shape-based transitions

03Reviewing existing UI designs for Material 3 design system compliance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add kurogoma4d/cc-tools material-thinking

For use in Claude.ai and ChatGPT

Download Skill