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

google-material-design

Implement Google Material Design components with CSS, JavaScript, and TypeScript/React.

Updated Jan 26, 2026
Search Tags:#accessibility#material design#component library#ux design#frontend development#ui design#google design system
One-click install
npx skills add https://github.com/shelbeely/ADHD-Closet --skill google-material-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: google-material-design
Source: https://github.com/shelbeely/ADHD-Closet/tree/main/.agents/skills/google-material-design
Command: npx skills add https://github.com/shelbeely/ADHD-Closet --skill google-material-design

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and implementation examples for designing and building user interfaces that adhere to Google's Material Design system, ensuring consistency, usability, and aesthetic appeal across platforms.

Core Features & Use Cases

  • Design Principles: Understand the core philosophy of Material Design, including the material metaphor, bold graphics, and meaningful motion.
  • Component Implementation: Provides code examples (CSS, JavaScript, TypeScript/React) for various Material components like buttons, and discusses their anatomy and states.
  • Theming & Color: Details the Material 3 color system, including dynamic color, tonal palettes, and color roles, with CSS token examples.
  • Adaptive Layouts: Explains responsive grid systems and navigation patterns for different screen sizes.
  • Accessibility: Covers essential accessibility considerations like touch targets, color contrast, and focus indicators.
  • Use Case: A UI/UX designer or front-end developer can use this Skill to quickly reference Material Design guidelines, understand how to implement specific components, or ensure their designs are accessible and adaptive.

Quick Start

Use the google-material-design skill to understand the Material 3 typography scale and its application.