Ejecuta cualquier Skill en Manus
con un clic

Ejecuta cualquier Skill en Manus con un clic

m3-web-vanilla

Estrellas3

Forks0

Actualizado17 de febrero de 2026 a las 08:43

Implement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework.

Instalación

Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.

Ejecutar en Manus

Fuente

shelbeely

shelbeely/Shelbeely-Agent-skills

Abrir repositorio de GitHub Ver repositorios del creador

Descarga

Ejecutar en Manus

Ocupaciones relacionadasSOC

Basado en la clasificación ocupacional SOC

Desarrolladores webOcupaciones informáticas y matemáticas·SOC 15-1254

Explorador de archivos

2 archivos

SKILL.md

readonly

Más de este repositorio

mismo repositorio

license-chooser

shelbeely/Shelbeely-Agent-skills

Help choose an appropriate software/open-source license (e.g., MIT, Apache-2.0, GPL-3.0, AGPL-3.0, MPL-2.0, BSD) based on the user's goals and constraints; explain tradeoffs (permissive vs copyleft, patent grants, SaaS/network copyleft); check for dependency-driven constraints; and generate or update LICENSE files and short license headers. Use when a user asks what license to pick, whether licenses are compatible, or to add a LICENSE file to a repo.

2026-02-183

material-design-3-color

shelbeely/Shelbeely-Agent-skills

Applies Material Design 3 Expressive dynamic color and theming principles to user interfaces. Use this when working on color palettes, themes, dynamic color systems, accessibility, or when the user asks to apply Material Design 3 color guidelines to a design or application.

2026-02-173

material-design-3-components

shelbeely/Shelbeely-Agent-skills

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.

2026-02-173

material-design-3-guide

shelbeely/Shelbeely-Agent-skills

Master guide for Material Design 3 — covering the full specification from Material You foundations through M3 Expressive. Explains when to use each Material Design 3 skill subset (color, motion, typography, shape, layout, components, icons). Use this when starting a Material Design 3 project, when you need to understand which M3 skill to apply, or when the user asks about Material Design 3 in general.

2026-02-173

material-design-3-motion

shelbeely/Shelbeely-Agent-skills

Applies Material Design 3 Expressive motion and animation principles to create natural, intuitive, and engaging user experiences. Use this when implementing animations, transitions, micro-interactions, or when the user asks to apply Material Design 3 motion guidelines.

2026-02-173

material-design-3-shape

shelbeely/Shelbeely-Agent-skills

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.

2026-02-173

name	m3-web-vanilla
description	Implement Material Design 3 using only vanilla CSS custom properties and semantic classes. Zero dependencies. Use this when building M3-styled static sites, simple web apps, or when you need full control over every design token without a framework.
license	Apache-2.0

Material Design 3 — Vanilla CSS

Overview

Implement Material Design 3 using only CSS custom properties and semantic classes. No framework dependency. This is the canonical approach used by all other M3 skills in this repository.

Keywords: Material Design 3, M3, vanilla CSS, CSS custom properties, design tokens, Beer CSS, CSS framework, no framework

When to Use

Static sites or simple web apps
Any project where you want zero dependencies
When you need full control over every design token
As a reference implementation for other frameworks
Rapid prototyping without build tools

Setup

Define M3 tokens as CSS custom properties:

/* m3-tokens.css */
:root {
  /* Color tokens */
  --md-sys-color-primary: #6750A4;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EADDFF;
  --md-sys-color-on-primary-container: #21005D;
  --md-sys-color-secondary: #625B71;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-tertiary: #7D5260;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-error: #B3261E;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-surface: #FEF7FF;
  --md-sys-color-on-surface: #1D1B20;
  --md-sys-color-surface-variant: #E7E0EC;
  --md-sys-color-on-surface-variant: #49454F;
  --md-sys-color-outline: #79747E;
  --md-sys-color-outline-variant: #CAC4D0;

  /* Shape tokens */
  --md-sys-shape-corner-none: 0px;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* Typography tokens */
  --md-sys-typescale-label-large-font: 'Roboto', sans-serif;
  --md-sys-typescale-label-large-size: 14px;
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1px;
  --md-sys-typescale-body-medium-font: 'Roboto', sans-serif;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-title-medium-font: 'Roboto', sans-serif;
  --md-sys-typescale-title-medium-size: 16px;
  --md-sys-typescale-title-medium-weight: 500;
}

/* Dark theme */
[data-theme="dark"] {
  --md-sys-color-primary: #D0BCFF;
  --md-sys-color-on-primary: #381E72;
  --md-sys-color-surface: #141218;
  --md-sys-color-on-surface: #E6E0E9;
  --md-sys-color-surface-variant: #49454F;
  --md-sys-color-on-surface-variant: #CAC4D0;
  --md-sys-color-outline: #938F99;
}

Component Examples

Filled Button

.md3-button-filled {
  background: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  padding: 10px 24px;
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  cursor: pointer;
  min-height: 40px;
  position: relative;
  overflow: hidden;
}

.md3-button-filled:hover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-on-primary);
  opacity: 0.08;
}

.md3-button-filled:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  cursor: default;
}

Card

.md3-card-elevated {
  background: var(--md-sys-color-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}

.md3-card-filled {
  background: var(--md-sys-color-surface-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px;
}

.md3-card-outlined {
  background: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px;
}

Text Field

.md3-text-field-outlined {
  position: relative;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  padding: 16px;
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  background: transparent;
  color: var(--md-sys-color-on-surface);
}

.md3-text-field-outlined:focus {
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  outline: none;
}

<button class="md3-button-filled">Click me</button>

<div class="md3-card-elevated">
  <h3 style="font-family: var(--md-sys-typescale-title-medium-font)">Title</h3>
  <p style="font-family: var(--md-sys-typescale-body-medium-font)">Content</p>
</div>

<input class="md3-text-field-outlined" placeholder="Email" />

CSS-only Frameworks

If you want M3 styling without writing all the CSS yourself:

Beer CSS (beercss): First CSS framework fully based on M3. Zero dependencies, semantic HTML, very small bundle. https://www.beercss.com/
Material Design Light: Lightweight SCSS framework compiled to plain CSS. https://github.com/mdlightdev/material-design-light
GMX.css: Minimal-JS M3 CSS implementation with predefined color schemes. https://www.cssscript.com/material-design-framework-gmx/

Checklist

All M3 color tokens defined as CSS custom properties
Dark theme variant using [data-theme="dark"] or prefers-color-scheme
Shape tokens use the M3 shape scale
Typography tokens follow the M3 type scale
Components use semantic token names (not hard-coded hex)
Interaction states (hover, focus, pressed, disabled) implemented
Touch targets meet 48×48dp minimum
Focus indicators visible with adequate contrast

Resources

m3-tokens.css — Complete M3 token foundation (color, shape, typography, motion, spacing, elevation) included in this skill's directory. Copy into your project as a starting point.
material-theme-builder skill — Generate a custom token set from any source color.
Material Theme Builder: https://material-foundation.github.io/material-theme-builder/
M3 Design Tokens: https://m3.material.io/foundations/design-tokens/overview
Beer CSS: https://www.beercss.com/