Verified:GitHub

material

Generates implementation-ready design-system guidelines based on Google's Material Design tokens and patterns.

Updated Jun 20, 2026

Search Tags:#typography #accessibility #design system #material design #design tokens #UI guidelines #component rules

One-click install

npx skills add https://github.com/jbreel77888/Ai-Agnet --skill material-jbreel77888

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: material
Source: https://github.com/jbreel77888/Ai-Agnet/tree/main/skills/design/design-systems/style-skills/material
Command: npx skills add https://github.com/jbreel77888/Ai-Agnet --skill material-jbreel77888

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Teams building UIs often lack consistent, opinionated design-system guidance, leading to inconsistent spacing, low-contrast text, and ambiguous component rules. This Skill produces structured, implementation-ready Material Design guidelines that engineers and designers can apply directly. ## Core Features & Use Cases - Token-Driven Foundations: Defines color tokens (primary #6442D6, secondary #C8B3FD, semantic states), typography scales (12/14/16/20/24/32 with Inter, Roboto, Fira Code), and spacing scales (4/8/12/16/24/32). - Component-Level Rules: Specifies anatomy, variants, states (default, hover, focus-visible, active, disabled, loading, error), and responsive behavior for components. - Accessibility & QA Gates: Enforces WCAG 2.2 AA requirements, testable acceptance criteria, anti-patterns, and a code-review-ready QA checklist. - Use Case: A product team standardizing a React app on Material Design asks for button and form guidelines; the Skill outputs token-anchored rules, interaction states, accessibility criteria, and migration notes for inconsistent legacy UI. ## Quick Start Ask the assistant to generate Material Design guidelines for a specific component, such as "Create Material Design rules for a primary button including states and accessibility criteria."

Frequently Asked Questions about material

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

FAQPage Schema

What are common Material Design anti-patterns to avoid?▼

Avoid low-contrast text, inconsistent spacing rhythm, and ambiguous labels. Prefer semantic tokens over raw values, preserve visual hierarchy, and pair every do-rule with at least one concrete don't-example.