Adoption

Agent Skills are supported by leading AI development tools.

VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory VS Code Gemini CLI GitHub Goose Amp Cursor Claude Code Letta OpenCode Claude OpenAI Codex Factory

shelbeely/m3-web-react

Name: m3-web-react
Author: shelbeely

skills/m3-web-react/SKILL.md

npx skillsauth add shelbeely/shelbeely-agent-skills m3-web-react

Clean

TrivyContainer and dependency vulnerability scanner

Clean

SemgrepStatic code analysis for vulnerabilities

Clean

mcp-scan (Snyk)Model Context Protocol security validation

Skipped

Snyk (dep)Open source security scanning

Skipped

Socket.devSupply chain security analysis

Skipped

VirusTotalMulti-engine malware detection

Skipped

CrowdStrikeAdvanced threat intelligence

Skipped

OSV-ScannerOpen Source Vulnerability database check

Skipped

OWASP Dep-Check

Material Design 3 — React / MUI

Overview

MUI (@mui/material) is the most popular React UI library. MUI v6 adds the Pigment CSS engine for better performance. M3 theming support is evolving — MUI primarily implements M2 component APIs but supports M3 color tokens and theming through customization.

Keywords: Material Design 3, M3, React, MUI, Material UI, @mui/material, Next.js, SSR, React Server Components, material-web-components-react

When to Use

React projects where you want the largest ecosystem and most mature library
Next.js projects needing M3 styling with SSR and React Server Components
When you want the best React/Next.js integration

Install

npm install @mui/material @emotion/react @emotion/styled

For Next.js SSR:

npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs

M3-Aligned Theme Setup

import { createTheme, ThemeProvider } from '@mui/material/styles';

const m3Theme = createTheme({
  palette: {
    primary: { main: '#6750A4' },
    secondary: { main: '#625B71' },
    error: { main: '#B3261E' },
    background: {
      default: '#FEF7FF',
      paper: '#F3EDF7',
    },
  },
  shape: { borderRadius: 20 }, // M3 Large radius
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
});

const m3ThemeDark = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#D0BCFF' },
    secondary: { main: '#CCC2DC' },
    error: { main: '#F2B8B5' },
    background: {
      default: '#141218',
      paper: '#2B2930',
    },
  },
  shape: { borderRadius: 20 },
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={m3Theme}>
      {/* Your M3-styled components */}
    </ThemeProvider>
  );
}

Component Examples

Buttons

import Button from '@mui/material/Button';

<Button variant="contained">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Cards

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

<Card elevation={1}>
  <CardContent>
    <Typography variant="h6">Title</Typography>
    <Typography variant="body2">Content</Typography>
  </CardContent>
</Card>

Text Fields

import TextField from '@mui/material/TextField';

<TextField label="Email" variant="outlined" />
<TextField label="Name" variant="filled" />

Navigation

import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';

<BottomNavigation value={value} onChange={handleChange}>
  <BottomNavigationAction label="Home" icon={<HomeIcon />} />
  <BottomNavigationAction label="Search" icon={<SearchIcon />} />
</BottomNavigation>

Next.js SSR Integration

// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import { m3Theme } from './theme';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppRouterCacheProvider>
          <ThemeProvider theme={m3Theme}>
            {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Alternative: `@material/web` in React

Use Google's official web components directly in React:

// Client component (Next.js or Vite)
'use client';
import '@material/web/button/filled-button.js';

export function M3Button({ children }) {
  return <md-filled-button>{children}</md-filled-button>;
}

React wrappers: material-web-components-react provides thin React abstractions over @material/web.

Checklist

[ ] M3 theme created with createTheme using M3 color roles
[ ] Both light and dark themes defined
[ ] Shape uses M3 radius values (e.g., borderRadius: 20)
[ ] Typography uses Roboto or M3-compatible font
[ ] For Next.js: AppRouterCacheProvider wraps the app for SSR
[ ] Components use theme-aware styling (no hard-coded colors)

Resources

theme.ts — Ready-to-use MUI theme config with M3 orange palette (light + dark) included in this skill's directory. Copy into your project and customize.
material-theme-builder skill — Generate a custom palette from any source color.
MUI: https://mui.com/material-ui/
MUI + Next.js: https://mui.com/material-ui/integrations/nextjs/
MUI Theming: https://mui.com/material-ui/customization/theming/
M3 adoption tracking: https://github.com/mui/material-ui/issues/29345

shelbeely/m3-web-react

skills/m3-web-react/SKILL.md

Implement Material Design 3 in React using MUI (Material UI) with M3-aligned theming, or @material/web with React wrappers. Covers theme setup, component usage, dark mode, and Next.js SSR integration. Use this when building M3-styled React or Next.js applications.

2 stars

development

Updated Apr 14, 2026

$ install --global

skillsauth

npx skillsauth add shelbeely/shelbeely-agent-skills m3-web-react

Install 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.

Scanners Passed

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 14, 2026, 2:10 AM16.9s2 files scanned

SKILL.md

name:: m3-web-react
description:: Implement Material Design 3 in React using MUI (Material UI) with M3-aligned theming, or @material/web with React wrappers. Covers theme setup, component usage, dark mode, and Next.js SSR integration. Use this when building M3-styled React or Next.js applications.
license:: Apache-2.0

Material Design 3 — React / MUI

Overview

Keywords: Material Design 3, M3, React, MUI, Material UI, @mui/material, Next.js, SSR, React Server Components, material-web-components-react

When to Use

React projects where you want the largest ecosystem and most mature library
Next.js projects needing M3 styling with SSR and React Server Components
When you want the best React/Next.js integration

Install

npm install @mui/material @emotion/react @emotion/styled

For Next.js SSR:

npm install @mui/material @emotion/react @emotion/styled @mui/material-nextjs

M3-Aligned Theme Setup

import { createTheme, ThemeProvider } from '@mui/material/styles';

const m3Theme = createTheme({
  palette: {
    primary: { main: '#6750A4' },
    secondary: { main: '#625B71' },
    error: { main: '#B3261E' },
    background: {
      default: '#FEF7FF',
      paper: '#F3EDF7',
    },
  },
  shape: { borderRadius: 20 }, // M3 Large radius
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
});

const m3ThemeDark = createTheme({
  palette: {
    mode: 'dark',
    primary: { main: '#D0BCFF' },
    secondary: { main: '#CCC2DC' },
    error: { main: '#F2B8B5' },
    background: {
      default: '#141218',
      paper: '#2B2930',
    },
  },
  shape: { borderRadius: 20 },
  typography: {
    fontFamily: '"Roboto", sans-serif',
  },
});

function App() {
  return (
    <ThemeProvider theme={m3Theme}>
      {/* Your M3-styled components */}
    </ThemeProvider>
  );
}

Component Examples

Buttons

import Button from '@mui/material/Button';

<Button variant="contained">Filled</Button>
<Button variant="outlined">Outlined</Button>
<Button variant="text">Text</Button>

Cards

import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

<Card elevation={1}>
  <CardContent>
    <Typography variant="h6">Title</Typography>
    <Typography variant="body2">Content</Typography>
  </CardContent>
</Card>

Text Fields

import TextField from '@mui/material/TextField';

<TextField label="Email" variant="outlined" />
<TextField label="Name" variant="filled" />

Navigation

import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import HomeIcon from '@mui/icons-material/Home';
import SearchIcon from '@mui/icons-material/Search';

<BottomNavigation value={value} onChange={handleChange}>
  <BottomNavigationAction label="Home" icon={<HomeIcon />} />
  <BottomNavigationAction label="Search" icon={<SearchIcon />} />
</BottomNavigation>

Next.js SSR Integration

// app/layout.tsx
import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
import { ThemeProvider } from '@mui/material/styles';
import { m3Theme } from './theme';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <AppRouterCacheProvider>
          <ThemeProvider theme={m3Theme}>
            {children}
          </ThemeProvider>
        </AppRouterCacheProvider>
      </body>
    </html>
  );
}

