bestax-layout-scaffold

bestax-layout-scaffold is a skill for Claude Code, Codex from allxsmith/bestax. It costs 63 tokens per session (3,664 once invoked), scanned A, original, MIT.

A layout scaffold for building complete responsive pages with bestax-bulma, a React component library based on the Bulma CSS framework. It covers app shells, dashboards, landing pages, focused forms, and catalog grids.

In plain words
What is it for?
Use it to build an internal dashboard, marketing page, login or settings screen, checkout form, or product catalog.
Why use it?
It provides an overall page structure from a high-level request, so you do not need to decide every navigation area, column, or content region first.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit Use it to build an internal dashboard, marketing page, login or settings screen, checkout form, or product catalog.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/allxsmith/bestax/bestax-layout-scaffold
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add allxsmith/bestax --skill bestax-layout-scaffold
Clone the repo
git clone --depth 1 https://github.com/allxsmith/bestax

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for bestax-layout-scaffold

README.md
[![agentmods](https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-layout-scaffold/github.svg)](https://agentmods.dev/skills/allxsmith/bestax/bestax-layout-scaffold)
Your own site
<a href="https://agentmods.dev/skills/allxsmith/bestax/bestax-layout-scaffold"><img src="https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-layout-scaffold/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for bestax-layout-scaffold

Your own site · 80×15
<a href="https://agentmods.dev/skills/allxsmith/bestax/bestax-layout-scaffold"><img src="https://agentmods.dev/badge/skills/allxsmith/bestax/bestax-layout-scaffold.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 63 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,664 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector warn 7 Sept 2026
SkillSpector: 10 findings, up to medium

These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →

  • medium Prompt Injection · line 122
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 122
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 126
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 144
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 147
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 149
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 150
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 151
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 152
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
  • medium Prompt Injection · line 154
    Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.
    Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00063 $0.03664
Opus 5 $0.00032 $0.01832
Sonnet 5 $0.00013 $0.00733
Haiku 4.5 $0.00006 $0.00366

Measured 11d ago against content hash 09ea60ed018d, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-10, from the pricing page.

Security

Grade A, and why

bestax-layout-scaffold scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 11d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/bestax-layout-scaffold/SKILL.md · 201 lines

How it starts

The opening of the file, as written. The whole thing — 201 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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 onOpen/onClose, Tabs value={i}/onChange (each Tabs.Tab/Tabs.Content.Item requires index={i}, and Tabs.Content must be a child of <Tabs> — 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 <Reveal delay={i * 80}> 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 <html> 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: <Span textSize="7" textColor="grey">, Paragraph, Strong — never a raw <span className="is-size-7 has-text-grey">. 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 <ConfigProvider iconLibrary="…"> at the root rather than library on every <Icon>.
  • 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:

Read the full file on GitHub · 201 lines

Files

What ships with it

7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 11d ago First seen · 201 lines · 63 tokens per session scan A 09ea60ed018d

Subscribe to this mod's changes

bestax-layout-scaffold is a skill published in the GitHub repository allxsmith/bestax (11 stars, last pushed today), licensed MIT. It adds 63 tokens to every session and 3,664 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

magic-ui

Use this skill when users want to add, customize, or troubleshoot Magic UI components in React/Next.js projects. It covers component selection, shadcn registry installation (@magicui/), integration patterns, and practical quality checks for accessibility and maintainability.

magicuidesign/magicui · 56 tokens

stitch-react-components

Convert Stitch HTML and screenshots into modular Vite/React/TypeScript components, or sync existing components to updated Stitch designs, with local architecture and validation checks.

PracticalSwan/agent-skills · 37 tokens

React Component Patterns

Use this skill when you’re building or refactoring React components in a production app and want consistent patterns for typing, composition, state, and performance without introducing premature abstraction.

AmariahAK/atlarix-skills · 3 tokens

next-cache-components-optimizer

Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…

vercel/next.js · 170 tokens

migrate-radix-to-base

Migrates React projects and components from Radix UI to Base UI. Use when asked to migrate from radix, move to base-ui, convert radix primitives, or switch a shadcn project's base library. Handles single components ("migrate accordion") and whole projects.

shadcn-ui/ui · 61 tokens

nextjs-pages-router

Set up tRPC in Next.js Pages Router with createNextApiHandler, createTRPCNext, withTRPC HOC, SSR via ssr option and ssrPrepass, SSG via createServerSideHelpers with getStaticProps, and server-side helpers for getServerSideProps prefetching.

trpc/trpc · 67 tokens