Use Material 3 Skill as a Claude Code UI Review Gate

A UI Skill is different from a blog post about design rules. If Claude Code loads skills/material-3/SKILL.md, the design guidance can affect generation, review, and audit prompts inside the same coding session.

That makes hamen/material-3-skill useful, but only inside a clear boundary. The source is strongest for Jetpack Compose, useful as a secondary guide for Flutter, and explicitly limited for Web because Material Web is in maintenance mode and M3 Expressive is not implemented there. Treat it as a UI review gate, not as proof that every generated screen is Material 3-correct.

The Skill changes review timing

The repository packages the main instructions at skills/material-3/SKILL.md and reference material under skills/material-3/references/. That means Claude Code can consult component, color, layout, navigation, theme, typography, and shape guidance while it is planning or changing UI code. A static checklist usually catches issues after the implementation exists. This Skill can move part of that review earlier, before the agent chooses a component or invents spacing. The tradeoff is that the Skill can only enforce what its references say, so it should be paired with source checks when Material guidance changes.

Install it only with platform intent

The repository documents claude plugin install github:hamen/material-3-skill as the Claude Code install path. That command is worth using when the project target is Compose-first Android or when the team wants Claude Code to audit Material 3 decisions before merge. It is weaker as a generic UI polish plugin because the source itself marks Web as limited and Flutter as secondary. For Compose, the Skill can point Claude toward MaterialTheme, color schemes, navigation patterns, and component mappings. For Web, the same command should trigger a narrower audit: tokens and review comments are useful, but full M3 Expressive parity is not available from Material Web.

Audit commands need human interpretation

The documented workflow includes commands such as /material-3 theme, /material-3 scaffold, and /material-3 audit ./src/ui. Those are strong enough to make the old article worth saving, because they give a reader a concrete way to use Claude Code instead of vague UI advice. The audit mode is described as scoring apps across 10 categories, but a score is not the merge decision. A reviewer still has to inspect whether the app target is Compose, Flutter, or Web; whether the component catalog applies; and whether accessibility findings match the actual screen. The useful pattern is to run the audit before a UI pull request, then turn each finding into a small code change or an explicit reject reason.

The failure mode is design drift

Material guidance moves, and the repository itself calls out versioned updates such as the 1.1.0 Google I/O 2026 Material guidance. That is a strength because the Skill names its source update, but it also creates a drift risk. Claude Code may faithfully follow a Skill file that is behind the official Material Design 3 site or Android Compose documentation. Before using it for a design-system migration, compare skills/material-3/references/component-catalog.md and layout-and-responsive.md with the current upstream docs. Skip automatic fixes when the target component is new, web-only, or dependent on a product-specific design system that overrides Material defaults.

Where it belongs in a Claude Code workflow

Use the Skill at the point where Claude Code would otherwise make taste-based UI decisions. Ask it to scaffold, theme, or audit a bounded screen, then keep the result small enough to inspect. The best workflow is not 'make this UI Material 3'; it is 'run /material-3 audit ./src/ui, list failures by category, patch one category, and show the diff.' That keeps Claude Code away from broad redesigns and gives the reviewer a concrete trace. If the team already has a design system, use the Skill as a second opinion rather than the source of truth.

Save this topic as a Skill playbook. material-3-skill is useful when it acts as a review gate with platform boundaries, not when it is sold as automatic UI correctness.

Practical takeaway

Install with claude plugin install github:hamen/material-3-skill, run /material-3 audit ./src/ui on a small UI area, and verify the findings against skills/material-3/references/component-catalog.md, the official Material Design 3 docs, and the Android Compose Material 3 docs. For Web work, record the Material Web maintenance-mode limitation before accepting any generated fix.