material-3-skill

What this skill does

```markdown
---
name: material-3-skill
description: Claude Code skill for implementing Material Design 3 (Material You) UI — 30+ components, design tokens, theming, responsive layout, and MD3 compliance auditing across web, Flutter, and Jetpack Compose.
triggers:
  - implement material design 3 component
  - build MD3 UI with correct tokens
  - generate material you theme from seed color
  - scaffold responsive material 3 app shell
  - audit MD3 compliance of my app
  - create material design navigation pattern
  - apply material 3 color roles and typography
  - check if my UI follows material design 3 spec
---

# Material Design 3 Skill for Claude Code

> Skill by [ara.so](https://ara.so) — Daily 2026 Skills collection.

A comprehensive skill for implementing Google's [Material Design 3](https://m3.material.io/) (Material You) UI system. Covers 30+ components, design tokens, theming, responsive layout, motion, accessibility, and an MD3 compliance audit across **web** (`@material/web`), **Flutter**, and **Jetpack Compose**.

---

## Installation

```bash
# Clone and copy into Claude Code skills directory
git clone https://github.com/hamen/material-3-skill.git
cp -r material-3-skill ~/.claude/skills/material-3

# Or symlink for easy updates
ln -s /path/to/material-3-skill ~/.claude/skills/material-3
```

---

## Commands

| Command | What it does |
|---|---|
| `/material-3 component <description>` | Generate an MD3-compliant component |
| `/material-3 theme <seed-color>` | Generate a complete MD3 theme from a seed color |
| `/material-3 scaffold <description>` | Scaffold a responsive MD3 app shell |
| `/material-3 audit <URL or file path>` | Audit MD3 compliance across 10 categories |

```bash
/material-3 component Create a login form with email and password fields
/material-3 theme Generate a theme from seed color #1A73E8
/material-3 scaffold Create a responsive app shell with navigation rail and drawer
/material-3 audit ./src/App.tsx
/material-3 audit https://myapp.example.com
```

---

## What the Skill Covers

### Reference Files

| File | Contents |
|---|---|
| `SKILL.md` | Philosophy, decision trees, token overview, component table, audit procedure |
| `references/color-system.md` | 29+ color roles, tonal palettes, dynamic color, baseline CSS scheme |
| `references/component-catalog.md` | 30+ components with elements, attributes, code examples |
| `references/theming-and-dynamic-color.md` | Theme generation, brand colors, dark mode, runtime switching |
| `references/typography-and-shape.md` | Type scale (30 styles), shape corner tokens, elevation, motion tokens |
| `references/navigation-patterns.md` | Nav component selection, responsive transitions, complete shell |
| `references/layout-and-responsive.md` | 5 breakpoints, 3 canonical layouts, CSS Grid implementation |

---

## Core Concepts

### Design Tokens

MD3 uses CSS custom properties for all tokens. Always use tokens — never hardcode hex values.

```css
/* Color tokens */
--md-sys-color-primary
--md-sys-color-on-primary
--md-sys-color-primary-container
--md-sys-color-on-primary-container
--md-sys-color-secondary
--md-sys-color-surface
--md-sys-color-on-surface
--md-sys-color-surface-variant
--md-sys-color-error
--md-sys-color-background

/* Typography tokens */
--md-sys-typescale-display-large-font-size        /* 57px */
--md-sys-typescale-headline-medium-font-size      /* 28px */
--md-sys-typescale-body-large-font-size           /* 16px */
--md-sys-typescale-label-small-font-size          /* 11px */

/* Shape tokens */
--md-sys-shape-corner-extra-small   /* 4px */
--md-sys-shape-corner-small         /* 8px */
--md-sys-shape-corner-medium        /* 12px */
--md-sys-shape-corner-large         /* 16px */
--md-sys-shape-corner-extra-large   /* 28px */
--md-sys-shape-corner-full          /* 50% */

