create-bestax 3.1.1 → 3.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bestax",
-  "version": "3.1.1",
+  "version": "3.1.2",
   "description": "Create a new bestax-bulma project",
   "type": "module",
   "bin": {

package/templates/skills/bestax-custom-component/SKILL.md

@@ -29,8 +29,12 @@ call.
 
 Where to look:
 
-- `bulma-ui/src/index.ts` — the full export list; scan it for the name and its synonyms.
-- `docs/docs/api/{elements,components,form}/` — one doc page per shipped component.
+- `references/component-catalog.md` — **start here.** Every documented component with a one-line
+  purpose, grouped by category (generated from the API docs). Scan it for the name and its
+  synonyms before anything else.
+- `bulma-ui/src/index.ts` — the full export list; check here for anything not yet documented (e.g.
+  raw `*Base` form variants) that the catalog omits.
+- `docs/docs/api/{elements,components,form}/` — one doc page per shipped component (full props).
 - Storybook titles — `Elements/*`, `Components/*`, `Form/*`.
 
 Then decide, and **surface the decision to the user**:
@@ -103,7 +107,7 @@ export const MyComponent = forwardRef<HTMLDivElement, MyComponentProps>(
     // 1. Pull Bulma helper classes (m/p, text*, display, etc.) out of props.
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
 
-    // 2. Build this component's own classes (respects the Config classPrefix).
+    // 2. Build this component's own classes (respects the ConfigProvider classPrefix).
     const mainClasses = usePrefixedClassNames('mycomponent', {
       [`is-${color}`]: !!color,
       [`is-${size}`]: !!size,
@@ -131,7 +135,7 @@ Rules that keep components consistent:
 - **Always `Omit<…, 'color'>`** from both `HTMLAttributes` and `BulmaClassesProps` when the
   component exposes its own typed `color`, so the native/helper `color` doesn't collide.
 - **Never hand-build class strings.** Use `usePrefixedClassNames(base, conditionalMap)` so the
-  optional `classPrefix` from `Config` is honored, then `classNames(...)` to merge.
+  optional `classPrefix` from `ConfigProvider` is honored, then `classNames(...)` to merge.
 - **Spread `rest`, not `props`**, onto the DOM node — `useBulmaClasses` has already stripped the
   helper props out of `rest`, so they don't leak to the DOM as invalid attributes.
 - **Set `displayName`** on `forwardRef` components (needed for tests and Storybook autodocs).
@@ -199,7 +203,7 @@ $mycomponent-padding: 1rem !default;
 ```
 
 Why this matters: registering vars makes the component themeable at runtime (the docs site and
-`Theme`/`Config` providers override `--bulma-*` properties), and the `iv.$class-prefix` keeps
+`Theme`/`ConfigProvider` providers override `--bulma-*` properties), and the `iv.$class-prefix` keeps
 the component working when consumers opt into a class prefix to avoid collisions.
 
 The canonical reference file is `bulma-ui/src/scss/components/_dialog.scss`.

package/templates/skills/bestax-custom-component/references/api.md

@@ -37,7 +37,7 @@ Accepts strings, numbers, arrays, and objects (truthy keys included); flattens r
 de-dupes. Related exports:
 
 - `usePrefixedClassNames(...args)` — **use this in components.** Reads `classPrefix` from the
-  `Config` context and prefixes every class. With `classPrefix="bulma-"`,
+  `ConfigProvider` context and prefixes every class. With `classPrefix="bulma-"`,
   `usePrefixedClassNames('button', { 'is-primary': true })` → `'bulma-button bulma-is-primary'`.
 - `prefixedClassNames(prefix, ...args)` — non-hook form; pass `undefined` for no prefix.
 - `createPrefixedClassNames(prefix)` — factory returning a bound `classNames`.
@@ -57,10 +57,11 @@ Storybook `argTypes`/tests:
 export type MyColor = (typeof validColors)[number];
 ```
 
-## `Config` / `Theme` — `helpers/Config.tsx`, `helpers/Theme.tsx`
+## `ConfigProvider` / `Theme` — `helpers/Config.tsx`, `helpers/Theme.tsx`
 
-`Config` provides the runtime `classPrefix` consumed by `usePrefixedClassNames` (opt-in class
-prefixing to avoid collisions). `Theme` overrides `--bulma-*` custom properties at runtime —
+`ConfigProvider` provides the runtime `classPrefix` (and `iconLibrary`) consumed via `useConfig`;
+`classPrefix` feeds `usePrefixedClassNames` (opt-in class prefixing to avoid collisions). `Theme`
+overrides `--bulma-*` custom properties at runtime —
 which is exactly why component SCSS must register its vars via `cv.register-vars` rather than
 hard-coding values.
 

package/templates/skills/bestax-custom-component/references/component-catalog.md

@@ -0,0 +1,125 @@
+<!-- GENERATED by scripts/gen-component-catalog.mjs — do not edit by hand. -->
+<!-- Regenerate with `npm run gen:catalog`. Source: docs/docs/api/**. -->
+
+# Component catalog
+
+Every **documented** component of `@allxsmith/bestax-bulma`, so you **don't
+reinvent one that already exists**. Import everything from the package root
+(`@allxsmith/bestax-bulma`). Scan this list first; if a component fits, use it
+instead of hand-writing markup.
+
+- **Full props are not listed here** (that would be too large to keep in context).
+  Follow a component's link for its complete prop table, or see the per-skill
+  references. Every component also accepts the shared Bulma **helper props**
+  (`m`/`p` spacing, `textColor`/`bgColor`, `textAlign`, `display`, flex, …) —
+  documented once in `references/api.md`.
+- **Compound components** expose sub-parts via dot access (e.g. `Card.Header`,
+  `Navbar.Item`, `Tabs.Tab`, `Hero.Body`); see the component's linked page for the
+  full set.
+- Raw `*Base` form exports (`InputBase`, `SelectBase`, `TextAreaBase`, …) are
+  escape-hatch variants of the convenience wrappers above them; see the Form docs.
+
+81 documented components. Generated from the API docs — every exported
+component is guaranteed to appear (the generator fails if one lacks an API page).
+
+## Elements
+
+- [Block](https://bestax.io/docs/api/elements/block) — The `Block` component renders a simple container with Bulma's `.block` class, adding vertical margin between sections of content.
+- [Box](https://bestax.io/docs/api/elements/box) — The `Box` component renders a bordered, padded container with an optional shadow using Bulma's `.box` class.
+- [Button](https://bestax.io/docs/api/elements/button) — The `Button` component provides a flexible and highly customizable button for your Bulma React UI.
+- [Buttons](https://bestax.io/docs/api/elements/buttons) — The `Buttons` component lets you group multiple `Button` elements together with Bulma's spacing, alignment, and add-on features.
+- [Code](https://bestax.io/docs/api/elements/code) — The `Code` component renders a styled `<code>` element with Bulma helper class integration.
+- [Content](https://bestax.io/docs/api/elements/content) — The `Content` component applies Bulma’s typographic styles to its children, enhancing the appearance of HTML elements like paragraphs, headings, lists…
+- [Delete](https://bestax.io/docs/api/elements/delete) — The `Delete` component provides a Bulma-styled close/delete button for dismissing modals, notifications, tags, messages, and more.
+- [Divider](https://bestax.io/docs/api/elements/divider) — The `Divider` component renders a styled horizontal rule (`<hr>`) element with Bulma helper class integration.
+- [Emphasis](https://bestax.io/docs/api/elements/emphasis) — The `Emphasis` component renders a styled `<em>` element with Bulma helper class integration.
+- [Figure](https://bestax.io/docs/api/elements/figure) — The `Figure` component renders a styled `<figure>` element with Bulma helper class integration.
+- [Icon](https://bestax.io/docs/api/elements/icon) — The `Icon` component is a Bulma-styled wrapper for displaying icons from various libraries (Font Awesome, Material Design Icons, Ionicons…
+- [IconText](https://bestax.io/docs/api/elements/icontext) — The `IconText` component provides a Bulma-styled horizontal arrangement of one or more `Icon` components and optional text.
+- [Image](https://bestax.io/docs/api/elements/image) — The `Image` component wraps images, iframes, or custom content in a Bulma-styled container, supporting fixed sizes, aspect ratios, rounded corners…
+- [Link](https://bestax.io/docs/api/elements/link) — The `Link` component renders a styled anchor (`<a>`) element with Bulma helper class integration.
+- [LinkButton](https://bestax.io/docs/api/elements/linkbutton) — The `LinkButton` component renders a `<button>` that visually looks like text or a link.
+- [ListItem](https://bestax.io/docs/api/elements/listitem) — The `ListItem` component renders a styled list item (`<li>`) element with Bulma helper class integration.
+- [Notification](https://bestax.io/docs/api/elements/notification) — The `Notification` component is a Bulma-styled alert/message area for providing feedback, warnings, or information to users.
+- [OrderedList](https://bestax.io/docs/api/elements/orderedlist) — The `OrderedList` component renders a styled ordered list (`<ol>`) element with Bulma helper class integration.
+- [Paragraph](https://bestax.io/docs/api/elements/paragraph) — The `Paragraph` component renders a styled `<p>` element with Bulma helper class integration.
+- [Pre](https://bestax.io/docs/api/elements/pre) — The `Pre` component renders a styled `<pre>` element with Bulma helper class integration.
+- [Progress](https://bestax.io/docs/api/elements/progress) — The `Progress` component displays a Bulma-styled progress bar.
+- [Skeleton](https://bestax.io/docs/api/elements/skeleton) — The `Skeleton` component provides a Bulma-styled skeleton loader for React applications, useful for indicating that content is loading.
+- [Span](https://bestax.io/docs/api/elements/span) — The `Span` component renders a styled inline `<span>` element with Bulma helper class integration.
+- [Strong](https://bestax.io/docs/api/elements/strong) — The `Strong` component renders a styled `<strong>` element with Bulma helper class integration.
+- [SubTitle](https://bestax.io/docs/api/elements/subtitle) — The `SubTitle` component renders a Bulma-styled subtitle (secondary heading), supporting sizes `1-6` and rendering as any heading or paragraph element (`h1-h6`…
+- [Table](https://bestax.io/docs/api/elements/table) — The `Table` component and its subcomponents provide a highly composable, Bulma-styled table system for React.
+- [Tag](https://bestax.io/docs/api/elements/tag) — The `Tag` component renders a Bulma-styled label or badge.
+- [Tags](https://bestax.io/docs/api/elements/tags) — The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
+- [Title](https://bestax.io/docs/api/elements/title) — The `Title` component renders a Bulma-styled title (heading), supporting sizes `1`-`6`, spacing, and rendering as any heading or paragraph element (`h1`-`h6`…
+- [UnorderedList](https://bestax.io/docs/api/elements/unorderedlist) — The `UnorderedList` component renders a styled unordered list (`<ul>`) element with Bulma helper class integration.
+
+## Components
+
+- [Breadcrumb](https://bestax.io/docs/api/components/breadcrumb) — The `Breadcrumb` component renders a Bulma-styled breadcrumb navigation.
+- [Card](https://bestax.io/docs/api/components/card) — The `Card` component renders a Bulma-styled card with optional header, image, content, and footer.
+- [Carousel](https://bestax.io/docs/api/components/carousel) — The `Carousel` component provides an image/content slider with navigation arrows and indicators.
+- [Collapse](https://bestax.io/docs/api/components/collapse) — The `Collapse` component provides an expandable/collapsible content panel.
+- [Dialog](https://bestax.io/docs/api/components/dialog) — The `Dialog` component provides confirmation and alert dialogs with customizable actions.
+- [Dropdown](https://bestax.io/docs/api/components/dropdown) — The `Dropdown` component provides Bulma's versatile dropdown menu for your Bulma React UI.
+- [Loading](https://bestax.io/docs/api/components/loading) — The `Loading` component provides a loading overlay with a spinner animation.
+- [Menu](https://bestax.io/docs/api/components/menu) — The `Menu` component provides Bulma's vertical navigation menu: a simple, accessible sidebar or section menu for your Bulma React UI.
+- [Message](https://bestax.io/docs/api/components/message) — The `Message` component provides Bulma's flexible notice/message box for your Bulma React UI.
+- [Modal](https://bestax.io/docs/api/components/modal) — The `Modal` component provides a flexible, accessible modal dialog for your Bulma React UI.
+- [Navbar](https://bestax.io/docs/api/components/navbar) — The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
+- [Pagination](https://bestax.io/docs/api/components/pagination) — The `Pagination` component provides a flexible, composable Bulma pagination navigation for your Bulma React UI.
+- [Panel](https://bestax.io/docs/api/components/panel) — The `Panel` component implements Bulma's versatile panel block for React.
+- [Sidebar](https://bestax.io/docs/api/components/sidebar) — The `Sidebar` component provides a slide-out navigation panel that appears from the left or right side of the screen.
+- [Steps](https://bestax.io/docs/api/components/steps) — The `Steps` component provides a multi-step progress indicator for wizard flows, checkout processes, or any multi-step workflow.
+- [Tabs](https://bestax.io/docs/api/components/tabs) — The `Tabs` component provides flexible and fully-featured Bulma tab navigation for your Bulma React UI.
+- [Toast](https://bestax.io/docs/api/components/toast) — The `Toast` component provides brief notification messages with optional action and cancel buttons.
+- [Tooltip](https://bestax.io/docs/api/components/tooltip) — The `Tooltip` component displays helpful information when users hover over or focus on an element.
+
+## Form
+
+- [Autocomplete](https://bestax.io/docs/api/form/autocomplete) — The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
+- [Checkbox](https://bestax.io/docs/api/form/checkbox) — The `Checkbox` component provides a Bulma-styled checkbox input.
+- [Checkboxes](https://bestax.io/docs/api/form/checkboxes) — The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
+- [Control](https://bestax.io/docs/api/form/control) — The `Control` component is a Bulma-styled wrapper for form controls (`Input`, `Select`, `TextArea`, etc.), supporting icons (left/right), loading state…
+- [DateInput](https://bestax.io/docs/api/form/datetime/dateinput) — The `DateInput` component is a form input that opens a popover calendar for date selection.
+- [DateTimeInput](https://bestax.io/docs/api/form/datetime/datetimeinput) — The `DateTimeInput` combines a calendar and a time **wheel spinner** in a single popover — an iOS-style layout.
+- [Field](https://bestax.io/docs/api/form/field) — The `Field` component is a Bulma-styled form field container.
+- [File](https://bestax.io/docs/api/form/file) — The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
+- [Input](https://bestax.io/docs/api/form/input) — The `Input` component provides a Bulma-styled text input, supporting colors, sizes, rounded corners, static/read-only state, hover/focus/loading states…
+- [Numberinput](https://bestax.io/docs/api/form/numberinput) — The `Numberinput` component provides a number input with increment/decrement buttons.
+- [Radio](https://bestax.io/docs/api/form/radio) — The `Radio` component provides a Bulma-styled radio button input with flexible labels and helper classes.
+- [Radios](https://bestax.io/docs/api/form/radios) — The `Radios` component wraps multiple `Radio` components in a Bulma-styled group.
+- [Rate](https://bestax.io/docs/api/form/rate) — The `Rate` component provides a star/icon-based rating system.
+- [Select](https://bestax.io/docs/api/form/select) — The `Select` component provides a Bulma-styled dropdown for selecting one or more options.
+- [Slider](https://bestax.io/docs/api/form/slider) — The `Slider` component provides a range slider input for selecting values within a range.
+- [Switch](https://bestax.io/docs/api/form/switch) — The `Switch` component provides a toggle switch for boolean on/off states.
+- [Taginput](https://bestax.io/docs/api/form/taginput) — The `Taginput` component provides a tag/chip input field for managing multiple tags.
+- [TextArea](https://bestax.io/docs/api/form/textarea) — The `TextArea` component provides a Bulma-styled multi-line text input, supporting color, size, rounded corners, static/read-only state…
+- [TimeInput](https://bestax.io/docs/api/form/datetime/timeinput) — The `TimeInput` component is a form input that opens a popover spinner for time-of-day selection.
+
+## Columns
+
+- [Column](https://bestax.io/docs/api/columns/column) — The `Column` component provides a single responsive layout column using Bulma's flexbox-based column system.
+- [Columns](https://bestax.io/docs/api/columns/columns) — The `Columns` component provides Bulma's flexible, responsive grid container for aligning and distributing [`Column`](./column.md) components.
+
+## Grid
+
+- [Cell](https://bestax.io/docs/api/grid/cell) — The `Cell` component provides a single Bulma grid cell for use inside the [`Grid`](./grid.md) component.
+- [Grid](https://bestax.io/docs/api/grid/grid) — The `Grid` component provides Bulma's advanced CSS Grid layout for complex, modern layouts.
+
+## Layout
+
+- [Container](https://bestax.io/docs/api/layout/container) — The `Container` component provides a responsive and flexible layout wrapper for your Bulma React UI.
+- [Footer](https://bestax.io/docs/api/layout/footer) — The `Footer` component provides a semantic and accessible site footer for your Bulma React UI.
+- [Hero](https://bestax.io/docs/api/layout/hero) — The `Hero` component provides a responsive, flexible, and visually striking section for your Bulma React UI.
+- [Level](https://bestax.io/docs/api/layout/level) — The `Level` component provides a flexible horizontal layout for your Bulma React UI, perfect for aligning items on the left and right…
+- [Media](https://bestax.io/docs/api/layout/media) — The `Media` component implements Bulma’s powerful media object layout for React.
+- [Section](https://bestax.io/docs/api/layout/section) — The `Section` component provides vertical spacing and visual separation for your Bulma React UI.
+
+## Helpers
+
+- [ConfigProvider](https://bestax.io/docs/api/helpers/config) — The `ConfigProvider` component provides a React context for configuring global settings across all Bulma UI components.
+- [Theme](https://bestax.io/docs/api/helpers/theme) — The `Theme` component provides a powerful way to customize Bulma's appearance using CSS custom properties (CSS variables).
+- [classNames](https://bestax.io/docs/api/helpers/classnames) — `classNames` is a utility function for conditionally joining class names together.
+- [useBulmaClasses](https://bestax.io/docs/api/helpers/usebulmaclasses) — `useBulmaClasses` is a custom React hook that generates Bulma helper class strings from a set of props.

package/templates/skills/bestax-layout-scaffold/SKILL.md

@@ -42,6 +42,10 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
   mobile. Add responsive `size*` props only to tune the breakpoints.
 - For a `fixed="top"` `Navbar`, add the `has-navbar-fixed-top` class to `<html>` so content is not
   hidden behind it — the library does not do this automatically.
+- **Style with helper props, not inline `style`.** Use `m`/`p` spacing (`mt="4"` = 1rem),
+  `textAlign="centered"`, and `textColor`/`bgColor` instead of `style={{ marginTop, textAlign,
+color }}`. Set the app-wide icon library once with `<ConfigProvider iconLibrary="…">` at the root
+  rather than `library` on every `<Icon>`.
 
 ## References
 
@@ -56,6 +60,8 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
 - `examples/landing.tsx` — `Hero` + `Section`s + `Footer`.
 - `examples/centered.tsx` — centered single column (auth/settings).
 - `examples/card-grid.tsx` — multiline `Columns` of `Card`s (catalog).
+- `examples/content-page.tsx` — hero + feature cards + CTA styled with helper props (no inline
+  `style`), wrapped in `ConfigProvider`.
 
 ## Checklist
 
@@ -64,3 +70,5 @@ Centered; a collection of items → Card grid. For mixed requests, pick the domi
 - [ ] Use `Columns`/`Column` for side-by-side layout; rely on the mobile stack default.
 - [ ] For a fixed navbar, add `has-navbar-fixed-top` to `<html>`.
 - [ ] Do not use `Tile` — it is not shipped.
+- [ ] Style with helper props (`mt`/`p`, `textAlign`, `textColor`), not inline `style`.
+- [ ] Set the icon library once via `<ConfigProvider iconLibrary="…">` at the root.

package/templates/skills/bestax-layout-scaffold/examples/app-shell.tsx

@@ -5,8 +5,12 @@
 // is padded below it — Bulma requires this and the library does NOT add it for
 // you. The columns sit side by side on tablet and up, and stack (menu above
 // content) on mobile.
+//
+// `ConfigProvider` wraps the shell once at the root to set the app-wide icon
+// library (so <Icon> needs no `library` prop) and, optionally, a class prefix.
 import React, { useEffect, useState } from 'react';
 import {
+  ConfigProvider,
   Navbar,
   Menu,
   Container,
@@ -28,7 +32,7 @@ export default function AdminShell() {
   }, []);
 
   return (
-    <>
+    <ConfigProvider iconLibrary="fa">
       <Navbar fixed="top" color="dark">
         <Navbar.Brand>
           <Navbar.Item href="#">Acme Admin</Navbar.Item>
@@ -75,6 +79,6 @@ export default function AdminShell() {
           </Column>
         </Columns>
       </Container>
-    </>
+    </ConfigProvider>
   );
 }

package/templates/skills/bestax-layout-scaffold/examples/content-page.tsx

@@ -0,0 +1,90 @@
+// Idiomatic marketing content page: hero + feature cards + CTA.
+//
+// The point of this example is HOW to style with the library, not just what to
+// render. Two rules it demonstrates:
+//   1. `ConfigProvider` wraps the page once so <Icon> needs no `library` prop.
+//   2. Spacing, alignment, and color use HELPER PROPS — never inline `style`.
+//      e.g. mt="4" (1rem) instead of style={{ marginTop: '1rem' }},
+//           textAlign="centered" instead of style={{ textAlign: 'center' }},
+//           textColor="grey" instead of style={{ color: '#…' }}.
+import React from 'react';
+import {
+  ConfigProvider,
+  Hero,
+  Container,
+  Section,
+  Columns,
+  Column,
+  Card,
+  Title,
+  SubTitle,
+  Content,
+  Button,
+  Buttons,
+  Icon,
+  IconText,
+} from '@allxsmith/bestax-bulma';
+
+const features = [
+  { icon: 'bolt', name: 'Fast', blurb: 'Ships lean CSS and a tiny runtime.' },
+  {
+    icon: 'shield',
+    name: 'Solid',
+    blurb: 'Typed props and tested components.',
+  },
+  {
+    icon: 'wand-magic-sparkles',
+    name: 'Themeable',
+    blurb: 'Recolor with CSS variables.',
+  },
+];
+
+export default function ContentPage() {
+  return (
+    <ConfigProvider iconLibrary="fa">
+      <Hero color="primary" size="medium">
+        <Hero.Body>
+          <Container textAlign="centered">
+            <Title size="1">Build faster with bestax</Title>
+            <SubTitle size="3" mt="4">
+              A Bulma component library for React.
+            </SubTitle>
+            <Buttons isCentered mt="5">
+              <Button color="light" size="large">
+                Get started
+              </Button>
+              <Button color="light" size="large" isOutlined>
+                View docs
+              </Button>
+            </Buttons>
+          </Container>
+        </Hero.Body>
+      </Hero>
+
+      <Section size="large">
+        <Container>
+          <Title size="2" textAlign="centered" mb="6">
+            Why teams choose it
+          </Title>
+          <Columns>
+            {features.map(f => (
+              <Column key={f.name} display="flex">
+                <Card>
+                  <Card.Content>
+                    <IconText mb="3">
+                      <Icon name={f.icon} textColor="primary" />
+                      <Title size="4" mb="2">
+                        {f.name}
+                      </Title>
+                    </IconText>
+                    <Content textColor="grey">{f.blurb}</Content>
+                  </Card.Content>
+                </Card>
+              </Column>
+            ))}
+          </Columns>
+        </Container>
+      </Section>
+    </ConfigProvider>
+  );
+}

package/templates/skills/bestax-layout-scaffold/references/archetypes.md

@@ -4,6 +4,10 @@ Four named, composable page patterns. For each: **when to pick it**, the **JSX s
 **responsive behavior**. Map the request to one archetype and build it — do not ask the user layout
 questions. Full runnable versions live in `examples/`.
 
+Wrap any page once at the root in `<ConfigProvider iconLibrary="…">` so `<Icon>` needs no per-icon
+`library` prop (see `examples/app-shell.tsx` and `examples/content-page.tsx`). Inside, style with
+helper props (`mt`, `textAlign`, `textColor`), never inline `style`.
+
 ---
 
 ## 1. App shell with sidebar

package/templates/skills/bestax-layout-scaffold/references/layout-components.md

@@ -21,6 +21,11 @@ import {
 Every component also accepts the shared Bulma helper props (`m`/`p` spacing, `textAlign`,
 `textColor`, `bgColor`, etc.).
 
+> **Use helper props, never inline `style`, for spacing / alignment / color.** `mt="4"` (= 1rem)
+> not `style={{ marginTop: '1rem' }}`; `textAlign="centered"` not `style={{ textAlign: 'center' }}`;
+> `textColor="grey"` / `bgColor="light"` not `style={{ color }}`. Spacing scale is `0`–`6` | `auto`
+> (`4` = 1rem). Reserve `style`/CSS vars only for values the design system doesn't tokenize.
+
 > **There is no `Tile` component.** Build grids and nested layouts with `Columns` / `Column`.
 
 ## Container

package/templates/skills/bestax-theming/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: bestax-theming
-description: Customize colors, branding, dark mode, and visual tokens of an app built with @allxsmith/bestax-bulma. Use when changing the primary/brand color, recoloring components, overriding Bulma --bulma-* CSS variables, setting fonts/radius/spacing tokens, or adding light/dark mode.
+description: Customize colors, branding, dark mode, and visual tokens of an app built with @allxsmith/bestax-bulma. Use when changing the primary/brand color, recoloring components, overriding Bulma --bulma-* CSS variables, setting fonts/radius/spacing tokens, adding light/dark mode, or configuring the app-wide icon library / class prefix via ConfigProvider.
 license: MIT
 ---
 
@@ -52,6 +52,27 @@ import { Theme, Button } from '@allxsmith/bestax-bulma';
 <Button color="primary">Save</Button>;
 ```
 
+## App-wide config (icons & class prefix)
+
+`ConfigProvider` sets app-wide options once at the root, separate from `Theme`. Wrap the app so
+you don't repeat the same prop on every component:
+
+```tsx
+import { ConfigProvider } from '@allxsmith/bestax-bulma';
+
+// Set the icon library once — <Icon> no longer needs a `library` prop.
+<ConfigProvider iconLibrary="fa">
+  <App />
+</ConfigProvider>;
+// now <Icon name="check" /> resolves as Font Awesome; no per-icon library="fa".
+```
+
+- `iconLibrary` — `'fa' | 'mdi' | 'ion' | 'material-icons' | 'material-symbols'`. `Icon` reads it
+  (`library || iconLibrary || 'fa'`), so set it here instead of on each `<Icon>`.
+- `classPrefix` — namespaces every Bulma class (e.g. `bulma-`) to avoid collisions with other CSS.
+
+Nest `Theme` and `ConfigProvider` together at the root (order doesn't matter).
+
 ## References
 
 - `references/css-variables.md` — the `--bulma-*` variable map (colors, scheme/text/border, radius,
@@ -71,3 +92,4 @@ import { Theme, Button } from '@allxsmith/bestax-bulma';
 - [ ] Set non-color tokens (radius, fonts, sizes) through `bulmaVars` or `:root`.
 - [ ] Implement dark mode with `data-theme` on `<html>`; do not expect a shipped dark-mode component.
 - [ ] Pass `color`/`textColor`/`bgColor` (not custom CSS) to color individual components.
+- [ ] Set the icon library once with `<ConfigProvider iconLibrary="…">` at the root, not `library` on every `<Icon>`.