安装指南

1. ClawHub CLI 从源直接安装技能的最快方式。
   npx clawhub@latest install bestax-layout-scaffold
2. 手动安装 将技能文件夹复制到以下位置之一
   全局模式
   ~/.openclaw/skills/
   工作区
   /skills/
   优先级：工作区 > 本地 > 内置
3. 提示词安装 将此提示词复制到 OpenClaw 即可自动安装。
   请帮我使用 Clawhub 安装 bestax-layout-scaffold。如果尚未安装 Clawhub，请先安装（npm i -g clawhub）。
   更倾向于下载？
   获取包含原生技能文件的ZIP压缩包。
   下载技能 (.zip)

什么是

Bestax 布局脚手架使用 @allxsmith/bestax-bulma，将管理仪表板、营销页面、登录界面或产品目录等高层级需求转化为完整的响应式布局。它会从四种原型中选择一种：应用框架、落地页、居中页面或卡片网格，然后填充页面结构，无需暂停下来讨论低层级的布局决策。
它专为使用 Openclaw Skills 的开发者设计，提倡使用响应式 Bulma 组件、无障碍交互模式和辅助属性，而不是内联样式或原始 Bulma 类名。最终生成的实用页面脚手架具有一致的结构、适配主题的样式，并为导航、网格、反馈和对话框提供明确指导。

应用场景

创建带有导航栏、侧边栏和内容区域的内部仪表板、管理控制台或经过身份验证的应用。
根据高层级需求构建公开落地页、主页、定价页或营销网站。
搭建专注于登录、注册、设置、结账或其他单表单任务的页面。
生成采用统一卡片网格的目录、画廊、产品列表或搜索结果页面。
当单个组件无法满足需求时，为现有项目添加页面级结构。
创建响应式布局，同时避免围绕列数、导航位置或宽度进行不必要的澄清。

工作原理

阅读需求并识别其主要意图：内部应用、面向公众的网站、专注任务的页面，或项目集合。
选择匹配的原型：应用框架、落地页、居中页面或卡片网格。如果需求明确，就直接继续，不要询问布局问题；只有在面向公众与内部用途确实难以判断时，最多询问一个问题。
使用 Bestax Bulma 布局组件组合页面，例如 Container、Section、Hero、Navbar、Menu、Columns、Grid、Card 和 Footer。
应用响应式默认设置；统一网格使用 Grid/Cell，比例布局和特定断点布局使用 Columns/Column。
按照交互组件的 API 接入功能，包括受控导航栏状态、标签页、折叠面板、下拉菜单和步骤组件。
使用组件辅助属性和 Bulma 主题令牌进行样式设置；只有在没有辅助属性满足要求时，才使用具名样式表类。
检查无障碍性和页面行为：文本样式的操作使用 LinkButton，简短反馈使用 Toast，确认操作使用 Dialog。

配置指南

在使用 @allxsmith/bestax-bulma 的项目中使用此技能。技能内容未规定软件包安装命令；请遵循应用的依赖项和项目设置说明。要搭建页面：

在项目根目录中，向你的编程代理提供页面级需求，例如：

"构建一个带侧边栏和使用量指标的内部管理仪表板。"

然后根据项目的 Bestax Bulma 设置和技能组件参考检查生成的页面。在应用根目录使用 ConfigProvider 配置一次图标库。对于固定在顶部的导航栏，在 元素上添加 has-navbar-fixed-top。将捆绑的原型示例用作实现参考：examples/app-shell.tsx、examples/landing.tsx、examples/centered.tsx、examples/card-grid.tsx 和 examples/content-page.tsx。

数据架构

此技能不定义生成的数据格式或持久化元数据分类体系。其组织方式基于布局原型、组件指南和示例文件：
资源 用途
references/archetypes.md 原型选择标准、JSX 骨架和响应式行为。
references/layout-components.md 组件属性名称、类型、可接受值和嵌套规则。
examples/app-shell.tsx 仪表板风格的导航栏、侧边栏和内容脚手架。
examples/landing.tsx 包含受控移动端导航栏、主视觉、区块和页脚的落地页。
examples/centered.tsx 用于身份验证和设置的居中布局。
examples/card-grid.tsx 基于卡片的目录或画廊布局。
examples/content-page.tsx 展示辅助属性和 ConfigProvider 的内容页面。
生成的输出是由 Bestax Bulma 组件组装而成的页面级 JSX/TSX。样式应使用辅助属性；特殊样式应放在具名项目样式表类中，而不是内联 style 声明中。统一的卡片集合应使用 Grid/Cell；比例布局应使用 Columns/Column。