Alternative: `@material/web` in React

Use Google's official web components directly in React:

// Client component (Next.js or Vite)
'use client';
import '@material/web/button/filled-button.js';

export function M3Button({ children }) {
  return <md-filled-button>{children}</md-filled-button>;
}

React wrappers: material-web-components-react provides thin React abstractions over @material/web.

Checklist

[ ] M3 theme created with createTheme using M3 color roles
[ ] Both light and dark themes defined
[ ] Shape uses M3 radius values (e.g., borderRadius: 20)
[ ] Typography uses Roboto or M3-compatible font
[ ] For Next.js: AppRouterCacheProvider wraps the app for SSR
[ ] Components use theme-aware styling (no hard-coded colors)

Resources

theme.ts — Ready-to-use MUI theme config with M3 orange palette (light + dark) included in this skill's directory. Copy into your project and customize.
material-theme-builder skill — Generate a custom palette from any source color.
MUI: https://mui.com/material-ui/
MUI + Next.js: https://mui.com/material-ui/integrations/nextjs/
MUI Theming: https://mui.com/material-ui/customization/theming/
M3 adoption tracking: https://github.com/mui/material-ui/issues/29345

Related Skills

shelbeely/skill-creator

tools

VerifiedTrustedCommunity

Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.

2SKILL.mdUpdated Apr 14, 2026

shelbeely/skill-creator

shelbeely/material-theme-builder

development

VerifiedTrustedCommunity

Generate Material Design 3 color themes programmatically from a source color using @material/material-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.

2SKILL.mdUpdated Apr 14, 2026

shelbeely/material-theme-builder

shelbeely/material-design-3-typography

testing

VerifiedTrustedCommunity

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.

2SKILL.mdUpdated Apr 14, 2026

shelbeely/material-design-3-typography

shelbeely/material-design-3-shape

testing

VerifiedTrustedCommunity

Applies Material Design 3 Expressive shape and containment principles including rounded corners, morphing shapes, and container design. Use this when working on component shapes, borders, containment, or when the user asks to apply Material Design 3 shape guidelines.

2SKILL.mdUpdated Apr 14, 2026

shelbeely/material-design-3-shape

Download

For Claude Desktop. Download once, then upload the file in the app — no terminal needed.

Need help? View full Cowork setup guide →

Install manually

Choose your platform

# Clone the repo
git clone https://github.com/shelbeely/shelbeely-agent-skills.git

# Copy into Claude Code skills folder (global)
cp -r shelbeely-agent-skills/skills/m3-web-react ~/.claude/skills/

Claude Code Skills — official skills path docs.

Repository

shelbeely/shelbeely-agent-skills

2 stars

Compatible with

Claude Code

OpenAI Codex CLI

ChatGPT

Adoption

shelbeely/m3-web-react

$ install --global

Security Scan Results

SKILL.md

Material Design 3 — React / MUI

Overview

When to Use

Install

M3-Aligned Theme Setup

Component Examples

Buttons

Cards

Text Fields

Navigation

Next.js SSR Integration

Alternative: @material/web in React

Checklist

Resources

Related Skills

shelbeely/skill-creator

shelbeely/material-theme-builder

shelbeely/material-design-3-typography

shelbeely/material-design-3-shape

shelbeely/m3-web-react

$ install --global

Security Scan Results

SKILL.md

Material Design 3 — React / MUI

Overview

When to Use

Install

M3-Aligned Theme Setup

Component Examples

Buttons

Cards

Text Fields

Navigation

Next.js SSR Integration

Alternative: @material/web in React

Checklist

Resources

Related Skills

shelbeely/skill-creator

shelbeely/material-theme-builder

shelbeely/material-design-3-typography

shelbeely/material-design-3-shape

Alternative: `@material/web` in React

Alternative: `@material/web` in React