marcop135/bullframe.css/bullframe-core

Name: bullframe-core
Author: marcop135

Claude Code and agent skill by marcop135/bullframe.css

Trust tier 3

community

Source check pending

Checking that the SKILL.md file is still in the repository.

Core conventions for writing HTML styled with Bullframe CSS. Use before any other Bullframe skill, and whenever choosing a build, scaffolding a page, theming with tokens, or deciding whether to write custom CSS.

Install

npx vskill@latest install marcop135/bullframe.css/bullframe-core

SKILL.md

Bullframe core conventions

Bullframe is one stylesheet of plain CSS. No build step, no JavaScript, no components to import. It styles semantic HTML, then adds .bf-* utilities on the class-based builds.

Read `_shared/conventions.md` and `_shared/builds.md` alongside this file. They hold the rule list and the build table this skill applies.

When to use

Any task that writes or edits HTML in a project that links Bullframe. Every other Bullframe skill assumes these rules.

Rules

Link exactly one base build. Two base builds cascade over each other and produce

wrong colours in dark mode.

Do not invent classes. Check api.json (shipped at

node_modules/bullframe.css/dist/skills/api.json, published at <https://bullframecss.marcopontili.com/api.json>). 179 classes, 60 tokens, and nothing else exists.

Prefer the element over the class. <button> is already styled; .bf-btn is for

links that must look like buttons and for buttons that need the framework's chrome.

Prefer a utility over a declaration. Before writing style="margin-bottom: 2rem",

use .bf-m-b-3.

Prefer a token over a literal. var(--bf-color-border), not #ccc. A token follows

your overrides and a literal does not. Some tokens keep their light value in dark builds, so check the dark column in CSS Variables before using one for a dark-mode colour.

Keep custom CSS in one project stylesheet, loaded after Bullframe, and confine it to

:root token overrides plus genuinely project-specific rules.

The root font-size is 62.5%, so 1rem is about 10px. --bf-body-font-size-rem is

1.6rem, which renders as 16px.

Page scaffold

Class-based, light. Every generated page starts here.

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
  </head>
  <body>
    <a class="bf-skip-link" href="#main-content">Skip to content</a>
    <main id="main-content" class="bf-container bf-container--break-md">
      <h1>Page title</h1>
      <p class="bf-lead">One sentence that says what this page is for.</p>
    </main>
  </body>
</html>

Classless, same page:

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-classless.min.css" />
  </head>
  <body>
    <main>
      <h1>Page title</h1>
      <p>One sentence that says what this page is for.</p>
    </main>
  </body>
</html>

There is no skip link on a classless build: .bf-skip-link is not in that stylesheet.

Layout

.bf-container caps width at 114rem and adds gutters. .bf-container--fluid is full width. .bf-row is a flex row with negative gutters, .bf-col-1 … .bf-col-12 are twelfths.

html

<main id="main-content" class="bf-container bf-container--break-md">
  <section class="bf-row">
    <div class="bf-col-8">Main column</div>
    <div class="bf-col-4">Sidebar</div>
  </section>
</main>

Columns in one row sum to 12 or less. Responsiveness is a container modifier: --break-xs stacks below 576px, --break-md below 768px, --break-lg below 992px. Use --break-md unless there is a reason not to.

Theming

html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
<style>
  :root {
    --bf-color-primary: rgb(84 47 194);
    --bf-color-primary-hover: rgb(64 32 160);
    --bf-color-focus-ring: rgb(84 47 194);
  }
</style>

That restyles links, primary buttons and focus rings across the page. Check contrast: the shipped blues are WCAG AA (4.5:1) on white, and a replacement has to clear the same bar.

Do not

Do not link bullframe.css and bullframe-dark.css together, or any two base builds.
Do not write .bf-col-md-6, .bf-col-sm-12, .bf-d-flex, .bf-mt-3, .bf-text-center

or .bf-card. None exist. The real names are .bf-col-6, .bf-display-flex, .bf-m-t-3, .bf-t-center, and a card is composed markup.

Do not add a theme-toggle script to get dark mode; pick a -system-default build.
Do not set outline: none anywhere.
Do not reimplement the grid, the spacing scale or the type scale in project CSS.
Do not add a CSS framework alongside Bullframe.

Canonical docs

Getting started: <https://bullframecss.marcopontili.com/getting-started.md>
Variables: <https://bullframecss.marcopontili.com/variables.md>
Theming: <https://bullframecss.marcopontili.com/theming.md>
API reference: <https://bullframecss.marcopontili.com/api-reference.md>
Every class and token as JSON: <https://bullframecss.marcopontili.com/api.json>

Security

Security scanPassed, 90 of 100Pattern checks on the skill's files.
Model reviewPassed

See the full security report

Quality evaluation

Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

SKILL.md in the repositoryCheckingsrc/skills/bullframe-core/SKILL.md

Popularity

7-day trend score: 0

Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

Claude Code
Cursor
GitHub Copilot
Windsurf
Codex
Gemini CLI
Cline
Amp
Roo Code
Goose
Continue
Kilo Code
Junie
Trae
OpenHands
Qwen Code
AI Agent
Tabnine Chat
Sourcegraph Cody
Amazon Q
Firebase Genkit
Sweep
Devin
Phind
Mentat
Claude Desktop
Aider
GPT Pilot
Plandex
bolt.new
v0
Replit Agent
Anse
TypingMind
BetterChatGPT
LibreChat
Warp AI
Pieces
Fig AI

Embed badge

[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/marcop135/bullframe.css/bullframe-core/badge)](https://verified-skill.com/skills/marcop135/bullframe.css/bullframe-core)

Something wrong with this skill or its page? Tell us.