style-fix

Style Fix

Fix the style syntax with the smallest possible scope. Only handle CSS, Tailwind, CSS Module, Ant Design overrides, className, and theme tokens; do not refactor business logic, do not redesign the UI, and do not do type governance along the way.

输入 -> 识别范围 -> 只读审查 -> 分级 -> 修改必须修复项 -> 最小验证 -> 汇报

Reading and scope

Read first:

1. AGENTS.md: confirm high-risk files, linkage rules, and project boundaries.
2. The style entry points, Tailwind version, formatting configuration, and lint configuration that actually exist in the current repository; do not reuse historical paths when a path does not exist.
3. The module documentation and route configuration involved in the feature name scope, for example docs/modules/module-map.md、docs/modules/、src/config/router.config.ts、src/router/routers.ts。
4. Entry points related to colors, shadows, animations, sizes, theme classes, or Ant Design overrides, for example src/styles/global.css、src/styles/theme-config.css、src/styles/theme.css、src/styles/custom-antd.css、src/components/StyleProviderClient.tsx。
5. The currently installed antd type definitions or source code; read only when you need to determine the classNames / styles slot.

Only use tokens / utilities that have been confirmed to exist in the current code or style entry points; do not guess token names from memory.

用户输入
  +-- 目录/文件 -> 只处理该路径下样式相关内容
  +-- 功能名   -> 走“功能模块定位”
  +-- 暂存区   -> git diff --cached --name-only --diff-filter=ACMR
  +-- 无范围   -> 询问目录、功能模块、文件或暂存区

If the user provides a directory, feature name, and "staging area" at the same time, the explicitly specified scope takes precedence.

Feature module location

功能名
  -> docs/modules/module-map.md、docs/modules/
  -> router.config.ts、routers.ts
  -> 中文名 / 英文名 / 路由片段 / API 名 / i18n key 搜索
  -> 候选清楚：只处理该模块内样式相关文件
  -> 候选过多：列 2~4 个入口和依据；无法判断才追问

After locating, do not modify across scopes just because the same name appears in other modules.

Staging area mode

git status --short
  -> 识别 staged / unstaged / 同文件混合状态
  -> git diff --cached --name-only --diff-filter=ACMR
  -> 只审查暂存范围内样式相关文件
  -> 需重新暂存且无混合风险：git add <具体文件>
  -> 同文件混合状态有带入风险：说明风险，让用户决定

Do not use git add -A or git add .。

Fix threshold

候选问题
  -> 是否违反 AGENTS.md、本 Skill 或当前项目已确认样式规则？
     +-- 否：建议确认或无需处理
     +-- 是：是否能在用户范围内无损修正？
             +-- 是：必须修复
             +-- 否：建议确认或列为未处理

Category	Handling
Must fix	Tailwind v3 syntax, Tailwind v4 canonical class, arbitrary values that can be replaced losslessly, using bare values when a token already exists, hardcoding fixed colors when they should change with the theme, CSS Module naming that does not conform to conventions, unbounded Ant Design overrides, one-off style abstractions that increase maintenance burden.
Suggest confirming	Redoing visual expression, unifying historical styles, className that can be inlined or kept, adding global tokens / overrides, items that would expand beyond the current scope.
No handling needed	When there are no must-fix items, do not change className, move CSS Modules, or replace visual syntax just to demonstrate use of this Skill; only report the scope and basis.

When this Skill is triggered incidentally by a new feature or a modification to an old feature, only handle the must-fix items directly related to the current change.

File boundaries

Prioritize:

• *.tsx / *.jsx：className, conditional class names, CSS Module imports, local ConfigProvider。
• *.ts: xxxClassName、xxxClassNames、classNameMapthat only serve styles, component configuration, or className composition.
• *.module.css、src/styles/*.css：Tailwind @apply、@reference, Ant Design overrides, and theme styles.

Skip by default:

• Non-style changes such as business logic, APIs, state, and route registration.
• Generated files, dependency directories, build artifacts, and third-party source code.
• Historical style.module.css large migrations unrelated to the current scope.

Modification rules

className and style constants

样式写法
  +-- 单次使用/简单静态样式 -> 直接写 JSX className
  +-- 条件组合              -> 用现有 cn / clsx / classnames 在 className 中组合
  +-- 三次以上复用/稳定语义/第三方配置限制/复杂条件
                              -> 保留样式常量，命名表达稳定语义

Do not keep style variables that are used only once or are simple combinations just to shorten strings; do not extract another layer of variables for one-off combined styles.

Tailwind and theme tokens

待处理值或 class
  +-- 已有 token / utility -> 改为 token utility
  +-- Tailwind v3/旧写法  -> 改为 v4 canonical class
  +-- arbitrary value
        +-- spacing/字号/行高/圆角可无损表达 -> 改为标准 utility
        +-- calc()/CSS 变量/%/非 4px 整数倍/运行时拼接/第三方约束 -> 保留

Rules:

• Prefer converting colors, backgrounds, borders, fills, strokes, placeholders, and opacity into theme token utilities, for example text-brand-wzj6、bg-brand-wzj1、border-gray-wzj3、fill-brand-wzj6、bg-brand-wzj6/10。
• Avoid writing existing tokens as bare hex,[] arbitrary value、text-[var(--xxx)]、bg-(--brand-wzj6) or text-(color:--brand-wzj6)。
• Tailwind v4 important syntax uses a suffix:!text-font-wzj1 -> text-font-wzj1!，disabled:!bg-gray-f0 -> disabled:bg-gray-f0!。
• bg-gradient-to-r -> bg-linear-to-r; for equal width and height, prefer size-*。
• The spacing scale is converted by 1 = 4px , supporting Tailwind's existing 0.25 step; do not judge only by integer multiples of 4px. For example, min-w-[1180px] -> min-w-295、w-[360px] -> w-90、max-w-[720px] -> max-w-180、ml-[5px] -> ml-1.25。
• Replace only when the default token can express it losslessly:text-[14px] -> text-sm、text-[16px] -> text-base、leading-[20px] -> leading-5、leading-[22px] -> leading-5.5、rounded-[8px] -> rounded-lg、rounded-[12px] -> rounded-xl、rounded-[16px] -> rounded-2xl。
• rounded-[10px]、rounded-[14px] For cases like these that have no lossless equivalent, keep them as-is or list them as suggestions for confirmation; do not perform approximate replacements.
• Canonical classes suggested by the editor / linter must also be handled, for example, break-words -> wrap-break-word, and reorder according to the project's class sorting rules.

CSS Module

样式需求
  -> JSX className 是否足够表达？
     +-- 是：不新增 CSS Module
     +-- 否：伪元素/复杂后代选择器/第三方内部结构/@keyframes/打印样式
             -> 保留或新增 CSS Module
             -> 新文件 styles.module.css，导入名 styles
             -> 顶部优先 @reference '#global-css';，声明优先 @apply

When modifying legacy CSS Modules, migrate naming only when touched in this change and the reference scope is clear.

Ant Design Overrides

AntD 样式问题
  -> 全局 ConfigProvider / custom-antd.css / theme.css 是否已有表达？
     +-- 是：复用现有全局配置或 token
     +-- 否：查当前 antd 类型定义或源码确认槽位
             +-- 有 classNames 语义槽位 -> classNames
             +-- 需要运行时值或无稳定语义槽位 -> styles / style
             +-- 需要选择内部结构 -> 父级作用域 + 局部选择器

Local overrides must have a parent scope; do not add unbounded :global(.ant-*). When the project has not yet installed antd , do not add rules that depend on unconfirmed slot names.

Missing comma and selector false positives

CSS Missing comma / 选择器解析错误
  -> 是否是长后代选择器换行导致工具链兼容问题？
     +-- 是：缩短选择器 / 改直接子级 / 单行表达
     +-- 否：按真实 CSS 语法问题修复
  -> 运行格式化和 git diff --check

Do not add meaningless commas just to eliminate errors; preserve the original semantics.

Type handling boundaries

Style guideline adjustments do not take on type governance responsibilities.

• Do not proactively add, migrate, or rename type files.
• Do not decide types.ts、types.d.ts、*.types.ts naming strategies, etc., within this Skill; follow the current repository's type guideline documentation and existing code.
• When style fixes inevitably touch Props or type declarations, make only the minimal adjustments directly related to this style change.
• If a type definition placement issue is found but is not directly related to the style fix, list it as an unhandled item or suggest handing it off to a type handling Skill.

Examples

Scenario	Before adjustment	After adjustment
Theme token	border-[#02A999] bg-[#E8FFF9] text-[var(--brand-wzj6)]	border-brand-wzj6 bg-brand-wzj1 text-brand-wzj6
v4 important syntax	!text-font-wzj1 disabled:!bg-gray-f0	text-font-wzj1! disabled:bg-gray-f0!
spacing scale	min-w-[1180px] w-[360px] max-w-[720px] ml-[5px]	min-w-295 w-90 max-w-180 ml-1.25
Font size, line height, border radius	rounded-[12px] text-[14px] leading-[22px]	rounded-xl text-sm leading-5.5
canonical class	ml-1 break-words	wrap-break-word ml-1

Ant Design slot example:

// 调整前
<Tooltip overlayClassName="text-[var(--font-wzj1)]" />

// 调整后
<Tooltip classNames={{ root: 'text-font-wzj1!' }} />

Before handling, you must check the type definitions or source code of the currently installed version. Taking the overlay component of Ant Design 5.26.2 as an example,overlayClassName corresponds to classNames.root，overlayStyle corresponds to styles.root，overlayInnerStyle corresponds to styles.body; if the currently installed version is different, defer to the local types and source code.

Missing comma example:

/* 调整前 */
.wenshu-markdown
  [data-streamdown='table-body']
  [data-streamdown='table-row']:last-child
  [data-streamdown='table-cell'] {
  @apply border-b-0;
}

/* 调整后 */
.wenshu-markdown [data-streamdown='table-body'] > :last-child > [data-streamdown='table-cell'] {
  @apply border-b-0;
}

What not to do

• Do not change business behavior, request logic, permission logic, or state structure.
• Do not arbitrarily add local ConfigProvider。
• Do not add wrapper components or parallel components for a small amount of local styling.
• Do not expand to a full-repository migration just because inconsistent legacy naming was discovered.
• Do not add global tokens or global Ant Design overrides unless existing guidelines cannot express it and the user explicitly agrees.
• Do not replace icons, do not change interactions, and do not flatten design effects such as transparency, gradients, and glassmorphism into solid-color backgrounds.

Verification

完成改动
  -> git diff --check -- <处理过的文件>
  -> 修改 TS/TSX：运行项目已有 lint 或类型检查中与范围匹配的命令
  -> 修改可见 UI：能运行页面就验证目标页面；不能验证时说明原因
  -> 暂存区模式：再看 git status --short，并说明重新暂存情况

When unsure of the project command, it is recommended to run npm run lint and npm run check-types。

Output format

## 样式规范调整结果

- 范围：<目录 / 功能模块 / 文件 / Git 暂存区>
- 定位依据：<模块文档 / 路由配置 / 关键词 / 暂存文件列表>
- 已调整：<文件和关键改动>
- 未处理：<有意保留或需要确认的项，没有则写“无”>
- 联动影响：<是否涉及全局主题、Ant Design、路由或 Provider>
- 验证：<已运行命令和结果，或未运行原因>