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

material-design-3-shape

Implement Material Design 3 shape scale systems and expressive shapes with CSS.

4|Updated Feb 16, 2026
Search Tags:#ui design#m3#material design 3#shape#component styling#rounded corners#expressive shapes
One-click install
npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-shape
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-shape
Source: https://github.com/shelbeely/Shelbeely-Agent-skills/tree/main/skills/material-design-3-shape
Command: npx skills add https://github.com/shelbeely/Shelbeely-Agent-skills --skill material-design-3-shape

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement Material Design 3's expressive shape and containment principles, ensuring your UI components have friendly, approachable, and visually distinct designs with appropriate rounded corners and custom shapes.

Core Features & Use Cases

  • Shape Scale System: Apply a defined system of corner radii (e.g., extra-small, small, medium, large, extra-large, extra-extra-large, full) to various components.
  • Expressive Shape Library: Utilize 35 decorative and functional shapes beyond simple rounded rectangles for moments of delight and brand expression.
  • Containment Principles: Understand how to use shape for container hierarchy and grouping components.
  • Morphing Shapes: Implement smooth shape transitions for state feedback and interactive delight.
  • Use Case: When designing a new set of M3 components, use this skill to ensure all buttons, cards, dialogs, and input fields adhere to the M3 shape guidelines, creating a cohesive and modern look.

Quick Start

Apply the Material Design 3 shape system to your UI components using the provided CSS shape tokens and guidelines.

Frequently Asked Questions about material-design-3-shape

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

FAQPage Schema
What is the Material Design 3 shape scale system and how does it apply to UI components?▼

Material Design 3 expressive shapes include 35 decorative and functional shapes beyond simple rounded rectangles. They provide custom UI component styling for moments of user delight and brand expression across your interface.

How do I implement shape morphing for state transitions in Material Design 3?▼

To implement shape morphing in Material Design 3, apply smooth shape transitions using the provided CSS examples. This creates interactive state feedback and visual delight during UI component state changes.

Can I use Material Design 3 shape principles to establish containment hierarchy?▼

Material Design 3 shape implementation addresses accessibility and performance considerations by providing responsive adjustments and CSS shape tokens. These ensure custom component shapes scale appropriately without compromising UI performance.

Do I need specific dependencies to apply M3 expressive shape CSS tokens?▼

No specific dependencies are required to apply M3 expressive shape CSS tokens. You can directly integrate the provided shape scale systems and CSS examples into your existing UI design workflow for immediate component styling.

Related Skills

Explore More Design & Creative Skills→
david-saintdavid-saint

material-design-3

Build Material Design 3 web interfaces with @material/web components and theming tokens.

Community
Advanced
K9i-0K9i-0
1

flutter-ui-design

Apply Material Design 3 guidelines to typography, color, spacing, and motion in Flutter apps.

Community
Intermediate
booklib-aibooklib-ai
35

refactoring-ui

Apply Refactoring UI principles to improve visual hierarchy in UI designs.

Official
Intermediate
tiantangcao1980-webtiantangcao1980-web
4

apple-hig

Define Apple HIG-inspired design tokens for AI-driven UI creation.

Community
Intermediate