菜单
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).
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Migrate an existing app from react-bulma-components (v4) to @allxsmith/bestax-bulma on Bulma v1 — run the bestax-migrate codemod, then resolve every TODO(bestax-migrate) comment it leaves using the mapping references. Use when a repo imports react-bulma-components and wants to move to bestax-bulma, when TODO(bestax-migrate) comments are present in a codebase, or when asked to migrate off an unmaintained React Bulma library.
Build a custom React component in the bestax/Bulma style. In an app using @allxsmith/bestax-bulma — compose existing components, helper props, public hooks (useBulmaClasses, usePrefixedClassNames), and --bulma-* CSS variables. In the bestax monorepo — the full component pipeline (SCSS partial, stories, tests, docs, wiring). Use when creating a component beyond stock Bulma or extending one.
Reduce the built CSS size of an app using @allxsmith/bestax-bulma — measure raw and gzip size, then apply the cheapest lever that fits (lighter prebuilt CSS flavor, hand-rolled modular Sass build, import and icon-asset hygiene). Use when the CSS bundle looks too big, a size budget or Lighthouse audit flags stylesheet weight, switching bestax.css to a versions/*.css flavor, or setting up a modular @use Bulma/Sass build.
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.
Use icons in an app built with @allxsmith/bestax-bulma — the Icon/IconText components and the five supported libraries (Font Awesome, Material Design Icons, Ionicons, Google Material Icons, Material Symbols). Use when adding an icon, choosing or configuring the app-wide icon library, fixing an icon that renders blank, pairing icons with text, or making icons accessible (decorative vs labeled).
Build forms with @allxsmith/bestax-bulma — Field/Control/Label/Help composition, inputs, selects, checkboxes, radios, switches, and advanced controls (Autocomplete, Slider, Numberinput, Rate, Taginput, File, date/time). There is no form/validation library; this skill shows the components and the validate-it-yourself error pattern. Use when building a form, wiring inputs to state, or showing validation/error state.
| 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). |
| license | MIT |
Turn a high-level request ("admin dashboard", "landing page", "login screen", "product catalog") into a complete responsive page built from bestax-bulma layout components.
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.
| 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).
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).Columns sit side by side on tablet and up and stack on
mobile. Add responsive size* props only to tune the breakpoints.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. 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>.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 —
<Theme isRoot colorMode="light"> — 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).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/app-shell.tsx — fixed Navbar + sidebar Menu + content (dashboard).examples/landing.tsx — 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.Container (+ Section for vertical rhythm).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.has-navbar-fixed-top to <html>.Tile — it is not shipped.mt/p, textAlign, textColor), not inline style.<ConfigProvider iconLibrary="…"> at the root.