mcpField
M
material-3-skill

material-3-skill

github.com/podoDesign & UI29213 installsUpdated 1d ago
Repository

About material-3-skill

material-3-skill provides Material Design 3 guidance for agents building Android interfaces, with a Compose-first focus and secondary Flutter coverage.

Key features

  1. 01Dynamic color and tonal palettes
  2. 0230+ Jetpack Compose components
  3. 03Design tokens for color, type, shape, and elevation
  4. 04Responsive navigation and layout guidance
  5. 05Motion patterns and conformance audits
  6. 06Secondary Flutter guidance

Use cases

  1. 01Build Android interfaces with Jetpack Compose
  2. 02Apply Material 3 color and typography tokens
  3. 03Choose navigation by window size class
  4. 04Check an interface for Material 3 conformance

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/podo/design-agent-skills --skill material-3-skill

After installing, type/material-3-skillin Claude Code to confirm it loaded.

Bundled filesstub.yaml

Details

From the project README

material-3-skill

Catalogue stub — full skill: hamen/material-3-skill

Install the full skill

Clone or copy the skill into your agents directory:

Global:

mkdir -p ~/.agents/skills/material-3-skill
curl -fsSL https://raw.githubusercontent.com/hamen/material-3-skill/master/skills/material-3/SKILL.md \
  -o ~/.agents/skills/material-3-skill/SKILL.md

Project:

mkdir -p .agents/skills/material-3-skill
curl -fsSL https://raw.githubusercontent.com/hamen/material-3-skill/master/skills/material-3/SKILL.md \
  -o .agents/skills/material-3-skill/SKILL.md

What it does

Deep expertise in Google's Material Design 3 system. Covers:

  • Dynamic color — ColorScheme.fromSeed, tonal palette generation, light/dark scheme derivation
  • Component library — 30+ MD3 components in Jetpack Compose with correct token bindings
  • Token system — color roles, typography scale, shape scale, elevation/tonal elevation
  • Layout — Scaffold, NavigationBar vs NavigationRail vs NavigationDrawer by window size class
  • Motion — spring-based animations, shared element transitions, container transforms
  • Compliance audit — 10-category checklist scoring MD3 conformance
  • Flutter — secondary coverage with ThemeData + useMaterial3: true

When NOT to use

  • iOS / SwiftUI — use apple-hig-skills or liquid-glass-skill
  • Cross-platform HIG patterns — use platform-design-skills
  • Android design without Compose (XML Views) — this skill is Compose-first

Comments

Markdown supported