高级特性

根据需求信号推断四种布局原型之一，并通过选择主要页面用途来处理混合意图。
默认使用响应式 Bulma 行为，仅在必要时设置特定断点的尺寸。
针对受控的
Navbar.Burger
Navbar.Menu
、
Collapse
、
Collapses
、
Tabs
、
Dropdown
Steps
API，提供精确的交互指南。
建议使用
Toast
提供自动消失的操作反馈，使用
Dialog
进行确认，并使用无障碍的
LinkButton
变体实现类文本操作。
将常见的间距、排版、颜色和弹性布局样式映射到辅助属性，避免内联样式和原始 Bulma 类名。
支持使用
scheme-main-bis
scheme-main-ter
创建兼容深色模式的区块色带，并支持基于 --bulma-* 令牌派生、适配主题的装饰性 CSS。
涵盖网格等高行为、列中的基于弹性布局的等高卡片、固定导航栏偏移、图标库配置以及无障碍组件用法。
有意限制装饰性 CSS，并指出测量后可将
bestax-optimize
技能作为下一步，以减小捆绑包体积。

name: bestax-layout-scaffold description: Scaffold a complete, responsive page layout with @allxsmith/bestax-bulma — app shells/dashboards, marketing/landing pages, centered auth/settings pages, and card-grid catalogs. Use when building a full page or overall app layout (not a single component).

Scaffolding a page layout with @allxsmith/bestax-bulma

Turn a high-level request ("admin dashboard", "landing page", "login screen", "product catalog") into a complete responsive page built from bestax-bulma layout components.

Behavioral rule

Select an archetype from the request and build it in one shot. Do not ask layout questions ("how many columns?", "where should the nav go?", "what width?") — infer the structure from the request and proceed. The archetype determines the structure; fill it with the requested content.

Ask at most one clarifying question, and only for a high-level fork the request genuinely does not imply: whether the page is public-facing (marketing) or an internal tool (authenticated app). When the request already signals this ("dashboard", "admin", "landing", "login", "pricing"), skip the question and default.

Select an archetype

Request signals Archetype

dashboard, admin, console, internal tool, authenticated app, "sidebar" App shell
landing, marketing, homepage, product/pricing page, public site Landing
login, sign up, auth, settings, checkout, a single focused form Centered
catalog, gallery, products, listing, "grid of cards", search results Card grid

Default when ambiguous: internal tool → App shell; public-facing → Landing; one focused task → Centered; a collection of items → Card grid. For mixed requests, pick the dominant intent (e.g. "admin dashboard with a product list" → App shell whose main column holds a Card grid).

Approach

