### Install dependencies and start the dev server

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2025-11-12-installing-bulma-react-super-fast/index.md

After scaffolding, navigate into the project, install dependencies, and start the development server. This is typical of any React Vite project.

```bash
cd my-app
npm install
npm run dev
```

--------------------------------

### Install and run development server

Source: https://github.com/allxsmith/bestax/blob/main/create-bestax/templates/vite/README.md

Install dependencies and start the development server for the Bestax + Vite template.

```bash
pnpm install
pnpm dev
```

--------------------------------

### Scaffold, install, and run in under 30 seconds

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2025-11-12-installing-bulma-react-super-fast/index.md

This sequence scaffolds a project with all defaults, installs dependencies, and starts the development server, taking under 30 seconds from command to running application.

```bash
# Second 0-5: Scaffold the project
npm create bestax@latest my-demo-app -y

# Second 5-25: Install dependencies
cd my-demo-app
npm install

# Second 25-30: Start development server
npm run dev
```

--------------------------------

### Install dependencies and start docs locally

Source: https://github.com/allxsmith/bestax/blob/main/docs/README.md

Installs dependencies and starts the Docusaurus development server from within the docs package. Visit http://localhost:3000 to view the docs.

```bash
pnpm install
pnpm start
```

--------------------------------

### Clone and install bestax

Source: https://github.com/allxsmith/bestax/blob/main/CONTRIBUTING.md

Clone the repository and install dependencies using pnpm. This is the standard setup for contributing.

```bash
git clone https://github.com/allxsmith/bestax.git
cd bestax
pnpm install
```

--------------------------------

### One-time setup: corepack enable and pnpm install

Source: https://github.com/allxsmith/bestax/blob/main/CONTRIBUTING.md

Run once to enable corepack and install dependencies with CI-parity. The frozen-lockfile install fails if the lockfile drifts; a normal dev install is also possible.

```bash
corepack enable                    # makes `pnpm` use the pinned pnpm@11.9.0
pnpm install --frozen-lockfile     # exact CI-parity install (fails if the lockfile drifts)
# or just `pnpm install` for a normal dev install
```

--------------------------------

### Setup DialogContainer

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/components/dialog.md

Setup instructions for the programmatic dialog API.

```APIDOC
## [SETUP] DialogContainer

### Description
Add the `DialogContainer` component once at your app root to enable the programmatic dialog API.

### Usage
```tsx
import { DialogContainer } from '@allxsmith/bestax-bulma';

function App() {
  return (
    <>
      <YourRoutes />
      <DialogContainer />
    </>
  );
}
```
```

--------------------------------

### Create a Bestax App with pnpm

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/guides/intro.md

Scaffolds a new Vite + React project with bestax-bulma and CSS pre-configured. Run these commands in order to create the app, install dependencies, and start the development server.

```bash
pnpm create bestax@latest my-bestax-app
cd my-bestax-app
pnpm install
pnpm run dev
```

--------------------------------

### Install dependencies

Source: https://github.com/allxsmith/bestax/blob/main/CONTRIBUTING.md

Install project dependencies from the root using pnpm.

```bash
pnpm install
```

--------------------------------

### Install material-icons with pnpm

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/guides/getting-started/alternative-icons.md

Install the Google Material Icons library using pnpm.

```bash
pnpm add material-icons
```

--------------------------------

### Install bestax-theming skill

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/skills/theming.mdx

Command to install the bestax-theming skill from the bestax repository.

```bash
npx skills add https://github.com/allxsmith/bestax --skill bestax-theming
```

--------------------------------

### Interactive Steps example

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2026-01-13-extra-components.md

Live example of a Steps component with clickable items and state management.

```tsx
function StepsDemo() {
  const [step, setStep] = React.useState(1);
  return (
    <Steps
      value={step}
      items={[
        { label: 'Cart', clickable: true },
        { label: 'Shipping', clickable: true },
        { label: 'Payment', clickable: true },
        { label: 'Complete', clickable: true },
      ]}
      onStepClick={setStep}
      color="success"
    />
  );
}
```

--------------------------------

### Command Line Example

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/elements/code.md

Shows how to display command line instructions inline.

```tsx
<Paragraph>
  Run <Code>pnpm install</Code> to install the dependencies.
</Paragraph>
```

--------------------------------

### Quick example with Button component

Source: https://github.com/allxsmith/bestax/blob/main/bulma-ui/README.md

Quick example showing how to use the Button component with a primary color and click handler.

```tsx
import '@allxsmith/bestax-bulma/bestax.css';
import { Button } from '@allxsmith/bestax-bulma';

function App() {
  return (
    <Button color="primary" onClick={() => alert('Clicked!')}>
      Click Me
    </Button>
  );
}

export default App;
```

