skills.rest
ishiyan
ishiyanCOMMUNITY
Explore all skills by this author →
GitHub

material-design-3-components

Standardize Material Design 3 components with token-driven guidelines.

Updated Nov 24, 2021
Search Tags:#accessibility#design-system#ui-components#design-tokens#md3#material-design-3
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-components-ishiyan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design-3-components
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/material-design-3-components
Command: npx skills add https://github.com/ishiyan/Mbng --skill material-design-3-components-ishiyan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent Material Design 3 component implementations are standardized with a centralized reference and token-based guidelines to ensure uniform look and behavior.

Core Features & Use Cases

  • Comprehensive coverage of M3 components across Action, Containment, Communication, Navigation, Selection, and Text Input.
  • Token-driven guidance for colors, typography, shape, elevation, motion, and state management to maintain design-system consistency.
  • Real-world usage: aligning design specs with engineering implementation across multiple frameworks.

Quick Start

Begin by reviewing the material-design-3-components documentation and reference tokens to begin applying M3 components to your UI.

Frequently Asked Questions about material-design-3-components

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

FAQPage Schema
How do I standardize inconsistent Material Design 3 component implementations across my UI?▼

Apply Material Design 3 design tokens for colors, typography, shape, elevation, and motion to manage interaction states and maintain design-system consistency. The Skill provides framework-agnostic usage specs and examples.

Can I use these Material Design 3 guidelines with any framework?▼

Yes, Material Design 3 guidelines are framework-agnostic, ensuring adherence to M3 tokens across actions, containment, navigation, and inputs. This allows alignment of design specs with engineering implementation across multiple frameworks.

What components are covered in the Material Design 3 reference?▼

The Material Design 3 reference covers components across Action, Containment, Communication, Navigation, Selection, and Text Input categories. It ensures adherence to M3 tokens, interaction states, and accessibility.

Does this Material Design 3 reference include accessibility guidance?▼

Yes, the Material Design 3 reference includes accessibility guidance alongside interaction states and framework-agnostic usage specs. It ensures that UI systems using M3 tokens maintain accessibility standards.

What's the best way to align design specs with engineering implementation for M3?▼

Align design specs with engineering implementation by reviewing centralized M3 documentation and applying token-based guidelines for colors, typography, shape, elevation, and motion. This maintains design-system consistency across workflows.

Related Skills

Explore More Design & Creative Skills→
shelbeelyshelbeely
4

m3-web-vue

Implement Material Design 3 theming in Vue.js with Vuetify 3.

Community
Intermediate
patricio0312revpatricio0312rev
5

design-to-component-translator

Translate design specs into React components with Tailwind and shadcn patterns.

Community
Advanced
DevXojeDevXoje

ui-components

Standardize UI component creation with atomic design and TypeScript guidelines.

Community
Basic
amanhsnamanhsn

ui-design-system

Generate design tokens from brand colors using Python scripts.

Community
Advanced