Skills
.Work. You
Rest

material-design-3-layout

Community

Master M3 layout and spacing for responsive UIs.

Design & Creative#layout#responsive design#spacing#material design 3#elevation#grid system
Authorshelbeely
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: material-design-3-layout
Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#material-design-3-layout

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.