--------------------------------

### Keyboard Shortcuts Example

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/elements/code.md

Demonstrates displaying keyboard shortcuts inline.

```tsx
<Paragraph>
  Press <Code>Ctrl + C</Code> to copy and <Code>Ctrl + V</Code> to paste.
</Paragraph>
```

--------------------------------

### Navbar responsive navigation example

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/guides/library/components.md

Use the Navbar component to create a responsive navigation bar with branding, menus, and dropdowns. The example shows a brand with a logo and burger, plus start and end menu items.

```tsx
<Navbar>
  <Navbar.Brand>
    <Navbar.Item href="#">
      <img src="/img/logo.svg" alt="Logo" />
    </Navbar.Item>
    <Navbar.Burger active={false} onClick={() => {}} />
  </Navbar.Brand>
  <Navbar.Menu active={false}>
    <Navbar.Start>
      <Navbar.Item href="#">Home</Navbar.Item>
      <Navbar.Item href="#">Docs</Navbar.Item>
      <Navbar.Item href="#">About</Navbar.Item>
    </Navbar.Start>
    <Navbar.End>
      <Navbar.Item href="#">Login</Navbar.Item>
    </Navbar.End>
  </Navbar.Menu>
</Navbar>
```

--------------------------------

### create-bestax: scaffold a throwaway app

Source: https://github.com/allxsmith/bestax/blob/main/CONTRIBUTING.md

Builds create-bestax and scaffolds a new app outside the repo. The generated app is then installed and started to verify it runs.

```bash
pnpm --filter create-bestax run build
node "$PWD/create-bestax/dist/index.js" /tmp/my-bestax-app -t vite-ts -b complete -i fontawesome -y
cd /tmp/my-bestax-app && pnpm install && pnpm dev     # verify the generated app runs
```

--------------------------------

### Set up and run pre-PR gate with pnpm

Source: https://github.com/allxsmith/bestax/blob/main/README.md

Run these commands to set up the project locally and execute the pre-PR gate. Requires corepack and pnpm; the second command builds, typechecks, runs tests with coverage, and lints.

```bash
corepack enable && pnpm install --frozen-lockfile
pnpm all   # build, typecheck, test + coverage, lint — the pre-PR gate
```

--------------------------------

### Setup: Add DialogContainer at app root

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/components/dialog.md

Add the DialogContainer component once at your app root to enable programmatic dialogs. This example shows it placed alongside your routes in src/App.tsx.

```tsx
import { DialogContainer } from '@allxsmith/bestax-bulma';

function App() {
  return (
    <>
      <YourRoutes />
      <DialogContainer />
    </>
  );
}
```

--------------------------------

### Programmatic Confirm: dialog.confirm

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/components/dialog.md

Shows how to use dialog.confirm to get a boolean result. The example uses a danger confirm dialog with custom confirmText and displays the result in a paragraph.

```tsx
function example() {
  const [result, setResult] = useState('');

  return (
    <Block>
      <DialogContainer />
      <Button
        color="danger"
        onClick={async () => {
          const confirmed = await dialog.confirm({
            title: 'Delete Item?',
            message: 'This action cannot be undone.',
            type: 'danger',
            confirmText: 'Delete',
          });
          setResult(confirmed ? 'Item deleted!' : 'Cancelled.');
        }}
      >
        Delete Item
      </Button>
      {result && <Paragraph mt="3">{result}</Paragraph>}
    </Block>
  );
}
```

--------------------------------

### Build static documentation site

Source: https://github.com/allxsmith/bestax/blob/main/docs/README.md

Builds the static site, with output appearing in the build/ directory.

```bash
pnpm build
```

--------------------------------

### Theme radius deprecated and near-miss examples

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/guides/getting-started/eslint-plugin.md

Examples showing how the valid-helper-value rule handles the Theme component's radius prop. A string outside the helper's values is reported as deprecated, pointing at bulmaVars, unless it is a near miss of one of the helper's values, which gets the usual suggestion.

```jsx
<Theme radius="6px" />                            // ✗ deprecated → bulmaVars
<Theme radius="radiusles" />                      // ✗ Did you mean `radiusless`?
<Theme bulmaVars={{ '--bulma-radius': '6px' }} /> // ✓
```

--------------------------------

### Create a new bestax-bulma project with pnpm

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/intro.md

Run this command to scaffold a new bestax-bulma project. The installer prompts for framework, Bulma flavor, and icon library, then installs dependencies and adds CSS imports automatically.

```bash
pnpm create bestax@latest my-bestax-app
cd my-bestax-app
```

--------------------------------

### JavaScript/JSX config without parser

Source: https://github.com/allxsmith/bestax/blob/main/eslint-plugin/README.md

