[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7C4BT2MAWTY7D2FDMQ2PY5P":3,"skill-same:01M7C4BT2MAWTY7D2FDMQ2PY5P":55},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":25,"forksCount":13,"repositoryHtmlUrl":26,"repositoryHomepageUrl":6,"ownerHtmlUrl":27,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":28,"install":29,"resources":42},"01M7C4BT2MAWTY7D2FDMQ2PY5P","material-design-3-components",null,"Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.","pohlai88\u002Fafenda-xforge-v5","pohlai88","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F216658843?v=4","01M7C3ZWD8Y9WVZSNWJ6200V3P","01M7C3ZWDW077V142FSQEFJJ0B",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-design-3-components\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: material-design-3-components\ndescription: Comprehensive guide to Material Design 3 components — from baseline Material You through M3 Expressive. Covers action, containment, communication, navigation, selection, and text input components with specifications, states, and implementation guidelines. Use this when building or styling UI components following Material Design 3 guidelines.\nlicense: Apache-2.0\n---\n\n# Material Design 3 Components\n\n## Overview\n\nThis skill provides a comprehensive reference for all Material Design 3 (M3) components — covering the full specification from Material You foundations through M3 Expressive enhancements. Each component follows M3's token-based design system for color, shape, typography, motion, and layout.\n\n**Keywords**: Material Design 3, M3, components, buttons, cards, dialogs, navigation, FAB, chips, text fields, tabs, menus, snackbar, bottom sheet, Material You, M3 Expressive\n\n## Component Categories\n\nM3 components are organized into six categories:\n\n1. **Action** — Buttons, FABs, icon buttons, segmented buttons, split buttons, button groups\n2. **Containment** — Cards, carousels, dividers, lists, bottom sheets, side sheets\n3. **Communication** — Badges, dialogs, progress indicators, snackbars, tooltips\n4. **Navigation** — App bars, navigation bar, navigation drawer, navigation rail, tabs, search\n5. **Selection** — Checkboxes, chips, date\u002Ftime pickers, menus, radio buttons, sliders, switches\n6. **Text Input** — Text fields (filled, outlined)\n\n---\n\n## Action Components\n\n### Buttons\n\nM3 defines five button types with increasing emphasis:\n\n| Type | Emphasis | Use |\n|------|----------|-----|\n| Text Button | Lowest | Optional actions, less important actions |\n| Outlined Button | Low | Important but not primary actions |\n| Tonal Button | Medium | Actions that need more emphasis than outlined |\n| Filled Button | High | Primary actions, main CTA |\n| Elevated Button | Medium | Actions on visually busy backgrounds |\n\n**Common Button Specs**:\n- Height: 40dp\n- Min width: 48dp\n- Padding: 24dp horizontal, 10dp vertical\n- Shape: Full radius (pill)\n- Typography: Label Large\n- Icon gap: 8dp\n\n```css\n\u002F* Filled Button *\u002F\n.md3-button-filled {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  font-family: var(--md-sys-typescale-label-large-font);\n  font-size: var(--md-sys-typescale-label-large-size);\n  font-weight: var(--md-sys-typescale-label-large-weight);\n  letter-spacing: var(--md-sys-typescale-label-large-tracking);\n  border: none;\n  cursor: pointer;\n}\n\n\u002F* Outlined Button *\u002F\n.md3-button-outlined {\n  background-color: transparent;\n  color: var(--md-sys-color-primary);\n  border: 1px solid var(--md-sys-color-outline);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n}\n\n\u002F* Tonal Button *\u002F\n.md3-button-tonal {\n  background-color: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  border: none;\n}\n\n\u002F* Text Button *\u002F\n.md3-button-text {\n  background-color: transparent;\n  color: var(--md-sys-color-primary);\n  border: none;\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 12px;\n  min-height: 40px;\n}\n\n\u002F* Elevated Button *\u002F\n.md3-button-elevated {\n  background-color: var(--md-sys-color-surface-container-low);\n  color: var(--md-sys-color-primary);\n  border: none;\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  box-shadow: var(--md-sys-elevation-1);\n}\n```\n\n### Icon Buttons\n\nFour variants: standard, filled, tonal, outlined.\n\n- Size: 48dp touch target, 40dp visual\n- Icon size: 24dp\n\n```css\n.md3-icon-button {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-sys-shape-corner-full);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  color: var(--md-sys-color-on-surface-variant);\n  cursor: pointer;\n}\n\n.md3-icon-button-filled {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n}\n```\n\n### Floating Action Buttons (FABs)\n\nPrimary action buttons that float above content:\n\n| Size | Dimensions | Corner Radius | Icon Size |\n|------|------------|---------------|-----------|\n| Medium (replaces Small) | 40×40dp | 12dp | 24dp |\n| Standard | 56×56dp | 20dp | 24dp |\n| Large | 96×96dp | 32dp | 36dp |\n| Extended | 56dp height, variable width | 20dp | 24dp + text |\n\n```css\n\u002F* Standard FAB *\u002F\n.md3-fab {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--md-sys-shape-corner-large);\n  background-color: var(--md-sys-color-primary-container);\n  color: var(--md-sys-color-on-primary-container);\n  border: none;\n  box-shadow: var(--md-sys-elevation-3);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n\u002F* Large FAB *\u002F\n.md3-fab-large {\n  width: 96px;\n  height: 96px;\n  border-radius: var(--md-sys-shape-corner-extra-large);\n}\n\n\u002F* Extended FAB *\u002F\n.md3-fab-extended {\n  height: 56px;\n  width: auto;\n  border-radius: var(--md-sys-shape-corner-large);\n  padding: 0 20px;\n  gap: 12px;\n}\n```\n\n### FAB Menu (M3 Expressive)\n\nTap a FAB to reveal additional contextual actions:\n\n```css\n.md3-fab-menu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--md-sys-spacing-2);\n  align-items: flex-end;\n}\n\n.md3-fab-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-3);\n  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);\n  border-radius: var(--md-sys-shape-corner-large);\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n```\n\n### Split Buttons (M3 Expressive)\n\nCombine a primary action with a secondary dropdown:\n\n```css\n.md3-split-button {\n  display: inline-flex;\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n}\n\n.md3-split-button-primary {\n  background: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  padding: 10px 16px;\n  border: none;\n}\n\n.md3-split-button-secondary {\n  background: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  padding: 10px 12px;\n  border: none;\n  border-left: 1px solid var(--md-sys-color-on-primary);\n  opacity: 0.3;\n}\n```\n\n### Button Groups (M3 Expressive)\n\nOrganize related buttons into connected or standard groups:\n\n**Standard Button Group**: Buttons arranged in a container for single or multiple selection.\n\n**Connected Button Group**: Visually merged buttons replacing deprecated segmented buttons.\n\n```css\n.md3-button-group {\n  display: inline-flex;\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n  border: 1px solid var(--md-sys-color-outline);\n}\n\n.md3-button-group-item {\n  padding: 10px 24px;\n  background: transparent;\n  color: var(--md-sys-color-on-surface);\n  border: none;\n  border-right: 1px solid var(--md-sys-color-outline);\n}\n\n.md3-button-group-item:last-child {\n  border-right: none;\n}\n\n.md3-button-group-item[aria-pressed=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n}\n```\n\n### Segmented Buttons (Legacy — replaced by Button Groups in M3 Expressive)\n\nUse button groups instead. Segmented buttons are deprecated in M3 Expressive.\n\n---\n\n## Containment Components\n\n### Cards\n\nThree card types for grouping content:\n\n| Type | Background | Border | Elevation |\n|------|-----------|--------|-----------|\n| Filled | surface-container-highest | None | Level 0 |\n| Elevated | surface-container-low | None | Level 1 |\n| Outlined | surface | 1px outline-variant | Level 0 |\n\n```css\n\u002F* Elevated Card *\u002F\n.md3-card-elevated {\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-medium);\n  box-shadow: var(--md-sys-elevation-1);\n  padding: var(--md-sys-spacing-4);\n}\n\n\u002F* Filled Card *\u002F\n.md3-card-filled {\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n}\n\n\u002F* Outlined Card *\u002F\n.md3-card-outlined {\n  background: var(--md-sys-color-surface);\n  border: 1px solid var(--md-sys-color-outline-variant);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n}\n```\n\n### Carousel\n\nHorizontally scrollable container for browsing content:\n\n```css\n.md3-carousel {\n  display: flex;\n  gap: var(--md-sys-spacing-2);\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  -webkit-overflow-scrolling: touch;\n  padding: var(--md-sys-spacing-4);\n}\n\n.md3-carousel-item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n  border-radius: var(--md-sys-shape-corner-extra-large);\n  overflow: hidden;\n}\n```\n\n### Bottom Sheets\n\nSupplementary content from the bottom of the screen:\n\n```css\n.md3-bottom-sheet {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-extra-extra-large)\n                 var(--md-sys-shape-corner-extra-extra-large) 0 0;\n  padding: var(--md-sys-spacing-6);\n  box-shadow: var(--md-sys-elevation-4);\n}\n\n.md3-bottom-sheet-handle {\n  width: 32px;\n  height: 4px;\n  background: var(--md-sys-color-on-surface-variant);\n  border-radius: var(--md-sys-shape-corner-full);\n  margin: 0 auto var(--md-sys-spacing-4);\n  opacity: 0.4;\n}\n```\n\n### Side Sheets\n\nSlide out from the side for supplementary content:\n\n```css\n.md3-side-sheet {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 360px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);\n  padding: var(--md-sys-spacing-6);\n  box-shadow: var(--md-sys-elevation-4);\n}\n```\n\n### Dividers\n\nSeparate content within sections:\n\n```css\n.md3-divider {\n  height: 1px;\n  background: var(--md-sys-color-outline-variant);\n  border: none;\n}\n\n\u002F* Inset divider *\u002F\n.md3-divider-inset {\n  margin-left: var(--md-sys-spacing-4);\n}\n```\n\n### Lists\n\nContinuous vertical indexes of text or images:\n\n```css\n.md3-list-item {\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-4);\n  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);\n  min-height: 56px;\n}\n\n.md3-list-item-headline {\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n}\n\n.md3-list-item-supporting {\n  font-family: var(--md-sys-typescale-body-medium-font);\n  font-size: var(--md-sys-typescale-body-medium-size);\n  color: var(--md-sys-color-on-surface-variant);\n}\n```\n\n---\n\n## Communication Components\n\n### Badges\n\nSmall status indicators on icons or avatars:\n\n```css\n\u002F* Small badge (dot) *\u002F\n.md3-badge-small {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-error);\n}\n\n\u002F* Large badge (with count) *\u002F\n.md3-badge-large {\n  min-width: 16px;\n  height: 16px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-error);\n  color: var(--md-sys-color-on-error);\n  font-size: var(--md-sys-typescale-label-small-size);\n  font-weight: var(--md-sys-typescale-label-small-weight);\n  padding: 0 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### Dialogs\n\nPrompt users for decisions or information:\n\n```css\n.md3-dialog {\n  background: var(--md-sys-color-surface-container-high);\n  border-radius: var(--md-sys-shape-corner-extra-large);\n  padding: var(--md-sys-spacing-6);\n  min-width: 280px;\n  max-width: 560px;\n  box-shadow: var(--md-sys-elevation-3);\n}\n\n.md3-dialog-title {\n  font-family: var(--md-sys-typescale-headline-small-font);\n  font-size: var(--md-sys-typescale-headline-small-size);\n  color: var(--md-sys-color-on-surface);\n  margin-bottom: var(--md-sys-spacing-4);\n}\n\n.md3-dialog-content {\n  font-family: var(--md-sys-typescale-body-medium-font);\n  font-size: var(--md-sys-typescale-body-medium-size);\n  color: var(--md-sys-color-on-surface-variant);\n  margin-bottom: var(--md-sys-spacing-6);\n}\n\n.md3-dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--md-sys-spacing-2);\n}\n\n\u002F* Scrim behind dialog *\u002F\n.md3-dialog-scrim {\n  position: fixed;\n  inset: 0;\n  background: var(--md-sys-color-scrim);\n  opacity: 0.32;\n}\n```\n\n### Progress Indicators\n\nShow process status — linear and circular:\n\n```css\n\u002F* Linear Progress *\u002F\n.md3-progress-linear {\n  width: 100%;\n  height: 4px;\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n}\n\n.md3-progress-linear-indicator {\n  height: 100%;\n  background: var(--md-sys-color-primary);\n  border-radius: var(--md-sys-shape-corner-full);\n  transition: width 200ms var(--md-sys-motion-easing-standard);\n}\n\n\u002F* Circular Progress *\u002F\n.md3-progress-circular {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 4px solid var(--md-sys-color-surface-container-highest);\n  border-top-color: var(--md-sys-color-primary);\n  animation: md3-spin 1.4s linear infinite;\n}\n\n@keyframes md3-spin {\n  to { transform: rotate(360deg); }\n}\n```\n\n### Snackbars\n\nBrief messages about app processes:\n\n```css\n.md3-snackbar {\n  background: var(--md-sys-color-inverse-surface);\n  color: var(--md-sys-color-inverse-on-surface);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: var(--md-sys-spacing-4);\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-2);\n  box-shadow: var(--md-sys-elevation-3);\n  max-width: 560px;\n}\n\n.md3-snackbar-action {\n  color: var(--md-sys-color-inverse-primary);\n  font-weight: var(--md-sys-typescale-label-large-weight);\n}\n```\n\n### Tooltips\n\nInformative text on hover or long press:\n\n```css\n\u002F* Plain tooltip *\u002F\n.md3-tooltip {\n  background: var(--md-sys-color-inverse-surface);\n  color: var(--md-sys-color-inverse-on-surface);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: 4px 8px;\n  font-size: var(--md-sys-typescale-body-small-size);\n  max-width: 200px;\n}\n\n\u002F* Rich tooltip *\u002F\n.md3-tooltip-rich {\n  background: var(--md-sys-color-surface-container);\n  color: var(--md-sys-color-on-surface);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n  box-shadow: var(--md-sys-elevation-2);\n  max-width: 320px;\n}\n```\n\n---\n\n## Navigation Components\n\n### Top App Bar\n\nProvides navigation and actions at the top:\n\n| Type | Height | Description |\n|------|--------|-------------|\n| Center-aligned | 64dp | Title centered |\n| Small | 64dp | Title left-aligned |\n| Medium | 112dp | Title below navigation icons |\n| Large | 152dp | Prominent title display |\n\n```css\n.md3-top-app-bar {\n  display: flex;\n  align-items: center;\n  height: 64px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface);\n  color: var(--md-sys-color-on-surface);\n  gap: var(--md-sys-spacing-2);\n}\n\n.md3-top-app-bar-title {\n  font-family: var(--md-sys-typescale-title-large-font);\n  font-size: var(--md-sys-typescale-title-large-size);\n  flex: 1;\n}\n\n\u002F* Scrolled state *\u002F\n.md3-top-app-bar-scrolled {\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n```\n\n### Bottom App Bar (Legacy — replaced by Docked Toolbar in M3 Expressive)\n\nFor apps that have not migrated to toolbars:\n\n```css\n.md3-bottom-app-bar {\n  display: flex;\n  align-items: center;\n  height: 80px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface-container);\n  gap: var(--md-sys-spacing-2);\n}\n```\n\n### Toolbars (M3 Expressive)\n\nReplace bottom app bars with more flexible options:\n\n**Docked Toolbar**: Full-width for global actions.\n**Floating Toolbar**: Floats above content for context-sensitive actions (horizontal or vertical).\n\n```css\n\u002F* Docked Toolbar *\u002F\n.md3-toolbar-docked {\n  display: flex;\n  align-items: center;\n  height: 64px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface-container);\n  gap: var(--md-sys-spacing-2);\n}\n\n\u002F* Floating Toolbar (horizontal) *\u002F\n.md3-toolbar-floating {\n  display: inline-flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--md-sys-spacing-3);\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-large);\n  box-shadow: var(--md-sys-elevation-2);\n  gap: var(--md-sys-spacing-1);\n  backdrop-filter: blur(12px);\n}\n\n\u002F* Floating Toolbar (vertical) *\u002F\n.md3-toolbar-floating-vertical {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  width: 56px;\n  padding: var(--md-sys-spacing-3) 0;\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-large);\n  box-shadow: var(--md-sys-elevation-2);\n  gap: var(--md-sys-spacing-1);\n}\n\n\u002F* Vibrant Toolbar (high emphasis) *\u002F\n.md3-toolbar-vibrant {\n  background: var(--md-sys-color-primary-container);\n  color: var(--md-sys-color-on-primary-container);\n}\n```\n\n### Navigation Bar (Bottom Navigation)\n\nPrimary navigation for mobile, displayed at screen bottom:\n\n```css\n.md3-navigation-bar {\n  display: flex;\n  height: 80px;\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n\n.md3-navigation-bar-item {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: var(--md-sys-color-on-surface-variant);\n  min-width: 48px;\n}\n\n.md3-navigation-bar-item[aria-selected=\"true\"] {\n  color: var(--md-sys-color-on-surface);\n}\n\n\u002F* Active indicator *\u002F\n.md3-navigation-bar-indicator {\n  background: var(--md-sys-color-secondary-container);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 4px 20px;\n}\n```\n\n### Navigation Rail\n\nVertical navigation for medium-sized screens:\n\n```css\n.md3-navigation-rail {\n  display: flex;\n  flex-direction: column;\n  width: 80px;\n  background: var(--md-sys-color-surface);\n  padding: var(--md-sys-spacing-3) 0;\n  align-items: center;\n  gap: var(--md-sys-spacing-3);\n}\n```\n\n### Navigation Drawer\n\nSide panel navigation for large screens:\n\n```css\n.md3-navigation-drawer {\n  width: 360px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;\n  padding: var(--md-sys-spacing-3);\n}\n\n.md3-navigation-drawer-item {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--md-sys-spacing-4);\n  border-radius: var(--md-sys-shape-corner-full);\n  gap: var(--md-sys-spacing-3);\n}\n\n.md3-navigation-drawer-item[aria-selected=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n}\n```\n\n### Tabs\n\nSwitch between grouped content sections:\n\n```css\n.md3-tabs {\n  display: flex;\n  border-bottom: 1px solid var(--md-sys-color-surface-variant);\n}\n\n.md3-tab {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 48px;\n  font-family: var(--md-sys-typescale-title-small-font);\n  font-size: var(--md-sys-typescale-title-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n}\n\n.md3-tab[aria-selected=\"true\"] {\n  color: var(--md-sys-color-primary);\n}\n\n\u002F* Active indicator *\u002F\n.md3-tab[aria-selected=\"true\"]::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--md-sys-color-primary);\n  border-radius: 3px 3px 0 0;\n}\n```\n\n### Search\n\nInput for querying and filtering content:\n\n```css\n.md3-search-bar {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-surface-container-highest);\n  padding: 0 var(--md-sys-spacing-4);\n  gap: var(--md-sys-spacing-4);\n}\n\n.md3-search-bar input {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n}\n\n.md3-search-bar input::placeholder {\n  color: var(--md-sys-color-on-surface-variant);\n}\n```\n\n---\n\n## Selection Components\n\n### Checkboxes\n\nMulti-selection toggles:\n\n- Size: 18dp visual, 48dp touch target\n- Border: 2dp, outline color when unchecked\n- Fill: primary when checked\n- Check mark: on-primary\n\n### Radio Buttons\n\nSingle selection from options:\n\n- Size: 20dp visual, 48dp touch target\n- Border: 2dp, outline when unselected\n- Fill: primary when selected\n- Inner circle: 10dp\n\n### Switches\n\nToggle settings on or off:\n\n- Track: 52×32dp\n- Thumb: 16dp unchecked, 24dp checked\n- Selected: primary track, on-primary thumb icon\n- Unselected: surface-container-highest track, outline thumb\n\n```css\n.md3-switch {\n  width: 52px;\n  height: 32px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-surface-container-highest);\n  border: 2px solid var(--md-sys-color-outline);\n  position: relative;\n  cursor: pointer;\n  transition: background 200ms var(--md-sys-motion-easing-standard);\n}\n\n.md3-switch[aria-checked=\"true\"] {\n  background: var(--md-sys-color-primary);\n  border-color: var(--md-sys-color-primary);\n}\n\n.md3-switch-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--md-sys-color-outline);\n  position: absolute;\n  top: 50%;\n  left: 6px;\n  transform: translateY(-50%);\n  transition: all 200ms var(--md-sys-motion-easing-standard);\n}\n\n.md3-switch[aria-checked=\"true\"] .md3-switch-thumb {\n  width: 24px;\n  height: 24px;\n  background: var(--md-sys-color-on-primary);\n  left: calc(100% - 28px);\n}\n```\n\n### Chips\n\nCompact elements for filtering, input, or actions:\n\n| Type | Use | Selectable |\n|------|-----|------------|\n| Assist | Suggest actions | No |\n| Filter | Filter content | Yes |\n| Input | User-entered data | Removable |\n| Suggestion | Dynamic suggestions | No |\n\n```css\n.md3-chip {\n  height: 32px;\n  border-radius: var(--md-sys-shape-corner-small);\n  padding: 0 16px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--md-sys-typescale-label-large-font);\n  font-size: var(--md-sys-typescale-label-large-size);\n  border: 1px solid var(--md-sys-color-outline);\n  background: transparent;\n  color: var(--md-sys-color-on-surface-variant);\n  cursor: pointer;\n}\n\n.md3-chip[aria-selected=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n  border-color: transparent;\n}\n```\n\n### Sliders\n\nRange or value selection:\n\n- Track height: 4dp\n- Thumb: 20dp\n- Active track: primary\n- Inactive track: surface-container-highest\n\n### Date Pickers and Time Pickers\n\nDialogs or inputs for selecting dates and times. Follow M3 dialog patterns with appropriate shape and color tokens.\n\n### Menus\n\nDropdown or context menus:\n\n```css\n.md3-menu {\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  box-shadow: var(--md-sys-elevation-2);\n  padding: var(--md-sys-spacing-2) 0;\n  min-width: 112px;\n  max-width: 280px;\n}\n\n.md3-menu-item {\n  display: flex;\n  align-items: center;\n  height: 48px;\n  padding: 0 var(--md-sys-spacing-3);\n  gap: var(--md-sys-spacing-3);\n  color: var(--md-sys-color-on-surface);\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  cursor: pointer;\n}\n```\n\n---\n\n## Text Input Components\n\n### Text Fields\n\nTwo variants: Filled and Outlined.\n\n**Filled Text Field**:\n```css\n.md3-text-field-filled {\n  display: flex;\n  flex-direction: column;\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;\n  padding: 8px 16px 8px;\n  position: relative;\n}\n\n.md3-text-field-filled input {\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n  padding: 4px 0;\n}\n\n.md3-text-field-filled::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--md-sys-color-on-surface-variant);\n}\n\n.md3-text-field-filled:focus-within::after {\n  height: 2px;\n  background: var(--md-sys-color-primary);\n}\n```\n\n**Outlined Text Field**:\n```css\n.md3-text-field-outlined {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--md-sys-color-outline);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: 8px 16px;\n}\n\n.md3-text-field-outlined:focus-within {\n  border-color: var(--md-sys-color-primary);\n  border-width: 2px;\n}\n\n.md3-text-field-outlined input {\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n}\n```\n\n**Labels and Supporting Text**:\n```css\n.md3-text-field-label {\n  font-family: var(--md-sys-typescale-body-small-font);\n  font-size: var(--md-sys-typescale-body-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n}\n\n.md3-text-field-supporting {\n  font-family: var(--md-sys-typescale-body-small-font);\n  font-size: var(--md-sys-typescale-body-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n  padding: 4px 16px 0;\n}\n\n.md3-text-field-error .md3-text-field-supporting {\n  color: var(--md-sys-color-error);\n}\n```\n\n---\n\n## Component Interaction States\n\nAll M3 components follow consistent interaction state patterns:\n\n| State | Visual Effect |\n|-------|--------------|\n| Enabled | Default appearance |\n| Hovered | 8% state layer overlay |\n| Focused | 12% state layer overlay + focus indicator |\n| Pressed | 12% state layer overlay |\n| Dragged | 16% state layer overlay |\n| Disabled | 38% content opacity, 12% background opacity |\n\n## Framework-Specific Component Usage\n\nFor framework-specific component examples (setup, theming, and usage), see the dedicated library skills:\n\n- **React \u002F MUI \u002F Next.js**: `m3-web-react`\n- **Angular Material**: `m3-web-angular`\n- **Vue \u002F Vuetify 3**: `m3-web-vue`\n- **Svelte \u002F SMUI**: `m3-web-svelte`\n- **Web Components (`@material\u002Fweb`)**: `m3-web-webcomponents`\n- **Tailwind CSS**: `m3-web-tailwind`\n- **Ink (React CLI)**: `m3-web-ink`\n- **Vanilla CSS**: `m3-web-vanilla`\n- **Flutter**: `m3-web-flutter`\n- **Android \u002F Jetpack Compose**: `m3-web-android`\n\n## Accessibility Guidelines for Components\n\n1. **Touch targets**: Minimum 48×48dp for all interactive components\n2. **Focus indicators**: Visible outline (2px solid primary, 2px offset)\n3. **Color contrast**: 4.5:1 for text, 3:1 for interactive elements\n4. **ARIA attributes**: Use appropriate roles, labels, and states\n5. **Keyboard navigation**: All components must be fully keyboard operable\n6. **Screen reader support**: Use semantic HTML and ARIA announcements\n\n## Checklist for Component Implementation\n\nWhen implementing M3 components, ensure:\n\n- [ ] Component uses appropriate M3 color tokens (not hard-coded colors)\n- [ ] Shape follows the M3 shape scale for that component type\n- [ ] Typography uses the correct type scale role\n- [ ] All interaction states are implemented (hover, focus, pressed, disabled)\n- [ ] Touch targets meet 48×48dp minimum\n- [ ] Focus indicators are visible and have adequate contrast\n- [ ] Component works in both light and dark themes\n- [ ] Disabled states use correct opacity values (38% content, 12% background)\n- [ ] Motion uses spring-based easing for transitions\n- [ ] ARIA attributes are correctly applied\n- [ ] Component is fully keyboard navigable\n- [ ] M3 Expressive additions (FAB menu, split buttons, button groups, toolbars) are used where appropriate\n- [ ] Library-specific best practices are followed (see library-specific skills: `m3-web-react`, `m3-web-angular`, etc.)\n\n## Resources\n\n- `component-tokens.md` — Quick reference for all @material\u002Fweb component CSS custom property prefixes, included in this skill's directory.\n- `examples\u002Fcomponent-anatomy.svg` — Visual reference SVG showing M3 component anatomy: button variants, card variants, FAB sizes, and interactive state layers with token mappings.\n- M3 component specs: https:\u002F\u002Fm3.material.io\u002Fcomponents\n- M3 for Web: https:\u002F\u002Fm3.material.io\u002Fdevelop\u002Fweb\n- @material\u002Fweb: https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\n- Angular Material: https:\u002F\u002Fgithub.com\u002Fangular\u002Fcomponents\n- Material Design Tokens: https:\u002F\u002Fgithub.com\u002Fmaterial-foundation\u002Fmaterial-tokens\n","# Material Design 3 Components\n\n## Overview\n\nThis skill provides a comprehensive reference for all Material Design 3 (M3) components — covering the full specification from Material You foundations through M3 Expressive enhancements. Each component follows M3's token-based design system for color, shape, typography, motion, and layout.\n\n**Keywords**: Material Design 3, M3, components, buttons, cards, dialogs, navigation, FAB, chips, text fields, tabs, menus, snackbar, bottom sheet, Material You, M3 Expressive\n\n## Component Categories\n\nM3 components are organized into six categories:\n\n1. **Action** — Buttons, FABs, icon buttons, segmented buttons, split buttons, button groups\n2. **Containment** — Cards, carousels, dividers, lists, bottom sheets, side sheets\n3. **Communication** — Badges, dialogs, progress indicators, snackbars, tooltips\n4. **Navigation** — App bars, navigation bar, navigation drawer, navigation rail, tabs, search\n5. **Selection** — Checkboxes, chips, date\u002Ftime pickers, menus, radio buttons, sliders, switches\n6. **Text Input** — Text fields (filled, outlined)\n\n---\n\n## Action Components\n\n### Buttons\n\nM3 defines five button types with increasing emphasis:\n\n| Type | Emphasis | Use |\n|------|----------|-----|\n| Text Button | Lowest | Optional actions, less important actions |\n| Outlined Button | Low | Important but not primary actions |\n| Tonal Button | Medium | Actions that need more emphasis than outlined |\n| Filled Button | High | Primary actions, main CTA |\n| Elevated Button | Medium | Actions on visually busy backgrounds |\n\n**Common Button Specs**:\n- Height: 40dp\n- Min width: 48dp\n- Padding: 24dp horizontal, 10dp vertical\n- Shape: Full radius (pill)\n- Typography: Label Large\n- Icon gap: 8dp\n\n```css\n\u002F* Filled Button *\u002F\n.md3-button-filled {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  font-family: var(--md-sys-typescale-label-large-font);\n  font-size: var(--md-sys-typescale-label-large-size);\n  font-weight: var(--md-sys-typescale-label-large-weight);\n  letter-spacing: var(--md-sys-typescale-label-large-tracking);\n  border: none;\n  cursor: pointer;\n}\n\n\u002F* Outlined Button *\u002F\n.md3-button-outlined {\n  background-color: transparent;\n  color: var(--md-sys-color-primary);\n  border: 1px solid var(--md-sys-color-outline);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n}\n\n\u002F* Tonal Button *\u002F\n.md3-button-tonal {\n  background-color: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  border: none;\n}\n\n\u002F* Text Button *\u002F\n.md3-button-text {\n  background-color: transparent;\n  color: var(--md-sys-color-primary);\n  border: none;\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 12px;\n  min-height: 40px;\n}\n\n\u002F* Elevated Button *\u002F\n.md3-button-elevated {\n  background-color: var(--md-sys-color-surface-container-low);\n  color: var(--md-sys-color-primary);\n  border: none;\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 10px 24px;\n  min-height: 40px;\n  box-shadow: var(--md-sys-elevation-1);\n}\n```\n\n### Icon Buttons\n\nFour variants: standard, filled, tonal, outlined.\n\n- Size: 48dp touch target, 40dp visual\n- Icon size: 24dp\n\n```css\n.md3-icon-button {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-sys-shape-corner-full);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  border: none;\n  color: var(--md-sys-color-on-surface-variant);\n  cursor: pointer;\n}\n\n.md3-icon-button-filled {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n}\n```\n\n### Floating Action Buttons (FABs)\n\nPrimary action buttons that float above content:\n\n| Size | Dimensions | Corner Radius | Icon Size |\n|------|------------|---------------|-----------|\n| Medium (replaces Small) | 40×40dp | 12dp | 24dp |\n| Standard | 56×56dp | 20dp | 24dp |\n| Large | 96×96dp | 32dp | 36dp |\n| Extended | 56dp height, variable width | 20dp | 24dp + text |\n\n```css\n\u002F* Standard FAB *\u002F\n.md3-fab {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--md-sys-shape-corner-large);\n  background-color: var(--md-sys-color-primary-container);\n  color: var(--md-sys-color-on-primary-container);\n  border: none;\n  box-shadow: var(--md-sys-elevation-3);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n\n\u002F* Large FAB *\u002F\n.md3-fab-large {\n  width: 96px;\n  height: 96px;\n  border-radius: var(--md-sys-shape-corner-extra-large);\n}\n\n\u002F* Extended FAB *\u002F\n.md3-fab-extended {\n  height: 56px;\n  width: auto;\n  border-radius: var(--md-sys-shape-corner-large);\n  padding: 0 20px;\n  gap: 12px;\n}\n```\n\n### FAB Menu (M3 Expressive)\n\nTap a FAB to reveal additional contextual actions:\n\n```css\n.md3-fab-menu {\n  display: flex;\n  flex-direction: column;\n  gap: var(--md-sys-spacing-2);\n  align-items: flex-end;\n}\n\n.md3-fab-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-3);\n  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);\n  border-radius: var(--md-sys-shape-corner-large);\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n```\n\n### Split Buttons (M3 Expressive)\n\nCombine a primary action with a secondary dropdown:\n\n```css\n.md3-split-button {\n  display: inline-flex;\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n}\n\n.md3-split-button-primary {\n  background: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  padding: 10px 16px;\n  border: none;\n}\n\n.md3-split-button-secondary {\n  background: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  padding: 10px 12px;\n  border: none;\n  border-left: 1px solid var(--md-sys-color-on-primary);\n  opacity: 0.3;\n}\n```\n\n### Button Groups (M3 Expressive)\n\nOrganize related buttons into connected or standard groups:\n\n**Standard Button Group**: Buttons arranged in a container for single or multiple selection.\n\n**Connected Button Group**: Visually merged buttons replacing deprecated segmented buttons.\n\n```css\n.md3-button-group {\n  display: inline-flex;\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n  border: 1px solid var(--md-sys-color-outline);\n}\n\n.md3-button-group-item {\n  padding: 10px 24px;\n  background: transparent;\n  color: var(--md-sys-color-on-surface);\n  border: none;\n  border-right: 1px solid var(--md-sys-color-outline);\n}\n\n.md3-button-group-item:last-child {\n  border-right: none;\n}\n\n.md3-button-group-item[aria-pressed=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n}\n```\n\n### Segmented Buttons (Legacy — replaced by Button Groups in M3 Expressive)\n\nUse button groups instead. Segmented buttons are deprecated in M3 Expressive.\n\n---\n\n## Containment Components\n\n### Cards\n\nThree card types for grouping content:\n\n| Type | Background | Border | Elevation |\n|------|-----------|--------|-----------|\n| Filled | surface-container-highest | None | Level 0 |\n| Elevated | surface-container-low | None | Level 1 |\n| Outlined | surface | 1px outline-variant | Level 0 |\n\n```css\n\u002F* Elevated Card *\u002F\n.md3-card-elevated {\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-medium);\n  box-shadow: var(--md-sys-elevation-1);\n  padding: var(--md-sys-spacing-4);\n}\n\n\u002F* Filled Card *\u002F\n.md3-card-filled {\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n}\n\n\u002F* Outlined Card *\u002F\n.md3-card-outlined {\n  background: var(--md-sys-color-surface);\n  border: 1px solid var(--md-sys-color-outline-variant);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n}\n```\n\n### Carousel\n\nHorizontally scrollable container for browsing content:\n\n```css\n.md3-carousel {\n  display: flex;\n  gap: var(--md-sys-spacing-2);\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  -webkit-overflow-scrolling: touch;\n  padding: var(--md-sys-spacing-4);\n}\n\n.md3-carousel-item {\n  scroll-snap-align: start;\n  flex-shrink: 0;\n  border-radius: var(--md-sys-shape-corner-extra-large);\n  overflow: hidden;\n}\n```\n\n### Bottom Sheets\n\nSupplementary content from the bottom of the screen:\n\n```css\n.md3-bottom-sheet {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-extra-extra-large)\n                 var(--md-sys-shape-corner-extra-extra-large) 0 0;\n  padding: var(--md-sys-spacing-6);\n  box-shadow: var(--md-sys-elevation-4);\n}\n\n.md3-bottom-sheet-handle {\n  width: 32px;\n  height: 4px;\n  background: var(--md-sys-color-on-surface-variant);\n  border-radius: var(--md-sys-shape-corner-full);\n  margin: 0 auto var(--md-sys-spacing-4);\n  opacity: 0.4;\n}\n```\n\n### Side Sheets\n\nSlide out from the side for supplementary content:\n\n```css\n.md3-side-sheet {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 360px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: var(--md-sys-shape-corner-extra-large) 0 0 var(--md-sys-shape-corner-extra-large);\n  padding: var(--md-sys-spacing-6);\n  box-shadow: var(--md-sys-elevation-4);\n}\n```\n\n### Dividers\n\nSeparate content within sections:\n\n```css\n.md3-divider {\n  height: 1px;\n  background: var(--md-sys-color-outline-variant);\n  border: none;\n}\n\n\u002F* Inset divider *\u002F\n.md3-divider-inset {\n  margin-left: var(--md-sys-spacing-4);\n}\n```\n\n### Lists\n\nContinuous vertical indexes of text or images:\n\n```css\n.md3-list-item {\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-4);\n  padding: var(--md-sys-spacing-2) var(--md-sys-spacing-4);\n  min-height: 56px;\n}\n\n.md3-list-item-headline {\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n}\n\n.md3-list-item-supporting {\n  font-family: var(--md-sys-typescale-body-medium-font);\n  font-size: var(--md-sys-typescale-body-medium-size);\n  color: var(--md-sys-color-on-surface-variant);\n}\n```\n\n---\n\n## Communication Components\n\n### Badges\n\nSmall status indicators on icons or avatars:\n\n```css\n\u002F* Small badge (dot) *\u002F\n.md3-badge-small {\n  width: 6px;\n  height: 6px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-error);\n}\n\n\u002F* Large badge (with count) *\u002F\n.md3-badge-large {\n  min-width: 16px;\n  height: 16px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-error);\n  color: var(--md-sys-color-on-error);\n  font-size: var(--md-sys-typescale-label-small-size);\n  font-weight: var(--md-sys-typescale-label-small-weight);\n  padding: 0 4px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n```\n\n### Dialogs\n\nPrompt users for decisions or information:\n\n```css\n.md3-dialog {\n  background: var(--md-sys-color-surface-container-high);\n  border-radius: var(--md-sys-shape-corner-extra-large);\n  padding: var(--md-sys-spacing-6);\n  min-width: 280px;\n  max-width: 560px;\n  box-shadow: var(--md-sys-elevation-3);\n}\n\n.md3-dialog-title {\n  font-family: var(--md-sys-typescale-headline-small-font);\n  font-size: var(--md-sys-typescale-headline-small-size);\n  color: var(--md-sys-color-on-surface);\n  margin-bottom: var(--md-sys-spacing-4);\n}\n\n.md3-dialog-content {\n  font-family: var(--md-sys-typescale-body-medium-font);\n  font-size: var(--md-sys-typescale-body-medium-size);\n  color: var(--md-sys-color-on-surface-variant);\n  margin-bottom: var(--md-sys-spacing-6);\n}\n\n.md3-dialog-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--md-sys-spacing-2);\n}\n\n\u002F* Scrim behind dialog *\u002F\n.md3-dialog-scrim {\n  position: fixed;\n  inset: 0;\n  background: var(--md-sys-color-scrim);\n  opacity: 0.32;\n}\n```\n\n### Progress Indicators\n\nShow process status — linear and circular:\n\n```css\n\u002F* Linear Progress *\u002F\n.md3-progress-linear {\n  width: 100%;\n  height: 4px;\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-full);\n  overflow: hidden;\n}\n\n.md3-progress-linear-indicator {\n  height: 100%;\n  background: var(--md-sys-color-primary);\n  border-radius: var(--md-sys-shape-corner-full);\n  transition: width 200ms var(--md-sys-motion-easing-standard);\n}\n\n\u002F* Circular Progress *\u002F\n.md3-progress-circular {\n  width: 48px;\n  height: 48px;\n  border-radius: 50%;\n  border: 4px solid var(--md-sys-color-surface-container-highest);\n  border-top-color: var(--md-sys-color-primary);\n  animation: md3-spin 1.4s linear infinite;\n}\n\n@keyframes md3-spin {\n  to { transform: rotate(360deg); }\n}\n```\n\n### Snackbars\n\nBrief messages about app processes:\n\n```css\n.md3-snackbar {\n  background: var(--md-sys-color-inverse-surface);\n  color: var(--md-sys-color-inverse-on-surface);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: var(--md-sys-spacing-4);\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  gap: var(--md-sys-spacing-2);\n  box-shadow: var(--md-sys-elevation-3);\n  max-width: 560px;\n}\n\n.md3-snackbar-action {\n  color: var(--md-sys-color-inverse-primary);\n  font-weight: var(--md-sys-typescale-label-large-weight);\n}\n```\n\n### Tooltips\n\nInformative text on hover or long press:\n\n```css\n\u002F* Plain tooltip *\u002F\n.md3-tooltip {\n  background: var(--md-sys-color-inverse-surface);\n  color: var(--md-sys-color-inverse-on-surface);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: 4px 8px;\n  font-size: var(--md-sys-typescale-body-small-size);\n  max-width: 200px;\n}\n\n\u002F* Rich tooltip *\u002F\n.md3-tooltip-rich {\n  background: var(--md-sys-color-surface-container);\n  color: var(--md-sys-color-on-surface);\n  border-radius: var(--md-sys-shape-corner-medium);\n  padding: var(--md-sys-spacing-4);\n  box-shadow: var(--md-sys-elevation-2);\n  max-width: 320px;\n}\n```\n\n---\n\n## Navigation Components\n\n### Top App Bar\n\nProvides navigation and actions at the top:\n\n| Type | Height | Description |\n|------|--------|-------------|\n| Center-aligned | 64dp | Title centered |\n| Small | 64dp | Title left-aligned |\n| Medium | 112dp | Title below navigation icons |\n| Large | 152dp | Prominent title display |\n\n```css\n.md3-top-app-bar {\n  display: flex;\n  align-items: center;\n  height: 64px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface);\n  color: var(--md-sys-color-on-surface);\n  gap: var(--md-sys-spacing-2);\n}\n\n.md3-top-app-bar-title {\n  font-family: var(--md-sys-typescale-title-large-font);\n  font-size: var(--md-sys-typescale-title-large-size);\n  flex: 1;\n}\n\n\u002F* Scrolled state *\u002F\n.md3-top-app-bar-scrolled {\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n```\n\n### Bottom App Bar (Legacy — replaced by Docked Toolbar in M3 Expressive)\n\nFor apps that have not migrated to toolbars:\n\n```css\n.md3-bottom-app-bar {\n  display: flex;\n  align-items: center;\n  height: 80px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface-container);\n  gap: var(--md-sys-spacing-2);\n}\n```\n\n### Toolbars (M3 Expressive)\n\nReplace bottom app bars with more flexible options:\n\n**Docked Toolbar**: Full-width for global actions.\n**Floating Toolbar**: Floats above content for context-sensitive actions (horizontal or vertical).\n\n```css\n\u002F* Docked Toolbar *\u002F\n.md3-toolbar-docked {\n  display: flex;\n  align-items: center;\n  height: 64px;\n  padding: 0 var(--md-sys-spacing-4);\n  background: var(--md-sys-color-surface-container);\n  gap: var(--md-sys-spacing-2);\n}\n\n\u002F* Floating Toolbar (horizontal) *\u002F\n.md3-toolbar-floating {\n  display: inline-flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--md-sys-spacing-3);\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-large);\n  box-shadow: var(--md-sys-elevation-2);\n  gap: var(--md-sys-spacing-1);\n  backdrop-filter: blur(12px);\n}\n\n\u002F* Floating Toolbar (vertical) *\u002F\n.md3-toolbar-floating-vertical {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: center;\n  width: 56px;\n  padding: var(--md-sys-spacing-3) 0;\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-large);\n  box-shadow: var(--md-sys-elevation-2);\n  gap: var(--md-sys-spacing-1);\n}\n\n\u002F* Vibrant Toolbar (high emphasis) *\u002F\n.md3-toolbar-vibrant {\n  background: var(--md-sys-color-primary-container);\n  color: var(--md-sys-color-on-primary-container);\n}\n```\n\n### Navigation Bar (Bottom Navigation)\n\nPrimary navigation for mobile, displayed at screen bottom:\n\n```css\n.md3-navigation-bar {\n  display: flex;\n  height: 80px;\n  background: var(--md-sys-color-surface-container);\n  box-shadow: var(--md-sys-elevation-2);\n}\n\n.md3-navigation-bar-item {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  color: var(--md-sys-color-on-surface-variant);\n  min-width: 48px;\n}\n\n.md3-navigation-bar-item[aria-selected=\"true\"] {\n  color: var(--md-sys-color-on-surface);\n}\n\n\u002F* Active indicator *\u002F\n.md3-navigation-bar-indicator {\n  background: var(--md-sys-color-secondary-container);\n  border-radius: var(--md-sys-shape-corner-full);\n  padding: 4px 20px;\n}\n```\n\n### Navigation Rail\n\nVertical navigation for medium-sized screens:\n\n```css\n.md3-navigation-rail {\n  display: flex;\n  flex-direction: column;\n  width: 80px;\n  background: var(--md-sys-color-surface);\n  padding: var(--md-sys-spacing-3) 0;\n  align-items: center;\n  gap: var(--md-sys-spacing-3);\n}\n```\n\n### Navigation Drawer\n\nSide panel navigation for large screens:\n\n```css\n.md3-navigation-drawer {\n  width: 360px;\n  background: var(--md-sys-color-surface-container-low);\n  border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0;\n  padding: var(--md-sys-spacing-3);\n}\n\n.md3-navigation-drawer-item {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  padding: 0 var(--md-sys-spacing-4);\n  border-radius: var(--md-sys-shape-corner-full);\n  gap: var(--md-sys-spacing-3);\n}\n\n.md3-navigation-drawer-item[aria-selected=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n}\n```\n\n### Tabs\n\nSwitch between grouped content sections:\n\n```css\n.md3-tabs {\n  display: flex;\n  border-bottom: 1px solid var(--md-sys-color-surface-variant);\n}\n\n.md3-tab {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 48px;\n  font-family: var(--md-sys-typescale-title-small-font);\n  font-size: var(--md-sys-typescale-title-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  position: relative;\n}\n\n.md3-tab[aria-selected=\"true\"] {\n  color: var(--md-sys-color-primary);\n}\n\n\u002F* Active indicator *\u002F\n.md3-tab[aria-selected=\"true\"]::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 3px;\n  background: var(--md-sys-color-primary);\n  border-radius: 3px 3px 0 0;\n}\n```\n\n### Search\n\nInput for querying and filtering content:\n\n```css\n.md3-search-bar {\n  display: flex;\n  align-items: center;\n  height: 56px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-surface-container-highest);\n  padding: 0 var(--md-sys-spacing-4);\n  gap: var(--md-sys-spacing-4);\n}\n\n.md3-search-bar input {\n  flex: 1;\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n}\n\n.md3-search-bar input::placeholder {\n  color: var(--md-sys-color-on-surface-variant);\n}\n```\n\n---\n\n## Selection Components\n\n### Checkboxes\n\nMulti-selection toggles:\n\n- Size: 18dp visual, 48dp touch target\n- Border: 2dp, outline color when unchecked\n- Fill: primary when checked\n- Check mark: on-primary\n\n### Radio Buttons\n\nSingle selection from options:\n\n- Size: 20dp visual, 48dp touch target\n- Border: 2dp, outline when unselected\n- Fill: primary when selected\n- Inner circle: 10dp\n\n### Switches\n\nToggle settings on or off:\n\n- Track: 52×32dp\n- Thumb: 16dp unchecked, 24dp checked\n- Selected: primary track, on-primary thumb icon\n- Unselected: surface-container-highest track, outline thumb\n\n```css\n.md3-switch {\n  width: 52px;\n  height: 32px;\n  border-radius: var(--md-sys-shape-corner-full);\n  background: var(--md-sys-color-surface-container-highest);\n  border: 2px solid var(--md-sys-color-outline);\n  position: relative;\n  cursor: pointer;\n  transition: background 200ms var(--md-sys-motion-easing-standard);\n}\n\n.md3-switch[aria-checked=\"true\"] {\n  background: var(--md-sys-color-primary);\n  border-color: var(--md-sys-color-primary);\n}\n\n.md3-switch-thumb {\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--md-sys-color-outline);\n  position: absolute;\n  top: 50%;\n  left: 6px;\n  transform: translateY(-50%);\n  transition: all 200ms var(--md-sys-motion-easing-standard);\n}\n\n.md3-switch[aria-checked=\"true\"] .md3-switch-thumb {\n  width: 24px;\n  height: 24px;\n  background: var(--md-sys-color-on-primary);\n  left: calc(100% - 28px);\n}\n```\n\n### Chips\n\nCompact elements for filtering, input, or actions:\n\n| Type | Use | Selectable |\n|------|-----|------------|\n| Assist | Suggest actions | No |\n| Filter | Filter content | Yes |\n| Input | User-entered data | Removable |\n| Suggestion | Dynamic suggestions | No |\n\n```css\n.md3-chip {\n  height: 32px;\n  border-radius: var(--md-sys-shape-corner-small);\n  padding: 0 16px;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-family: var(--md-sys-typescale-label-large-font);\n  font-size: var(--md-sys-typescale-label-large-size);\n  border: 1px solid var(--md-sys-color-outline);\n  background: transparent;\n  color: var(--md-sys-color-on-surface-variant);\n  cursor: pointer;\n}\n\n.md3-chip[aria-selected=\"true\"] {\n  background: var(--md-sys-color-secondary-container);\n  color: var(--md-sys-color-on-secondary-container);\n  border-color: transparent;\n}\n```\n\n### Sliders\n\nRange or value selection:\n\n- Track height: 4dp\n- Thumb: 20dp\n- Active track: primary\n- Inactive track: surface-container-highest\n\n### Date Pickers and Time Pickers\n\nDialogs or inputs for selecting dates and times. Follow M3 dialog patterns with appropriate shape and color tokens.\n\n### Menus\n\nDropdown or context menus:\n\n```css\n.md3-menu {\n  background: var(--md-sys-color-surface-container);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  box-shadow: var(--md-sys-elevation-2);\n  padding: var(--md-sys-spacing-2) 0;\n  min-width: 112px;\n  max-width: 280px;\n}\n\n.md3-menu-item {\n  display: flex;\n  align-items: center;\n  height: 48px;\n  padding: 0 var(--md-sys-spacing-3);\n  gap: var(--md-sys-spacing-3);\n  color: var(--md-sys-color-on-surface);\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  cursor: pointer;\n}\n```\n\n---\n\n## Text Input Components\n\n### Text Fields\n\nTwo variants: Filled and Outlined.\n\n**Filled Text Field**:\n```css\n.md3-text-field-filled {\n  display: flex;\n  flex-direction: column;\n  background: var(--md-sys-color-surface-container-highest);\n  border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;\n  padding: 8px 16px 8px;\n  position: relative;\n}\n\n.md3-text-field-filled input {\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n  padding: 4px 0;\n}\n\n.md3-text-field-filled::after {\n  content: '';\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: var(--md-sys-color-on-surface-variant);\n}\n\n.md3-text-field-filled:focus-within::after {\n  height: 2px;\n  background: var(--md-sys-color-primary);\n}\n```\n\n**Outlined Text Field**:\n```css\n.md3-text-field-outlined {\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--md-sys-color-outline);\n  border-radius: var(--md-sys-shape-corner-extra-small);\n  padding: 8px 16px;\n}\n\n.md3-text-field-outlined:focus-within {\n  border-color: var(--md-sys-color-primary);\n  border-width: 2px;\n}\n\n.md3-text-field-outlined input {\n  border: none;\n  background: transparent;\n  font-family: var(--md-sys-typescale-body-large-font);\n  font-size: var(--md-sys-typescale-body-large-size);\n  color: var(--md-sys-color-on-surface);\n  outline: none;\n}\n```\n\n**Labels and Supporting Text**:\n```css\n.md3-text-field-label {\n  font-family: var(--md-sys-typescale-body-small-font);\n  font-size: var(--md-sys-typescale-body-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n}\n\n.md3-text-field-supporting {\n  font-family: var(--md-sys-typescale-body-small-font);\n  font-size: var(--md-sys-typescale-body-small-size);\n  color: var(--md-sys-color-on-surface-variant);\n  padding: 4px 16px 0;\n}\n\n.md3-text-field-error .md3-text-field-supporting {\n  color: var(--md-sys-color-error);\n}\n```\n\n---\n\n## Component Interaction States\n\nAll M3 components follow consistent interaction state patterns:\n\n| State | Visual Effect |\n|-------|--------------|\n| Enabled | Default appearance |\n| Hovered | 8% state layer overlay |\n| Focused | 12% state layer overlay + focus indicator |\n| Pressed | 12% state layer overlay |\n| Dragged | 16% state layer overlay |\n| Disabled | 38% content opacity, 12% background opacity |\n\n## Framework-Specific Component Usage\n\nFor framework-specific component examples (setup, theming, and usage), see the dedicated library skills:\n\n- **React \u002F MUI \u002F Next.js**: `m3-web-react`\n- **Angular Material**: `m3-web-angular`\n- **Vue \u002F Vuetify 3**: `m3-web-vue`\n- **Svelte \u002F SMUI**: `m3-web-svelte`\n- **Web Components (`@material\u002Fweb`)**: `m3-web-webcomponents`\n- **Tailwind CSS**: `m3-web-tailwind`\n- **Ink (React CLI)**: `m3-web-ink`\n- **Vanilla CSS**: `m3-web-vanilla`\n- **Flutter**: `m3-web-flutter`\n- **Android \u002F Jetpack Compose**: `m3-web-android`\n\n## Accessibility Guidelines for Components\n\n1. **Touch targets**: Minimum 48×48dp for all interactive components\n2. **Focus indicators**: Visible outline (2px solid primary, 2px offset)\n3. **Color contrast**: 4.5:1 for text, 3:1 for interactive elements\n4. **ARIA attributes**: Use appropriate roles, labels, and states\n5. **Keyboard navigation**: All components must be fully keyboard operable\n6. **Screen reader support**: Use semantic HTML and ARIA announcements\n\n## Checklist for Component Implementation\n\nWhen implementing M3 components, ensure:\n\n- [ ] Component uses appropriate M3 color tokens (not hard-coded colors)\n- [ ] Shape follows the M3 shape scale for that component type\n- [ ] Typography uses the correct type scale role\n- [ ] All interaction states are implemented (hover, focus, pressed, disabled)\n- [ ] Touch targets meet 48×48dp minimum\n- [ ] Focus indicators are visible and have adequate contrast\n- [ ] Component works in both light and dark themes\n- [ ] Disabled states use correct opacity values (38% content, 12% background)\n- [ ] Motion uses spring-based easing for transitions\n- [ ] ARIA attributes are correctly applied\n- [ ] Component is fully keyboard navigable\n- [ ] M3 Expressive additions (FAB menu, split buttons, button groups, toolbars) are used where appropriate\n- [ ] Library-specific best practices are followed (see library-specific skills: `m3-web-react`, `m3-web-angular`, etc.)\n\n## Resources\n\n- `component-tokens.md` — Quick reference for all @material\u002Fweb component CSS custom property prefixes, included in this skill's directory.\n- `examples\u002Fcomponent-anatomy.svg` — Visual reference SVG showing M3 component anatomy: button variants, card variants, FAB sizes, and interactive state layers with token mappings.\n- M3 component specs: https:\u002F\u002Fm3.material.io\u002Fcomponents\n- M3 for Web: https:\u002F\u002Fm3.material.io\u002Fdevelop\u002Fweb\n- @material\u002Fweb: https:\u002F\u002Fgithub.com\u002Fmaterial-components\u002Fmaterial-web\n- Angular Material: https:\u002F\u002Fgithub.com\u002Fangular\u002Fcomponents\n- Material Design Tokens: https:\u002F\u002Fgithub.com\u002Fmaterial-foundation\u002Fmaterial-tokens\n",{"name":5,"license":14,"description":7},"master","ee4668daab05d977b529036c0b1711dc09f997e0",".claude\u002Fskills\u002Fmaterial-design-3-components","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5","https:\u002F\u002Fgithub.com\u002Fpohlai88","2026-09-05 22:56:19",{"source":8,"skillName":5,"commands":30,"prompt":40,"zipAvailable":41},[31,34,37],{"tool":32,"command":33},"npx","npx skills add pohlai88\u002Fafenda-xforge-v5 --skill material-design-3-components",{"tool":35,"command":36},"bunx","bunx skills add pohlai88\u002Fafenda-xforge-v5 --skill material-design-3-components",{"tool":38,"command":39},"pnpm","pnpm dlx skills add pohlai88\u002Fafenda-xforge-v5 --skill material-design-3-components","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-design-3-components\u002FSKILL.md",true,[43,49],{"path":44,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":47,"sourceHtmlUrl":48},"component-tokens.md","REFERENCE","参考文档",3674,"https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-design-3-components\u002Fcomponent-tokens.md",{"path":50,"resourceType":51,"resourceTypeDesc":52,"sizeBytes":53,"sourceHtmlUrl":54},"examples\u002Fcomponent-anatomy.svg","ASSET","资产文件",9926,"https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-design-3-components\u002Fexamples\u002Fcomponent-anatomy.svg",[56,64,71,78,85,92],{"skillNo":57,"name":58,"nameZh":6,"description":59,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":60,"licenseFileUrl":6,"sourceHtmlUrl":61,"categories":62,"keywords":63,"publishedAt":18},"01M7C4FZM0ZBB1P5GV1EZJJCCT","vercel-react-best-practices","React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React\u002FNext.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.","MIT","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fvercel-react-best-practices\u002FSKILL.md",[],[],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":60,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":18},"01M7C4F67V83B35BDPW73AQNWR","turborepo","Turborepo monorepo build system and orchestration. Covers task pipelines, dependsOn syntax, caching configuration, remote cache, filtering, CI optimization, environment variables, workspace management, watch mode, package boundaries, and code generation.\n\nUse when configuring tasks, creating packages, setting up monorepo, sharing code between apps, running changed packages, debugging cache, optimizing CI, resolving workspace dependencies, enforcing package boundaries, or generating code.","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fturborepo\u002FSKILL.md",[],[],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":60,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":18},"01M7C4ET5ETKW3FFB4SFFPNQWG","tailwind","Tailwind CSS v4 patterns and design systems. Use when configuring Tailwind themes, building components, implementing dark mode, using container queries, migrating from v3, integrating shadcn\u002Fui, or fixing build errors. Use for tailwind, css, styling, theme, design-tokens.","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Ftailwind\u002FSKILL.md",[],[],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":60,"licenseFileUrl":6,"sourceHtmlUrl":82,"categories":83,"keywords":84,"publishedAt":18},"01M7C4DESY6RA5XWDNVV155THK","pnpm-workspace","pnpm workspace monorepo management with filtering, catalogs, and shared configs. Use when setting up monorepos, managing workspace dependencies, filtering package commands, or sharing configuration across packages.","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fpnpm-workspace\u002FSKILL.md",[],[],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":91,"publishedAt":18},"01M7C4CZ3VMTYQQJXVJXGY3M0X","material-theme-builder","Generate Material Design 3 color themes programmatically from a source color using @material\u002Fmaterial-color-utilities, the same engine that powers the Material Theme Builder. Use this when the user asks to generate an M3 color palette, create a custom theme from a brand color, or export M3 tokens to CSS, JSON, or framework configs.","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-theme-builder\u002FSKILL.md",[],[],{"skillNo":93,"name":94,"nameZh":6,"description":95,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":98,"publishedAt":18},"01M7C4CT86QFTT2N0PJCPTG5RB","material-design-3-typography","Applies Material Design 3 Expressive typography principles including variable fonts, type scales, and hierarchy. Use this when working on text styling, type hierarchy, readable interfaces, or when the user asks to apply Material Design 3 typography guidelines.","https:\u002F\u002Fgithub.com\u002Fpohlai88\u002Fafenda-xforge-v5\u002Fblob\u002Fmaster\u002F.claude\u002Fskills\u002Fmaterial-design-3-typography\u002FSKILL.md",[],[]]