Bestax CSS Size Optimizer

安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install bestax-optimize
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 bestax-optimize。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

Bestax CSS Size Optimizer 帮助开发者缩减使用 @allxsmith/bestax-bulma 构建的应用的样式表体积。它首先测量生产环境中原始 CSS 和 gzip CSS 的大小，然后指导你选择实用方案：选择更轻量的预构建 CSS 风格、仅构建所需的 Bulma 和 Bestax Sass 模块，或移除未使用的导入和图标资源。
此工作流程优先考虑经过测量、真实可靠的节省，而非主观推断：gzip 大小代表传输体积，每项更改后都应重新测量；如果应用使用辅助属性或 Bulma 辅助类，则避免使用 no-helpers 风格。此 Openclaw Skills 条目旨在让 CSS 优化切实可行，同时不添加第三方清理工具或后处理插件。

应用场景

生产环境样式表超出 CSS 大小预算，或被 Lighthouse 审计标记。
Bestax Bulma 应用需要更小的传输体积，并且可以使用更轻量的随附 CSS 风格。
应用需要一个定制样式表，其中仅包含所用的 Bulma 组件和 Bestax 扩展。
开发者想确认大型原始
dist/
CSS 文件经过 gzip 压缩后是否真的很大。
脚手架生成的应用可能包含未使用的图标字体包、CSS 导入或 Ionicons CDN 脚本。
代码库使用命名空间导入，需要通过命名导入恢复 JavaScript tree shaking。

工作原理

运行生产构建，并记录生成的 CSS 原始字节数和 gzip 字节数。
将 gzip 传输大小与应用预算进行比较。如果已经符合预算，则说明无需更改 CSS。
首先尝试成本最低且合适的手段：切换到更轻量的预构建风格；但在选择会移除功能的风格前，先核实配色方案假设和辅助功能的使用情况。
如果还需要进一步缩减，则创建模块化 Sass 入口点，包含所需的基础样式和主题样式、使用中的 Bulma 模块、Bestax 扩展，以及必要的辅助类别。
检查导入和图标资源，找出可避免的开销，例如命名空间导入或未使用的图标库。
每次更改后都重新构建并测量；报告更改前后的原始值和 gzip 值，不要声称未经验证的节省。

配置指南

