Menu

#635 by GitHub stars

hamen/material-3-skill

Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessi

Claude CodeDesignLegalSecurity

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

skills/material-3/SKILL.md

Week of Nov 2, 2026 · +0 / −0 lines

Before Instructions only → After Instructions only

14385f2bf380 → 14385f2bf380

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Instructions only

First observation → 14385f2bf380

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 14385f2bf3804d8779f8b4db2604211f1e70b4c1

git clone --filter=blob:none --no-checkout https://github.com/hamen/material-3-skill.git .hotskills/hamen-material-3-skill && git -C .hotskills/hamen-material-3-skill checkout --detach 14385f2bf3804d8779f8b4db2604211f1e70b4c1 # Copy each selected skill directory from .hotskills/hamen-material-3-skill into .claude/skills/<skill-name>/
1.6kGitHub stars
24stars in 7 days
1skill in this repository
0commits in 30 days

Heat

5.8
  • Star growth, last 7 daysAhead of 89% of tracked repositories
  • Star growth, last 24 hoursAhead of 83% of tracked repositories
  • Rank movement, last 7 daysAhead of 48% of tracked repositories
  • Commits, last 30 daysAhead of 0% of tracked repositories
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Aug 2, 2026Nov 6, 20261,555

Individual skills in this repository

How it works

material-3

When your agent uses it

Implement Google's Material Design 3 (Material You) UI system. Primary: Jetpack Compose Material3 (MaterialTheme, components, adaptive layout). Also Flutter and limited web (@material/web, maintenance mode). Covers tokens, 30+ components, layout, theming, M3 Expressive (platform matrix), and accessibility. Use when: "material design", "MD3", "material you", "Jetpack Compose", "MaterialTheme", "material component", "md3 button".

What it loads into context

Frontmatter

142 tokens

Always available to the agent

SKILL.md

8,079 tokens

When the skill is activated

Reference documents

30,103 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Philosophy
  2. Current Updates: Google I/O 2026
  3. Decision Tree
  4. Design Token System
  5. Component Quick Reference
  6. Jetpack Compose (primary)
  7. Web (limited): @material/web
  8. Common Patterns
  9. Anti-Patterns
  10. Platform Notes
  11. M3 Expressive (May 2025)
  12. MD3 Compliance Audit
  13. Reference Documents

Files

  • ../../.claude-plugin/marketplace.jsonasset940 bytes
  • .claude-plugin/plugin.jsonasset413 bytes
  • SKILL.mdcore31,358 bytes
  • SKILL.mdcore31,358 bytes
  • SKILL.mdcore31,358 bytes
  • references/color-system.mddoc15,959 bytes
  • references/component-catalog.mddoc28,040 bytes
  • references/layout-and-responsive.mddoc22,264 bytes
  • references/navigation-patterns.mddoc17,010 bytes
  • references/theming-and-dynamic-color.mddoc14,351 bytes
  • references/typography-and-shape.mddoc14,513 bytes
Read SKILL.md

# Material Design 3

This skill guides implementation of Google's Material Design 3 (MD3) — a personal, adaptive, expressive design system. MD3 uses dynamic color, tonal surfaces, rounded shapes, and spring-based motion to create UIs that feel alive and personal.

## Philosophy

MD3 is built on three principles:
- **Personal**: Dynamic color adapts UI to the user's wallpaper or content. Theming is individual, not one-size-fits-all.
- **Adaptive**: Layouts transform across 5 window size classes. Components resize, reposition, and change form factor responsively.
- **Expressive**: Shape morphing, spring physics, and emphasized typography create moments of delight without sacrificing usability.

## Current Updates: Google I/O 2026

Material's [Google I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) reinforces a **Compose-first** Android path and expands expressive/adaptive guidance:
View the complete source on GitHub

Skills included

  • material-3

Repository facts

License
MIT
Created
Apr 9, 2026
Last pushed
Jul 15, 2026
Forks
82
Open issues
1
Project activity
Slowing

Rank over the last 12 weeks

Now #635 · best #480 · down 94 in 30 days

  1. #625 on Oct 29
  2. #628 from Oct 30 to Oct 31
  3. #629 on Nov 1
  4. #631 on Nov 2
  5. #634 on Nov 3
  6. #635 since Nov 4
