Agent skill · design visual · aradotso
material-3-skill
material-3-skill — an agent skill for coding agents.
Why this skill is useful
Adds multiple executable commands for generating MD3 components, themes, and compliance audits that extend the AI's capabilities in UI design.
What it needs
Requires git installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash Clone and copy into Claude Code skills directory git clone https://github.com/hamen/material-3-skill.git cp -r material-3-skill ~/.claude/skills/material-3 Or symlink for easy updates ln -s /path/to/material-3-skill ~/.claude/skills/material-3 bash /material-3 component Create a login form with email and password fields /material-3 theme Generate a theme from seed color #1A73E8 /material-3 scaffold Create a responsive app shell with navigation rail and drawer /material-3 audit ./src/App.tsx /material-3 audit https://myapp.example.com css / Color tokens / --md-sys-color-primary --md-sys-color-on-primary --md-sys-color-primary-container --md-sys-color-on-primary-container --md-sys-color-secondary --md-sys-color-surface --md-sys-color-on-surface --md-sys-color-surface-variant --md-sys-color-error --md-sys-color-background / Typography tokens / --md-sys-typescale-display-large-font-size / 57px / --md-sys-typescale-headline-medium-font-size / 28px / --md-sys-typescale-body-large-font-size / 16px / --md-sys-typescale-label-small-font-size / 11px / / Shape tokens / --md-sys-shape-corner-extra-small / 4px / --md-sys-shape-corner-small / 8px / --md-sys-shape-corner-medium / 12px / --md-sys-shape-corner-large / 16px / --md-sys-shape-corner-extra-large / 28px / --md-sys-shape-corner-full / 50% / / Elevation tokens / --md-sys-elevation-level0 / 0dp / --md-sys-elevation-level1 / 1dp / --md-sys-elevation-level2 / 3dp / --md-sys-elevation-level3 / 6dp / --md-sys-elevation-level4 / 8dp / --md-sys-elevation-level5 / 12dp / bash npm install @material/web html <!-- index.html --> <script type="module" src="./main.js"></script> <md-filled-button>Save</md-filled-button> <md-outlined-text-field label="Email" type="email"></md-outlined-text-field> <md-navigation-bar> <md-navigation-tab label="Home" active> <md-icon slot="active-icon">home</md-icon> <md-icon slot="inactive-icon">home</md-icon> </md-navigation-tab> </md-navigation-bar> js // main.js — tree-shake by importing only what …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/material-3-skill