Design System
Ohh-889/skyroc
Token architecture, component specifications, and slide generation.
Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes.
Install Design Tokens
$ npx skills add mobazha/mobazha-unified --skill design-tokens -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install mobazha/mobazha-unified design-tokens --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/mobazha/mobazha-unified.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/design-tokens .claude/skills/design-tokens && 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 "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .claude/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokensType 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 mobazha/mobazha-unified --skill design-tokens -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install mobazha/mobazha-unified design-tokens --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/design-tokens .agents/skills/design-tokens && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .agents/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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 mobazha/mobazha-unified --skill design-tokens -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install mobazha/mobazha-unified design-tokens --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/design-tokens .cursor/skills/design-tokens && 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 "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .cursor/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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/mobazha/mobazha-unified.git --path .cursor/skills/design-tokens--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 mobazha/mobazha-unified --skill design-tokens -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install mobazha/mobazha-unified design-tokens --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/design-tokens .gemini/skills/design-tokens && 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 "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .gemini/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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 mobazha/mobazha-unified design-tokensInstalls 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 mobazha/mobazha-unified --skill design-tokens -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/design-tokens .github/skills/design-tokens && 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 "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .github/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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 mobazha/mobazha-unified --skill design-tokens -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install mobazha/mobazha-unified design-tokens --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/mobazha/mobazha-unified.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/design-tokens .opencode/skills/design-tokens && 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 "design-tokens" agent skill from https://github.com/mobazha/mobazha-unified/tree/main/.cursor/skills/design-tokens into .opencode/skills/design-tokens/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "design-tokens", 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
design-tokens- GitHub stars
- 165
- Token cost
- ~2k tokens
- SKILL.md length
- 460 words
- Files
- 1
- Skills in repo
- 29
- Repo updated
- First seen
- Licence
- MPL-2.0
At a glance
Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes.
- Making design decisions
- SKILL.md covers 一、色彩系统, 二、排版系统, 三、间距系统 and 四、圆角系统, plus 6 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- Setting up new pages
What it does
Design Tokens is an agent skill from mobazha/mobazha-unified. Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes. Use when making design decisions, setting up new pages, or checking visual consistency, "设计令牌", "设计系统", "色彩系统", "排版", "间距", "圆角", "阴影".
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Frontend & Design, covering Design tokens, Architecture decision records and Typography. It works with Tailwind CSS. The repository describes itself as: Open-source commerce frontend for storefronts, marketplaces, checkout, and seller management. The licence is MPL-2.0.
When your agent uses it
- Making design decisions
- Setting up new pages
- Checking visual consistency
Example prompts
- “/design-tokens”
What it can do on your machine
Read from SKILL.md and the folder at commit 156c699. 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 (its code samples are typescript and css).
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
Design Tokens loads about 2k tokens when it runs. Until then it costs about 73 tokens; SKILL.md has 460 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 mobazha/mobazha-unified at commit 156c699, republished under its MPL-2.0 licence (© mobazha). 460 words, ~1,980 tokens.
Download SKILL.mdSave it as
.claude/skills/design-tokens/SKILL.md (or your agent's skills folder).- name
- design-tokens
- description
- Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes. Use when making design decisions, setting up new pages, or checking visual consistency, "设计令牌", "设计系统", "色彩系统", "排版", "间距", "圆角", "阴影".
设计令牌系统
Mobazha 项目的视觉设计基础，统一色彩、排版、间距、圆角、阴影等设计决策。
定义位置：apps/web/src/app/globals.css（CSS 变量）+ packages/core/theme/（主题配置）
一、色彩系统
6 个主题
| 主题 | 设计意图 | 主色调 |
|---|---|---|
| Classic | 经典清新，默认主题 | 青绿色 |
| Crypto | 科技感，加密货币用户 | 深蓝+紫 |
| Business | 专业商务 | 深蓝+灰 |
| Cyberpunk | 赛博朋克，年轻用户 | 霓虹粉+紫 |
| Nature | 自然环保 | 深绿+棕 |
| Luxury | 奢华高端 | 金+黑 |
每个主题有 light 和 dark 两种模式，通过 CSS 变量切换。
语义色映射
| 语义 | CSS 变量 | Tailwind 类名 | 使用场景 |
|---|---|---|---|
| 品牌主色 | --theme-primary | text-primary, bg-primary | CTA、链接、价格、选中态 |
| 辅助色 | --theme-secondary | text-secondary | 次要按钮、标签 |
| 强调色 | --theme-accent | text-accent | 装饰、渐变 |
| 成功 | --color-success | text-success, bg-success/10 | 完成、通过、在线 |
| 警告 | --color-warning | text-warning | 注意、即将过期 |
| 错误 | --color-destructive | text-destructive | 删除、错误、失败 |
| 信息 | --color-info | text-info, bg-info/10 | 提示、帮助 |
文字色层级
| 层级 | Tailwind | 用途 |
|---|---|---|
| 一级 | text-foreground | 标题、重要内容 |
| 二级 | text-muted-foreground | 正文、描述 |
| 三级 | text-muted-foreground/70 | 辅助信息、时间戳 |
| 四级 | text-muted-foreground/50 | 占位符、禁用态 |
| 反色 | text-primary-foreground | 主色按钮上的文字 |
表面色层级
| 层级 | Tailwind | 用途 |
|---|---|---|
| 底层 | bg-background | 页面背景 |
| 卡片 | bg-card | 卡片、对话框 |
| 悬浮 | bg-muted | 菜单、Tooltip |
| 强调 | bg-primary/10 | 选中态、高亮 |
二、排版系统
字号 Scale
| 级别 | 移动端 | 桌面端 | Tailwind | 使用场景 |
|---|---|---|---|---|
| Display | 28px | 36px | text-2xl md:text-4xl | Me 页大标题 |
| H1 | 22px | 28px | text-xl md:text-2xl | 页面主标题 |
| H2 | 18px | 22px | text-lg md:text-xl | 区域标题 |
| H3 | 16px | 18px | text-base md:text-lg | 卡片标题 |
| Body | 14px | 16px | text-sm md:text-base | 正文内容 |
| Caption | 12px | 14px | text-xs md:text-sm | 时间戳、标签 |
| Micro | 10px | 12px | text-[10px] md:text-xs | 徽章、状态 |
字重
| 字重 | Tailwind | 使用场景 |
|---|---|---|
| Regular (400) | font-normal | 正文、描述 |
| Medium (500) | font-medium | 小标题、标签、导航项 |
| Semibold (600) | font-semibold | 卡片标题、按钮、价格 |
| Bold (700) | font-bold | 页面标题、重要数据 |
行高
| 内容类型 | Tailwind | 值 |
|---|---|---|
| 紧凑（标题） | leading-tight | 1.25 |
| 正常（正文） | leading-normal | 1.5 |
| 宽松（阅读） | leading-relaxed | 1.625 |
字体
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', monospace;三、间距系统
基础网格：8px
| Token | 值 | Tailwind | 使用场景 |
|---|---|---|---|
| 0.5x | 4px | 1 (p-1, gap-1) | 最小间距、图标内边距 |
| 1x | 8px | 2 (p-2, gap-2) | 图标与文字间距 |
| 1.5x | 12px | 3 (p-3, gap-3) | 移动端卡片标准内边距 |
| 2x | 16px | 4 (p-4, gap-4) | 桌面端卡片标准内边距、页面边距 |
| 3x | 24px | 6 (p-6, gap-6) | 区域分隔 |
| 4x | 32px | 8 (p-8, gap-8) | 大区域分隔 |
| 6x | 48px | 12 (p-12) | 页面区域间距 |
响应式间距
| 场景 | 移动端 | 桌面端 | 写法 |
|---|---|---|---|
| 卡片内边距 | 12px | 16px | p-3 md:p-4 或 p-responsive |
| 列表项间距 | 10px | 12px | py-2.5 md:py-3 |
| 元素间距 | 12px | 16px | gap-3 md:gap-4 或 gap-responsive |
| 页面水平边距 | 16px | 24px | px-4 md:px-6 |
Show full SKILL.md (189 more words)Show less
四、圆角系统
| Token | 值 | Tailwind | 使用场景 |
|---|---|---|---|
| Small | 4px | rounded | 小标签、徽章 |
| Medium | 8px | rounded-lg | 输入框、按钮 |
| Large | 12px | rounded-xl | 卡片、对话框 |
| XLarge | 16px | rounded-2xl | 大卡片、底部面板 |
| Full | 9999px | rounded-full | 头像、图标按钮 |
原则：容器越大，圆角越大。
五、阴影/层级系统
| Elevation | Tailwind | 使用场景 |
|---|---|---|
| Level 0 | 无阴影 | 内嵌元素、列表项 |
| Level 1 | shadow-sm | 卡片静止状态 |
| Level 2 | shadow-md | 浮动按钮、下拉菜单 |
| Level 3 | shadow-lg | 卡片 hover 状态、模态框 |
| Level 4 | shadow-xl | Toast、Tooltip |
// 桌面端卡片 hover 提升效果
<Card className="shadow-sm hover:shadow-lg transition-shadow duration-200">六、图标尺寸
| 尺寸 | Tailwind | 使用场景 |
|---|---|---|
| 16px | w-4 h-4 | 行内图标、输入框图标 |
| 20px | w-5 h-5 | 按钮图标、导航图标 |
| 24px | w-6 h-6 | 标准独立图标 |
| 32px | w-8 h-8 | 功能入口图标 |
| 44px | w-11 h-11 | 列表头像（最小触摸目标） |
| 60px | w-[60px] h-[60px] | 大头像 |
图标库：Lucide React（lucide-react）
七、断点
| 名称 | 宽度 | Tailwind 前缀 | 场景 |
|---|---|---|---|
| Mobile | < 768px | （默认） | 手机竖屏 |
| Tablet | >= 768px | md: | 平板、手机横屏 |
| Desktop | >= 1024px | lg: | 小型笔记本 |
| Large | >= 1440px | xl: / 2xl: | 大屏显示器 |
八、品牌区域渐变变量
Hero 等品牌展示区域使用专用 CSS 变量，每套主题有不同的配色：
| 变量 | 用途 | Classic | Crypto | Business | Cyberpunk | Nature | Luxury |
|---|---|---|---|---|---|---|---|
--hero-gradient-from | 渐变起始（深色） | slate | black | slate | zinc | stone | black |
--hero-gradient-via | 渐变中间（主题色） | cyan | green | blue | purple | green | amber |
--hero-gradient-to | 渐变结束（深色） | slate | black | slate | zinc | stone | black |
--hero-accent | 主强调色 | cyan-400 | green-400 | blue-400 | pink-400 | lime-400 | amber-400 |
--hero-accent-secondary | 辅强调色 | teal-400 | emerald-400 | sky-400 | violet-400 | green-400 | yellow-400 |
--hero-glow | 光晕/阴影色 | cyan-500 | green-500 | blue-500 | pink-500 | lime-500 | amber-500 |
使用示例：
// 渐变背景
<section className="bg-gradient-to-br from-[var(--hero-gradient-from)] via-[var(--hero-gradient-via)] to-[var(--hero-gradient-to)]">
// 渐变文字
<span className="bg-gradient-to-r from-[var(--hero-accent)] to-[var(--hero-accent-secondary)] bg-clip-text text-transparent">
// 光晕效果
<div className="bg-[var(--hero-glow)]/20 rounded-full blur-3xl" />快速检查清单
- 颜色是否使用语义变量（而非硬编码）？
- 字号是否来自 Scale 表（而非随意值）？
- 间距是否遵循 8px 网格（4px 仅用于微调）？
- 圆角是否与容器大小匹配？
- 阴影层级是否正确（静止 sm、悬浮 lg）？
- 图标尺寸是否来自标准尺寸（16/20/24/32）？
- 响应式写法是否 mobile-first（
p-3 md:p-4）？
相关功能文档
- 主题系统 — 6 种预设主题配置、CSS 变量完整列表、亮暗模式切换、防闪烁处理
© mobazha, MPL-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .cursor/skills/design-tokens of mobazha/mobazha-unified.
Open the folder on GitHubat commit 156c699
Compare with similar skills
Design Tokens 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 |
|---|---|---|---|---|---|---|
| Design Tokens this skillmobazha/mobazha-unified | 165 | — | ~2k | Automated safety check: Pass | MPL-2.0 | |
| Design SystemOhh-889/skyroc | 795 | 11 repos | ~1.7k | Automated safety check: Pass | MIT | |
| Scalar Design Systemscalar/scalar | 16k | — | ~2.7k | Automated safety check: Pass | MIT | |
| Tailwind V4 Shadcnever-works/ever-works | 162 | 2 repos | ~3.8k | Automated safety check: Pass | MIT | |
| Using Ouds Web Version Major MinorOrange-OpenSource/Orange-Boosted-Bootstrap | 222 | — | ~4.2k | Automated safety check: Pass | MIT | |
| Design Token Generatordylanfeltus/skills | 179 | — | ~2.9k | Automated safety check: Pass | MIT |
Similar skills
Scalar Design System
scalar/scalar
Scalar's design system — design tokens, theming (@scalar/themes), CSS variables, and the @scalar/components library.
Tailwind V4 Shadcn
ever-works/ever-works
Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React.
Using Ouds Web Version Major Minor
Orange-OpenSource/Orange-Boosted-Bootstrap
Provides comprehensive knowledge of the OUDS Web library (Orange Unified Design System for Web), a Bootstrap-based CSS/JS framework for building Orange-branded web interfaces.
Design Token Generator
dylanfeltus/skills
Generates type scales, color palettes, spacing systems, WCAG contrast checks and dark mode palettes from formulas, as CSS custom properties, a Tailwind config or JSON tokens.
Glycemicgpt UI Foundation
lumose-health/GlycemicGPT
A skill your agent uses when adding or changing GlycemicGPT web UI structure, shared styling, Tailwind classes, semantic theme tokens, typography, base primitives, product UI components, TextInput…
More from mobazha/mobazha-unified
All 29 skills in this repoA11y Guide
mobazha/mobazha-unified
Accessibility guide for Mobazha following WCAG 2.1 AA standards including color contrast, reduced motion, ARIA patterns, keyboard navigation, focus management, and screen reader testing.
API Reference
mobazha/mobazha-unified
Look up Mobazha backend API endpoints, request/response formats, and field mappings.
Code Review
mobazha/mobazha-unified
Review code for quality, architecture consistency, and adherence to Mobazha project standards using confidence-based filtering.
Code Simplifier
mobazha/mobazha-unified
Simplify and refine recently written code for clarity, consistency, and maintainability while preserving all functionality.
Commit Helper
mobazha/mobazha-unified
Generate commit messages and run pre-commit validation following Mobazha conventions.
Component Dev
mobazha/mobazha-unified
Create and modify UI components following Mobazha conventions including directory structure, spacing standards, accessibility, and testing.
Related
Works with
Categories
Questions about Design Tokens
What does Design Tokens do?
Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes. Design Tokens is an agent skill from mobazha/mobazha-unified. Comprehensive design token system for Mobazha including color system, typography scale, spacing grid, border radius, elevation, and icon sizes.
When should I use Design Tokens?
Design Tokens fits situations like: making design decisions; setting up new pages; checking visual consistency.
How do I install Design Tokens in Claude Code?
Run `npx skills add mobazha/mobazha-unified --skill design-tokens -a claude-code`. Or copy the skill folder (.cursor/skills/design-tokens in mobazha/mobazha-unified) into .claude/skills/design-tokens in your project. Claude Code loads it when a task matches its description.
How do I install Design Tokens in Codex?
Run `npx skills add mobazha/mobazha-unified --skill design-tokens -a codex`. Or copy the skill folder (.cursor/skills/design-tokens in mobazha/mobazha-unified) into .agents/skills/design-tokens in your project. Codex loads it when a task matches its description.
Can I use Design Tokens 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 mobazha/mobazha-unified --skill design-tokens -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/design-tokens, .gemini/skills/design-tokens, .github/skills/design-tokens and .opencode/skills/design-tokens in your project.
What does Design Tokens need to run?
SKILL.md names no scripts, command-line tools or credentials: Design Tokens is instructions for the agent only.
Does Design Tokens 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 Design Tokens 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 Design Tokens use?
Design Tokens is published under the MPL-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Design Tokens use?
About 2k tokens (SKILL.md is roughly 7.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Design Tokens?
Skills that share tags, products or a category with Design Tokens: Design System (Ohh-889/skyroc, 795 stars), Scalar Design System (scalar/scalar, 16k stars), Tailwind V4 Shadcn (ever-works/ever-works, 162 stars) and Using Ouds Web Version Major Minor (Orange-OpenSource/Orange-Boosted-Bootstrap, 222 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Design Tokens?
mobazha (a GitHub organization) maintains it in mobazha/mobazha-unified, which has 165 GitHub stars. The repository holds 29 skills in this directory. The repository was last updated on October 3, 2026.
Source: mobazha/mobazha-unified on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.