material is a skill in bergside/awesome-design-skills, last changed 24 Apr 2026. It is instructions only: no scripts, no named hosts and no pre-approved tools.
Google's Material Design with layered surfaces, dynamic theming, built-in motion, and responsive cross-platform patterns.
At a glance
What it can touch
- Instructions only
It is instructions only: no scripts, no named hosts and no pre-approved tools.
How much a skill can do, not whether it is risky.
Pattern check
Nothing flagged
That isn't proof the skill is harmless.
Commit f631a09 · 3 Nov 2026
How the check worksPattern check: nothing flagged
That isn't proof the skill is harmless.
Install
Each tab says whether it installs commit f631a09, the one we checked, or the latest version.
OpenCode also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Goose also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Windsurf (Devin Desktop) also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Zed also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Roo Code also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Factory Droid also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Junie also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
Amp also looks in .agents/skills/ and ~/.agents/skills/, so use the Any agent steps.
No install command here reaches Kiro. Copy the skill's folder into .kiro/skills/ in your project, or ~/.kiro/skills/ for all your projects. bergside/awesome-design-skills/skills/material (opens in a new tab)
Antigravity also looks in .agents/skills/, so the Any agent steps reach it with This project. For All projects, see where Antigravity looks.
Cline also looks in .claude/skills/, so the Claude Code steps reach it with This project. For All projects, see where Cline looks.
Claude Code
Pinned to commit f631a09, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .claude/skills &&mkdir .claude/skills/material &&cp -R "$tmp"/skills/material/. .claude/skills/material/ &&rm -rf "$tmp"If Claude Code was already running and this created the skills folder, run /reload-skills.
Claude apps
Pinned to commit f631a09, the one we checked.
Skills in the Claude apps belong to your account rather than to a project.
Make material.zip, with the skill folder at the top level:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&out="$(mktemp -d)" &&cp -R "$tmp"/skills/material "$out"/material &&(cd "$out" && zip -qr - material) > material.zip &&rm -rf "$tmp" "$out"In Claude, open Customize > Skills, select +, then + Create skill > Upload a skill, and choose material.zip.
On Free, Pro and Max plans, turn on Code execution and file creation (Create and edit files in newer settings) under Settings > Capabilities.
Codex
Pinned to commit f631a09, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .agents/skills &&mkdir .agents/skills/material &&cp -R "$tmp"/skills/material/. .agents/skills/material/ &&rm -rf "$tmp"Codex picks up new skills on its own; restart it if this one does not appear.
Cursor
Pinned to commit f631a09, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .cursor/skills &&mkdir .cursor/skills/material &&cp -R "$tmp"/skills/material/. .cursor/skills/material/ &&rm -rf "$tmp"Copilot & VS Code
Pinned to commit f631a09, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .github/skills &&mkdir .github/skills/material &&cp -R "$tmp"/skills/material/. .github/skills/material/ &&rm -rf "$tmp"In a running Copilot CLI session, run /skills reload.
Or install it with gh skill, which also installs the commit we checked. Needs GitHub CLI 2.90 or later.
gh skill install bergside/awesome-design-skills skills/material/SKILL.md@f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 --agent github-copilot --scope projectGemini CLI
Pinned to commit f631a09, the one we checked.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .gemini/skills &&mkdir .gemini/skills/material &&cp -R "$tmp"/skills/material/. .gemini/skills/material/ &&rm -rf "$tmp"In a running session, run /skills reload.
Or use Gemini CLI’s own installer. Installs the latest version, not the one we checked.
gemini skills install https://github.com/bergside/awesome-design-skills.git --path skills/material --scope workspaceAny agent
Pinned to commit f631a09, the one we checked.
OpenCode, Goose, Windsurf (Devin Desktop), Zed, Roo Code, Factory Droid, Junie, Amp and Antigravity read .agents/skills in a project.
From your project's root folder:
tmp="$(mktemp -d)" &&git clone -q --depth 1 --filter=blob:none --no-checkout https://github.com/bergside/awesome-design-skills.git "$tmp" &&git -C "$tmp" fetch -q --depth 1 origin f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&git -C "$tmp" sparse-checkout set -- skills/material &&git -C "$tmp" checkout -q f631a09b4fcc0166f2e2c1a8c81906ef680c57e8 &&mkdir -p .agents/skills &&mkdir .agents/skills/material &&cp -R "$tmp"/skills/material/. .agents/skills/material/ &&rm -rf "$tmp"Or use the skills CLI from skills.sh. Installs the latest version, not the one we checked. The skills CLI reports installs to skills.sh unless you set DISABLE_TELEMETRY=1.
npx skills@1.7.4 add bergside/awesome-design-skills --skill materialWhat it can touch
From the files and frontmatter at commit f631a09. This is how much a skill can do, not whether it is risky.
Instructions only
It is instructions only: no scripts, no named hosts and no pre-approved tools.
Pattern check
Pattern check: nothing flagged · commit f631a09 · 3 Nov 2026
We checked every text file in this skill, at commit f631a09 on 3 Nov 2026, against 45 published patterns such as download-and-run commands, hidden text and credential access. We don't run the skill, we don't read the web pages it points to, and we can't judge everything its instructions might lead an agent to do. In published tests, pattern checks like this one missed most malicious skills. Read the skill before you install it — especially anything it asks you to download or run.
Format check
Each agent reads SKILL.md a little differently. We check the file against each one's published rules; we don't run the skill in any agent.
Agent Skills specPasses
The open format from agentskills.io, held to the strictest version of each rule among the agents we check.
- Note
The description doesn't say when to use the skill. D6
Fix: Add a sentence such as "Use when …" naming the requests or files that should trigger it.
- Note
Reference files that SKILL.md doesn't link: DESIGN.md. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
Claude CodePasses
Claude Code reads its own extra fields, ignores unknown ones, and still loads a skill whose frontmatter is broken, without its fields.
- Note
Reference files that SKILL.md doesn't link: DESIGN.md. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
Claude apps & API uploadPasses
Uploading to claude.ai or the Claude API, or packaging with Anthropic's script, accepts only the six spec fields and stops on anything else.
- Note
Reference files that SKILL.md doesn't link: DESIGN.md. Anthropic suggests linking every reference file directly from SKILL.md. B4
Fix: Link each one from SKILL.md and say when to read it.
- Note
- OpenAI (Codex & API)Passes
- VS Code & CopilotPasses
SKILL.md
Files
2 files
| Path | Size |
|---|---|
| DESIGN.md (opens in a new tab) | 1.5 KB |
| SKILL.md (opens in a new tab) | 3.6 KB |
More from bergside/awesome-design-skills
| Skill | What it can touch | Pattern check | Licence | Updated |
|---|---|---|---|---|
agenticConversational AI-first interface with minimal controls, clear outcomes, and delegated task flows for agentic workflows.
Pattern check: Nothing flaggedMITUpdated 24 Apr 2026 |
| Pattern check: Nothing flagged | MIT | 24 Apr 2026 |
antStructured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.
Pattern check: Nothing flaggedMITUpdated 24 Apr 2026 |
| Pattern check: Nothing flagged | MIT | 24 Apr 2026 |
artisticHigh-contrast, expressive style with creative typography and bold color choices for visually striking interfaces.
Pattern check: Nothing flaggedMITUpdated 24 Apr 2026 |
| Pattern check: Nothing flagged | MIT | 24 Apr 2026 |
basicPrint-inspired visual language for books, magazines, and reports with editorial grids and expressive typography.
Pattern check: Nothing flaggedMITUpdated 26 Jun 2026 |
| Pattern check: Nothing flagged | MIT | 26 Jun 2026 |
bentoModular grid layout with card-like blocks, clear hierarchy, soft spacing, and subtle visual contrast for organized, scannable interfaces.
Pattern check: Nothing flaggedMITUpdated 24 Apr 2026 |
| Pattern check: Nothing flagged | MIT | 24 Apr 2026 |
boldStrong visual presence with heavyweight typography, high-contrast colors, and commanding layouts.
Pattern check: Nothing flaggedMITUpdated 24 Apr 2026 |
| Pattern check: Nothing flagged | MIT | 24 Apr 2026 |
Other Frontend & design skills
Same category, most repo stars first.