bestax-mcp 0.0.0

package/data/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/data/skills/bestax-layout-scaffold/examples/landing.tsx

@@ -0,0 +1,122 @@
+// Marketing / landing page — fixed top Navbar + Hero + stacked Sections + Footer.
+// Each Section stacks vertically; the feature Columns collapse to one per row on
+// mobile (Bulma columns stack below the tablet breakpoint).
+//
+// The Navbar's burger/menu is CONTROLLED: `active` on Navbar.Menu shows/hides
+// the mobile menu, while `active` + `onClick` on Navbar.Burger make the burger
+// toggle it and animate. Wire the same state to both — left unwired, clicking
+// the burger does nothing; desktop looks fine and nothing errors, so the
+// failure is silent. A fixed-top navbar
+// also needs the `has-navbar-fixed-top` class on <html> so the page is padded
+// below it (never an inline padding offset) — Bulma requires this and the
+// library does NOT add it for you.
+import React, { useEffect, useState } from 'react';
+import {
+  Navbar,
+  Hero,
+  Section,
+  Container,
+  Footer,
+  Columns,
+  Column,
+  Box,
+  Title,
+  SubTitle,
+  Content,
+  Button,
+  Buttons,
+} from '@allxsmith/bestax-bulma';
+
+const FEATURES = [
+  { title: 'Fast', body: 'Ship pages in minutes, not days.' },
+  { title: 'Responsive', body: 'Looks right on every screen by default.' },
+  { title: 'Composable', body: 'Build from small, predictable pieces.' },
+];
+
+export default function LandingPage() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  useEffect(() => {
+    document.documentElement.classList.add('has-navbar-fixed-top');
+    return () => {
+      document.documentElement.classList.remove('has-navbar-fixed-top');
+    };
+  }, []);
+
+  return (
+    <>
+      <Navbar fixed="top">
+        <Navbar.Brand>
+          <Navbar.Item href="#">Acme</Navbar.Item>
+          <Navbar.Burger
+            active={menuOpen}
+            onClick={() => setMenuOpen(open => !open)}
+            aria-label="menu"
+            aria-expanded={menuOpen}
+          />
+        </Navbar.Brand>
+        <Navbar.Menu active={menuOpen}>
+          <Navbar.Start>
+            <Navbar.Item href="#">Features</Navbar.Item>
+            <Navbar.Item href="#">Pricing</Navbar.Item>
+          </Navbar.Start>
+          <Navbar.End>
+            <Navbar.Item href="#">Sign in</Navbar.Item>
+          </Navbar.End>
+        </Navbar.Menu>
+      </Navbar>
+
+      <Hero color="primary" size="medium">
+        <Hero.Body>
+          <Container textAlign="centered">
+            <Title size="1">Ship faster with Acme</Title>
+            <SubTitle size="3">
+              The all-in-one platform for modern teams.
+            </SubTitle>
+            {/* Both CTAs are FILLED: on a fixed-color hero a thin outlined
+                button (light outline + light label) reads washed out, and
+                worse under OS dark mode. isInverted (no isOutlined) gives a
+                solid white button with primary text — high contrast in both
+                schemes. */}
+            <Buttons isCentered mt="5">
+              <Button color="light" size="large">
+                Get started
+              </Button>
+              <Button color="primary" isInverted size="large">
+                Live demo
+              </Button>
+            </Buttons>
+          </Container>
+        </Hero.Body>
+      </Hero>
+
+      <Section size="large">
+        <Container>
+          <Title size="3" textAlign="centered" mb="6">
+            Why Acme
+          </Title>
+          <Columns>
+            {FEATURES.map(feature => (
+              <Column key={feature.title}>
+                <Box>
+                  <Title size="5">{feature.title}</Title>
+                  <Content>{feature.body}</Content>
+                </Box>
+              </Column>
+            ))}
+          </Columns>
+        </Container>
+      </Section>
+
+      <Footer>
+        <Container>
+          <Content textAlign="centered">
+            <p>
+              <strong>Acme</strong> — built with bestax-bulma.
+            </p>
+          </Content>
+        </Container>
+      </Footer>
+    </>
+  );
+}

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

