skills.rest
w0lzard
w0lzardCOMMUNITY
Explore all skills by this author →
GitHub

material-3

Implements Material Design 3 UIs with tokens, components, and adaptive layouts across Compose, Flutter, and web.

Updated Jul 1, 2026
Search Tags:#design tokens#flutter#jetpack compose#ui audit#material design 3#adaptive layout#dynamic color
One-click install
npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill material-3-w0lzard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-3
Source: https://github.com/w0lzard/Wolzard-s-Marketplace/tree/main/plugins/personal-skills/skills/material-3
Command: npx skills add https://github.com/w0lzard/Wolzard-s-Marketplace --skill material-3-w0lzard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @material/web, @material/material-color-utilities, and includes references (resource) components.

What problem does it solve? Building Material Design 3 interfaces requires navigating a large spec covering color roles, typography scales, shape tokens, elevation, motion, 30+ components, and adaptive layouts across multiple platforms. This Skill consolidates that guidance so you can implement or audit MD3 UIs without reading the full specification. ## Core Features & Use Cases - Design token system: Complete reference for md.sys color roles, typescale, shape, elevation, and motion tokens, mapped to Jetpack Compose MaterialTheme, Flutter ThemeData, and web CSS custom properties. - Component catalog: 30+ components (buttons, FABs, text fields, navigation, lists, dialogs) with Compose composables, @material/web elements, and spec-aligned CSS fallbacks for unimplemented elements. - Adaptive layouts: Canonical layouts (feed, list-detail, supporting pane), window size classes, foldable posture handling, and edge-to-edge/insets guidance. - MD3 compliance audit: Invoke with audit to score an app or page across 10 categories (color, typography, shape, accessibility, etc.) and receive a prioritized fix report. - Use Case: Ask for a responsive app shell with navigation rail and top app bar, and receive Compose or web code using correct tokens, tonal pairing, and breakpoint behavior. ## Quick Start Ask the assistant to build a Material Design 3 settings screen in Jetpack Compose with dynamic color and a navigation rail that adapts to window size classes.

Frequently Asked Questions about material-3

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

FAQPage Schema
How do I implement Material Design 3 in Jetpack Compose?▼

Use androidx.compose.material3 with MaterialTheme, supplying a colorScheme from dynamicLightColorScheme/dynamicDarkColorScheme on Android 12+ or static lightColorScheme/darkColorScheme. Build screens with Scaffold, NavigationBar, and M3 composables, and use window size classes for adaptive layouts.

How do I theme a website with Material Design 3 tokens?▼

Define CSS custom properties like --md-sys-color-primary and --md-sys-shape-corner-medium on :root, then reference them in component styles. Generate schemes from a seed color with @material/material-color-utilities and apply dark theme via a prefers-color-scheme media query.

Does @material/web support M3 Expressive features?▼

No. Material Web is in maintenance mode and does not implement M3 Expressive, including spring-based motion and shape morphing. Jetpack Compose is the primary platform for Expressive features; on web, approximate them with CSS tokens and easing curves.

What is the difference between MD2 and MD3 color systems?▼

MD3 replaces fixed palette colors with tonal color roles (primary, surface-container, on-surface) generated from a seed color, and uses tonal surfaces instead of shadows for elevation. Never mix @material/mdc-* (MD2) with @material/web (MD3) since their APIs are incompatible.

How do I make an MD3 layout adapt to foldables and large screens?▼

Switch navigation from bottom bar to rail to drawer across the Compact, Medium, and Expanded window size classes, and use list-detail or supporting-pane layouts at 600dp and wider. Avoid placing interactive content across the hinge and constrain content width to 840-1040dp on large screens.

How do I audit an app for Material Design 3 compliance?▼

Invoke the skill with the audit argument and provide a URL or source files. It scores ten categories including color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, and theming, then produces a report with prioritized fixes.

Related Skills

Explore More Design & Creative Skills→
RoudranilRoudranil

material-3-skill

Guide Flutter developers to implement Material Design 3 with token-driven theming.

Community
Advanced
tonone-aitonone-ai
69

touch-feature

Guide mobile feature development across iOS, Android, React Native, and Flutter.

Official
Intermediate
oscardlfroscardlfr
1

material-3

Generate MD3-compliant UI components, themes, and responsive layouts.

Community
Intermediate
Prisma-Labs-DevPrisma-Labs-Dev
299

ios-design-consultant

Evaluate iOS interface layouts against Apple Human Interface Guidelines and Liquid Glass design.

Official
Intermediate