79 earlier periods
  1. #484 on Aug 2
  2. #491 on Aug 7
  3. #487 on Aug 8
  4. #486 on Aug 9
  5. #506 on Aug 10
  6. #504 on Aug 11
  7. #500 on Aug 12
  8. #505 on Aug 13
  9. #503 on Aug 14
  10. #485 on Aug 15
  11. #496 from Aug 16 to Aug 17
  12. #511 on Aug 18
  13. #504 on Aug 19
  14. #499 on Aug 20
  15. #496 on Aug 21
  16. #480 on Aug 22
  17. #501 from Aug 23 to Aug 24
  18. #508 on Aug 25
  19. #499 on Aug 26
  20. #510 on Aug 27
  21. #511 on Aug 28
  22. #496 on Aug 29
  23. #485 on Aug 30
  24. #509 on Aug 31
  25. #512 on Sep 1
  26. #506 on Sep 2
  27. #513 on Sep 3
  28. #500 on Sep 4
  29. #497 on Sep 5
  30. #508 on Sep 6
  31. #507 on Sep 7
  32. #522 on Sep 8
  33. #511 on Sep 9
  34. #516 on Sep 10
  35. #512 on Sep 11
  36. #508 on Sep 12
  37. #506 on Sep 13
  38. #524 on Sep 14
  39. #528 on Sep 16
  40. #526 on Sep 17
  41. #528 on Sep 18
  42. #515 on Sep 19
  43. #523 on Sep 20
  44. #524 on Sep 21
  45. #533 on Sep 22
  46. #525 on Sep 23
  47. #513 on Sep 24
  48. #510 on Sep 25
  49. #509 on Sep 26
  50. #528 on Sep 27
  51. #530 on Sep 28
  52. #545 on Sep 29
  53. #535 on Sep 30
  54. #528 on Oct 1
  55. #531 on Oct 2
  56. #520 on Oct 3
  57. #516 on Oct 4
  58. #525 on Oct 5
  59. #539 on Oct 6
  60. #541 on Oct 7
  61. #559 on Oct 8
  62. #555 on Oct 9
  63. #544 on Oct 10
  64. #543 on Oct 11
  65. #554 on Oct 12
  66. #556 on Oct 13
  67. #564 on Oct 14
  68. #559 on Oct 15
  69. #561 on Oct 16
  70. #554 on Oct 17
  71. #552 on Oct 18
  72. #569 on Oct 19
  73. #578 on Oct 20
  74. #581 on Oct 21
  75. #567 on Oct 22
  76. #560 on Oct 23
  77. #551 on Oct 24
  78. #611 on Oct 25
  79. #621 on Oct 28

Before you install

Instructions only

Automated signals, not a guarantee

Checked Nov 3, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 2 notes
  • skills/material-3/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
  • skills/material-3/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 25 signals by file

.claude-plugin/marketplace.json

  • Network accessline 1
    {   "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
  • Network accessline 2
    "$schema": "https://anthropic.com/claude-code/marketplace.schema.json",
  • Network accessline 14
    "source": {         "source": "git-subdir",         "url": "https://github.com/hamen/material-3-skill.git",
  • Network accessline 15
    "source": "git-subdir",         "url": "https://github.com/hamen/material-3-skill.git",         "path": "skills/material-3"
  • Network accessline 16
    "url": "https://github.com/hamen/material-3-skill.git",

skills/material-3/.claude-plugin/plugin.json

  • Network accessline 6
    "name": "Ivan Morgillo"   },   "repository": "https://github.com/hamen/material-3-skill",
  • Network accessline 7
    },   "repository": "https://github.com/hamen/material-3-skill",   "license": "MIT",
  • Network accessline 8
    "repository": "https://github.com/hamen/material-3-skill",

