skills.rest
pohlai88
pohlai88COMMUNITY
Explore all skills by this author →
GitHub

material-design-3-guide

Guides implementation of Material Design 3 across color, motion, typography, shape, layout, components, and icons.

Updated Sep 5, 2026
Search Tags:#theming#design system#design tokens#ui components#material you#material design 3#m3 expressive
One-click install
npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-guide-pohlai88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-guide
Source: https://github.com/pohlai88/afenda-xforge-v5/tree/main/.agents/skills/material-design-3-guide
Command: npx skills add https://github.com/pohlai88/afenda-xforge-v5 --skill material-design-3-guide-pohlai88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Material Design 3 spans seven interconnected pillars plus M3 Expressive additions, making it hard to know which specification applies to a given task. This Skill acts as a master routing guide that explains the full M3 system and directs you to the correct specialized skill for color, motion, typography, shape, layout, components, or icons. ## Core Features & Use Cases - Seven-Pillar Overview: Explains color, motion, typography, shape, layout, components, and icons, including M3 Expressive additions like spring physics, 35 expressive shapes, and emphasized type styles. - Skill Routing: Maps common requests ("make it M3 Expressive", "implement dark mode", "style this dialog") to the right specialized skills with step-by-step ordering. - Framework Selection: Compares M3 support across React/MUI, Angular Material, Vuetify, Svelte, Tailwind, web components, Flutter, Jetpack Compose, and Ink CLI. - Use Case: When starting a new Next.js project that must follow Material Design 3, use this guide to sequence the setup: color tokens first, then typography, shape, icons, layout, components, and finally motion. ## Quick Start Ask the assistant to explain which Material Design 3 skills to apply for building a dark-mode-ready card component in React.

Frequently Asked Questions about material-design-3-guide

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

FAQPage Schema
How do I start a Material Design 3 project from scratch?▼

Begin with the color skill to define tonal palettes and theme tokens, then set up typography, shape, and icons. Next establish layout and spacing, build components from the component specs, and finish with motion and transitions.

What is the difference between Material You and M3 Expressive?▼

Material You is the M3 baseline with dynamic color, tonal palettes, and a 15-style type scale. M3 Expressive adds 15 emphasized type styles, 35 decorative shapes, spring-based motion, fixed accent colors, contrast levels, and new components like split buttons and button groups.

Which framework has the best Material Design 3 support?▼

Angular Material offers the most complete official M3 integration for web, while Jetpack Compose provides full M3 Expressive on Android. React projects typically use MUI theming or Google's official @material/web components.

Can I use Material Design 3 with Tailwind CSS?▼

Yes, the tailwind-material-3 plugin maps M3 design tokens to Tailwind configuration, giving utility-first styling with M3 color, typography, and shape values. The m3-web-tailwind skill covers the setup.

How do I implement dark mode in Material Design 3?▼

Define all color tokens for both light and dark themes using the color skill, ensuring semantic roles rather than hard-coded values. Also adjust Material Symbols icon grade for dark mode via the icons skill.

When should I not use Material Design 3?▼

Avoid M3 when a project requires a distinct brand design language, since mixing M3 with other design systems breaks consistency. M3 works best when all seven pillars are applied together rather than cherry-picked.

Related Skills

Explore More Design & Creative Skills→
CutTheChexxCutTheChexx

brand-builder

Create cohesive brand identities and scalable design systems for web applications.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

visual-design-foundations

Establish design systems with typography scales, 8-point grids, and semantic color tokens.

Community
Intermediate
Mjlike123Mjlike123

accessibility-audit

Audits HTML designs for WCAG accessibility issues across contrast, semantics, keyboard, and motion.

Community
Intermediate
idy-00idy-00

migrate-design-system

Maps design tokens between a token system and external design systems via role-based crosswalks.

Community
Intermediate