Compose pages from the shipped layout components — Container, Section, Hero, Footer, Level, Columns/Column, Grid/Cell, Navbar, Menu, Card. There is no Tile component. For uniform grids (card grids, galleries — same-shaped items) prefer Grid/Cell: CSS Grid gives equal-height cells for free (per row — each row's cells match its tallest, same row-level behavior as the flex recipe). Use Columns/Column for proportional or per-breakpoint column layouts — and when cards there must be equal height, apply the flex recipe (Column display="flex" flexDirection="column" + Card flexGrow="1"; height: 100% on the card doesn't help — the column's height is auto).

Rely on Bulma's responsive defaults: Columns sit side by side on tablet and up and stack on mobile. Add responsive size* props only to tune the breakpoints.

Interactive extras don't share a state API — never transfer one by analogy: Collapse trigger={node} open/defaultOpen onOpenChange (onOpenChange(open) reports every trigger; onOpen/onClose fire only when the Collapse holds its own state), an accordion is Collapses value/defaultValue/onChange around plain Collapse children indexed from 0 by position (number | null, or number[] with multiple; hide an item with visibility="hidden", never {cond && …}, or the open state shifts to its neighbour) rather than hand-rolled open-index state, Tabs value={i}/onChange (each Tabs.Tab/Tabs.Content.Item requires index={i}, and Tabs.Content must be a child of — the active-tab context lives on it; a sibling panel never switches), Dropdown active/onActiveChange, Steps value={i}/onStepClick items={[{label, icon?}]} (child form is Steps.Step, not Steps.Item). Reveal cascade staggers only its direct children — to stagger a grid, put inside each Cell, not around the container.

Link lists (footer nav, sidebars): a bare UnorderedList of ListItems is already marker-less and flush — Bulma's reset unstyles ul — so no prop or CSS is needed; bullets appear only inside Content.

Navbar.Burger/Navbar.Menu are controlled — wire the same active state to both: active on Navbar.Menu shows/hides the mobile menu, while active + onClick on Navbar.Burger make the burger toggle it and animate. Left unwired, clicking the burger does nothing (no error, silent failure). For a fixed="top" Navbar, add the has-navbar-fixed-top class to so content is not hidden behind it — the library does not do this automatically, and an inline padding offset is not a substitute.

Style with helper props — no inline style, no raw Bulma classNames. Before writing style={{ … }} anywhere, translate each declaration with the mapping table below — the helper props cover the common cases. Bare markup has wrapper elements that take all helper props: , Paragraph, Strong — never a raw . Table cells: Th/Td take textAlign="right", textWeight, textSize directly (their color prop colors the cell; for muted cell text wrap content in Span textColor="grey"). Set the app-wide icon library once with at the root rather than library on every .

Alternating section bands are a prop, not CSS: bgColor="scheme-main-bis" on every other Section (next band scheme-main-ter). The scheme values render as a dark-mode-safe inline background-color: var(--bulma-scheme-*) — zero custom CSS — and still never bgColor="light"/"white": those are fixed colors that stay light when dark mode flips the text.

Decorative CSS is budgeted: two compact rules, ≤10 lines per app — comments count: at most one short inline note, never a file-header comment block — every value derived from --bulma-*. A marketing page gets at most one hero wash and one featured-card ring, applied via className — no resets (Bulma ships one; body/list margins are already zero) and no grid textures, masks, or multi-layer backdrops; the components carry the design:

.hero-wash {
background-image: radial-gradient( 60rem 30rem at 20% -10%, hsl(var(--bulma-primary-h) var(--bulma-primary-s) 50% / 0.2),
transparent 60%
);
}
.featured-ring { --bulma-shadow: 0 0 0 2px var(--bulma-primary); }

The ring works by overriding the upstream token, not the component's own var: .card and .box re-declare --bulma-card-shadow/--bulma-box-shadow from --bulma-shadow on their own selector, so setting those from an ancestor never wins (same for --bulma-box-radius; --bulma-card-radius is a literal with no ancestor route at all). A class-scoped CSS rule keeps the ring on just the one featured card without wrapping it in its own Theme; also compiles and is the better fit when the override already applies to a whole scoped subtree. Either way the subtree stays theme- and dark-mode-aware.

CTAs on a colored hero must stay legible in both schemes. On a fixed-color surface (Hero color="primary", a dark banner), use filled buttons — color="light" or color="primary" isInverted — never a thin isOutlined secondary: a light outline + light label on a dark surface is low-contrast and gets worse under OS dark mode. And when the page's design is single-mode (a fixed light or dark look), pin it at the root — — so a visitor's OS dark mode can't flip Bulma's text colors out from under the fixed palette (details: the bestax-theming skill's contrast rules).

Three components core Bulma will talk you out of

Most of this library's additions get found on their own, because nothing in Bulma does the job. These three do not: each has a Bulma near-miss close enough to stop the search. Across 44 cold-start builds, Dialog was used zero times and LinkButton in two thirds — and every miss shipped the "not this" column instead.

You need Use Not this

A brief confirmation after an action, self-dismissing Toast — mount once at the app root, then toast.success('Saved') (also .danger/.warning/.info) from anywhere Notification/Message
A confirm or alert the user must answer before anything Dialog — mount at the root, then if (await dialog.confirm({ title, message })) … Modal — an empty shell; the title, message, button row and confirm/cancel wiring are all yours to rebuild
A control that reads as text or a link but does something LinkButton (variant="text" | "ghost" | "underline", optional color) /
(no keyboard or screen-reader support) or Button color="text" (still button-shaped)

Mounting a container without ever calling toast./dialog. is not usage — the container is the mount point, the imperative call is the thing that shows something. Both also work as ordinary controlled components when you would rather hold the state yourself — , — but in an app with more than one call site the root container plus the imperative helper is less wiring, not more.

Inline style → helper prop mapping

Look up the declaration you were about to inline. The spacing, typography, and flex helpers below are on every component; textColor/bgColor are on the content components you'll target (Box, Block, Title, Content, Hero, Card, …) — the ones with a semantic color variant (Tag, Tabs, Panel) take color instead; wrap content in a Block if you need a text color there. Notification is the mixed case: it takes textColor, but its background comes from the semantic color prop, not bgColor.

Inline style you're about to write Helper props instead
marginTop: '1rem' (any margin/padding) mt="4" — m/mt/mx/p/py/… scale: 1=0.25rem, 2=0.5rem, 3=0.75rem, 4=1rem, 5=1.5rem, 6=3rem (nearest step)
textAlign: 'center' textAlign="centered" (also left, right, justified)
color: '#…' textColor with the nearest Bulma color: primary, link, info, success, warning, danger, white, black, grey (+ grey-light, grey-dark, …)
backgroundColor: '#…' bgColor (same palette)
fontSize: … textSize="1"…"7" (1 largest) — for headings use Title/SubTitle size
fontWeight: … textWeight: light, normal, medium, semibold, bold
textTransform, italics textTransform: uppercase, lowercase, capitalized, italic
display: 'flex' + flex properties same-named props: display="flex", flexDirection, justifyContent, alignItems, flexWrap
height: '100%' on a flex child flexGrow="1"
display: 'none' visibility="hidden", or responsive display* props (displayMobile, displayTablet, …)
gap: … in a flex layout no gap helper exists — space children with m* margins; Grid and Columns take a gap prop, so prefer those there

No helper matches (e.g. maxWidth, a one-off gradient)? Add a named class to the project stylesheet (src/App.css in a scaffolded app) and pass it via className — still never inline style.

References

references/layout-components.md — the layout component inventory: real prop names, types, and accepted values, plus subcomponent nesting.
references/archetypes.md — the four archetypes: selection criteria, JSX skeleton, and responsive behavior.

Examples

examples/app-shell.tsx — fixed Navbar + sidebar Menu + content (dashboard).
examples/landing.tsx — fixed Navbar (controlled burger) + Hero + Sections + Footer.
examples/centered.tsx — centered single column (auth/settings).
examples/card-grid.tsx — multiline Columns of Cards (catalog).
examples/content-page.tsx — hero + feature cards + CTA styled with helper props (no inline style), wrapped in ConfigProvider.

Checklist

Map the request to one archetype; do not ask layout questions.
Wrap page content in Container (+ Section for vertical rhythm).
Use Grid/Cell for uniform grids (equal heights per row, free); Columns/Column for proportional or per-breakpoint side-by-side layout — with the flex recipe when its cards must match height.
Wire active state to both Navbar.Burger and Navbar.Menu (they are controlled).
For a fixed navbar, add has-navbar-fixed-top to .
Do not use Tile — it is not shipped.
Action feedback goes through Toast, a confirmation through Dialog, a text-styled action through LinkButton — not Notification, Modal or a bare .
Style with helper props, not inline style — translate via the mapping table; values with no helper get a named class in the stylesheet, never style={{}}. No raw Bulma classNames either (Span/Paragraph wrap bare text; Th/Td take textAlign/textWeight).
Alternating bands are bgColor="scheme-main-bis" (next band scheme-main-ter) on every other Section — never band CSS, never bgColor="light"/"white".
Decorative CSS ≤10 lines total incl. comments — no file-header comment (hero wash + featured-card ring), --bulma-*-derived; no resets — Bulma ships one. The ring sets --bulma-shadow (via a scoped CSS rule or Theme bulmaVars).
Set the icon library once via at the root.
Site built? ~800 KB raw / ~82 KB gzip CSS is the expected default-flavor size — to shrink it, run the bestax-optimize skill (measure first).
AgentScope Gemini 用量修复
Bestax 自定义组件