albermonte/material-3-expressive
skills/material-3-expressive/SKILL.md
Android UI/UX design or review with Material 3 Expressive (M3 Expressive / Material You Expressive). Use when selecting expressive component tokens, defining expressive hierarchy, motion, color, shape, typography, or reviewing Android UI against expressive guidance. Not for non-Android platforms, non-UI Android tasks, or implementation-only requests without design decisions.
$ install --global
skillsauthnpx skillsauth add albermonte/android-skills material-3-expressiveInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 2, 2026, 4:42 AM60.3s72 files scanned
SKILL.md
- name:
- material-3-expressive
- description:
- Android UI/UX design or review with Material 3 Expressive (M3 Expressive / Material You Expressive). Use when selecting expressive component tokens, defining expressive hierarchy, motion, color, shape, typography, or reviewing Android UI against expressive guidance. Not for non-Android platforms, non-UI Android tasks, or implementation-only requests without design decisions.
Material 3 Expressive (Android UI/UX)
Overview
Design and review Android UI/UX using Material 3 Expressive. Prioritize component-token requests for dialogs, sheets, modals, toolbars, and buttons, with guidance plus token references by default.
Intake Questions
- Target device class (phone, tablet, foldable, Wear OS)
- Window size class (Compact, Medium, Expanded)
- Brand constraints and dynamic color usage
- Primary action(s) and desired hero moments (1-2 max)
- Motion constraints and reduced-motion expectations
- Accessibility targets (contrast, touch target)
Default Assumptions
- Intensity level: Foundational
- Window size class: Compact
- Dynamic color: enabled
- Standard navigation patterns preserved
Quick Workflow
- Confirm intensity level + hero moments
- Confirm device class + window size class
- Load Tier 1 index and output template
- Load component overview + token spec files
- If theming needed, load Tier 3 foundation tokens
- Output: guidance + token refs (see template)
Default Output Format (Guidance + Token Refs)
Use references/m3-component-token-output-template.md verbatim as the base output shell.
- Context and intent (1-2 lines)
- Intensity level + hero moments (count + location)
- Window size class + device class
- Component + variant
- Token references: file paths + token groups to use (quote minimal key values only if needed)
- Compose mapping reference (optional):
references/compose-mapping.md - Behavior or interaction constraints (from overview)
- Reduced-motion fallback note
- Accessibility and performance checks
- Optional: Compose mapping notes
Expressive Tactics
| Lever | Application | |-------|-------------| | Shape contrast | Bold corners on primary, subtle on secondary | | Rich color | Primary/secondary containers for emphasis | | Type hierarchy | Size + weight variation | | Motion | Shape morph on press/select |
Constraint: Max 1-2 hero moments per flow
Expressive Intensity Levels
- Foundational: Clarity and familiarity first
- Excellent: Stronger color, type, and shape while preserving patterns
- Transformative: Bold layouts and motion with strict usability and accessibility
Common Mistakes
| Mistake | Fix |
|---------|-----|
| Removing text labels for "cleaner" look | Keep labels; usability drops without them |
| Too many hero moments per screen | Limit to 1-2 per flow |
| Breaking navigation patterns | Preserve standard nav behaviors |
| No reduced-motion fallback | Honor system animation scale; provide reduced-motion or instant transitions when animation scale is 0 |
| Hardcoding token values | Use semantic tokens (md.sys.color.*) |
| Ignoring window size classes | Test Compact, Medium, Expanded |
Android-Specific Guidance
- Preserve navigation and component behaviors
- Keep touch targets generous and platform-consistent
- Honor system animation scale; provide reduced-motion alternatives or instant transitions when animation scale is 0
- Apply window size classes for tablets and foldables
Review Checklist
Hierarchy
- [ ] Primary action identifiable within 2 seconds
- [ ] Max 1-2 hero moments per screen
- [ ] Labels preserved on all interactive elements
Accessibility
- [ ] Color contrast: 4.5:1 text, 3:1 non-text
- [ ] Touch targets: 48dp minimum
- [ ] Motion: reduced-motion alternative provided
- [ ] Screen reader: content descriptions present
Expressive Compliance
- [ ] Intensity level consistent across feature
- [ ] Standard patterns preserved
- [ ] Dynamic color tokens used
- [ ] Window size classes tested
Reference Tiers (Load in Order of Need)
Tier 1: Always Load First
| Need | File |
|------|------|
| Component token lookup | references/m3-expressive-specs-tokens-index.md |
| Output format template | references/m3-component-token-output-template.md |
| New/updated components | references/m3-expressive-components.md |
Tier 2: Component-Specific (Load When Requested)
| Component | Overview | Tokens |
|-----------|----------|--------|
| Buttons | m3-buttons.md | m3-buttons-specs-tokens.md |
| Button Groups | m3-button-groups.md | m3-button-groups-specs-tokens.md |
| Dialogs | m3-dialogs.md | m3-dialogs-specs-tokens.md |
| Sheets | m3-sheets.md | m3-bottom-sheets-specs-tokens.md / m3-side-sheets-specs-tokens.md |
| Toolbars | m3-toolbars.md | m3-toolbars-specs-tokens.md |
| FABs | m3-fabs.md | m3-fabs-specs-tokens.md |
| Extended FAB | m3-extended-fab.md | m3-extended-fab-specs-tokens.md |
| FAB Menu | m3-fab-menu.md | m3-fab-menu-specs-tokens.md |
| Icon Buttons | m3-icon-buttons.md | m3-icon-buttons-specs-tokens.md |
| Split Button | m3-split-button.md | m3-split-button-specs-tokens.md |
| Navigation Bar | m3-navigation-bar.md | m3-navigation-bar-specs-tokens.md |
| Navigation Rail | m3-navigation-rail.md | m3-navigation-rail-specs-tokens.md |
| App Bars | m3-app-bars.md | m3-app-bars-specs-tokens.md |
| Carousel | m3-carousel.md | m3-carousel-specs-tokens.md |
| Progress Indicators | m3-progress-indicators.md | m3-progress-indicators-specs-tokens.md |
| Loading Indicator | m3-loading-indicator.md | m3-loading-indicator-specs-tokens.md |
Tier 3: Foundation Tokens (Load for Theming)
| Foundation | File |
|------------|------|
| Color system | m3-color-system.md, m3-color-foundation-tokens.md |
| Typography | m3-typography.md, m3-typography-foundation-tokens.md, m3-typography-fonts.md, m3-typography-type-scale-tokens.md |
| Shape | m3-shape.md, m3-shape-foundation-tokens.md, m3-shape-corner-radius-scale.md, m3-shape-morph.md |
| Motion | m3-motion-physics.md, m3-motion-foundation-tokens.md, m3-motion-specs.md |
| Elevation | m3-elevation.md, m3-elevation-specs-tokens.md |
| State | m3-state-foundation-tokens.md |
Tier 4: Evidence & Research (Load for Justification)
| Resource | File |
|----------|------|
| Research findings | references/expressive-research.md |
| Testing guidance | references/m3-testing-material-3.md |
| Expressive blog | references/m3-expressive-blog.md |
| Expressive guidelines | references/m3-expressive-guidelines.md |
| UX article | references/medium-ux-article.md |
Tier 5: Wear OS (Load Only for Wearables)
| Resource | File |
|----------|------|
| Benefits | references/wear-expressive-benefits.md |
| Levels of expression | references/wear-levels-of-expression.md |
| Design language | references/wear-expressive-design-language.md |
| Blog | references/wear-expressive-blog.md |
| Compose Material3 | references/wear-compose-material3.md |
Supporting Resources
| Resource | File |
|----------|------|
| Android UI design hub | references/android-ui-design-hub.md |
| Expressive catalog | references/expressive-catalog.md |
| Compose mapping | references/compose-mapping.md |
Maintenance
- Refresh references with
skills/material-3-expressive/scripts/update_m3_expressive_refs.py. - Requires Playwright and Chromium (
.venv/bin/python -m playwright install chromiumif needed). - CI runs weekly; local runs are for urgent changes.
Search Tips
- Find a token prefix:
rg "md.comp.button" skills/material-3-expressive/references/m3-buttons-specs-tokens.md - Find navigation tokens:
rg "md.comp.navigation" skills/material-3-expressive/references/m3-.*navigation.*.md
Examples
- Use
assets/examples/ui/ExpressiveHomeScreen.ktas a Compose starting point - Use
assets/examples/ui/ExpressiveButtonComparison.ktto see standard vs expressive button differences - Use
assets/examples/ui/ExpressiveAntiPatterns.ktto learn common mistakes to avoid - Use
assets/examples/ux/expressive-ux-brief-template.mdto draft an expressive UX brief - Examples are illustrative; adapt sizes/colors to expressive tokens and project constraints.
Related Skills
steipete/skill-creator
testing
VerifiedTrustedCommunity
Create, edit, improve, or audit AgentSkills. Use when creating a new skill from scratch or when asked to improve, review, audit, tidy up, or clean up an existing skill or SKILL.md file. Also use when editing or restructuring a skill directory (moving files to references/ or scripts/, removing stale content, validating against the AgentSkills spec). Triggers on phrases like "create a skill", "author a skill", "tidy up a skill", "improve this skill", "review the skill", "clean up the skill", "audit the skill".
356,423SKILL.mdUpdated Apr 13, 2026
steipete/healthcheck
testing
VerifiedTrustedCommunity
Host security hardening and risk-tolerance configuration for OpenClaw deployments. Use when a user asks for security audits, firewall/SSH/update hardening, risk posture, exposure review, OpenClaw cron scheduling for periodic checks, or version status checks on a machine running OpenClaw (laptop, workstation, Pi, VPS).
356,423SKILL.mdUpdated Apr 13, 2026
openclaw/skill-creator
testing
VerifiedTrustedCommunity
Create, edit, improve, or audit AgentSkills. Use when creating a new skill from scratch or when asked to improve, review, audit, tidy up, or clean up an existing skill or SKILL.md file. Also use when editing or restructuring a skill directory (moving files to references/ or scripts/, removing stale content, validating against the AgentSkills spec). Triggers on phrases like "create a skill", "author a skill", "tidy up a skill", "improve this skill", "review the skill", "clean up the skill", "audit the skill".
353,662SKILL.mdUpdated Apr 10, 2026
openclaw/healthcheck
testing
VerifiedTrustedCommunity
Host security hardening and risk-tolerance configuration for OpenClaw deployments. Use when a user asks for security audits, firewall/SSH/update hardening, risk posture, exposure review, OpenClaw cron scheduling for periodic checks, or version status checks on a machine running OpenClaw (laptop, workstation, Pi, VPS).
353,662SKILL.mdUpdated Apr 10, 2026