@@ -0,0 +1,246 @@
+# Layout archetypes
+
+Four named, composable page patterns. For each: **when to pick it**, the **JSX skeleton**, and its
+**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
+
+**Pick when:** the request is an internal/authenticated tool — dashboard, admin, console, back
+office, or anything that mentions a persistent sidebar/navigation. The default for "build me an
+app".
+
+**Skeleton:**
+
+```tsx
+const [open, setOpen] = useState(false); // controls the burger + mobile menu
+
+<>
+  {/* fixed="top" requires <html class="has-navbar-fixed-top"> — set it in index.html */}
+  <Navbar fixed="top" color="dark">
+    <Navbar.Brand>
+      <Navbar.Item href="#">Brand</Navbar.Item>
+      <Navbar.Burger
+        active={open}
+        onClick={() => setOpen(o => !o)}
+        aria-label="menu"
+      />
+    </Navbar.Brand>
+    <Navbar.Menu active={open}>
+      <Navbar.End>
+        <Navbar.Item href="#">Account</Navbar.Item>
+      </Navbar.End>
+    </Navbar.Menu>
+  </Navbar>
+
+  <Container fluid>
+    <Columns>
+      <Column size={3} sizeWidescreen={2}>
+        <Menu>
+          <Menu.Label>General</Menu.Label>
+          <Menu.List>
+            <Menu.Item active href="#">
+              Dashboard
+            </Menu.Item>
+            <Menu.Item href="#">Customers</Menu.Item>
+          </Menu.List>
+        </Menu>
+      </Column>
+      <Column>
+        <Section>{/* main content */}</Section>
+      </Column>
+    </Columns>
+  </Container>
+</>;
+```
+
+**Required:** add `has-navbar-fixed-top` to `<html>` — statically in `index.html`; an effect
+(`examples/app-shell.tsx`) only for a conditionally-mounted navbar — so content is not hidden
+behind the fixed navbar.
+
+**Responsive:** the navbar collapses to a burger on mobile (`Navbar.Burger` + `Navbar.Menu active`).
+The sidebar and content columns sit side by side on tablet and up, and stack (menu above content)
+on mobile.
+
+---
+
+## 2. Marketing / landing
+
+**Pick when:** the request is a public-facing page — landing, homepage, marketing, product or
+pricing page. The default for "build me a site/page".
+
+**Skeleton:**
+
+```tsx
+const [open, setOpen] = useState(false); // controls the burger + mobile menu
+
+<>
+  <Navbar fixed="top">
+    <Navbar.Brand>
+      <Navbar.Item href="#">Brand</Navbar.Item>
+      <Navbar.Burger
+        active={open}
+        onClick={() => setOpen(o => !o)}
+        aria-label="menu"
+      />
+    </Navbar.Brand>
+    <Navbar.Menu active={open}>
+      <Navbar.Start>
+        <Navbar.Item href="#">Features</Navbar.Item>
+        <Navbar.Item href="#">Pricing</Navbar.Item>
+      </Navbar.Start>
+      <Navbar.End>
+        <Navbar.Item href="#">Sign in</Navbar.Item>
+      </Navbar.End>
+    </Navbar.Menu>
+  </Navbar>
+
+  <Hero color="primary" size="medium">
+    <Hero.Body>
+      <Container textAlign="centered">
+        <Title size="1">Headline</Title>
+        <SubTitle size="3">Supporting line.</SubTitle>
+        <Buttons isCentered>
+          <Button color="light" size="large">
+            Primary CTA
+          </Button>
+        </Buttons>
+      </Container>
+    </Hero.Body>
+  </Hero>
+
+  <Section size="large">
+    <Container>
+      <Columns>
+        <Column>
+          <Box>{/* feature */}</Box>
+        </Column>
+        <Column>
+          <Box>{/* feature */}</Box>
+        </Column>
+        <Column>
+          <Box>{/* feature */}</Box>
+        </Column>
+      </Columns>
+    </Container>
+  </Section>
+
+  <Footer>
+    <Container>
+      <Content textAlign="centered">{/* footer */}</Content>
+    </Container>
+  </Footer>
+</>;
+```
+
+**Required:** `Navbar.Burger`/`Navbar.Menu` are **controlled** — wire the same `active` state to
+both: `active` on `Navbar.Menu` shows/hides the mobile menu, and `active` + `onClick` on
+`Navbar.Burger` make the burger toggle it and animate (a bare `<Navbar.Burger />` does nothing
+when clicked, with no error). And add
+`has-navbar-fixed-top` to `<html>` (see `examples/landing.tsx`) so content is not hidden behind
+the fixed navbar — never an inline padding offset.
+
+**Responsive:** the navbar collapses to a burger on mobile (`Navbar.Burger` + `Navbar.Menu active`).
+`Section`s already stack vertically. The feature `Columns` collapse to one feature
+per row on mobile. Use `Hero size="large"` / `"fullheight"` for a taller hero.
+
+**Site chrome:** a full site adds the App-shell `Navbar` (archetype 1, minus the sidebar) above
+the `Hero`; if it's `fixed="top"`, the same `<html class="has-navbar-fixed-top">` requirement
+applies here too.
+
+**Alternating section bands:** tint every other `Section` with a scheme step —
+`.section-alt { background: var(--bulma-scheme-main-bis); }` (next step `-ter`) — not
+`bgColor="light"`/`"white"`: those are fixed colors that stay light when dark mode flips the text.
+
+**Hero CTAs:** on a colored hero use **filled** buttons only — `color="light"` for the primary
+CTA and `color="primary" isInverted` (solid white, primary text) for a secondary. A thin
+`isOutlined` button on a fixed-color surface is low-contrast and degrades further under OS dark
+mode. Single-mode page designs should also pin the scheme at the root
+(`<Theme isRoot colorMode="light">`) — see the `bestax-theming` skill's contrast rules.
+
+---
+
+## 3. Centered single-column
+
+**Pick when:** the request is one focused task — login, sign up, auth, settings, checkout, or a
+single standalone form/panel.
+
+**Skeleton:**
+
+```tsx
+<Section>
+  <Container>
+    <Columns isCentered>
+      <Column size="half" sizeWidescreen="one-third">
+        <Box>{/* form / panel */}</Box>
+      </Column>
+    </Columns>
+  </Container>
+</Section>
+```
+
+**Responsive:** the centered column is narrow on desktop and becomes full width on mobile. Tighten
+or widen via the `size*` breakpoint props (`one-third` desktop, `half` tablet, full mobile).
+
+---
+
+## 4. Card grid / catalog
+
+**Pick when:** the request is a collection of similar items — catalog, gallery, products, listing,
+search results, "a grid of cards".
+
+**Skeleton:**
+
+```tsx
+<Section>
+  <Container>
+    <Columns isMultiline>
+      {items.map(item => (
+        <Column
+          key={item.id}
+          sizeMobile="full"
+          sizeTablet="half"
+          sizeDesktop="one-third"
+          display="flex"
+          flexDirection="column"
+        >
+          <Card
+            flexGrow="1"
+            image={item.image}
+            header={item.name}
+            footer={item.price} // Card wraps footer items in .card-footer-item itself
+          >
+            {item.blurb}
+          </Card>
+        </Column>
+      ))}
+    </Columns>
+  </Container>
+</Section>
+```
+
+**Responsive:** `isMultiline` wraps cards onto new rows; the `size*` props set the per-row count —
+1 on mobile, 2 on tablet, 3 on desktop here. Change the fractions to change the column count.
+
+**Equal heights:** the `display="flex" flexDirection="column"` on each `Column` plus
+`flexGrow="1"` on the `Card` stretches every card to its row's height — without it, cards end
+at their content and rows look ragged (`height: 100%` on the card doesn't help — it resolves
+against the column's auto height). Alternatively
+build the whole grid with `Grid`/`Cell` (`<Grid isFixed fixedColsMobile={1} fixedColsTablet={2}
+fixedColsDesktop={3} gap={4}>`) — CSS Grid keeps cells equal-height for free; see the
+`Grid / Cell` section in `layout-components.md`.
+
+---
+
+## Combining archetypes
+
+Archetypes nest. An "admin dashboard with a product list" is **App shell** whose main `Column`
+holds a **Card grid**. A "settings page inside the app" is **App shell** whose main column holds a
+**Centered** panel. Pick the outer archetype from the dominant intent, then place another inside
+its content area.