skills.rest
shelbeely
shelbeelyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

material-design-3-layout

Implement Material Design 3 layout with CSS variables for spacing, breakpoints, and elevation.

4|Updated Feb 16, 2026
Search Tags:#layout#responsive design#spacing#material design 3#elevation#grid system
One-click install
npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-layout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-layout
Source: https://github.com/shelbeely/Shelbeely-Agent-skills/tree/main/skills/material-design-3-layout
Command: npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-layout

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement Material Design 3 (M3) layout principles, ensuring your user interfaces are organized, responsive, and visually hierarchical across all screen sizes.

Core Features & Use Cases

  • Spacing System: Utilizes a consistent 4dp spacing scale and semantic tokens for predictable layouts.
  • Responsive Grid: Implements M3 breakpoints and grid columns for adaptive designs.
  • Component Spacing: Provides guidelines for spacing within common UI components like buttons, cards, and dialogs.
  • Size Hierarchy: Guides the use of size to emphasize elements and create visual importance.
  • Elevation: Defines elevation levels and tokens for depth and layering.
  • Interaction States: Details the state layer system for hover, focus, and press effects.
  • Use Case: When designing a new dashboard, use this Skill to set up a responsive grid that adapts from mobile to desktop, ensuring consistent spacing and clear visual hierarchy for all content cards.

Quick Start

Apply the Material Design 3 layout guidelines to create a responsive grid system for a web application.

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 implement responsive design using Material Design 3 layout principles?▼

Material Design 3 spacing uses a consistent 4dp scale and semantic CSS variables for predictable layouts. These tokens define spacing for grids, breakpoints, and common UI components like buttons and cards to ensure visual hierarchy.

How does elevation work in Material Design 3 layouts?▼

Elevation in Material Design 3 layouts defines depth and layering using predefined elevation levels and CSS tokens. This system creates visual separation between UI components, guiding the user's focus through structured shadows and surface hierarchy.

Can I use Material Design 3 grid systems for web application dashboards?▼

Yes, Material Design 3 grid systems are designed for web application dashboards. The system sets up a responsive grid that adapts to various screen sizes, ensuring consistent spacing and clear visual hierarchy for all content cards across mobile and desktop views.

What is the best way to handle component spacing in Material Design 3?▼

The best way to handle component spacing in Material Design 3 is by applying its 4dp spacing scale and semantic tokens. This provides specific guidelines for spacing within common UI components like buttons, cards, and dialogs to maintain consistent visual hierarchy.

Does Material Design 3 layout include interaction states for UI components?▼

Yes, Material Design 3 layout includes a state layer system for interaction states. This details the visual effects for hover, focus, and press interactions, ensuring UI components provide clear feedback within the established spacing and elevation hierarchy.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

modular-scale-typography

Generate modular scale font size tokens as CSS variables for design systems.

Community
Intermediate
yonetim258852yonetim258852

elevation-and-depth

Apply elevation and depth design tokens to UI components for visual hierarchy.

Community
Advanced
Prathviraj-jadhavPrathviraj-jadhav

visual-design-foundations

Apply typography, color, spacing, and iconography to create design tokens and style guides.

Community
Intermediate
deomiarndeomiarn

design-system-creator

Generate design tokens, CSS variables, and Tailwind extensions for web design systems.

Community
Advanced