skills.rest
takah1r0jp
takah1r0jpCOMMUNITY
Explore all skills by this author →
GitHub

material-design

Generate Material Design 3 components with styling and accessibility.

Updated Aug 23, 2026
Search Tags:#UI/UX#Frontend#Accessibility#Theming#Web Development#Material Design#Component Library
One-click install
npx skills add https://github.com/takah1r0jp/challenge-bank --skill material-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: material-design
Source: https://github.com/takah1r0jp/challenge-bank/tree/main/.claude/skills/material-design
Command: npx skills add https://github.com/takah1r0jp/challenge-bank --skill material-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building modern, accessible, and consistent user interfaces following Material Design 3 guidelines can be complex and time-consuming. This Skill streamlines the process, ensuring your UI components are beautiful, functional, and adhere to Google's latest design standards, saving you development and design effort.

Core Features & Use Cases

  • Component Generation: Build Material Design 3 components (buttons, cards, text fields, etc.) from scratch with correct styling and accessibility.
  • Theming & Design Tokens: Implement Material You dynamic color theming, typography scales, elevation, and shape systems for consistent branding.
  • Accessibility & Responsiveness: Ensure WCAG 2.1 AA compliance and create adaptive layouts for mobile, tablet, and desktop.
  • Use Case: Quickly generate a responsive card grid for a product display page, complete with Material Design 3 styling, hover states, and accessibility attributes, without manually writing all the CSS.

Quick Start

Create a Material Design 3 filled button for a React application using MUI.