bulma-optimizer

---
name: bulma-optimizer
description: Audit and optimize Bulma (CSS-only framework, bulma 1.x) usage in a codebase for Bulma, bulma CSS, is-primary/columns/navbar-burger, Bulma theming, bundle/import cost, runtime and re-render cost, theming/SSR, accessibility/forms, copy-in or version drift, with real before/after measurement. Always produces a written findings report and a fix plan for approval before touching code. Use this whenever the user mentions Bulma, bulma CSS, is-primary/columns/navbar-burger, Bulma theming or "optimize my UI" -- even if they never say "audit" or "optimize".
---

# Bulma Optimizer

Bulma is a CSS-only framework: no runtime, no component package, no JS behavior. Optimize by importing only the Sass you use, customizing variables, and writing the small amount of JS that interactive patterns (navbar, dropdown, modal) need. Watch for a second CSS framework fighting its reset.

## Workflow

### 1. Scope (quick)

- Find the app root and detect Bulma usage: `bulma 1.x`. Record the version, framework (React/Next/Vue/Svelte/Solid/Angular or HTML), styling system, and whether the library is a package, a CSS-only kit, or copied source.
- Run `python <skill-dir>/scripts/audit.py <project-root>` -- static scan of `package.json`, config/CSS files and source for version drift, provider/config drift, import and theme issues, a11y gaps, heavy components and upgrade risk, with file:line evidence. Use `--json` to post-process.
- Classify the pain: bundle/import cost, runtime/re-render cost, theming/SSR style flash, accessibility/forms, large tables/lists, or migration/upgrade. Ask which hurts if unclear.
- Read `references/tooling.md` once: what can be measured here.

- Check how Bulma is imported (full CSS vs Sass modules), whether a Sass build exists, and which interactive patterns rely on custom JS.

### 2. Audit

The script finds cheap leads; you find the rest by reading. Read the install/config, the global CSS/theme file, the provider or plugin setup, and the 3-5 most-used components. Load only what applies:

| Area | Reference |
|------|-----------|
| Install, config, provider/plugin, theming, SSR | `references/setup.md` |
| Bundle/imports, runtime, a11y/forms, tables, upgrades | `references/optimizations.md` |
| Measurement and honest reporting | `references/tooling.md` |

**Measure, never guess.** Build for production and measure the real route/bundle. Inspect SSR HTML for style tags and dark-mode flash; run axe/Playwright on dialogs, menus, forms and tables. Component count, bundle bytes and a11y violations are evidence; "feels heavy" is not.

Mark each finding **Confirmed** (build/analyzer/axe/code evidence) or **Suspected** (needs measuring).

### 3. Report

Fill `assets/report-template.md`, save it as `BULMA_OPTIMIZATION_REPORT.md` in the project root, and show the user. Five-line summary, findings table by impact/effort, then per-finding detail (evidence, why it hurts, fix, risk, visual/behavior impact). Group near-duplicates.

### 4. Plan -- then stop for approval

Use plan mode: `EnterPlanMode` (load with ToolSearch if deferred), write the plan, present with `ExitPlanMode`; if unavailable show it in chat and wait for an explicit "go". Structure:

1. **Quick wins** -- trim imports, use path imports, add provider/plugin correctly, add missing labels/titles, move heavy components off the initial route, remove per-row overlays, align theme tokens, add SSR style/cache setup. Low risk.
2. **Structural** -- split component boundaries, virtualize tables, lazy-load heavy widgets, consolidate theming, migrate variants/tokens, fix form composition, deduplicate copied components. Name each behavior change.
3. **Heavy** -- major upgrade, primitive-base change, CSS-only to styled kit (or reverse), Tailwind 3 to 4, copy-in registry extraction, SSR architecture. Separately approved.
   Each step: files touched, expected effect, how to verify, how to roll back.

### 5. Fix

Only approved items, in small groups. After each: typecheck, lint, tests, production build, and a visual/axe check on affected components. A break must trace to one change. Do not mix a major migration with optimization edits. If a change alters a public component API, theme tokens or SSR behavior, stop and ask.

### 6. Verify and wrap up

Re-measure the same routes/components: route JS/CSS, SSR styles/theme, axe violations, dialog/form keyboard flow, table interaction. State plainly what could not be measured. End with deferred items and one suggested next step.

## Principles

- **CSS-only means behavior is yours.** Budget JS and a11y work.
- **Import modules, not the world.** Sass + purge beats the full file.
- **One reset wins.** Don't stack frameworks.

## Docs

- https://bulma.io/documentation/

• LICENSE 1 KB
• README.md 1 KB
• SKILL.md 5 KB
• assets/report-template.md 1 KB
• references/optimizations.md 1 KB
• references/setup.md 1 KB
• references/tooling.md 1 KB
• scripts/audit.py 9 KB