/* Elevation tokens */
--md-sys-elevation-level0  /* 0dp */
--md-sys-elevation-level1  /* 1dp */
--md-sys-elevation-level2  /* 3dp */
--md-sys-elevation-level3  /* 6dp */
--md-sys-elevation-level4  /* 8dp */
--md-sys-elevation-level5  /* 12dp */
```

---

## Web Implementation (`@material/web`)

### Install

```bash
npm install @material/web
```

### Import and Use Components

```html
<!-- index.html -->
<script type="module" src="./main.js"></script>

<md-filled-button>Save</md-filled-button>
<md-outlined-text-field label="Email" type="email"></md-outlined-text-field>
<md-navigation-bar>
  <md-navigation-tab label="Home" active>
    <md-icon slot="active-icon">home</md-icon>
    <md-icon slot="inactive-icon">home</md-icon>
  </md-navigation-tab>
</md-navigation-bar>
```

```js
// main.js — tree-shake by importing only what you need
import '@material/web/button/filled-button.js';
import '@material/web/button/outlined-button.js';
import '@material/web/textfield/outlined-text-field.js';
import '@material/web/textfield/filled-text-field.js';
import '@material/web/checkbox/checkbox.js';
import '@material/web/radio/radio.js';
import '@material/web/select/filled-select.js';
import '@material/web/select/select-option.js';
import '@material/web/dialog/dialog.js';
import '@material/web/fab/fab.js';
import '@material/web/icon/icon.js';
import '@material/web/iconbutton/icon-button.js';
import '@material/web/chips/chip-set.js';
import '@material/web/chips/filter-chip.js';
import '@material/web/chips/assist-chip.js';
import '@material/web/list/list.js';
import '@material/web/list/list-item.js';
import '@material/web/menu/menu.js';
import '@material/web/menu/menu-item.js';
import '@material/web/progress/linear-progress.js';
import '@material/web/progress/circular-progress.js';
import '@material/web/slider/slider.js';
import '@material/web/switch/switch.js';
import '@material/web/tabs/tabs.js';
import '@material/web/tabs/primary-tab.js';
import '@material/web/navigationbar/navigation-bar.js';
import '@material/web/navigationbar/navigation-tab.js';
import '@material/web/navigationdrawer/navigation-drawer.js';
import '@material/web/divider/divider.js';
import '@material/web/elevation/elevation.js';
import '@material/web/focus/md-focus-ring.js';
import '@material/web/ripple/ripple.js';
```

### Complete Login Form Component

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  <style>
    :root {
      --md-sys-color-primary: #1A73E8;
      --md-sys-color-on-primary: #ffffff;
      --md-sys-color-primary-container: #D3E3FD;
      --md-sys-color-on-primary-container: #001D35;
      --md-sys-color-surface: #FDFCFF;
      --md-sys-color-on-surface: #1A1C1E;
      font-family: 'Roboto', sans-serif;
    }
    .login-card {
      background: var(--md-sys-color-surface);
      border-radius: var(--md-sys-shape-corner-extra-large, 28px);
      padding: 32px;
      max-width: 400px;
      margin: 64px auto;
      box-shadow: var(--md-sys-elevation-level2, 0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15));
    }
    .login-card h1 {
      font-size: var(--md-sys-typescale-headline-small-font-size, 24px);
      color: var(--md-sys-color-on-surface);
      margin-bottom: 8px;
    }
    .form-fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin: 24px 0;
    }
    md-filled-text-field, md-outlined-text-field {
      width: 100%;
    }
    .actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
  </style>
</head>
<body>
  <div class="login-card">
    <h1>Sign in</h1>
    <p style="color: var(--md-sys-color-on-surface-variant, #44474E);">
      Use your account to continue
    </p>
    <div class="form-fields">
      <md-outlined-text-field
        label="Email"
        type="email"
        autocomplete="email"
        required
      >
        <md-icon slot=