material

Standardize Material Design UI implementation with design tokens and WCAG 2.2 AA accessibility constraints.

Updated May 13, 2026
One-click install
npx skills add https://github.com/superpollo02/awesome-design-skill --skill material-superpollo02
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: material
Source: https://github.com/superpollo02/awesome-design-skill/tree/main/skills/material
Command: npx skills add https://github.com/superpollo02/awesome-design-skill --skill material-superpollo02

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps teams standardize UI implementation by providing consistent Material Design guidance, including tokens, interaction states, typography, spacing, and accessibility constraints.

Core Features & Use Cases

  • Design-system foundations: Defines typography, color palette, and spacing scales to keep implementations consistent.
  • Accessibility-first rules: Enforces WCAG 2.2 AA expectations, keyboard-first interaction, and visible focus states.
  • Component implementation guidance: Specifies do/don’t patterns and quality gates so generated UI code remains cohesive and reviewable (e.g., buttons, inputs, cards, modals, navigation).

Quick Start

Use the material skill to generate implementation-ready Material Design guidance for your UI components with explicit token usage and testable accessibility acceptance criteria.

Frequently Asked Questions about material

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

FAQPage Schema
How do I build accessible UI components that meet WCAG 2.2 AA standards?

Build accessible UI components meeting WCAG 2.2 AA by applying Material Design rules with strict keyboard-first focus behavior and explicit interaction states. This ensures your design-system components remain inclusive and testable for accessibility constraints.

What are design tokens and how do they standardize Material Design implementation?

Design tokens standardize Material Design implementation by defining typography, color palettes, and spacing scales as reusable variables. Using a token-first approach ensures UI consistency across responsive, cross-platform digital products and components.

How do I define explicit interaction states for buttons and inputs in a design system?

Define explicit interaction states for buttons and inputs using Material Design component rules and opinionated quality gates. This approach specifies do and don't patterns, ensuring generated UI code remains cohesive and reviewable across your design system.

Can I use Material Design guidelines for cross-platform digital products?

Yes, you can use Material Design guidelines for cross-platform digital products. The guidance applies token-first recommendations and component rules to build consistent design-system interactions that adapt responsively across different platforms.

What is the best way to enforce UI consistency across multiple components?

The best way to enforce UI consistency is applying Material Design rules with token-first recommendations and testable acceptance criteria. This standardizes typography, spacing, and component behavior, keeping implementations cohesive and reviewable.

When should I not use Material Design rules for my UI implementation?

Avoid Material Design rules when your project requires a fully custom design language outside standard component patterns. The rules enforce specific token-first constraints and WCAG 2.2 AA quality gates that may conflict with highly bespoke UI implementations.