skills.rest
vinnie357
vinnie357COMMUNITY
Explore all skills by this author →
GitHub

material-design

Implement Material Design 3 theming and components across Android, web, and Flutter.

24|6|Updated Nov 15, 2025
Search Tags:#accessibility#ui/ux#material design#web design#android#dynamic theming#material you
One-click install
npx skills add https://github.com/vinnie357/claude-skills --skill material-design-vinnie357
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design
Source: https://github.com/vinnie357/claude-skills/tree/main/core/skills/material-design
Command: npx skills add https://github.com/vinnie357/claude-skills --skill material-design-vinnie357

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill guides designers and developers in implementing Google's Material Design 3 (Material You) principles, ensuring applications are personalized, accessible, and consistent across platforms. It simplifies the adoption of dynamic theming and modern UI patterns.

Core Features & Use Cases

  • Dynamic Color System: Implement user-driven personalization with HCT color space, tonal palettes, and automatic light/dark theme generation for Android and web.
  • Comprehensive UI Guidelines: Apply Material Design 3 principles for typography, responsive layouts (compact, medium, expanded), and a wide range of components (buttons, cards, text fields, navigation).
  • Built-in Accessibility: Design with accessibility in mind, covering contrast ratios, touch targets, and screen reader support from the ground up.
  • Use Case: When designing a new Android application, activate this skill to ensure the UI adheres to Material Design 3 guidelines, implements dynamic theming based on user wallpaper, and uses accessible component patterns.

Quick Start

Implement a basic filled button and an elevated card component using Material Design 3 principles in Jetpack Compose.

Frequently Asked Questions about material-design

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

FAQPage Schema
How do I implement Material Design 3 dynamic theming in Android apps?▼

Material Design 3 dynamic theming uses the HCT color space to generate tonal palettes automatically from user wallpapers or custom seeds, then applies them to Android native apps and Jetpack Compose. This enables personalized light and dark themes without manual color management.

Can I use Material Design 3 components across web and Android platforms?▼

Yes. Material Design 3 provides comprehensive UI guidelines and component specifications that work across Android native apps, Jetpack Compose, web projects, and Flutter. Use the same design principles and adapt components to each platform's native stack.

What accessibility features does Material Design 3 include?▼

Material Design 3 enforces accessibility from the ground up with WCAG contrast ratios, touch targets sized for usability, semantic structure for screen readers, and responsive layouts across compact, medium, and expanded breakpoints.

How do I structure responsive layouts in Material Design 3?▼

Material Design 3 defines three layout breakpoints—compact, medium, and expanded—that adapt components and spacing to device screens. Apply these breakpoints to ensure consistent, usable interfaces across phones, tablets, and desktops.

What's the difference between Material Design 3 and earlier Material Design versions?▼

Material Design 3 (Material You) introduces dynamic color personalization via HCT color space, refined typography scales, updated component patterns, and stronger accessibility defaults. It emphasizes user-driven customization over fixed design systems.

Do I need prior design experience to implement Material Design 3?▼

No. Material Design 3 provides detailed guidelines and component specifications for both designers and developers. Start with the quick reference for buttons and cards, then expand to full layouts and theming workflows.

Related Skills

Explore More Design & Creative Skills→
ari-ayvazyanari-ayvazyan
1

color-architect

Generate accessible UI color palettes with OKLCH/HCT and WCAG AA contrast validation.

Community
Advanced
frankxaifrankxai
7

product-engine

Orchestrates creation, packaging, publishing of digital products with AI integration and component library.

Community
Advanced
ShawnRnShawnRn
1

material-design

Implement Material You color, typography, components, shapes, and motion across Android, web, and cross-platform UIs.

Community
Advanced
zzafergokzzafergok
1

mobile-ui-ux

Generate iOS-first Flutter-ready UI components with token-driven design system aligned to iOS Human Interface Guidelines.

Community
Intermediate