JavaScript/JSX setup: the preset alone is sufficient when the project contains no .tsx files. Adding a .tsx file later requires the parser block from the TypeScript example.

```js
// eslint.config.js
import bestax from '@allxsmith/eslint-plugin-bestax';

export default [bestax.configs.recommended];
```

--------------------------------

### Install bestax-optimize skill with npx

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/skills/optimize.mdx

Install the bestax-optimize skill from the bestax repository using npx. This is the first step to use the skill.

```bash
npx skills add https://github.com/allxsmith/bestax --skill bestax-optimize
```

--------------------------------

### First day of week Monday with typing-first (openOnFocus=false)

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/api/form/datetime/datetimeinput.md

Same Monday-first example with openOnFocus={false}. Type in the field directly and use the launcher icon or Down arrow to open the popover and see the week start.

```tsx
<DateTimeInput
  label="Monday-first"
  firstDayOfWeek={1}
  defaultValue={new Date()}
  mobileNative={false}
  openOnFocus={false}
/>
```

--------------------------------

### Run Storybook

Source: https://github.com/allxsmith/bestax/blob/main/CONTRIBUTING.md

Start Storybook to explore and develop components interactively. Visit the displayed local URL to view it.

```bash
pnpm storybook
```

--------------------------------

### Migrate MenuLink with tag to Menu.Item as

Source: https://github.com/allxsmith/bestax/blob/main/skills/bestax-migrate/references/bloomer/unmappables.md

Two corrected JSX examples from the migration guide: replacing a bloomer MenuLink with a tag prop by a Menu.Item with an as prop, and dropping the invalid href attribute on a span element.

```jsx
<MenuLink href="/x" tag="span">Home</MenuLink>
```

```jsx
<Menu.Item as="span">Home</Menu.Item>
```

--------------------------------

### Build docs with turbo

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/CLAUDE.md

Run this command to build the docs. It must pass; onBrokenLinks: 'throw' validates every internal bestax link and the tag-archive link.

```bash
pnpm exec turbo run build --filter=@allxsmith/bestax-docs
```

--------------------------------

### Mobile-First Responsive Design Example

Source: https://github.com/allxsmith/bestax/blob/main/docs/docs/guides/helpers/visibility.md

Use this example to implement a mobile-first responsive layout with bestax. It shows how to stack content vertically on mobile and switch to a horizontal layout on tablet and larger screens using displayMobile and displayTablet props. The example also demonstrates progressive enhancement with content that appears only on tablet or desktop screens.

```tsx
import { Box, Card, Title, Content, Button } from '@allxsmith/bestax-bulma';

function MobileFirstExample() {
  return (
    <Box p="4">
      <Card>
        <Card.Content>
          {/* Mobile layout by default */}
          <Title size="4" textAlign="centered" mb="4">
            Mobile-First Design
          </Title>

          {/* Stack vertically on mobile, horizontal on tablet+ */}
          <Box displayMobile="block" displayTablet="flex">
            <Box style={{ flex: 1, marginRight: '1rem' }}>
              <Content>
                This content stacks vertically on mobile and displays
                horizontally on tablet and larger screens.
              </Content>
            </Box>

            <Box style={{ flex: 1 }}>
              <Content>
                The spacing and layout automatically adapts to different screen
                sizes using viewport-specific display utilities.
              </Content>
            </Box>
          </Box>

          {/* Simple mobile menu, complex desktop menu */}
          <Box mt="4">
            {/* Mobile: Simple button */}
            <Button
              displayMobile="block"
              displayTablet="none"
              color="primary"
              isFullwidth
            >
              Mobile Actions
            </Button>

            {/* Desktop: Multiple buttons */}
            <Box
              displayMobile="none"
              displayTablet="flex"
              justifyContent="center"
            >
              <Button color="primary" mr="2">
                Save
              </Button>
              <Button color="info" mr="2">
                Edit
              </Button>
              <Button color="warning" mr="2">
                Share
              </Button>
              <Button variant="outlined">Cancel</Button>
            </Box>
          </Box>

          {/* Progressive content enhancement */}
          <Box mt="4">
            <Content>Basic content visible on all devices.</Content>

            <Box
              displayMobile="none"
              displayTablet="block"
              bgColor="light"
              textColor="dark"
              p="3"
              mt="2"
            >
              <Content textSize="7">
                Enhanced content for tablet and larger screens with additional
                context and details.
              </Content>
            </Box>

            <Box
              displayMobile="none"
              displayDesktop="block"
              bgColor="primary"
              textColor="white"
              p="3"
              mt="2"
            >
              <Content textSize="7">
                Premium content only shown on desktop and larger screens where
                there's ample space.
              </Content>
            </Box>
          </Box>
        </Card.Content>
      </Card>
    </Box>
  );
}
```

