1. Habit
  2. Skills
  3. Material 3 skill
hamen · 3K installs

Material 3 skill
Runs by itself, UI code changes.

Your UI stays Material 3 compliant.

Install the Material 3 skill and make it a habit: follow https://gethabit.dev/skills/hamen/material-3.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

3K installs2K starsMIT licenceSource on GitHub ↗

Material 3

by hamen · 3K installs

The skill

The material 3 skill implements Google's Material Design 3: Jetpack Compose Material3 first, plus Flutter and limited web, covering tokens, components, adaptive layout, theming, M3 Expressive and a compliance audit.

Only when you ask.

The habit

Your UI stays Material 3 compliant.

↻ Runs by itselfUI code changes

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

UI code changes. Runs in GitHub Actions or Claude Code routine.

  • ↻ UI code changes
  • pull request touching UI files

02

It checks its work

audit score and greps. If a check fails, it tells you.

  • ✓no hardcoded hex colors in CSS or SCSS
  • ✓no @material/mdc- MD2 imports next to @material/web
  • ✓no raw Color(0x...) for Compose surfaces without reason

03

It remembers

audit score log. The next run reads it first: last audit's category scores and open critical issues.

loops/md3-compliance-audit-loop/run-log.md

One run, step by step.
Then it stops.

Stop ruleStops after one audit report per change set; no retries.

  1. 01

    Pick target

    Your agent takes the changed files or a running page as the audit target.

  2. 02

    Run quick checks

    It greps for hardcoded colors, raw Compose colors and MD2 imports.

  3. 03

    Score categories

    It scores the ten categories from 0 to 10 using the scoring guide.

  4. 04

    Write report

    It writes the MD3 Compliance Audit Report with critical issues, warnings and passing items.

  5. 05

    Prioritize fixes

    It lists recommended fixes, most impactful first, with file and line references.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Material 3 skill helps.

Use it when

  • ✓ building a Material 3 UI in Compose
  • ✓ theming with dynamic color and tokens
  • ✓ auditing an app for MD3 compliance

Skip it when

  • – you use a different design system
  • – you need M3 Expressive on the web

Questions

Material 3 skill, answered.

Which platform comes first?

Jetpack Compose Material3. Flutter is supported and web is limited, since @material/web is in maintenance mode.

What counts as passing?

A category passes at 7 or more, warns at 4 to 6 and fails at 3 or below.

How do I install the Material 3 skill?

Copy the prompt at the top into your agent. It installs the skill from hamen/material-3-skill and sets up the habit. Or run npx skills add hamen/material-3-skill --skill material-3.

Is the Material 3 skill free?

Yes. It is published under MIT. Habit is free too.

Material 3. Now as a habit.

Install the Material 3 skill and make it a habit: follow https://gethabit.dev/skills/hamen/material-3.md

  • Free
  • No account
  • Undo in one line

All hamen skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by hamen, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.