Material Design 3 UI

Design, redesign, review, or implement user interfaces using Google Material Design 3 (M3), Material You, and optional Material 3 Expressive principles. Use for UI/UX screens, app flows, design systems, component selection, theming, responsive/adaptive layouts, accessibility audits, Figma-ready specifications, or developer handoff where Material Design 3 is required.

159 stars 12 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add skydashnet/material-design-3-ui-skill --skill material-design-3-ui

Manual install

git clone --depth 1 https://github.com/skydashnet/material-design-3-ui-skill.git /tmp/material-design-3-ui-skill
mkdir -p ~/.claude/skills
cp -r /tmp/material-design-3-ui-skill/. ~/.claude/skills/material-design-3-ui

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Material Design 3 UI/UX

## Purpose

Create interfaces that **behave like Material Design 3**, not interfaces that merely look rounded or “Google-like.”

Treat M3 as a system:

**user goal → information architecture → hierarchy → adaptive layout → semantic tokens → components → states → interaction → motion → accessibility → visual expression**

M3 Expressive is optional. Use it to strengthen hierarchy, usability, recognition, and emotional clarity; never use it as permission to make every element loud.

## Source of truth

1.  Prefer current official Material 3 guidance at `https://m3.material.io/`.
2.  For Android implementation details, prefer `https://developer.android.com/`.
3.  Treat design guidance separately from implementation-library/API status.
4.  Verify current official guidance before asserting exact dimensions, dependency versions, experimental API names, or recently changed behavior.
5.  Do not silently mix Material 2 rules into Material 3.
6.  Pixel and Google-app screenshots are examples, not the specification.

## Core rules

### MUST

- Start from the user’s task, content, hierarchy, and platform before styling.
- Use semantic design tokens instead of scattered one-off values.
- Choose components by purpose and behavior, not visual resemblance.
- Prefer established M3/platform components when they solve the interaction.

Read the full skill on GitHub

Details

Skill name: material-design-3-ui
Repository: skydashnet/material-design-3-ui-skill
License: MIT
Repo updated: 30 September 2026

FAQ

What does the Material Design 3 UI skill do?

How do I install the Material Design 3 UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add skydashnet/material-design-3-ui-skill --skill material-design-3-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Material Design 3 UI popular?

It lives in skydashnet/material-design-3-ui-skill, which has 159 GitHub stars and 12 forks.

Related skills

Bricks

143

wpgaurav/bricks-skills

Author Bricks Builder (WordPress) layouts, templates, and full designs as paste-ready JSON. Use for any Bricks task — sections, pages, headers/footers, query loops, ACF/dynamic data, faceted filters, conditions, interactions/animations, popups, WooCommerce templates, custom elements, or hooks. Verified against Bricks 2.3.6 source.

Frontend & Design22

Aria Icons

103

LeulAria/Aria-Icons

Use when working with icons in any project. Search 1.4M icons, add them as source files (no giant dependency), migrate existing icon libraries, and run as an MCP server. Commands: `aria-icons search`, `aria-icons add`, `aria-icons get`, `aria-icons migrate`, `aria-icons doctor`.

Frontend & DesignIn 2 lists

HTML Anything

161

clockless-org/html-anything

Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).

Frontend & Design

Brand System Builder

168

amirmushichge/brand-system-skill

Guides Lovart Agent from one visual reference to a coherent brand system, campaign assets, and packaging concepts through a gated creative-direction workflow.

Frontend & Design12

Prototype to Figma

141

alima-max/prototype-to-figma-skill

Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames, generate design specs from a prototype, create a Figma handoff from code, explode a prototype into states, or make a prototype reviewable by cross-functional partners. Also trigger when the user mentions "prototype to Figma", "design review from prototype", "async feedback on prototype

Frontend & Design15

Frontend Design

154

Ilm-Alan/frontend-design

Build a frontend with a deliberate visual direction held through palette, typography, structure, and texture, with on-screen strings that name real information rather than fabricated demo data or filler labels. Use when building or restyling a frontend.

Frontend & Design23

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.