--------------------------------

### Scaffold and run a new bestax app

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2026-07-28-bulma-3-css-framework-ai-will-never-tell-you-about-it.md

Scaffold a new React + Bulma application with create-bestax, then install dependencies and start the dev server with hot reload. The scaffold wires up Bulma v1 and the @allxsmith/bestax-bulma component library.

```bash
npm create bestax@latest my-app
```

```bash
cd my-app
npm install
npm run dev
```

--------------------------------

### Example create-bestax commands with flags

Source: https://github.com/allxsmith/bestax/blob/main/create-bestax/README.md

Two example invocations: one that creates a TypeScript project with Font Awesome icons and the complete Bulma flavor, and one that uses all defaults and skips prompts with -y.

```bash
# Create a TypeScript project with Font Awesome icons
npm create bestax@latest my-app -t vite-ts -i fontawesome -b complete

# Use all defaults (skip prompts)
npm create bestax@latest my-app -y
```

--------------------------------

### Wrap pnpm install commands in <PackageManagerTabs>

Source: https://github.com/allxsmith/bestax/blob/main/docs/CLAUDE.md

Wrap the pnpm install command in <PackageManagerTabs> so npm, yarn, and bun readers get derived commands. Write the pnpm form exactly, one command per line; non-pnpm lines like 'cd my-app' pass through unchanged. Blank lines around the fence are required, and the component throws during prerender if the round trip isn't exact.

```markdown
<PackageManagerTabs>

```bash
pnpm create bestax@latest my-app
cd my-app
pnpm install
```

</PackageManagerTabs>
```

--------------------------------

### Quick start: ConfigProvider and Icon/IconText usage

Source: https://github.com/allxsmith/bestax/blob/main/skills/bestax-icons/SKILL.md

Sets the icon library once at the app root using ConfigProvider, then uses Icon and IconText components. The library value 'fa' is the default. Note that the library must be installed separately as no icon fonts are shipped.

```tsx
import { ConfigProvider, Icon, IconText } from '@allxsmith/bestax-bulma';

// Set the library ONCE at the app root; <Icon> then never needs `library`.
<ConfigProvider iconLibrary="fa">
  <App />
</ConfigProvider>;

// Inside the app:
<Icon name="rocket" ariaLabel="Launch" />;
<IconText iconProps={{ name: 'star', 'aria-hidden': 'true' }}>
  Starred
</IconText>;
```

--------------------------------

### TypeScript Autocomplete for Button Props

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2025-09-24-meet-bestax-bulma/index.md

Illustrates the TypeScript autocomplete support for the Button component. The comment shows the allowed values for the color and size props, and demonstrates the isLoading and isOutlined boolean props. This example is intended to be used in a TypeScript file to get full IDE autocomplete.

```typescript
// Full autocomplete for colors, sizes, and more
<Button
  color="primary"  // 'primary' | 'link' | 'info' | 'success' | ...
  size="large"     // 'small' | 'normal' | 'medium' | 'large'
  isLoading
  isOutlined
/>
```

--------------------------------

### Run a default agent-loop iteration with run-iteration.sh

Source: https://github.com/allxsmith/bestax/blob/main/eval/agent-loop/README.md

Runs a full agent-loop iteration (phases A–C) from the repo root: rebuild tooling, scaffold and install with a baseline tag, watchdogged incognito build, then snapshot and metrics.json. The path resolves from the directory it is started in, so run it from the repo root.

```bash
eval/agent-loop/bin/run-iteration.sh i11 eval/agent-loop/briefs/skynet-saas.md /tmp/agent-loop-work/i11 \
  --runs-dir eval/agent-loop/runs-2026-08
```

--------------------------------

### Zod validation example for email field

Source: https://github.com/allxsmith/bestax/blob/main/docs/blog/2026-08-04-forms-without-a-form-library.md

Shows how to use a zod schema to validate an email field. It uses schema.safeParse to get a result, extracts the error message from result.error.issues[0].message, and passes it to the Input component's message prop. This demonstrates integrating zod with bestax-bulma's controlled inputs.

```jsx
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('Please enter a valid email address.'),
});

function ZodSignup() {
  const [email, setEmail] = useState('');
  const [touched, setTouched] = useState(false);

  const result = schema.safeParse({ email });
  const error =
    touched && !result.success ? result.error.issues[0].message : undefined;

  return (
    <Input
      label="Email"
      type="email"
      value={email}
      onChange={e => setEmail(e.target.value)}
      onBlur={() => setTouched(true)}
      color={error ? 'danger' : undefined}
      message={error}
      messageColor={error ? 'danger' : undefined}
    />
  );
}
```