skills.rest
ishiyan
ishiyanCOMMUNITY
Explore all skills by this author →
GitHub

material-design-3-layout

Implement Material Design 3 layouts with 4dp spacing and mobile-first grids.

Updated Nov 24, 2021
Search Tags:#layout#spacing#responsive-design#containment#grid#elevation#material-design-3
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-layout-ishiyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-layout
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-design-3-layout
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-layout-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing user interfaces that consistently follow Material Design 3 layout, spacing, and elevation can be error-prone without a codified system.

Core Features & Use Cases

  • 4dp spacing scale with semantic tokens for component, layout, and list spacing.
  • Responsive grid and breakpoints that enable mobile-first layouts across devices.
  • Elevation, tinting, and background blur patterns to convey depth and containment.
  • Clear guidelines for explicit and implicit containment to structure content.

Quick Start

Begin by applying the 4dp spacing scale and the mobile-first grid defaults to construct a baseline MD3 layout for your page.

Frequently Asked Questions about material-design-3-layout

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

FAQPage Schema
How do I apply Material Design 3 spacing scales to my web layout?▼

Material Design 3 spacing is applied using a strict 4dp spacing scale with semantic tokens. These tokens categorize spacing for components, layouts, and lists to ensure visual consistency across your web interfaces.

What are the Material Design 3 breakpoints for building mobile-first responsive grids?▼

Material Design 3 responsive grids use defined breakpoints to enable mobile-first layouts across devices. You start with mobile grid defaults and progressively adapt the layout structure as screen sizes increase.

How does Material Design 3 handle elevation, tinting, and background blur for containment?▼

Material Design 3 handles elevation using specific elevation tokens alongside tinting and background blur patterns. These mechanisms convey depth and structure content through explicit and implicit containment principles.

Do I need external dependencies to implement Material Design 3 layouts and elevation tokens?▼

No external dependencies are required to implement Material Design 3 layouts and elevation tokens. The system provides a codified set of rules for spacing, grids, and depth that you can apply directly to your project.

Why does my Material Design 3 layout lack consistent depth and containment across components?▼

Inconsistent depth and containment in Material Design 3 layouts usually occurs when elevation tokens and explicit containment principles are not applied. Codifying these patterns ensures structured content and uniform visual depth.

Related Skills

Explore More Design & Creative Skills→
krutikJainkrutikJain
14

android-material3-design-system

Apply Material 3 design tokens and themes to Android apps.

Community
Intermediate
ScivorScivor

design-review

Audit live sites for typography, spacing, and hierarchy consistency.

Community
Advanced
neogenzneogenz
4

material-design-3

Applies Material Design 3 theming and typography to Angular apps.

Community
Intermediate
DevattomDevattom

ui-styling

Create responsive interfaces with shadcn/ui components and Tailwind CSS.

Community
Intermediate