agentleFS
Sign inStart free
Domenico-Tenace-Open-LabsDomenico-Tenace-Open-Labs/web-dev-agent/skills/bulma-expert/SKILL.md

bulma-expert

Skill3 starsChanged 14 days agoMITView on GitHub

Bulma CSS conventions — utility classes over overrides, customization via SASS/CSS variables, responsive helpers, columns layout. Load when the project uses Bulma (bulma classes in markup or `bulma/sass` import).

The file

We split this skill into the rules it gives an agent

1 rule. About 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈1

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Use Bulma as intended: utility classes on markup, no rewriting/overriding base components unless strictly necessary.

    line 14

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Bulma

Overview

Global rules + conventions Bulma CSS. Template-agnostic: any markup (Astro, plain HTML, React, Vue, etc.). Pair with skill astro-expert when project uses Astro, no duplication.

Core Principle

Use Bulma as intended: utility classes on markup, no rewriting/overriding base components unless strictly necessary. Before custom CSS, check Bulma covers it.

Customization

Bulma customization only via CSS/SASS variables, never direct class overrides.

Overrides in one dedicated file, path per project structure (e.g. styles/bulma-overrides.scss):

// styles/bulma-overrides.scss
@use "bulma/sass" with (
  $primary: #your-color,
  $family-sans-serif: '"Your Font", sans-serif'
);

No !important for conflicts — fix specificity upstream.

Custom Classes

Bulma genuinely insufficient:

  • Naming kebab-case: .card-featured, .hero-compact
  • Project prefix avoid collisions: .ag-card-featured (ag = Antigravity)
  • Custom classes separate files from Bulma, never mixed same block

Responsive

Bulma breakpoints + helpers default: use .is-hidden-mobile, .is-flex-desktop, etc. No custom media queries when Bulma covers case. Custom breakpoint truly required → document next to component/stylesheet using it.

Columns

Bulma column system (columns + column) layout backbone. Use it. Avoid raw flexbox/grid when Bulma can do job — unless design explicitly requires.

PR Checklist

  • No Bulma overrides via direct class rewrites
  • Customization via CSS/SASS variables
  • No !important for conflicts
  • Custom classes kebab-case, project-prefixed
  • Bulma helpers instead custom media queries where possible
  • Custom CSS dedicated files, not mixed Bulma blocks

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free