Material Design 3 UI/UX Skill
The skill leads an agent from user goals to Material Design 3 tokens and components: theming, adaptivity, accessibility, review.
- 165 ★ on the repository
- Last commit
Minimal access
Why this level
- Rules and references; the skill runs nothing itself.
- The installer copies files into global agent folders.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/material-design-3-ui-ux-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- Rules and references; the skill runs nothing itself.
- The installer copies files into global agent folders.
This is third-party code. Review the repository files before installing.
What it does
The `material-design-3-ui` skill makes an agent design an interface along a chain: user goal, structure, hierarchy, adaptive layout, semantic tokens, components, states, motion, accessibility. A short `SKILL.md` routes to thirteen reference files and opens only the one needed: color, shape, navigation, forms, feedback, typography, Expressive. A component is chosen by its behavior. States, contrast, touch target size and focus count as release requirements. The installer places one package into the global folders of Claude Code, OpenAI Codex, Google Antigravity, Kiro, OpenCode, Hermes Agent and OpenClaw. Static checks and behavioral cases are included.
Who it is for. Designers and Android and web developers who need a Material Design 3 interface without random colors and components.
Good fit when
- An agent draws a settings screen or a dashboard in Material You style.
- A finished interface is reviewed for M3 compliance and accessibility.
- A spec is prepared for developers: tokens, states, behavior.
- One layout must be rebuilt for windows from compact to extra large.
Not a fit when
- The interface follows another system such as Apple HIG or your own design system.
- You need exact sizes and library versions without checking the official site: the skill tells the agent to verify at m3.material.io.
- You need a ready component library with code.
Example request
Design an app settings screen in Material Design 3 with an adaptive layout and check accessibility.Limitations
The skill holds rules and references and no component code. For exact sizes and current APIs the agent consults m3.material.io and developer.android.com. The installer runs as a `curl | bash` or PowerShell script from the network, so read it before running. The skill gives rules but produces no mockups or component code itself: results depend on the agent and on how exactly the platform is specified. The M3 Expressive part is marked optional and follows current Google guidance, which may change. Repository tests are static and behavioral, not visual.
How to disable. Delete the `material-design-3-ui` skill folder from the agents global skills directories where the installer placed it.
FAQ
Which agents are supported?
Claude Code, OpenAI Codex, Google Antigravity, Kiro, OpenCode, Hermes Agent and OpenClaw: one package is placed into their global folders.
Does the script install the agents themselves?
No. It copies only the skill files and does not install, configure or launch agents.
What is Expressive?
The optional Material 3 Expressive mode: color, shape, size and motion strengthen hierarchy. The skill asks to apply it selectively.
How does it differ from other M3 skills?
It builds work around the user goal and semantic tokens, is tied to no single platform and holds thirteen references and anti-patterns.
Is Figma access needed?
No. The skill works with text and code and does not read Figma files; for developer handoff it prepares component and token descriptions.
Discussion
No questions or reviews yet.
Related
SkillsFour official Material UI skills: styling, theming, Next.js integration and working alongside Tailwind CSS
A registry of installable design skills: ready SKILL.md and DESIGN.md files with tokens, component rules and accessibility for different styles
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes
A skill with 107 styles, 127 palettes and 107 font pairings that generates a design system and audits interface code
A skill for interfaces without the generic AI look: typography, color, motion, component states and a critique of the result.
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Material Design 3 UI/UX Skill (this card) | no | 165 | |
| Material Design 3 Skill | no | 1,571 | that one focuses on Jetpack Compose; this one is built around the user goal and covers web and mobile windows |
| Material UI agent skills | no | 99,334 | official skills of the MUI library; here the rules of Material Design 3 itself |
README in short
The repository holds a skill for designing and reviewing interfaces with Material Design 3: a script quick install, a with-and-without comparison, feature list, supported agents, tests and a changelog. Version 1.1.1.
README badge
Original SKILL.md
--- description: 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. metadata: updated: 2026-10-01 version: 1.1.1 name: material-design-3-ui --- # 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. - Define important states: default, pressed, focus, hover where applicable, selected, disabled, loading, error, empty, and success where relevant. - Design for the available window rather than a guessed device category. - Preserve accessible contrast, target size, focus, semantics, scaling, and non-color state communication. - Respect system bars, safe areas, cutouts, keyboards/IME, foldable hinges, and edge-to-edge behavior where applicable. - Keep primary actions distinguishable from secondary and destructive actions. - Make custom components inherit the token, state, motion, and accessibility logic of the system. - Explain deliberate departures from M3 when product requirements justify them.