Tailwindcss Development
anonaddy/anonaddy
Always invoke when the user's message includes 'tailwind' in any form.
为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规. An agent skill from wot-ui/wot-ui.
Install Generate Scss Variables
$ npx skills add wot-ui/wot-ui --skill generate-scss-variables -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install wot-ui/wot-ui generate-scss-variables --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/wot-ui/wot-ui.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/generate-scss-variables .claude/skills/generate-scss-variables && 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 "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .claude/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variablesType 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 wot-ui/wot-ui --skill generate-scss-variables -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install wot-ui/wot-ui generate-scss-variables --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/generate-scss-variables .agents/skills/generate-scss-variables && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .agents/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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 wot-ui/wot-ui --skill generate-scss-variables -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install wot-ui/wot-ui generate-scss-variables --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/generate-scss-variables .cursor/skills/generate-scss-variables && 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 "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .cursor/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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/wot-ui/wot-ui.git --path .agents/skills/generate-scss-variables--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 wot-ui/wot-ui --skill generate-scss-variables -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install wot-ui/wot-ui generate-scss-variables --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/generate-scss-variables .gemini/skills/generate-scss-variables && 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 "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .gemini/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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 wot-ui/wot-ui generate-scss-variablesInstalls 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 wot-ui/wot-ui --skill generate-scss-variables -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/generate-scss-variables .github/skills/generate-scss-variables && 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 "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .github/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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 wot-ui/wot-ui --skill generate-scss-variables -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install wot-ui/wot-ui generate-scss-variables --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/wot-ui/wot-ui.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/generate-scss-variables .opencode/skills/generate-scss-variables && 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 "generate-scss-variables" agent skill from https://github.com/wot-ui/wot-ui/tree/main/.agents/skills/generate-scss-variables into .opencode/skills/generate-scss-variables/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "generate-scss-variables", 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
generate-scss-variables- GitHub stars
- 386
- Token cost
- ~906 tokens
- SKILL.md length
- 209 words
- Files
- 1
- Skills in repo
- 10
- Repo updated
- First seen
- Licence
- MIT
At a glance
为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规. An agent skill from wot-ui/wot-ui.
- Works in 2 steps: 为新组件或现有组件的新属性快速生成标准化的 component-level… → 检查现有组件的 SCSS 变量是否符合设计系统规范。
- Tasks that involve CSS and styling
- SKILL.md covers 核心规范速查, 模式一：代码生成 (Generation), 模式二：规则检查 (Auditing) and 任务指令
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Generate Scss Variables is an agent skill from wot-ui/wot-ui. 为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规。
Its SKILL.md is about 910 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 CSS and styling. The repository describes itself as: 一个轻量、美观、AI友好的 uni-app 组件库。 The licence is MIT.
When your agent uses it
- Tasks that involve CSS and styling
Example prompts
- “/generate-scss-variables”
Workflow steps
2 steps, taken from the first numbered list in SKILL.md.
- 为新组件或现有组件的新属性快速生成标准化的 component-level SCSS 变量定义。
- 检查现有组件的 SCSS 变量是否符合设计系统规范。
What it can do on your machine
Read from SKILL.md and the folder at commit 486d06d. 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 scss).
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
Generate Scss Variables loads about 906 tokens when it runs. Until then it costs about 18 tokens; SKILL.md has 209 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 wot-ui/wot-ui at commit 486d06d, republished under its MIT licence (© wot-ui). 209 words, ~906 tokens.
Download SKILL.mdSave it as
.claude/skills/generate-scss-variables/SKILL.md (or your agent's skills folder).- name
- generate-scss-variables
- description
- 为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规。
- metadata.applyTo
- **/*.scss
SCSS 变量生成与检查技能
本技能旨在帮助开发者：
- 为新组件或现有组件的新属性快速生成标准化的 component-level SCSS 变量定义。
- 检查现有组件的 SCSS 变量是否符合设计系统规范。
[!IMPORTANT] 职责区分：
- 如果你正在将旧版 SCSS 变量（如
$-navbar-height）迁移到新版系统，请使用migrate-scss-design-system技能。- 本技能用于从零生成新的变量定义代码，或审计现有代码。
[!NOTE] 规范参考：本技能遵循
@rules/scss-variable-naming.rule.md中定义的完整命名规范，包括属性关键词表、状态/变体后缀、语义令牌参考表等。
核心规范速查
概念定义
- 元素 (Element)：组件内部的子部件，如
title、icon、dot、arrow、desc等。 - 变体 (Variant)：类型或尺寸的变化，如
primary、success、small、large等。
命名格式
// 无元素时（变体在属性前）
$组件名-变体-属性-状态: var(--wot-组件名-变体-属性-状态, $语义令牌) !default;
// 有元素时（元素在属性前）
$组件名-元素-属性-变体-状态: var(--wot-组件名-元素-属性-变体-状态, $语义令牌) !default;检查点 (Checkpoints)
- [命名层级] Structure:
- 无元素时: 变体(Variant) 必须在 属性(Attribute) 之前。
- ❌
$button-bg-primary - ✅
$button-primary-bg(primary 是变体，bg 是属性)
- ❌
- 有元素时: 元素(Element) 必须在 属性(Attribute) 之前。
- ❌
$cell-color-title - ✅
$cell-title-color(title 是元素，color 是属性)
- ❌
- 无元素时: 变体(Variant) 必须在 属性(Attribute) 之前。
- [CSS变量] CSS Var: 内部必须使用 CSS 变量，CSS 变量名与 SCSS 变量名保持结构一致（
--wot前缀）。- ❌
var(--button-color) - ✅
var(--wot-button-color)
- ❌
- [语义化] Fallback: CSS 变量的默认值必须优先使用语义化 Token（详见
@rules/scss-variable-naming.rule.md第六节）。- ❌
16px,#fff(除非是特定的魔术值) - ✅
$n-16,$base-white
- ❌
- [默认值] Default: 必须包含
!default标记，以便用户覆盖。 - [全称属性] Full Name: 禁止使用缩写，必须使用 CSS 属性全称。
- ❌
fs,bg,lh - ✅
font-size,background(或bg作为后缀特例，但属性名尽量全称，参考 rule 文件),line-height - 注：
bg在变量后缀中作为background的通用简写是允许的（如$button-bg），但在涉及具体 CSS 属性映射时，应优先对照scss-variable-naming.rule.md的关键词表。对于font-size，严禁使用fs。
- ❌
模式一：代码生成 (Generation)
使用指南
请提供：
- 组件名称 (如
card) - 属性列表 及意图 (如
背景色：白色)
输出示例
// 基础变量（无元素无变体）
$search-bg: var(--wot-search-bg, $base-white) !default;
$search-padding: var(--wot-search-padding, $padding-main) !default;
// 有元素时：元素在属性前（icon 是元素，color 是属性）
$search-icon-color: var(--wot-search-icon-color, $text-secondary) !default;
$search-icon-size: var(--wot-search-icon-size, $n-16) !default;
// 有变体时：变体在属性前（primary 是变体，bg 是属性）
$search-primary-bg: var(--wot-search-primary-bg, $primary-6) !default;
$search-primary-color: var(--wot-search-primary-color, $base-white) !default;模式二：规则检查 (Auditing)
当用户要求“检查变量命名”、“审计 SCSS 规范”时，请执行以下步骤：
- 读取文件：读取组件的
index.scss或相关样式文件。 - 逐行扫描：查找所有以
$开头的变量定义。 - 匹配验证：针对每一行，对比上述【核心规范】。
- 输出报告：
- ✅ 通过：列出符合规范的变量（可折叠）。
- ❌ 失败：列出不符合规范的变量，并说明原因（如“缺少 --wot 前缀”、“使用了硬编码值”）。
- 🛠 建议：给出修正后的代码片段。
审计报告示例
🔍 SCSS 变量规范检查报告 (Component:
test-comp)❌ 发现 3 个问题：
$test-comp-height: 100px;
- 🔴 错误：未使用 CSS 变量且使用了硬编码值。
- 🟢 建议：
$test-comp-height: var(--wot-test-comp-height, $n-100) !default;(假设 $n-100 存在)
$test-comp-color: var(--test-comp-color, $text-main);
- 🔴 错误：CSS 变量缺少
--wot-前缀，且缺少!default。- 🟢 建议：
$test-comp-color: var(--wot-test-comp-color, $text-main) !default;
$button-bg-primary: ...
- 🔴 错误：顺序错误，变体(primary)应在属性(bg)之前。
- 🟢 建议：
$button-primary-bg: var(--wot-button-primary-bg, $primary-6) !default;
任务指令
- 生成：根据描述输出 SCSS 代码，参考
@rules/scss-variable-naming.rule.md中的语义令牌表和属性关键词表。 - 检查：读取文件 -> 对照
@rules/scss-variable-naming.rule.md验证规范 -> 输出审计报告。
© wot-ui, MIT. 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 .agents/skills/generate-scss-variables of wot-ui/wot-ui.
Open the folder on GitHubat commit 486d06d
Compare with similar skills
Generate Scss Variables 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 |
|---|---|---|---|---|---|---|
| Generate Scss Variables this skillwot-ui/wot-ui | 386 | — | ~906 | Automated safety check: Pass | MIT | |
| Tailwindcss Developmentanonaddy/anonaddy | 4.9k | 10 repos | ~865 | Automated safety check: Pass | MIT | |
| UI StylingOhh-889/skyroc | 795 | 13 repos | ~2.5k | Automated safety check: Pass | MIT | |
| MCP Developmentcoollabsio/coolify | 63k | 1 repos | ~949 | Automated safety check: Pass | MIT | |
| Web Animation DesignbaptisteArno/typebot.io | 11k | 2 repos | ~2.7k | Automated safety check: Pass | Custom licence | |
| UI UX Pro Maxsaoudi-h/solar-icons | 186 | 18 repos | ~11k | Automated safety check: Notes | Custom licence |
Similar skills
UI Styling
Ohh-889/skyroc
Create beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs.
MCP Development
coollabsio/coolify
A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.
Web Animation Design
baptisteArno/typebot.io
Guides easing, timing and animation choices for UI motion, based on a web animation course, and reviews existing animations in a before-and-after table.
UI UX Pro Max
saoudi-h/solar-icons
UI/UX design intelligence for web and mobile. An agent skill from saoudi-h/solar-icons.
Ink Tui Wizard
novuhq/novu
Build terminal user interfaces (TUIs) using Ink (React for CLIs) and @inkjs/ui with a reactive, session-driven wizard pattern.
More from wot-ui/wot-ui
All 10 skills in this repoCreate Component
wot-ui/wot-ui
在 wot-ui 项目中创建新组件骨架与必要注册点。用户要求从零创建组件源码、补齐 types.vue.scss 结构或注册全局组件类型时调用；不负责 Demo 页、测试和文档迁移。
Create Demo Page
wot-ui/wot-ui
为组件创建演示页面并统一组织结构。用户要求新建/重构组件 Demo、统一展示顺序或用 demo-group 与 demo-group-item 编排时调用。
Generate Theme
wot-ui/wot-ui
为 wot-ui 生成单文件主题 SCSS，并在 App.vue 中挂载语义变量. An agent skill from wot-ui/wot-ui.
Optimize Page Styles
wot-ui/wot-ui
优化 subPages 演示页面中的样式，将硬编码的颜色、字号、间距、圆角等替换为 wot-ui 设计系统语义变量。允许直接使用已全局注入的 variable.scss Sass 变量，也允许使用 CSS 自定义属性；不需要额外引入 variable.scss。消除手写的暗色模式覆盖块，统一使用语义变量实现自适应主题。同时将 class 命名统一为 BEM 规范。
Vue Comment
wot-ui/wot-ui
统一 Vue 与 wot-ui 组件源码中的注释和命名规范。用户要求规范组件 Props 注释、函数命名、类型说明、变量命名或在创建组件后补齐代码注释时调用；不负责 Demo、测试和文档迁移。
Migrate Component Doc
wot-ui/wot-ui
迁移组件 Markdown 文档到新规范。用户明确要求迁移文档结构、重排 Demo 章节、合并 Attributes/Options 列、迁移最低版本标记或升级旧文档格式时调用；不用于仅做一致性核对。
Related
Categories
Questions about Generate Scss Variables
What does Generate Scss Variables do?
为新组件或新特性快速生成符合设计系统规范的 SCSS 变量定义代码，或检查现有变量是否合规. An agent skill from wot-ui/wot-ui. Generate Scss Variables is an agent skill from wot-ui/wot-ui.
When should I use Generate Scss Variables?
Generate Scss Variables fits situations like: tasks that involve CSS and styling.
How do I install Generate Scss Variables in Claude Code?
Run `npx skills add wot-ui/wot-ui --skill generate-scss-variables -a claude-code`. Or copy the skill folder (.agents/skills/generate-scss-variables in wot-ui/wot-ui) into .claude/skills/generate-scss-variables in your project. Claude Code loads it when a task matches its description.
How do I install Generate Scss Variables in Codex?
Run `npx skills add wot-ui/wot-ui --skill generate-scss-variables -a codex`. Or copy the skill folder (.agents/skills/generate-scss-variables in wot-ui/wot-ui) into .agents/skills/generate-scss-variables in your project. Codex loads it when a task matches its description.
Can I use Generate Scss Variables 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 wot-ui/wot-ui --skill generate-scss-variables -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/generate-scss-variables, .gemini/skills/generate-scss-variables, .github/skills/generate-scss-variables and .opencode/skills/generate-scss-variables in your project.
What does Generate Scss Variables need to run?
SKILL.md names no scripts, command-line tools or credentials: Generate Scss Variables is instructions for the agent only.
Does Generate Scss Variables 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 Generate Scss Variables 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 Generate Scss Variables use?
Generate Scss Variables 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 Generate Scss Variables use?
About 906 tokens (SKILL.md is roughly 3.6k 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 Generate Scss Variables?
Skills that share tags, products or a category with Generate Scss Variables: Tailwindcss Development (anonaddy/anonaddy, 4.9k stars), UI Styling (Ohh-889/skyroc, 795 stars), MCP Development (coollabsio/coolify, 63k stars) and Web Animation Design (baptisteArno/typebot.io, 11k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Generate Scss Variables?
wot-ui (a GitHub organization) maintains it in wot-ui/wot-ui, which has 386 GitHub stars. The repository holds 10 skills in this directory. The repository was last updated on October 9, 2026.
Source: wot-ui/wot-ui on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.