在应用目录中运行以下命令，建立生产环境基准：
npm run build
wc -c dist/assets/.css
gzip -c dist/assets/.css | wc -c
如需快速切换风格，请更新 src/main.tsx 或 src/main.jsx 中的 CSS 导入。可选项包括 @allxsmith/bestax-bulma/bestax.css、@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css 和 @allxsmith/bestax-bulma/versions/bestax-no-helpers.css。仅当应用使用固定配色方案时，才使用 no-dark-mode。选择 no-helpers 前，请搜索 Bestax 辅助属性和原始 Bulma 辅助类；只要存在任何用法，此风格就不适用，因为这些辅助功能将停止工作。
如需模块化 Sass 构建，请安装 Sass 并创建 src/styles.scss：
npm install -D sass
@use 'bulma/sass/utilities' with (
$primary: #1e6b99
);
@use 'bulma/sass/base';
@use 'bulma/sass/themes';
@use 'bulma/sass/elements/button';
@use 'bulma/sass/components/navbar';
@use '@allxsmith/bestax-bulma/scss/components/dialog';
@use 'bulma/sass/helpers/spacing';
在加载 utilities 的模块之前，先配置 utilities。仅包含应用所需的 Bulma 组件、Bestax 扩展和辅助类别。将预构建 CSS 导入替换为 import './styles.scss';，然后重新构建并测量。完整的组件到 partial 对照表及示例请参阅 references/modular-build.md。
Bestax CSS Size Optimizer 数据架构与分类体系
此技能使用应用现有的源代码和构建产物，而不是生成单独的数据库或元数据存储。
项目 作用
src/main.tsx 或 src/main.jsx 包含预构建样式表导入的入口点；将此导入切换为所选风格或 ./styles.scss。
src/styles.scss 可选的手动编写 Sass 入口点，列出已配置的 utilities、所需的基础样式和主题、选定的 Bulma 模块、Bestax 扩展及所需辅助功能。
dist/assets/*.css 每次构建后测量的生产环境 CSS 产物。
package.json 依赖清单；模块化 Sass 工作流程需将 sass 添加为开发依赖，并检查是否存在未使用的图标字体包。
index.html 可能包含未使用的 Ionicons CDN 脚本标签。
references/modular-build.md 技能参考资料，包含组件到 partial 的对照表、扩展清单、辅助类别和构建示例。
每次比较都应记录 CSS 原始字节数和 gzip 字节数，并为每项优化记录更改前后的数值。风格的大致大小取决于发布版本；请测量已安装的版本，不要将参考数值视为保证。

高级特性

采用优先考虑最低成本的决策流程：切换预构建风格、模块化 Sass 构建，然后清理导入和图标资源。
强制在每次优化后进行测量，并区分原始构建大小与 gzip 传输大小。
no-helpers
设置安全检查，涵盖 Bestax 辅助属性、Bulma 辅助类，以及该风格会移除的 Bestax 扩展辅助功能。
提供带前缀 CSS 风格的兼容性指导：与
配套使用；带前缀的变体用于避免冲突，而非缩减体积。
支持使用 Bulma 自带的 Sass 源文件和 Bestax partial 进行模块化编译，无需第三方 CSS 清理工具或后处理器。
指出将命名空间导入替换为命名导入可改善 JavaScript tree shaking，并将其节省归为 JavaScript 方面，而非 CSS 缩减。
如果应用未使用，则标记未使用的 Font Awesome、Material Design、Material Icons、Material Symbols 和 Ionicons 资源以供移除。

name: bestax-optimize description: Reduce the built CSS size of an app using @allxsmith/bestax-bulma — measure raw and gzip size, then apply the cheapest lever that fits (lighter prebuilt CSS flavor, hand-rolled modular Sass build, import and icon-asset hygiene). Use when the CSS bundle looks too big, a size budget or Lighthouse audit flags stylesheet weight, switching bestax.css to a versions/*.css flavor, or setting up a modular @use Bulma/Sass build.

Optimizing CSS size with @allxsmith/bestax-bulma

The JS side is tree-shakable (the entire library is ~49 KB min+gzip). The stylesheet is not: a prebuilt flavor ships all of Bulma + the bestax extras regardless of which components the app renders. Judge stylesheet weight by the gzipped transfer size — never the raw dist/ number.

Always measure first

Run the production build, then measure the built CSS — raw and gzip:

npm run build

wc -c dist/assets/.css # raw bytes (what Vite reports)
gzip -c dist/assets/.css | wc -c # transfer bytes (what users download)

Re-measure after every step below and report the before/after delta (raw + gzip). Never claim a saving without a number.

⚠️ ~800 KB raw is ~82 KB over the wire. Seeing ~800 KB of CSS in dist/ is expected with the default flavor, not a build misconfiguration — servers and CDNs gzip/brotli by default. If the gzip number is already within the app's budget, say so and stop: "your CSS is already fine" is a valid, honest outcome.

Decision flow

Cheapest first. Use only the library's own shipped CSS builds and SCSS sources — do not add third-party build plugins (no CSS purgers/post-processors).

Flavor switch — one-line import change, minutes (up to ~15 KB gzip).
Modular Sass build — small @use file, the biggest honest win.
Import & icon-asset hygiene — minor; JS and icon fonts, not the Bulma CSS.
Lever 1 — lighter prebuilt flavor

Swap the single CSS import (in src/main.tsx / src/main.jsx) between the shipped flavors. Measured sizes drift slightly between releases — hence measure:

Flavor Import Raw Gzip

complete import '@allxsmith/bestax-bulma/bestax.css'; ~800KB ~82 KB
no-dark-mode import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css'; ~680KB ~70 KB
no-helpers import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css'; ~595KB ~67 KB

Prefixed variants (versions/bestax-prefixed.css 875 KB/84 KB, versions/bestax-no-helpers-prefixed.css 655 KB/69 KB) exist for CSS-collision compatibility, not size — a prefixed flavor must pair with at the app root, and switching a non-prefixed app to one is never a size optimization.

no-dark-mode (~12 KB gzip saved) — only when the app pins a single color scheme (a fixed Theme colorMode / data-theme).
no-helpers (~15 KB gzip saved) — hard gate below.

⚠️ The no-helpers gate: check for helper props first. That flavor drops every class the helper props compile to — components still render, but the props silently do nothing. Before recommending it, grep the app's source for helper props on bestax components:

spacing: m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py
color: color, backgroundColor (+ colorShade/backgroundColorShade), textColor, bgColor
typography: textSize, textAlign, textTransform, textWeight, fontFamily
display/visibility: display, visibility (+ displayMobile…visibilityFullhd viewport variants)
flexbox: flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink
misc: float, overflow, overflowX, overflowY, overlay, interaction, cursor, radius, shadow, skeleton, clearfix, pos, relative, fullHeight, aspectRatio

…and for raw Bulma helper classes in className strings (is-, has-, m*-, p-, is-size-, is-hidden*, is-flex*). Any hit → do not use no-helpers; fall back to no-dark-mode or Lever 2. The bestax extras helpers (is-cursor-*, sizing) are dropped too.

Lever 2 — modular Sass build

Compile only the Bulma modules + bestax extras partials the app actually uses. Needs the sass compiler as a dev dependency (Bulma's own build tool — Vite compiles .scss natively):

npm install -D sass

Create src/styles.scss — base + themes always come first:

// Configure shared variables FIRST (before anything loads utilities) —
// the prebuilt flavors set this brand primary; omit it and buttons revert
// to Bulma's default turquoise:
@use 'bulma/sass/utilities' with (
$primary: #1e6b99
);

// Required base: reset + CSS variable definitions
@use 'bulma/sass/base';
@use 'bulma/sass/themes';

// One line per stock Bulma component the app imports…
@use 'bulma/sass/elements/button';
@use 'bulma/sass/components/navbar';
// …and per bestax extras component:
@use '@allxsmith/bestax-bulma/scss/components/dialog';
// Helper categories only if the app uses those helper props:
@use 'bulma/sass/helpers/spacing';

Then replace the prebuilt CSS import in src/main.tsx with import './styles.scss';, build, and measure. Derive the @use list from the components the app imports from @allxsmith/bestax-bulma — the full component→partial mapping, the authoritative extras partial inventory, and a worked example are in references/modular-build.md.

Lever 3 — import & icon-asset hygiene (minor)
Named imports. import * as Bestax from '@allxsmith/bestax-bulma' defeats tree shaking. Convert to named imports (import { Button, Card } from …) — a JS-side saving (whole library ≈ 49 KB min+gzip), so report it honestly as minor.
Unused icon libraries. Scaffolded apps may carry an icon library the app never uses: icon-font packages in package.json (@fortawesome/fontawesome-free, @mdi/font, material-icons, material-symbols) with their CSS imports in src/main.*, or Ionicons CDN tags in index.html. Icon fonts often outweigh Bulma itself — if no uses that library, delete the dependency/import/script. Pure win, no tooling.

References

references/modular-build.md — full Lever 2 procedure: component→partial mapping, the authoritative extras partial inventory, helper categories, and a worked styles.scss.
Docs: Optimizing CSS Size · Modular — Option C · CSS Variations
bestax-migrate
Bestax Bulma 主题定制