material-design-3-shape
CommunityShape your UI with M3 Expressive principles.
Design & Creative#ui design#m3#material design 3#shape#component styling#rounded corners#expressive shapes
Authorshelbeely
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
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-shape Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#material-design-3-shape Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.