{"id":49182326,"url":"https://github.com/hamen/material-3-skill","last_synced_at":"2026-04-23T02:02:08.655Z","repository":{"id":350275219,"uuid":"1206044340","full_name":"hamen/material-3-skill","owner":"hamen","description":"Material Design 3 skill for Claude Code — 30+ components, design tokens, theming, responsive layout, and MD3 compliance audit","archived":false,"fork":false,"pushed_at":"2026-04-09T15:56:25.000Z","size":1104,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-09T17:34:38.421Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hamen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-09T14:19:09.000Z","updated_at":"2026-04-09T16:32:44.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/hamen/material-3-skill","commit_stats":null,"previous_names":["hamen/material-3-skill"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/hamen/material-3-skill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamen%2Fmaterial-3-skill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamen%2Fmaterial-3-skill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamen%2Fmaterial-3-skill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamen%2Fmaterial-3-skill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hamen","download_url":"https://codeload.github.com/hamen/material-3-skill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hamen%2Fmaterial-3-skill/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32162611,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-22T17:06:48.269Z","status":"online","status_checked_at":"2026-04-23T02:00:06.710Z","response_time":53,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-23T02:02:07.003Z","updated_at":"2026-04-23T02:02:08.645Z","avatar_url":"https://github.com/hamen.png","language":null,"funding_links":[],"categories":["🧩 Skills","UI and Design Skills","🧠 Agent Skills"],"sub_categories":["By Platform"],"readme":"# Material Design 3 Skill for Claude Code\n\nA comprehensive [Claude Code](https://claude.ai/claude-code) skill for implementing Google's [Material Design 3](https://m3.material.io/) (Material You) UI system.\n\n[![Material Design 3](assets/m3-hero.png)](https://m3.material.io/)\n\n## Table of contents\n\n- [What it does](#what-it-does)\n- [Platform support](#platform-support)\n- [How this skill was built](#how-this-skill-was-built)\n  - [Sources](#sources)\n  - [Process](#process)\n  - [What this means for accuracy](#what-this-means-for-accuracy)\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Build MD3 components](#build-md3-components)\n  - [Generate a theme](#generate-a-theme)\n  - [Scaffold an app](#scaffold-an-app)\n  - [Audit MD3 compliance](#audit-md3-compliance)\n- [What's included](#whats-included)\n- [Contributing](#contributing)\n- [License](#license)\n\n## What it does\n\n- Guides Claude in generating **MD3-compliant UI** with correct design tokens, components, theming, layout, and accessibility\n- **Primary focus: Jetpack Compose** — `MaterialTheme`, Material 3 composables, adaptive layouts, edge-to-edge/insets, and current Compose Material3 patterns\n- Also covers **Flutter** (`useMaterial3`, `ColorScheme.fromSeed`, etc.) at a secondary level\n- **Web (`@material/web`)** is documented as a **limited** path: [Material Web is in maintenance mode](https://m3.material.io/develop/web) and **M3 Expressive is not implemented on Web**; use tokens and components knowing the ecosystem is not receiving active feature work\n- Covers **30+ components** with Compose-oriented mappings plus web element names where applicable, attributes, and examples in `references/component-catalog.md`\n- Includes an **MD3 compliance audit** mode that scores apps across 10 categories (works for Compose/Kotlin, Flutter/Dart, and web/CSS)\n- Covers **M3 Expressive** (May 2025) with an explicit **per-platform** matrix — see [SKILL.md](SKILL.md) and [references/typography-and-shape.md](references/typography-and-shape.md)\n\n## Platform support\n\n| Platform | Role in this skill | Notes |\n|----------|---------------------|--------|\n| **Jetpack Compose** | **Primary** | Best match for current Material 3 implementation APIs, Expressive motion where available, adaptive navigation |\n| **Flutter** | Secondary | `ThemeData(useMaterial3: true)`, `ColorScheme.fromSeed`, community packages for dynamic color |\n| **Web** | Limited | `@material/web` + CSS custom properties; maintenance mode; no full Expressive parity |\n\n## How this skill was built\n\nThis skill was created collaboratively between a human and [Claude Code](https://claude.ai/claude-code) (Anthropic's coding agent). The information in the skill files is **distilled from publicly available sources** — it is not original design system documentation, but a curated reference assembled from official docs, library references, and training data.\n\n### Sources\n\nDesign token values, component specs, layout breakpoints, color roles, typography scales, and implementation patterns were gathered from:\n\n- **[m3.material.io](https://m3.material.io/)** — Google's official Material Design 3 documentation\n- **[Android Developers — Material Design 3 in Compose](https://developer.android.com/develop/ui/compose/designsystems/material3)** and **AndroidX Compose Material3** API references\n- **Claude's training data** — publicly available Material Design documentation, Flutter and Jetpack Compose documentation, `@material/web` references, and community guides\n- **[@material/web](https://github.com/material-components/material-web)** — used to verify web component element names, attributes, and import paths where web guidance is included\n\n### Process\n\n1. **Planning phase** — Main `SKILL.md` plus focused reference files under `references/`.\n\n2. **Live site research** — m3.material.io is often a JavaScript-rendered SPA; browser automation helps verify current token values, component lists, and Expressive updates.\n\n3. **Cross-referencing** — Official Compose and Flutter docs fill in copy-paste APIs; web sections stay secondary.\n\n4. **Distillation** — Token tables, component templates, and layout examples normalized for consistency.\n\n5. **Audit system** — 10-category MD3 compliance audit adaptable to Compose, Flutter, or web source trees.\n\n### What this means for accuracy\n\nThe skill is a **best-effort distillation** and may drift as Google updates the spec.\n\n- **Compose** guidance is prioritized for currency; prefer official Android docs for exact API signatures and BOM versions.\n- **Web**: Material Web is [in maintenance mode](https://m3.material.io/develop/web); M3 Expressive is **not** on Web. Examples may lag; verify against the [material-web](https://github.com/material-components/material-web) repo.\n- **M3 Expressive** (motion, emphasized type, shape morphing, new radii) varies by platform — see the Expressive sections in [SKILL.md](SKILL.md).\n- Contributions and corrections are welcome.\n\n## Installation\n\nCopy the skill into your Claude Code skills directory:\n\n```bash\n# Clone the repo\ngit clone https://github.com/hamen/material-3-skill.git\n\n# Copy to Claude Code skills directory\ncp -r material-3-skill ~/.claude/skills/material-3\n```\n\nOr symlink for easy updates:\n\n```bash\nln -s /path/to/material-3-skill ~/.claude/skills/material-3\n```\n\n## Usage\n\n### Build MD3 components\n\n```\n/material-3 component Create a login form with email and password fields\n```\n\n### Generate a theme\n\n```\n/material-3 theme Generate a theme from seed color #1A73E8\n```\n\n### Scaffold an app\n\n```\n/material-3 scaffold Create a responsive app shell with navigation\n```\n\n### Audit MD3 compliance\n\n```\n/material-3 audit [URL or file path]\n```\n\nThe audit scores your app across 10 categories (color tokens, typography, shape, elevation, components, layout, navigation, motion, accessibility, theming) and produces a detailed report with specific fixes. Targets may be **Compose/Kotlin**, **Flutter**, or **web** — see [SKILL.md](SKILL.md) for per-stack checks.\n\n## What's included\n\n| File | Description |\n|------|-------------|\n| `SKILL.md` | Main skill: philosophy, decision trees, token overview, component table, Compose-first notes, limited web patterns, audit procedure |\n| `references/color-system.md` | Color roles, tonal palettes, dynamic color, baseline schemes (Compose + CSS) |\n| `references/component-catalog.md` | Components with Compose mappings and `@material/web` where applicable |\n| `references/theming-and-dynamic-color.md` | Theme generation, brand colors, dark mode — Compose first, then Flutter and web |\n| `references/typography-and-shape.md` | Type scale, shape, elevation, motion — including Expressive platform notes |\n| `references/navigation-patterns.md` | Nav selection, Compose-first patterns, responsive shell |\n| `references/layout-and-responsive.md` | Breakpoints, canonical layouts, edge-to-edge/insets, foldables |\n| `CONTRIBUTING.md` | How to contribute without drifting the Compose-first story |\n\n## Contributing\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for platform hierarchy (Compose-first), Expressive rules, and a PR checklist so documentation stays consistent.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamen%2Fmaterial-3-skill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhamen%2Fmaterial-3-skill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhamen%2Fmaterial-3-skill/lists"}