skills.rest
oscardlfr
oscardlfrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

material-3

Generate MD3-compliant UI components, themes, and responsive layouts.

1|Updated Mar 9, 2026
Search Tags:#theming#layout#material design#ui component#md3
One-click install
npx skills add https://github.com/oscardlfr/AndroidCommonDoc --skill material-3-oscardlfr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-3
Source: https://github.com/oscardlfr/AndroidCommonDoc/tree/main/skills/material-3
Command: npx skills add https://github.com/oscardlfr/AndroidCommonDoc --skill material-3-oscardlfr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the implementation of Google's Material Design 3 (MD3) UI system, enabling users to generate MD3-compliant UI components with ease.

Core Features & Use Cases

  • MD3 Components: Generate components like buttons, FABs, cards, and more with MD3 design tokens.
  • Custom Theming: Create custom themes from seed colors and apply them across your UI.
  • Responsive Layouts: Build responsive layouts that adapt to different screen sizes and orientations.
  • MD3 Compliance Audit: Ensure your app adheres to the MD3 guidelines with a comprehensive audit.
  • Use Case: A user wants to create a new login form for an app. They can use this skill to generate the components and apply the appropriate design tokens to achieve a consistent MD3 look and feel.

Quick Start

Generate a login form component with email and password fields using the /material-3 component command.

Frequently Asked Questions about material-3

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

FAQPage Schema
How do I generate Material Design 3 components for my web or mobile app?▼

Generate Material Design 3 components by using this skill to guide the creation of UI elements like buttons and cards with proper MD3 design tokens. It supports Jetpack Compose, Flutter, and web platforms.

How do I create a custom theme from a seed color using Material You principles?▼

Create a custom theme from a seed color by applying Material You design principles through this skill. It generates custom themes and applies them across your UI for consistent MD3 styling.

Can I build responsive layouts that adapt to different screen sizes with MD3?▼

Build responsive layouts with MD3 by using this skill to adapt your UI to different screen sizes and orientations. It focuses on implementing Material Design 3 layout adaptation rules.

Does this Material Design 3 skill support both Flutter and Jetpack Compose?▼

Yes, this Material Design 3 skill supports both Flutter and Jetpack Compose, alongside web platforms. It guides MD3-compliant UI component creation across these specific frameworks.

How do I audit my app's UI for Material Design 3 compliance?▼

Audit your app's UI for Material Design 3 compliance by using this skill's comprehensive audit feature. It ensures your application adheres strictly to the MD3 guidelines.

What do I need to know before implementing MD3 design tokens?▼

Before implementing MD3 design tokens, you need a basic understanding of MD3 tokens and component design. This skill requires this foundational knowledge to guide UI generation effectively.

Related Skills

Explore More Design & Creative Skills→
RoudranilRoudranil

material-3-skill

Guide Flutter developers to implement Material Design 3 with token-driven theming.

Community
Advanced
ThedouglerThedougler

mobile-android-design

Create native Android UIs with Jetpack Compose and Material Design 3.

Community
Intermediate
barbosakjnbarbosakjn
1

webapp-testing

Automate browser-based web app testing with Playwright via a Python script.

Community
Intermediate
Exia-thdExia-thd

ui-designer

Generate WCAG AA-compliant wireframes, design tokens, and component inventories for digital products.

Community
Advanced