optimize

optimize is a command for coding agents from jiushiwon/wg-skills. It costs 0 tokens per session (2,075 once invoked), scanned A, original, Apache-2.0.

A command for reviewing and changing the visual design of HTML, Vue, React, uni-app, or mini-program projects. It detects the technology, extracts existing design values such as colors and spacing, matches a brand profile, and applies a consistent design system.

In plain words
What is it for?
It is used to audit and improve project styling, align an interface with a brand, compare conservative and broad redesign strategies, and inspect design consistency.
Why use it?
It helps identify inconsistent visual choices and lets you preview or control the extent of design changes. A dry run or report-only mode can show proposed results without writing changes.

Command

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add commands/jiushiwon/wg-skills/optimize
Clone the repo
git clone --depth 1 https://github.com/jiushiwon/wg-skills

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for optimize

README.md
[![agentmods](https://agentmods.dev/badge/commands/jiushiwon/wg-skills/optimize.svg)](https://agentmods.dev/commands/jiushiwon/wg-skills/optimize)
Your own site
<a href="https://agentmods.dev/commands/jiushiwon/wg-skills/optimize"><img src="https://agentmods.dev/badge/commands/jiushiwon/wg-skills/optimize.svg" alt="Measured on agentmods" height="20"></a>
Per session 0 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.
When invoked 2,075 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00000 $0.02075
Opus 5 $0.00000 $0.01038
Sonnet 5 $0.00000 $0.00415
Haiku 4.5 $0.00000 $0.00208

Measured 5d ago against content hash 40e264d911ce, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-05, from the pricing page.

Security

Grade A, and why

optimize scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

vibeCoding/frontend/frontend-ui-foundry/references/commands/optimize.md · 264 lines

How it starts

The opening of the file, as written. The whole thing — 264 lines — stays where its author put it; the contents beside it link to each section on GitHub.

optimize — 一键智能重构

对现有项目(HTML/Vue/React/uniapp/小程序)智能识别技术栈、提取当前设计、匹配品牌画像、应用统一 Token,全局优化。

用法

optimize [path] [--strategy conservative|gradual|reshape] [--brand <name>] [--report-only] [--dry-run]

参数

参数 说明 默认
[path] 项目路径 cwd
--strategy 优化策略 gradual
--brand 目标品牌 自动匹配
--report-only 只输出报告不修改
--dry-run 试运行(输出 diff 不写入)

策略

策略 风险 说明
conservative 保留现状,只统一不一致项
gradual 对齐到匹配品牌 80%(默认)
reshape 完全套用某品牌/场景 Token

5 步流水线

1. detect-stack

调用 scripts/detect-stack.mjs 识别项目:

  • 技术栈(React/Vue/uniapp/...)
  • 框架版本
  • UI 库
  • 项目规模

输出:

{
  "stack": "vue-nuxt",
  "framework": "Nuxt 3",
  "version": "3.13.0",
  "ui": "Element Plus",
  "scale": "medium",
  "files": { "componentCount": 87 }
}

2. extract-tokens

调用 scripts/extract-tokens.mjs 从代码提取事实 Token:

  • 颜色(频次统计)
  • 字体(家族、字号、字重)
  • 间距(padding/margin/gap)
  • 圆角
  • 阴影
  • 动效时长
  • 断点

输出包含一致性警告:

  • 颜色 > 30 种 → 缺少 Token 化
  • 间距 < 70% 在 4pt 网格
  • 圆角 > 8 种不一致
  • 字体 > 5 种太多

3. match-profile

调用 scripts/match-profile.mjs 匹配调色板 + 字体画像:

  • 调色板(10 套)匹配
  • 字体(中文/英文/编辑/数据)
  • 圆角/间距一致性分析
  • 推荐优化策略

输出:

{
  "bestMatch": { "name": "冷调极简", "score": 0.78 },
  "fontProfile": "chinese-tech",
  "drift": [
    "约 35% 间距值不在 4pt 网格上",
    "圆角有 12 种不同值"
  ],
  "strategy": "gradual"
}

4. apply

按策略 + 技术栈应用变更:

只改视觉相关属性不改业务代码

不改
颜色值(→ CSS 变量) API 调用
内联样式(→ 工具类 / 变量) 数据结构
魔法数字(→ Token) 状态管理
重复样式(→ 公共组件) 路由配置
圆角/阴影/动效 props / event
字号(→ token) 业务逻辑
实施方式

Vue/React/uniapp

  1. src/styles/tokens.css 写入完整 Token
  2. main.ts / App.vue 引入
  3. 替换硬编码颜色为 var(--color-*)
  4. 替换 px 字号为 token
  5. 替换 px 间距为 token
  6. 统一圆角到阶梯

HTML+Tailwind

  1. 替换 tailwind.config.js 完整 token
  2. 替换自定义 class 为 token
  3. 移除 arbitrary value(如 text-[#c45c48]text-primary

每个修改

  • 提供 before/after diff
  • 记录文件路径 + 行号
  • 不允许改业务逻辑

Read the full file on GitHub · 264 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 5d ago First seen · 264 lines · 0 tokens per session scan A 40e264d911ce

Subscribe to this mod's changes

optimize is a command published in the GitHub repository jiushiwon/wg-skills (88 stars, last pushed 4d ago), licensed Apache-2.0. It costs nothing until one of its globs matches a file; then it loads 2,075 tokens. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.