[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-790":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":15,"starSnapshotCount":15,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},790,"material-3-skill","hamen\u002Fmaterial-3-skill","hamen","Material Design 3 skill for Claude Code — 30+ components, design tokens, theming, responsive layout, and MD3 compliance audit",null,"Shell",988,50,6,1,0,13,22,123,39,9.12,"MIT License",false,"master",true,[],"2026-06-12 02:00:18","# Material Design 3 Skill for Claude Code\n\nA comprehensive [Claude Code](https:\u002F\u002Fclaude.ai\u002Fclaude-code) skill for implementing Google's [Material Design 3](https:\u002F\u002Fm3.material.io\u002F) (Material You) UI system.\n\n[![Material Design 3](assets\u002Fm3-hero.png)](https:\u002F\u002Fm3.material.io\u002F)\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\u002Finsets, and current Compose Material3 patterns\n- Also covers **Flutter** (`useMaterial3`, `ColorScheme.fromSeed`, etc.) at a secondary level\n- **Web (`@material\u002Fweb`)** is documented as a **limited** path: [Material Web is in maintenance mode](https:\u002F\u002Fm3.material.io\u002Fdevelop\u002Fweb) 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\u002Fcomponent-catalog.md`\n- Includes an **MD3 compliance audit** mode that scores apps across 10 categories (works for Compose\u002FKotlin, Flutter\u002FDart, and web\u002FCSS)\n- Covers **M3 Expressive** (May 2025) with an explicit **per-platform** matrix — see [SKILL.md](SKILL.md) and [references\u002Ftypography-and-shape.md](references\u002Ftypography-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\u002Fweb` + 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:\u002F\u002Fclaude.ai\u002Fclaude-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:\u002F\u002Fm3.material.io\u002F)** — Google's official Material Design 3 documentation\n- **[Android Developers — Material Design 3 in Compose](https:\u002F\u002Fdeveloper.android.com\u002Fdevelop\u002Fui\u002Fcompose\u002Fdesignsystems\u002Fmaterial3)** and **AndroidX Compose Material3** API references\n- **Claude's training data** — publicly available Material Design documentation, Flutter and Jetpack Compose documentation, `@material\u002Fweb` references, and community guides\n- **[@material\u002Fweb](https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-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\u002F`.\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:\u002F\u002Fm3.material.io\u002Fdevelop\u002Fweb); M3 Expressive is **not** on Web. Examples may lag; verify against the [material-web](https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-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:\u002F\u002Fgithub.com\u002Fhamen\u002Fmaterial-3-skill.git\n\n# Copy to Claude Code skills directory\ncp -r material-3-skill ~\u002F.claude\u002Fskills\u002Fmaterial-3\n```\n\nOr symlink for easy updates:\n\n```bash\nln -s \u002Fpath\u002Fto\u002Fmaterial-3-skill ~\u002F.claude\u002Fskills\u002Fmaterial-3\n```\n\n## Usage\n\n### Build MD3 components\n\n```\n\u002Fmaterial-3 component Create a login form with email and password fields\n```\n\n### Generate a theme\n\n```\n\u002Fmaterial-3 theme Generate a theme from seed color #1A73E8\n```\n\n### Scaffold an app\n\n```\n\u002Fmaterial-3 scaffold Create a responsive app shell with navigation\n```\n\n### Audit MD3 compliance\n\n```\n\u002Fmaterial-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\u002FKotlin**, **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\u002Fcolor-system.md` | Color roles, tonal palettes, dynamic color, baseline schemes (Compose + CSS) |\n| `references\u002Fcomponent-catalog.md` | Components with Compose mappings and `@material\u002Fweb` where applicable |\n| `references\u002Ftheming-and-dynamic-color.md` | Theme generation, brand colors, dark mode — Compose first, then Flutter and web |\n| `references\u002Ftypography-and-shape.md` | Type scale, shape, elevation, motion — including Expressive platform notes |\n| `references\u002Fnavigation-patterns.md` | Nav selection, Compose-first patterns, responsive shell |\n| `references\u002Flayout-and-responsive.md` | Breakpoints, canonical layouts, edge-to-edge\u002Finsets, 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","该项目为Claude Code提供了一套全面的Material Design 3（Material You）UI系统实现方案。它支持超过30个组件，设计令牌，主题定制，响应式布局以及MD3合规性审计等功能。主要聚焦于Jetpack Compose框架下`MaterialTheme`和Material 3组件的应用，同时也涵盖了Flutter平台的支持，并对Web平台给予了有限度的关注。特别适合需要构建符合Google最新设计规范移动应用或网站的开发者使用。通过此项目，可以快速搭建出美观且功能强大的用户界面，并确保其遵循最新的Material Design标准。",2,"2026-06-11 02:39:20","CREATED_QUERY"]