skills/material-3/SKILL.md

  • Network accessline 26
    Material's [Google I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) reinforces a **Compose-first** Android path and expands expressive/adaptive guidance:
  • Network accessline 223
    **Important:** Per [Material Design 3 for Web](https://m3.material.io/develop/web), **Material Web Components are in maintenance mode** and **M3 Expressive is not implemented on Web**. Use `@material/web` for token-backed web UIs when appro
  • Network accessline 252
    <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap" rel="stylesheet">
  • Network accessline 253
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap" rel="stylesheet">   <link href="https://fonts.googleapis.com/icon?famil
  • Network accessline 254
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@400;500;700&display=swap" rel="stylesheet">
  • Network accessline 255
    <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
  • Network accessline 560
    **Web:** [Material Web is maintenance-only; M3 Expressive is not on Web](https://m3.material.io/develop/web). Use CSS easing/duration tokens as fallback for motion, not spring parity.

skills/material-3/references/component-catalog.md

  • Network accessline 3
    Complete reference for Material Design 3 components. **Primary mappings:** Jetpack Compose (`androidx.compose.material3`) where most users ship UIs today; **web** uses `@material/web` element names and imports — [Material Web is maintenance
  • Network accessline 7
    Material's [I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) highlights refreshed expressive guidance for **lists**, **menus**, **search**, and **search app bars**, with Jetpack Compose as the primary implementation path. Whe
  • Network accessline 596
    Use **`OutlinedTextField`** / **`TextField`** from **`androidx.compose.material3`**. Prefer **state-based** APIs (`TextFieldState`, `rememberTextFieldState()`) when targeting current Material3 releases — see the [package overview](https://d

skills/material-3/references/layout-and-responsive.md

  • Network accessline 17
    Material's [I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) introduced broader expressive/adaptive layout guidance:

skills/material-3/references/navigation-patterns.md

  • Network accessline 9
    Wire destinations with **Navigation Compose** (`NavHost`, `composable`, `rememberNavController`). For **adaptive** UIs, use **`calculateWindowSizeClass`**, **`androidx.compose.material3.adaptive`**, or **`currentWindowAdaptiveInfo`** / **`N
  • Network accessline 11
    Material's [I/O 2026 update](https://m3.material.io/blog/whats-new-at-io26) adds expressive/adaptive emphasis:
  • Network accessline 41
    **Web (limited):** The HTML/`@material/web` sections below remain useful for token-backed sites; [Material Web is maintenance-only](https://m3.material.io/develop/web).

skills/material-3/references/theming-and-dynamic-color.md

  • Network accessline 15
    **Web:** [Material Web is maintenance-only; M3 Expressive is not implemented on Web](https://m3.material.io/develop/web). Use `@material/web` + CSS knowing the stack is limited.
  • Network accessline 21
    Use `androidx.compose.material3.MaterialTheme`. Prefer **dynamic color** on **Android 12+ (API 31+)** when enabled; otherwise use `lightColorScheme` / `darkColorScheme` or Kotlin generated by [Material Theme Builder](https://material-founda

skills/material-3/references/typography-and-shape.md

  • Network accessline 222
    **Platform notes**: Shape morphing is **not** in `@material/web` ([Material Web is maintenance-only; Expressive not on Web](https://m3.material.io/develop/web)). **Jetpack Compose** is where Google documents expressive shape/motion behavior

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

No combined signals at this commit.

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeNativeManifest .claude-plugin/marketplace.json.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md skills/material-3/SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md skills/material-3/SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md skills/material-3/SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md skills/material-3/SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md skills/material-3/SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

nextlevelbuilder/ui-ux-pro-max-skill

An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.

146.1kGitHub stars

Leonxlnx/taste-skill

tasteskill v2, the anti-slop frontend skill. Art direction for websites, distilled from a study of 247 curated gallery sites (One Page Love, Awwwards Sites of the Day). Deals rese…

111.1kGitHub stars

nexu-io/open-design

The 1st Collaborative AI Design Agent Workspace. Local-first and open source. Create motion, prototypes, websites, apps, dashboards, presentations, images, and videos with your te…

106.3kGitHub stars

pbakaus/impeccable

The design vocabulary for your coding agent. Steer with polish and bolder, review with critique and audit, catch AI slop before it ships.

104.6kGitHub stars

asgeirtj/system_prompts_leaks

Documented system prompts from Anthropic - Claude Fable 5.1, Opus 5.5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigra…

70.9kGitHub stars

Nutlope/hallmark

Design skill for websites and new pages that look designed, not generated. Use when the user asks to build or design something new, or names Hallmark. Never use it on an existing …

49.4kGitHub stars

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

hamen/material-3-skill: #635 on hotskills, 1.6k stars

[![hamen/material-3-skill on hotskills](https://hotskills.dev/badge/hamen-material-3-skill.svg)](https://hotskills.dev/skill/hamen-material-3-skill/)