Material Design 3 UI/UX Guide
skydashnet/material-design-3-ui-skill
Guides designing, reviewing or implementing interfaces that follow Google's Material Design 3 system: semantic tokens, component states, adaptive layout and accessibility.
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism.
Install Applying UI Design System
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install telagod/code-abyss applying-ui-design-system --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/applying-ui-design-system .claude/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .claude/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-systemType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install telagod/code-abyss applying-ui-design-system --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/applying-ui-design-system .agents/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .agents/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install telagod/code-abyss applying-ui-design-system --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/applying-ui-design-system .cursor/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .cursor/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/telagod/code-abyss.git --path skills/applying-ui-design-system--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install telagod/code-abyss applying-ui-design-system --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/applying-ui-design-system .gemini/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .gemini/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install telagod/code-abyss applying-ui-design-systemInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/applying-ui-design-system .github/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .github/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add telagod/code-abyss --skill applying-ui-design-system -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install telagod/code-abyss applying-ui-design-system --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/telagod/code-abyss.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/applying-ui-design-system .opencode/skills/applying-ui-design-system && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "applying-ui-design-system" agent skill from https://github.com/telagod/code-abyss/tree/main/skills/applying-ui-design-system into .opencode/skills/applying-ui-design-system/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "applying-ui-design-system", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
applying-ui-design-system- GitHub stars
- 243
- Token cost
- ~538 tokens
- SKILL.md length
- 142 words
- Files
- 9 (incl. references)
- Skills in repo
- 38
- Repo updated
- First seen
- Licence
- MIT
At a glance
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism.
- Works in 5 steps: 对比度 — 主文字 ≥ 4.5:1，大字体（≥18pt 常规 / ≥14pt… → focus-visible — 必须可见；轮廓与底色有足够反差。键盘可达性是底线。 → prefers-reduced-motion: reduce —… → …
- Building UI components
- SKILL.md covers 风格决策, 共享铁律（跨风格）, 落地流程 and 何时不要本 skill, plus 1 more section
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Applying UI Design System is an agent skill from telagod/code-abyss. Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens, component patterns, dark mode, and a11y constraints.
Its SKILL.md is about 540 tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including reference files (for example `references/claymorphism.md`, `references/glassmorphism.md` and `references/liquid-glass.md`).
It sits in Frontend & Design, covering Design tokens, Accessibility and UI design. The repository describes itself as: Give your AI coding agent a personality. Composable persona + style + skills for Claude Code, Codex, Gemini CLI & OpenClaw. Ships Tech Persona Card v1.0 spec. The licence is MIT.
When your agent uses it
- Building UI components
- Choosing a visual aesthetic
- Implementing design tokens
- Auditing accessibility/contrast on themed surfaces
Example prompts
- “/applying-ui-design-system”
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- 对比度 — 主文字 ≥ 4.5:1，大字体（≥18pt 常规 / ≥14pt 粗体）≥ 3:1。逐底色验证，不靠白底脑补。
- focus-visible — 必须可见；轮廓与底色有足够反差。键盘可达性是底线。
- prefers-reduced-motion: reduce — 禁用弹簧、滑入、parallax 等装饰动画；保留功能性 transition。
- prefers-contrast: more — 减少透明、增强边界、平化阴影。
- 暗色模式 — 用语义 token 切换（如 --bg-surface），不要硬编码 #fff/#000 后再交换。
What it can do on your machine
Read from SKILL.md and the folder at commit 2544577. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Applying UI Design System loads about 538 tokens when it runs, and up to ~6.3k if it reads all its reference files. Until then it costs about 99 tokens; SKILL.md has 142 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from telagod/code-abyss at commit 2544577, republished under its MIT licence (© telagod). 142 words, ~538 tokens.
Download SKILL.mdSave it as
.claude/skills/applying-ui-design-system/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.- name
- applying-ui-design-system
- description
- Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Use when building UI components, choosing a visual aesthetic, implementing design tokens, or auditing accessibility/contrast on themed surfaces. Provides per-style tokens, component patterns, dark mode, and a11y constraints.
- user-invocable
- false
设计语言选型
判断先于执行：决定「是否做 / 选什么 / 如何取舍」（栈、方案、架构、权衡）前，先读领域判断内核
skills/_kernel/frontend/SKILL.md——它管 judgment，本秘典管 execution；冲突时以内核判断为准。
不同设计语言不可混搭。先选语言，再按 reference 落地组件。
风格决策
| 想要的感觉 | 选 | 加载 |
|---|---|---|
| 半透明、磨砂、轻盈、纵深感弱 | Glassmorphism | references/glassmorphism.md |
| Apple 风格、立体玻璃、环境光响应、弹簧动效 | Liquid Glass | references/liquid-glass.md |
| 粗框硬影、高饱和、纯平、反精致 | Neubrutalism | references/neubrutalism.md |
| 软糯黏土、大圆角、双内影、温暖 | Claymorphism | references/claymorphism.md |
每个 reference 自包含「核心要素 + CSS Tokens + 关键约束 + 组件 + 暗色模式 + 无障碍」全套。
共享铁律（跨风格）
无论选哪种风格，下列约束全部适用：
- 对比度 — 主文字 ≥ 4.5:1，大字体（≥18pt 常规 / ≥14pt 粗体）≥ 3:1。逐底色验证，不靠白底脑补。
:focus-visible— 必须可见；轮廓与底色有足够反差。键盘可达性是底线。prefers-reduced-motion: reduce— 禁用弹簧、滑入、parallax 等装饰动画；保留功能性 transition。prefers-contrast: more— 减少透明、增强边界、平化阴影。- 暗色模式 — 用语义 token 切换（如
--bg-surface），不要硬编码#fff/#000后再交换。
落地流程
- 选风格 — 一个项目通常一种主风格；可有第二风格作辅助层（如主体 Liquid Glass + 强调按钮 Neubrutalism）
- 导入 tokens — 复制对应
tokens-<style>.css到项目，按需扩展 - 按 reference 抄组件 — Card / Button / Modal / Nav 速查已就位
- 验证对比度 + 焦点 + 减弱动效 — 跑 a11y 自检
- 暗色模式映射 — 每个 token 都要有暗色对应
何时不要本 skill
- 仅需 vanilla CSS / Tailwind 默认组件 → 不需要设计系统选型
- 已有完整 design system（如 Material、Ant Design）→ 沿用，不重新选风格
- 后端工作 / 数据可视化主导 → 走 designing-architectures
性能基线
- 同屏
backdrop-filter元素 ≤ 3（Glassmorphism / Liquid Glass 限制） - 滚动容器内避免 blur（触发逐帧重绘）
- 阴影层叠 ≤ 3 层（Claymorphism 多内影时尤其注意）
- 低端设备：用
@supports或@media (hover: none)降级为纯色
© telagod, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 8 other files (references) in skills/applying-ui-design-system of telagod/code-abyss.
- SKILL.md
- references/claymorphism.md
- references/glassmorphism.md
- references/liquid-glass.md
- references/neubrutalism.md
- references/tokens-claymorphism.css
- references/tokens-glassmorphism.css
- references/tokens-liquid-glass.css
- references/tokens-neubrutalism.css
Open the folder on GitHubat commit 2544577
Compare with similar skills
Applying UI Design System next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Applying UI Design System this skilltelagod/code-abyss | 243 | — | ~538 | Automated safety check: Pass | MIT | |
| Material Design 3 UI/UX Guideskydashnet/material-design-3-ui-skill | 130 | — | ~3k | Automated safety check: Pass | MIT | |
| UI Design Systemtry-works/role-model | 118 | — | ~5k | Automated safety check: Pass | MIT | |
| Apply Aestheticplugin87/ux-ui-agent-skills | 1.5k | — | ~597 | Automated safety check: Pass | MIT | |
| UI Component Spec Designerplugin87/ux-ui-agent-skills | 1.5k | — | ~2.8k | Automated safety check: Pass | MIT | |
| Super UI UX Designsyahiidkamil/Software-Engineer-AI-Agent-Atlas | 401 | — | ~9k | Automated safety check: Pass | None |
Similar skills
UI Design System
try-works/role-model
React UI component systems with TailwindCSS + Radix + shadcn/ui.
Apply Aesthetic
plugin87/ux-ui-agent-skills
Applies a chosen visual direction, an archetype or one of 138 named design systems, by remapping design tokens, then checks contrast before it finishes.
UI Component Spec Designer
plugin87/ux-ui-agent-skills
Writes a complete UI component spec with anatomy, variants, sizes, eight interaction states, design-token mapping and accessibility notes before or alongside code.
Super UI UX Design
syahiidkamil/Software-Engineer-AI-Agent-Atlas
Complete UI/UX design capability — a wiki-style knowledge map of design theory (UX laws, Nielsen heuristics, usability, visual hierarchy, typography, contrast/WCAG, design systems…
Brand Kit Design Tokens
plugin87/ux-ui-agent-skills
Builds a from-scratch brand design system as three-tier DTCG tokens plus one theme.css with light and dark modes, checked against WCAG contrast rules.
More from telagod/code-abyss
All 38 skills in this repoSecurity Gate Scanner
telagod/code-abyss
Scans code with a bundled Node scanner for injection, secret leaks and other dangerous patterns, and requires documented decisions for accepted risks.
Persona Voice Card Builder
telagod/code-abyss
Distills a recurring agent voice from conversations into a restricted Persona Voice Card, validates it for schema, safety and distinctness, and prepares it for community submission.
Skill Cultivation Funnel
telagod/code-abyss
Distills repeated workflows into new skills, improves existing ones and promotes them through local, project and community tiers after a default-deny safety scan.
DOCX Processing Toolkit
telagod/code-abyss
Routes Word document tasks to the right tool: pandoc for text, raw OOXML for structure and comments, docx-js for new files, and a mandatory redlining flow for edits to others' documents.
PDF Processing Toolkit
telagod/code-abyss
Picks the right Python library or CLI tool for a PDF task, text and table extraction, merging, splitting, OCR, watermarking or form filling, and points to a matching recipe.
Code Change Analysis Gate
telagod/code-abyss
Checks what a code change touched, how far its impact reaches and whether design docs, tests and README files kept up, before commit or in review.
Related
Categories
Questions about Applying UI Design System
What does Applying UI Design System do?
Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism. Applying UI Design System is an agent skill from telagod/code-abyss. Frontend UI design system selector and implementation guide covering Glassmorphism, Liquid Glass (Apple-style), Neubrutalism, and Claymorphism.
When should I use Applying UI Design System?
Applying UI Design System fits situations like: building UI components; choosing a visual aesthetic; implementing design tokens; auditing accessibility/contrast on themed surfaces.
How do I install Applying UI Design System in Claude Code?
Run `npx skills add telagod/code-abyss --skill applying-ui-design-system -a claude-code`. Or copy the skill folder (skills/applying-ui-design-system in telagod/code-abyss) into .claude/skills/applying-ui-design-system in your project. Claude Code loads it when a task matches its description.
How do I install Applying UI Design System in Codex?
Run `npx skills add telagod/code-abyss --skill applying-ui-design-system -a codex`. Or copy the skill folder (skills/applying-ui-design-system in telagod/code-abyss) into .agents/skills/applying-ui-design-system in your project. Codex loads it when a task matches its description.
Can I use Applying UI Design System in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add telagod/code-abyss --skill applying-ui-design-system -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/applying-ui-design-system, .gemini/skills/applying-ui-design-system, .github/skills/applying-ui-design-system and .opencode/skills/applying-ui-design-system in your project.
What does Applying UI Design System need to run?
SKILL.md names no scripts, command-line tools or credentials: Applying UI Design System is instructions for the agent only.
Does Applying UI Design System access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Applying UI Design System safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Applying UI Design System use?
Applying UI Design System is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Applying UI Design System use?
About 538 tokens (SKILL.md is roughly 2.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.8k tokens, read only when the agent opens those files.
What are the alternatives to Applying UI Design System?
Skills that share tags, products or a category with Applying UI Design System: Material Design 3 UI/UX Guide (skydashnet/material-design-3-ui-skill, 130 stars), UI Design System (try-works/role-model, 118 stars), Apply Aesthetic (plugin87/ux-ui-agent-skills, 1.5k stars) and UI Component Spec Designer (plugin87/ux-ui-agent-skills, 1.5k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Applying UI Design System?
telagod (a GitHub user) maintains it in telagod/code-abyss, which has 243 GitHub stars. The repository holds 38 skills in this directory. The repository was last updated on July 19, 2026.
Source: telagod/code-abyss on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.