bestax-theming

bestax-theming is a skill for Claude Code, Codex from allxsmith/bestax. It costs 84 tokens per session (1,780 once invoked), scanned A, original, MIT.

A guide for changing the colors, fonts, spacing, corner shapes, branding, and light or dark mode of apps built with bestax-Bulma.

In plain words
What is it for?
Use it to configure brand colors, Bulma CSS variables, global or scoped themes, light/dark/system color modes, fonts, spacing, radii, and the app's icon setup.
Why use it?
It explains how to change the app-wide visual system through shared settings instead of restyling every component individually.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to configure brand colors, Bulma CSS variables, global or scoped themes, light/dark/system color modes, fonts, spacing, radii, and the app's icon setup.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/allxsmith/bestax/bestax-theming
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add allxsmith/bestax --skill bestax-theming
Clone the repo
git clone --depth 1 https://github.com/allxsmith/bestax

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for bestax-theming

README.md
[![agentmods](https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-theming/github.svg)](https://agentmods.dev/skills/allxsmith/bestax/bestax-theming)
Your own site
<a href="https://agentmods.dev/skills/allxsmith/bestax/bestax-theming"><img src="https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-theming/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for bestax-theming

Your own site · 80×15
<a href="https://agentmods.dev/skills/allxsmith/bestax/bestax-theming"><img src="https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-theming.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 84 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,780 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00084 $0.01780
Opus 5 $0.00042 $0.00890
Sonnet 5 $0.00017 $0.00356
Haiku 4.5 $0.00008 $0.00178

Measured 10d ago against content hash c89066a6beb9, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

bestax-theming scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/bestax-theming/SKILL.md · 122 lines

How it starts

The opening of the file, as written. The whole thing — 122 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Theming @allxsmith/bestax-bulma

@allxsmith/bestax-bulma wraps Bulma 1.x, which is themed through --bulma-* CSS custom properties. Theme an app by overriding the right variables — no component re-styling required.

Approach

Recolor a brand color by overriding its hue/saturation/lightness trio — Bulma derives every shade, light/dark, and invert variant from --bulma-<color>-h / -s / -l. Override the trio and the whole palette follows.

Choose an override path:

  • Theme component (runtime, preferred). Exported from the package. Pass named HSL props (primaryH, primaryS, primaryL, …) and/or bulmaVars={{ '--bulma-*': '…' }} for everything else. Add isRoot to inject the variables globally at :root (once, at the app root); omit it to scope the variables to the wrapped subtree.
  • Plain CSS. Set :root { --bulma-primary-h: …; } (or any selector) directly.
  • Build-time Sass. @use 'bulma/sass' with ($primary: #1e6b99) when compiling Bulma's Sass.

For dark mode, pass colorMode to Theme ('light' | 'dark' | 'system'). It writes Bulma's data-theme attribute on <html>, flipping the light/dark scheme — global, even on a scoped Theme; 'system' follows the OS prefers-color-scheme. Drive it from state on the app-root Theme: <Theme isRoot colorMode={mode}>.

Contrast rules (dark mode is on by default)

When nothing sets a data-theme attribute (omitting colorMode preserves an existing one, but apps that never configured it have none), Bulma follows the visitor's OS: --bulma-text, --bulma-scheme-main, etc. flip on a dark-mode machine even if the design never intended a dark theme. Custom fixed tokens (--my-canvas: #f6f4ec) do not flip — producing near-white Bulma text on the author's fixed light background. Apply exactly one of these rules whenever custom color tokens or fixed-color surfaces exist:

  • Single-mode design → pin the scheme. <Theme isRoot colorMode="light"> (or "dark"), so an OS preference can never invert text out from under the fixed palette.
  • Both modes → no exposed fixed tokens. Derive custom tokens from scheme variables (--my-canvas: var(--bulma-scheme-main)) — or flip them yourself under both dark-mode paths: [data-theme='dark'] and @media (prefers-color-scheme: dark) scoped to :root:not([data-theme]), since colorMode="system" removes the attribute (snippets in references/css-variables.md). Alternating/tinted section bands are first-class props: bgColor="scheme-main-bis" (then "scheme-main-ter") on Section (also Hero, Footer, Container, Box, Card) renders a scheme-tracking inline background — never bgColor="light": light/white/grey helper backgrounds are fixed colors that fight dark mode. Keep the derive-from-scheme-vars CSS for other custom surfaces. Theme bulmaVars now accepts --bulma-scheme-main/-bis/-ter (and the -invert trio) overrides, so one Theme re-tints every band at once.
  • Fixed-color surface → fixed-color content. On a surface that never changes (a dark hero, a brand banner), pin the content's colors too: solid/filled buttons and explicit text colors, never scheme-derived defaults or thin outlines that depend on the flipping scheme.

Read the full file on GitHub · 122 lines

Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 10d ago First seen · 122 lines · 84 tokens per session scan A c89066a6beb9

Subscribe to this mod's changes

bestax-theming is a skill published in the GitHub repository allxsmith/bestax (11 stars, last pushed today), licensed MIT. It adds 84 tokens to every session and 1,780 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

magic-ui

Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.

magicuidesign/magicui · 56 tokens

stitch-react-components

Convert Stitch HTML and screenshots into modular Vite/React/TypeScript components, or sync existing components to updated Stitch designs, with local architecture and validation checks.

PracticalSwan/agent-skills · 37 tokens

React Component Patterns

Use this skill when you’re building or refactoring React components in a production app and want consistent patterns for typing, composition, state, and performance without introducing premature abstraction.

AmariahAK/atlarix-skills · 3 tokens

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

vercel/next.js · 95 tokens

next-cache-components-optimizer

Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…

vercel/next.js · 170 tokens

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

shadcn-ui/ui · 61 tokens