Layout scaffold skill
The bestax-layout-scaffold
skill turns a high-level request — "admin dashboard", "landing page", "login screen", "product
catalog" — into a complete, responsive page built from bestax-bulma layout components, in one shot.
It maps the request to one of four archetypes and builds it without asking layout questions.
Install
npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold
App shell with sidebar
Prompt
Build an admin dashboard shell with a fixed top nav and a sidebar menu —
following the bestax layout-scaffold skill.
Live result
The shell structure — a Navbar, a narrow Menu column, and a main content column. This preview
uses a non-fixed navbar; the shippable version uses fixed="top" (see Generated code), which
needs position: fixed and a page-level class and therefore can't render inside this embed.
function example() { const [menuOpen, setMenuOpen] = useState(false); return ( <> <Navbar color="dark"> <Navbar.Brand> <Navbar.Item href="#">Acme Admin</Navbar.Item> <Navbar.Burger active={menuOpen} onClick={() => setMenuOpen(open => !open)} aria-label="menu" /> </Navbar.Brand> <Navbar.Menu active={menuOpen}> <Navbar.End> <Navbar.Item href="#">Account</Navbar.Item> </Navbar.End> </Navbar.Menu> </Navbar> <Container fluid> <Columns> <Column size={3}> <Menu> <Menu.Label>General</Menu.Label> <Menu.List> <Menu.Item active href="#"> Dashboard </Menu.Item> <Menu.Item href="#">Customers</Menu.Item> <Menu.Item href="#">Orders</Menu.Item> </Menu.List> </Menu> </Column> <Column> <Box> <Title size="4">Dashboard</Title> <p>Main content area.</p> </Box> </Column> </Columns> </Container> </> ); }
Generated code
The shippable version adds fixed="top" and the required has-navbar-fixed-top class on <html>.
import { useEffect, useState } from 'react';
import {
Navbar,
Menu,
Container,
Columns,
Column,
Section,
Title,
Box,
} from '@allxsmith/bestax-bulma';
export default function AdminShell() {
const [menuOpen, setMenuOpen] = useState(false);
// A fixed-top navbar needs `has-navbar-fixed-top` on <html> (Bulma requirement;
// the library does not add it for you).
useEffect(() => {
document.documentElement.classList.add('has-navbar-fixed-top');
return () =>
document.documentElement.classList.remove('has-navbar-fixed-top');
}, []);
return (
<>
<Navbar fixed="top" color="dark">
<Navbar.Brand>
<Navbar.Item href="#">Acme Admin</Navbar.Item>
<Navbar.Burger
active={menuOpen}
onClick={() => setMenuOpen(open => !open)}
aria-label="menu"
aria-expanded={menuOpen}
/>
</Navbar.Brand>
<Navbar.Menu active={menuOpen}>
<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>
<Title size="3">Dashboard</Title>
<Box>Main content area.</Box>
</Section>
</Column>
</Columns>
</Container>
</>
);
}
Responsive
The navbar collapses to a burger on mobile; the sidebar and content columns sit side by side on tablet and up, and stack on mobile.
The skill now builds an app shell from AppFrame, which keeps the
header and the menu column in view as the page scrolls and turns the column into a drawer on a
phone, with no fixed navbar or has-navbar-fixed-top. The skill's examples/app-shell.tsx is
that version. The example above is the one recorded on the date it shows.
Marketing / landing
Prompt
Build a marketing landing page with a hero, a three-feature section, and a
footer — following the bestax layout-scaffold skill.
Live result
function example() { return ( <> <Hero color="primary" size="medium"> <Hero.Body> <Container textAlign="centered"> <Title size="2">Ship faster with Acme</Title> <SubTitle size="4"> The all-in-one platform for modern teams. </SubTitle> <Buttons isCentered> <Button color="light" size="large"> Get started </Button> </Buttons> </Container> </Hero.Body> </Hero> <Section> <Container> <Columns> <Column> <Box> <Title size="5">Fast</Title> <Content>Ship pages in minutes.</Content> </Box> </Column> <Column> <Box> <Title size="5">Responsive</Title> <Content>Looks right on every screen.</Content> </Box> </Column> <Column> <Box> <Title size="5">Composable</Title> <Content>Build from small pieces.</Content> </Box> </Column> </Columns> </Container> </Section> </> ); }
Responsive
Sections stack vertically; the feature Columns collapse to one per row on mobile.
Centered single-column
Prompt
Build a centered login page — following the bestax layout-scaffold skill.
Live result
function example() { return ( <Section> <Container> <Columns isCentered> <Column size="half" sizeWidescreen="one-third"> <Box> <Title size="4" textAlign="centered"> Sign in </Title> <Input label="Email" type="email" iconLeftName="envelope" /> <Input label="Password" type="password" iconLeftName="lock" /> <Button color="primary" isFullwidth mt="4"> Sign in </Button> </Box> </Column> </Columns> </Container> </Section> ); }
Responsive
The centered column is narrow on desktop and full width on mobile.
Card grid / catalog
Prompt
Build a product catalog as a responsive grid of cards — following the bestax
layout-scaffold skill.
Live result
function example() { const items = [ { id: 1, name: 'Aurora Lamp', price: '$48', seed: 1 }, { id: 2, name: 'Drift Chair', price: '$220', seed: 2 }, { id: 3, name: 'Stone Mug', price: '$18', seed: 3 }, ]; return ( <Section> <Container> <Columns isMultiline> {items.map(item => ( <Column key={item.id} sizeMobile="full" sizeTablet="half" sizeDesktop="one-third" > <Card image={`https://picsum.photos/seed/${item.seed}/600/400`} imageAlt={item.name} header={item.name} footer={<span className="card-footer-item">{item.price}</span>} > A short product description. </Card> </Column> ))} </Columns> </Container> </Section> ); }
Responsive
isMultiline wraps cards onto new rows; the size* props set one card per row on mobile, two on
tablet, three on desktop.