Light Frontend Design
Light0305/Light-skills
Light 按需工程技能·前端设计：把模糊的「做个好看的界面」落成能跑的 React/Tailwind/shadcn 代码 + 设计决策说明—— 有视觉记忆点(signature element)、风格自洽(design tokens 一致)、适配场景(学术海报/数据大屏/管理后台/移动端/营销 landing 信息密度各不同)、反「一眼 AI」(紫蓝渐变/Inter/16px 圆角/巨型…
NutUI React proportional scaling on branch featresize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px /…
Install Nutui Proportional Scaling
$ npx skills add jdf2e/nutui-react --skill nutui-proportional-scaling -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install jdf2e/nutui-react nutui-proportional-scaling --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/jdf2e/nutui-react.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .claude/skills/nutui-proportional-scaling && 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 "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .claude/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scalingType 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 jdf2e/nutui-react --skill nutui-proportional-scaling -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install jdf2e/nutui-react nutui-proportional-scaling --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdf2e/nutui-react.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .agents/skills/nutui-proportional-scaling && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .agents/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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 jdf2e/nutui-react --skill nutui-proportional-scaling -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install jdf2e/nutui-react nutui-proportional-scaling --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdf2e/nutui-react.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .cursor/skills/nutui-proportional-scaling && 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 "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .cursor/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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/jdf2e/nutui-react.git --path .cursor/skills/nutui-proportional-scaling--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 jdf2e/nutui-react --skill nutui-proportional-scaling -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install jdf2e/nutui-react nutui-proportional-scaling --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdf2e/nutui-react.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .gemini/skills/nutui-proportional-scaling && 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 "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .gemini/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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 jdf2e/nutui-react nutui-proportional-scalingInstalls 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 jdf2e/nutui-react --skill nutui-proportional-scaling -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/jdf2e/nutui-react.git skills-src && mkdir -p .github/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .github/skills/nutui-proportional-scaling && 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 "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .github/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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 jdf2e/nutui-react --skill nutui-proportional-scaling -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install jdf2e/nutui-react nutui-proportional-scaling --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/jdf2e/nutui-react.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.cursor/skills/nutui-proportional-scaling .opencode/skills/nutui-proportional-scaling && 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 "nutui-proportional-scaling" agent skill from https://github.com/jdf2e/nutui-react/tree/feat_v4.x/.cursor/skills/nutui-proportional-scaling into .opencode/skills/nutui-proportional-scaling/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "nutui-proportional-scaling", 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
nutui-proportional-scaling- GitHub stars
- 1.2k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 378 words
- Files
- 1
- Skills in repo
- 6
- Repo updated
- First seen
- Licence
- None found
At a glance
NutUI React proportional scaling on branch featresize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px /…
- Works in 5 steps: 运行时：谁在写 CSS 变量 → 样式层：variables.scss 中的函数 → 提交里固化的规范（务必遵守） → …
- Implementing 多尺寸适配
- SKILL.md covers 1. 运行时：谁在写 CSS 变量, 2. 样式层：variables.scss 中的函数, 3. 提交里固化的规范（务必遵守） and 4. 业务接入清单, plus 1 more section
- Calls npm
What it does
Nutui Proportional Scaling is an agent skill from jdf2e/nutui-react. NutUI React proportional scaling on branch featresize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px / scale-font-px / scale-icon-px and theme font tokens in variables.scss & theme-.scss; npm run build / build:taro run scripts/px-to-scale-px-in-component-scss.cjs on component SCSS in memory; profiles standard / large / elderly; commit-backed rules e.g. never scale 0px. Use when implementing 多尺寸适配, 等比适配, 大字版, 老年版, scale-px…
Its SKILL.md is about 1.5k 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. It works with npm and React. The repository describes itself as: 京东风格的移动端 React 组件库 、支持多端小程序(A React UI Toolkit for Mobile Web).
When your agent uses it
- Implementing 多尺寸适配
- Native bridge scaling
- Editing component SCSS for resize
- SCSS: prefer calc($token + Npx) over {} in calc
Example prompts
- “/nutui-proportional-scaling”
Requirements
- Node.js
Workflow steps
5 steps, taken from the step headings in SKILL.md.
- 运行时：谁在写 CSS 变量
- 样式层：variables.scss 中的函数
- 提交里固化的规范（务必遵守）
- 业务接入清单
- Agent 自检（改完缩放权相关代码时）
What it can do on your machine
Read from SKILL.md and the folder at commit f9e7827. 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
Shell commands in SKILL.md call:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.
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
Nutui Proportional Scaling loads about 1.5k tokens when it runs. Until then it costs about 183 tokens; SKILL.md has 378 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 378 words (~1,459 tokens).
“档位 ScaleProfile：standard | large | elderly（仅后两者生效额外倍率）。 场景倍率（与 getSceneRatio 一致）：老年对 font / icon / lego × 1.3；大字仅对 font × 1.15。”
- name
- nutui-proportional-scaling
Files
Just SKILL.md in .cursor/skills/nutui-proportional-scaling of jdf2e/nutui-react.
Open the folder on GitHubat commit f9e7827
Compare with similar skills
Nutui Proportional Scaling 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 |
|---|---|---|---|---|---|---|
| Nutui Proportional Scaling this skilljdf2e/nutui-react | 1.2k | — | ~1.5k | Automated safety check: Pass | None | |
| Light Frontend DesignLight0305/Light-skills | 640 | — | ~3.1k | Automated safety check: Pass | MIT | |
| UI UX Pro Maxsaoudi-h/solar-icons | 190 | 18 repos | ~11k | Automated safety check: Notes | Custom licence | |
| Ink Tui Wizardnovuhq/novu | 40k | — | ~1.9k | Automated safety check: Pass | MIT | |
| GSAP for Reactgreensock/gsap-skills | 16k | 3 repos | ~1.6k | Automated safety check: Pass | MIT | |
| Kill AI Slopyetone/kill-ai-slop | 1.3k | — | ~1.4k | Automated safety check: Pass | Apache-2.0 |
Similar skills
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.
GSAP for React
greensock/gsap-skills
Shows how to run GSAP animations in React and Next.js with the useGSAP hook, refs, scoped selectors and automatic cleanup on unmount.
Kill AI Slop
yetone/kill-ai-slop
Find and remove AI slop — the generic, machine-default visual and copy tics of vibe-coded products — from a web project.
Coss
crafter-station/petdex
Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.
More from jdf2e/nutui-react
Nutui Build Local Verify
jdf2e/nutui-react
NutUI 比例缩放本地验证——写回 src/packages 下同路径组件 SCSS（跳过 src/packages//demo.scss 与 demos）；--mirror 写 scale-verify/；不写 build。
Nutui Taro Weapp Wxss
jdf2e/nutui-react
NutUI React Taro 小程序 WXSS 编译超时修复：nutui-taro-demo 样式 bundle 合并、 删除无效 renderingMode、app-origin.wxss 体积治理。Use when 微信小程序报 [ WXSS 文件编译错误] something must be wrong、wcsc timeout、app-origin.wxss…
Nutui React
jdf2e/nutui-react
当用户的任务涉及 NutUI React（@nutui/nutui-react）时使用 —— 编写 NutUI React 组件、调试 NutUI 问题，或查询 NutUI 组件的 API/属性/文档/示例/设计变量（Design Token）。触发场景：与 NutUI 相关的代码、从 '@nutui/nutui-react' 导入，或明确的 NutUI 相关提问。NutUI React…
Nutui React Taro
jdf2e/nutui-react
当用户的任务涉及 NutUI React Taro（@nutui/nutui-react-taro）时使用 —— 为小程序 / 跨端（Taro）应用编写 NutUI React Taro 组件、调试 NutUI Taro 问题，或查询 NutUI Taro 组件的 API/属性/文档/示例/设计变量（Design Token）。
Nutui React To Taro
jdf2e/nutui-react
当需要把项目（或代码片段）从 NutUI React（@nutui/nutui-react，H5）迁移到 NutUI React Taro（@nutui/nutui-react-taro，小程序 / 跨端 Taro）时使用。触发场景如「把 NutUI React 迁移到 Taro」「让这个 H5 的 NutUI 页面能在小程序里跑」，或将 H5 的 NutUI 组件转换到 Taro…
Related
Categories
Questions about Nutui Proportional Scaling
What does Nutui Proportional Scaling do?
NutUI React proportional scaling on branch featresize: runtime --nut-scale-f / --nut-scale-font / --nut-scale-icon from scale-f.ts (H5) and scale-f.taro.ts (Taro), Sass helpers scale-px /…. Nutui Proportional Scaling is an agent skill from jdf2e/nutui-react.g.
When should I use Nutui Proportional Scaling?
Nutui Proportional Scaling fits situations like: implementing 多尺寸适配; native bridge scaling; editing component SCSS for resize; SCSS: prefer calc($token + Npx) over {} in calc.
How do I install Nutui Proportional Scaling in Claude Code?
Run `npx skills add jdf2e/nutui-react --skill nutui-proportional-scaling -a claude-code`. Or copy the skill folder (.cursor/skills/nutui-proportional-scaling in jdf2e/nutui-react) into .claude/skills/nutui-proportional-scaling in your project. Claude Code loads it when a task matches its description.
How do I install Nutui Proportional Scaling in Codex?
Run `npx skills add jdf2e/nutui-react --skill nutui-proportional-scaling -a codex`. Or copy the skill folder (.cursor/skills/nutui-proportional-scaling in jdf2e/nutui-react) into .agents/skills/nutui-proportional-scaling in your project. Codex loads it when a task matches its description.
Can I use Nutui Proportional Scaling 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 jdf2e/nutui-react --skill nutui-proportional-scaling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/nutui-proportional-scaling, .gemini/skills/nutui-proportional-scaling, .github/skills/nutui-proportional-scaling and .opencode/skills/nutui-proportional-scaling in your project.
What does Nutui Proportional Scaling need to run?
Going by SKILL.md and its folder, Nutui Proportional Scaling needs the command-line tools its instructions call (npm). Our summary lists: Node.js.
Does Nutui Proportional Scaling access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Nutui Proportional Scaling 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 Nutui Proportional Scaling use?
No licence was found for Nutui Proportional Scaling or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Nutui Proportional Scaling use?
About 1.5k tokens (SKILL.md is roughly 5.8k 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 Nutui Proportional Scaling?
Skills that share tags, products or a category with Nutui Proportional Scaling: Light Frontend Design (Light0305/Light-skills, 640 stars), UI UX Pro Max (saoudi-h/solar-icons, 190 stars), Ink Tui Wizard (novuhq/novu, 40k stars) and GSAP for React (greensock/gsap-skills, 16k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Nutui Proportional Scaling?
jdf2e (a GitHub organization) maintains it in jdf2e/nutui-react, which has 1,216 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on October 10, 2026.
Source: jdf2e/nutui-react on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.