# Bestax-Bulma > A Bulma React component library. LLM-friendly documentation for @allxsmith/bestax-bulma. Supply-chain posture — same claims as the package README; every item is verifiable: - Signed provenance on every release (sigstore; check `npm audit signatures` or the npm Provenance section) - npm OIDC trusted publishing — no long-lived `NPM_TOKEN`; release commits and tags are GPG-signed - Socket.dev scans every PR for malware, install scripts, obfuscated code, and privilege escalation - Install scripts blocked unless allow-listed; versions younger than 3 days will not install - Every GitHub Action pinned to a full commit SHA - CodeQL, Dependency Review, Dependabot, and a high-severity `pnpm audit` gate - Layered AI review (CodeRabbit + an independent adversarial Claude review) plus required green CI, an approving review, and a human merge Full detail: https://github.com/allxsmith/bestax/blob/main/SECURITY.md · https://bestax.io/docs/guides/security ## Distribution and Listings Bestax ships to npm, and copies or descriptions of it live in registries, plugin marketplaces, directories and curated lists. Some follow our releases on their own. The rest keep what was submitted until a person changes it. Read [What goes stale](#what-goes-stale) before a change that could make a listing wrong, and update this page when a listing is added, accepted, removed or changes how it updates. In the tables below, **Automatic** means it picks up releases or the repo with nothing from us, **Manual** means someone has to edit or resubmit it when the trigger in the last column happens, **Mixed** means releases flow through on their own but the change in the last column needs a person, and **Unknown** means we have not confirmed how it updates. ### Package registries | Where | Carries | Updates | When to act | | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [npm](https://www.npmjs.com/~allxsmith) | `@allxsmith/bestax-bulma`, `create-bestax`, `bestax-migrate`, `bestax-mcp`, `@allxsmith/eslint-plugin-bestax` | Automatic | semantic-release publishes from `ci.yml`, keyed by commit scope. See `VERSIONING.md`. | | [`bestax` plugin](https://github.com/allxsmith/bestax-skills), in allxsmith/bestax-skills | The skills and `bestax-mcp` | Automatic | `skills-publish.yml` regenerates it from `main` on each change and after each `bestax-mcp` release. | | [Glama](https://glama.ai/mcp/servers/allxsmith/bestax) | `bestax-mcp` | Mixed | Auto-Release rebuilds on every GitHub release in the repo and installs `bestax-mcp@latest`. Edit the Dockerfile in Glama's admin if the start command changes. | | [skills.sh](https://skills.sh/allxsmith/bestax) | The skills | Automatic | Listed from `npx skills add` installs. | | [Context7](https://context7.com/allxsmith/bestax) | The docs | Mixed | Indexes the repo's markdown. Refresh it from the Context7 dashboard if it falls behind. | | [cursor.directory](https://cursor.directory/plugins/bestax) | The skills and `bestax-mcp` | Manual | A copy of each skill's text and an MCP entry, pasted by hand. Refresh the copies when a skill changes, and edit the entry when a skill is added, renamed or removed or the MCP command changes. | | [Official MCP Registry](https://registry.modelcontextprotocol.io/v0/servers?search=io.github.allxsmith/bestax-mcp) | `bestax-mcp`, as `io.github.allxsmith/bestax-mcp` | Automatic | `mcp-registry.yml` publishes each `bestax-mcp@` release. | | [Codemod Registry](https://app.codemod.com/registry/bestax-migrate) | `bestax-migrate` | Manual | A wrapper that pins one bestax-migrate release. Bump and republish it after each release, as `CONTRIBUTING.md` describes under "Codemod Registry". | | [ClawHub](https://clawhub.ai/allxsmith) | The skills | Manual | One upload per skill. Re-upload a skill when it changes, and upload a new one when it is added. ClawHub republishes them under MIT-0. | Glama labels its builds with its own version numbers, so they don't match npm. ### Directories | Where | Carries | Updates | When to act | | ---------------------------------------------------------------------------------- | ------------------ | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | [mcpservers.org](https://mcpservers.org) | `bestax-mcp` | Manual | Resubmit when what the server offers changes. | | [mcprush](https://mcprush.com/allxsmith/bestax-mcp) | `bestax-mcp` | Unknown | mcprush built the page from the npm package. We did not submit it, and claiming the page is what lets us edit it. | | [TensorBlock](https://tensorblock.co/mcp/servers/github-allxsmith-bestax-191463f6) | `bestax-mcp` | Automatic | Built from the TensorBlock list entry below. | | [LibHunt](https://www.libhunt.com/r/bestax) | The repo | Automatic | Reads the repo. | | [mcpmarket.com](https://mcpmarket.com) | `bestax-mcp` | Manual | In review. | | [Made with React.js](https://madewithreactjs.com) | bestax-bulma | Manual | In review. | | [llms.txt directory](https://directory.llmstxt.cloud) | bestax.io | Automatic | In review. Reads `/llms.txt`. | | [skillsindex.dev](https://skillsindex.dev) | Skills and MCP | Manual | In review. | | [agenticskills.io](https://agenticskills.io) | Skills and MCP | Manual | In review. | | [mcpm.sh registry](https://github.com/pathintegral-institute/mcpm.sh) | `bestax-mcp` | Manual | In review in [#427](https://github.com/pathintegral-institute/mcpm.sh/pull/427). The entry gives `npx -y bestax-mcp@1` and lists each tool by name. | | [Kilo marketplace](https://github.com/Kilo-Org/kilo-marketplace) | `bestax-mcp` | Manual | In review in [#339](https://github.com/Kilo-Org/kilo-marketplace/pull/339). The entry gives `npx -y bestax-mcp@1`. | | [llms-txt-hub](https://llmstxthub.com) | bestax.io llms.txt | Manual | In review in [#1925](https://github.com/thedaviddias/llms-txt-hub/pull/1925). An `.mdx` file with the name, description and both URLs. | | [mcp.directory](https://mcp.directory) | `bestax-mcp` | Mixed | In review, through its form. It reads the repo for metadata. Claiming the page is an email to hello@mcp.directory. | | [Tessl Registry](https://tessl.io/registry/skills/github/allxsmith/bestax) | The skills | Manual | Listed, with evaluation pending. One entry per skill from a scan of the `skills/` folder; run the analysis again after a skill changes. | | [Skills Directory](https://www.skillsdirectory.com/skills/allxsmith-bestax-form) | The skills | Manual | Listed, one page per skill, each with a security grade from its own scan. An entry is scanned once; resubmit it after a change. | | [Cline MCP Marketplace](https://github.com/cline/mcp-marketplace) | `bestax-mcp` | Manual | In review in [issue #2883](https://github.com/cline/mcp-marketplace/issues/2883). The issue gives `npx -y bestax-mcp@1` and the logo URL. | ### Plugin directories and marketplaces Each of these takes the `bestax` plugin from allxsmith/bestax-skills. The last column says whether it lists the plugin yet. | Where | Carries | Updates | When to act | | ----------------------------------------------------------------------- | ----------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Anthropic plugin directory | Skills and `bestax-mcp` | Mixed | In review. A GitHub push webhook on bestax-skills sends it each publish, and a reviewer checks each version before it goes live. | | Cursor Marketplace | Skills and `bestax-mcp` | Manual | In review. Cursor reads bestax-skills through `.cursor-plugin/plugin.json` and reviews each update. | | Kiro | Skills and `bestax-mcp` | Manual | In review. Kiro reaches out if it takes the power into its registry. | | [Grok Build marketplace](https://github.com/xai-org/plugin-marketplace) | Skills and `bestax-mcp` | Automatic | In review in [#1237](https://github.com/xai-org/plugin-marketplace/pull/1237). The entry pins a commit, which moves when their maintainers merge a version-bump pull request. | | [awesome-copilot](https://github.com/github/awesome-copilot) | Skills and `bestax-mcp` | Manual | In review in [issue #4541](https://github.com/github/awesome-copilot/issues/4541). It pins a commit and the version in the root `plugin.json`, which stay put until we send an update. | | [Build with Claude](https://github.com/davepoon/buildwithclaude) | Skills and `bestax-mcp` | Manual | Listed through [#385](https://github.com/davepoon/buildwithclaude/pull/385). The entry carries the version from `plugin.json`, so a pull request there bumps it. | | [HOL Registry](https://hol.org/plugins) | Skills and `bestax-mcp` | Mixed | Listed through the awesome-ai-plugins entry below. HOL scans bestax-skills on its own, and the list entry is a line of text. | | [Gemini CLI extensions](https://geminicli.com/extensions) | Skills and `bestax-mcp` | Automatic | Listed. The gallery lists repositories with a `gemini-extension.json` and the `gemini-cli-extension` topic, and bestax-skills has both. Installs follow the repository. | | [aitmpl.com](https://www.aitmpl.com/plugins) | Skills and `bestax-mcp` | Manual | In review in [#1132](https://github.com/davila7/claude-code-templates/pull/1132). A repo tuple in its generator plus a generated entry; the entry counted no skills because the marketplace source is `./`, and they regenerate the list themselves. | | [Claude Plugin Hub](https://www.claudepluginhub.com) | Skills and `bestax-mcp` | Automatic | Listed. It indexes bestax-skills from the manifest on its own. Claiming the listing needs a sign-in. | ### Awesome lists #### Listed | List | Entry | Pull request | | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ---------------------------------------------------------------------------------- | | [aldi/awesome-bulma](https://github.com/aldi/awesome-bulma) | Bestax | [#5](https://github.com/aldi/awesome-bulma/pull/5) | | [jaywcjlove/awesome-uikit](https://github.com/jaywcjlove/awesome-uikit) | bestax-bulma | [#49](https://github.com/jaywcjlove/awesome-uikit/pull/49) | | [anubhavsrivastava/awesome-ui-component-library](https://github.com/anubhavsrivastava/awesome-ui-component-library) | bestax-bulma | [#58](https://github.com/anubhavsrivastava/awesome-ui-component-library/pull/58) | | [jelmer/awesome-codemods](https://github.com/jelmer/awesome-codemods) | bestax-migrate | [#7](https://github.com/jelmer/awesome-codemods/pull/7) | | [acvnace/awesome-vibe-coding-resources](https://github.com/acvnace/awesome-vibe-coding-resources) | Bestax | [#111](https://github.com/acvnace/awesome-vibe-coding-resources/pull/111) | | [TensorBlock/awesome-mcp-servers](https://github.com/TensorBlock/awesome-mcp-servers) | Bestax MCP | [#2872](https://github.com/TensorBlock/awesome-mcp-servers/pull/2872) | | [AlexMili/Awesome-MCP](https://github.com/AlexMili/Awesome-MCP) | Bestax MCP | [#231](https://github.com/AlexMili/Awesome-MCP/pull/231) | | [iamismile/web-dev-resources](https://github.com/iamismile/web-dev-resources) | Bestax | [#61](https://github.com/iamismile/web-dev-resources/pull/61) | | [OSSDrop/OSSDrop](https://github.com/OSSDrop/OSSDrop) | Bestax | [#64](https://github.com/OSSDrop/OSSDrop/pull/64) | | [MobinX/awesome-mcp-list](https://github.com/MobinX/awesome-mcp-list) | allxsmith/bestax | [38f0646](https://github.com/MobinX/awesome-mcp-list/commit/38f0646) | | [toolsdk-ai/toolsdk-mcp-registry](https://github.com/toolsdk-ai/toolsdk-mcp-registry) | bestax-mcp | [#587](https://github.com/toolsdk-ai/toolsdk-mcp-registry/pull/587) | | [Piebald-AI/awesome-gemini-cli](https://github.com/Piebald-AI/awesome-gemini-cli) | Bestax | [#161](https://github.com/Piebald-AI/awesome-gemini-cli/pull/161) | | [alvinreal/awesome-opensource-ai](https://github.com/alvinreal/awesome-opensource-ai) | bestax-mcp | [#800](https://github.com/alvinreal/awesome-opensource-ai/pull/800) | | [slavakurilyak/awesome-ai-agents](https://github.com/slavakurilyak/awesome-ai-agents) | bestax-mcp | [issue #688](https://github.com/slavakurilyak/awesome-ai-agents/issues/688) | | [laolaoshiren/claude-code-skills-zh](https://github.com/laolaoshiren/claude-code-skills-zh) | Bestax skills | [3256076](https://github.com/laolaoshiren/claude-code-skills-zh/commit/3256076) | | [hashgraph-online/awesome-ai-plugins](https://github.com/hashgraph-online/awesome-ai-plugins) | Bestax | [#623](https://github.com/hashgraph-online/awesome-ai-plugins/pull/623) | | [pegaltier/awesome-utils-dev](https://github.com/pegaltier/awesome-utils-dev) | Bestax | [#81](https://github.com/pegaltier/awesome-utils-dev/pull/81) | | [mcpHQ/awesome-mcp-servers](https://github.com/mcpHQ/awesome-mcp-servers) | Bestax | [#135](https://github.com/mcpHQ/awesome-mcp-servers/pull/135) | | [bradtraversy/design-resources-for-developers](https://github.com/bradtraversy/design-resources-for-developers) | Bestax | [#1797](https://github.com/bradtraversy/design-resources-for-developers/pull/1797) | | [Chat2AnyLLM/awesome-repo-configs](https://github.com/Chat2AnyLLM/awesome-repo-configs) | allxsmith/bestax and bestax-skills | [#221](https://github.com/Chat2AnyLLM/awesome-repo-configs/pull/221) | | [gmh5225/awesome-skills](https://github.com/gmh5225/awesome-skills) | bestax-skills | [#82](https://github.com/gmh5225/awesome-skills/pull/82) | | [lauthieb/awesome-storybook](https://github.com/lauthieb/awesome-storybook) | Bestax Storybook | [#21](https://github.com/lauthieb/awesome-storybook/pull/21) | | [Piebald-AI/awesome-gemini-cli-extensions](https://github.com/Piebald-AI/awesome-gemini-cli-extensions) | Bestax | [#61](https://github.com/Piebald-AI/awesome-gemini-cli-extensions/pull/61) | | [VoltAgent/official-mcp-servers](https://github.com/VoltAgent/official-mcp-servers) | allxsmith/bestax | [#9](https://github.com/VoltAgent/official-mcp-servers/pull/9) | | [AIAnytime/Awesome-MCP-Server](https://github.com/AIAnytime/Awesome-MCP-Server) | Bestax | [#169](https://github.com/AIAnytime/Awesome-MCP-Server/pull/169) | | [VoltAgent/awesome-agent-skills](https://github.com/VoltAgent/awesome-agent-skills) | allxsmith/bestax | [#1132](https://github.com/VoltAgent/awesome-agent-skills/pull/1132) | | [VoltAgent/awesome-openclaw-skills](https://github.com/VoltAgent/awesome-openclaw-skills) | bestax-layout-scaffold | [#591](https://github.com/VoltAgent/awesome-openclaw-skills/pull/591) | | [aycanogut/front-end-resources](https://github.com/aycanogut/front-end-resources) | bestax-bulma | [#89](https://github.com/aycanogut/front-end-resources/pull/89) | #### In review | List | Entry | Pull request | | --------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------------------------------------------------------------------------- | | [enaqx/awesome-react](https://github.com/enaqx/awesome-react) | bestax-bulma | [#1862](https://github.com/enaqx/awesome-react/pull/1862) | | [brillout/awesome-react-components](https://github.com/brillout/awesome-react-components) | Bestax | [#616](https://github.com/brillout/awesome-react-components/pull/616) | | [jgthms/bulma](https://github.com/jgthms/bulma) (README) | Bestax | [#4014](https://github.com/jgthms/bulma/pull/4014) | | [semlinker/awesome-typescript](https://github.com/semlinker/awesome-typescript) | create-bestax | [#198](https://github.com/semlinker/awesome-typescript/pull/198) | | [SecretiveShell/Awesome-llms-txt](https://github.com/SecretiveShell/Awesome-llms-txt) | bestax.io llms.txt | [#200](https://github.com/SecretiveShell/Awesome-llms-txt/pull/200) | | [punkpeye/awesome-mcp-servers](https://github.com/punkpeye/awesome-mcp-servers) | allxsmith/bestax | [#15446](https://github.com/punkpeye/awesome-mcp-servers/pull/15446) | | [yzfly/Awesome-MCP-ZH](https://github.com/yzfly/Awesome-MCP-ZH) | Bestax | [#653](https://github.com/yzfly/Awesome-MCP-ZH/pull/653) | | [ai-for-developers/awesome-ai-coding-tools](https://github.com/ai-for-developers/awesome-ai-coding-tools) | Bestax | [#817](https://github.com/ai-for-developers/awesome-ai-coding-tools/pull/817) | | [eltociear/awesome-AI-driven-development](https://github.com/eltociear/awesome-AI-driven-development) | bestax-mcp | [#146](https://github.com/eltociear/awesome-AI-driven-development/pull/146) | | [narrowin/awesome-generative-ui](https://github.com/narrowin/awesome-generative-ui) | bestax-mcp | [#21](https://github.com/narrowin/awesome-generative-ui/pull/21) | | [abubakarsiddik31/claude-skills-collection](https://github.com/abubakarsiddik31/claude-skills-collection) | Bestax | [#57](https://github.com/abubakarsiddik31/claude-skills-collection/pull/57) | | [GetBindu/awesome-claude-code-and-skills](https://github.com/GetBindu/awesome-claude-code-and-skills) | allxsmith/bestax | [#237](https://github.com/GetBindu/awesome-claude-code-and-skills/pull/237) | | [JayLZhou/Awesome-Agent-Skills](https://github.com/JayLZhou/Awesome-Agent-Skills) | Bestax Skills | [#48](https://github.com/JayLZhou/Awesome-Agent-Skills/pull/48) | | [kodustech/awesome-agent-skills](https://github.com/kodustech/awesome-agent-skills) | bestax-layout-scaffold | [#128](https://github.com/kodustech/awesome-agent-skills/pull/128) | | [ZeroPointRepo/awesome-hermes-skills](https://github.com/ZeroPointRepo/awesome-hermes-skills) | Bestax skills | [#103](https://github.com/ZeroPointRepo/awesome-hermes-skills/pull/103) | | [karanb192/awesome-claude-skills](https://github.com/karanb192/awesome-claude-skills) | Bestax skills | [#383](https://github.com/karanb192/awesome-claude-skills/pull/383) | | [alexpate/awesome-design-systems](https://github.com/alexpate/awesome-design-systems) | Bestax | [#368](https://github.com/alexpate/awesome-design-systems/pull/368) | | [vitejs/awesome-vite](https://github.com/vitejs/awesome-vite) | create-bestax | [#1155](https://github.com/vitejs/awesome-vite/pull/1155) | | [dustinspecker/awesome-eslint](https://github.com/dustinspecker/awesome-eslint) | Bestax (eslint-plugin) | [#313](https://github.com/dustinspecker/awesome-eslint/pull/313) | | [nafasebra/awesome-webdesign-tools](https://github.com/nafasebra/awesome-webdesign-tools) | Bestax | [#149](https://github.com/nafasebra/awesome-webdesign-tools/pull/149) | | [aldi/awesome-bulma](https://github.com/aldi/awesome-bulma) | bestax-mcp and Bestax Skills, under Tools | [#6](https://github.com/aldi/awesome-bulma/pull/6) | | [tolkonepiu/best-of-mcp-servers](https://github.com/tolkonepiu/best-of-mcp-servers) | allxsmith/bestax | [#481](https://github.com/tolkonepiu/best-of-mcp-servers/pull/481) | | [YuzeHao2023/Awesome-MCP-Servers](https://github.com/YuzeHao2023/Awesome-MCP-Servers) | Bestax | [#594](https://github.com/YuzeHao2023/Awesome-MCP-Servers/pull/594) | | [ccplugins/awesome-claude-code-plugins](https://github.com/ccplugins/awesome-claude-code-plugins) | Bestax and allxsmith/bestax-skills | [#661](https://github.com/ccplugins/awesome-claude-code-plugins/pull/661) | | [ComposioHQ/awesome-claude-skills](https://github.com/ComposioHQ/awesome-claude-skills) | bestax-skills | [#2154](https://github.com/ComposioHQ/awesome-claude-skills/pull/2154) | | [BehiSecc/awesome-claude-skills](https://github.com/BehiSecc/awesome-claude-skills) | bestax-skills | [#880](https://github.com/BehiSecc/awesome-claude-skills/pull/880) | | [composio-community/awesome-codex-skills](https://github.com/composio-community/awesome-codex-skills) | bestax-skills | [#332](https://github.com/composio-community/awesome-codex-skills/pull/332) | | [heilcheng/awesome-agent-skills](https://github.com/heilcheng/awesome-agent-skills) | Skills by Bestax | [#561](https://github.com/heilcheng/awesome-agent-skills/pull/561) | | [spencerpauly/awesome-cursor-skills](https://github.com/spencerpauly/awesome-cursor-skills) | bestax-skills | [#106](https://github.com/spencerpauly/awesome-cursor-skills/pull/106) | | [rohitg00/awesome-claude-code-toolkit](https://github.com/rohitg00/awesome-claude-code-toolkit) | bestax-skills | [#832](https://github.com/rohitg00/awesome-claude-code-toolkit/pull/832) | | [Prat011/awesome-llm-skills](https://github.com/Prat011/awesome-llm-skills) | bestax-skills | [#273](https://github.com/Prat011/awesome-llm-skills/pull/273) | | [finfin/awesome-frontend-skills](https://github.com/finfin/awesome-frontend-skills) | allxsmith/bestax | [#6](https://github.com/finfin/awesome-frontend-skills/pull/6) | Every list entry is Manual: it holds the text we submitted until someone opens a pull request against that list. ### Planned Not live yet. | Where | Carries | Updates | Notes | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | GitHub MCP Registry | `bestax-mcp` | Unknown | Onboarding requested in [discussion #1257](https://github.com/github/github-mcp-server/discussions/1257#discussioncomment-18787001). New versions sync from the official listing once it is added. | | OpenAI plugin directory | The skills | Manual | It takes remote MCP servers only, so `bestax-mcp` would not come along. Each upload is a ZIP with a new version. | | [agentskill.sh](https://agentskill.sh/submit) | The skills | Manual | The import of `allxsmith/bestax` hit its hourly rate limit; submit the repo again. | | [llmstxt.site](https://llmstxt.site/submit) | bestax.io llms.txt | Manual | The form requires an email address; everything else is filled in. | | [hesreallyhim/awesome-claude-code](https://github.com/hesreallyhim/awesome-claude-code) | The skills | Manual | Issue form only, and issue creation is limited to collaborators for now. The monorepo qualifies on age; retry when the limit lifts. | | [Smithery](https://smithery.ai/skills) | The skills | Manual | Publish needs a login, and it does not index the skills on its own. Its MCP side needs a `.mcpb` bundle. | | [ModelScope MCP marketplace](https://modelscope.cn/mcp) | `bestax-mcp` | Manual | Create MCP needs a ModelScope account. It feeds Cherry Studio. | | [mcp.so](https://mcp.so/submit) | `bestax-mcp` | Manual | Submission is a one-time paid listing or an untriaged GitHub issue. Skipped. | | LobeHub marketplace | `bestax-mcp` | Unknown | No self-serve submission found; market.lobehub.com is an API endpoint. | | [Best of JS](https://bestofjs.org) | The repo | Manual | Takes projects from 100 GitHub stars. | | [MunGell/awesome-for-beginners](https://github.com/MunGell/awesome-for-beginners) | The repo | Manual | Needs open `good first issue` issues first. | | Claude Desktop connectors directory | `bestax-mcp` | Manual | Needs a `.mcpb` bundle, as does Smithery's MCP side. | | [hashgraph-online/awesome-codex-plugins](https://github.com/hashgraph-online/awesome-codex-plugins) | The plugin | Manual | Needs `.codex-plugin/plugin.json` in bestax-skills and a HOL scanner score of 80 or more. | | [Docker MCP Catalog](https://github.com/docker/mcp-registry) | `bestax-mcp` | Manual | Needs a Dockerfile in this repo, and its queue moves slowly. | | [PulseMCP](https://www.pulsemcp.com) | `bestax-mcp` | Automatic | Closed to submissions; says it will import from the official MCP registry when it reopens. | | [RoggeOhta/awesome-codex-cli](https://github.com/RoggeOhta/awesome-codex-cli) and [awesome-opencode](https://github.com/awesome-opencode/awesome-opencode) | The skills | Manual | Each wants docs that cover its agent, and the skills docs mention neither Codex nor OpenCode. | | [markodenic/web-development-resources](https://github.com/markodenic/web-development-resources) and [agarrharr/awesome-cli-apps](https://github.com/agarrharr/awesome-cli-apps) | bestax-bulma, create-bestax | Manual | Both refuse submissions written with an LLM, so a maintainer writes these by hand. | | [goose extensions directory](https://goose-docs.ai/extensions/) | `bestax-mcp` | Unknown | Closed without merging in [#12784](https://github.com/aaif-goose/goose/pull/12784). goose takes no new third-party servers in its directory and is moving to the Official MCP Registry, which lists `bestax-mcp` already. | | farhan523/awesome-js-starters | `@allxsmith/bestax-bulma` | Manual | The repository stopped resolving shortly after [#59](https://github.com/farhan523/awesome-js-starters/pull/59) opened with a package README. The fork `allxsmith/awesome-js-starters` keeps that README if the list comes back. | ### GitHub topics Topic pages are the one listing GitHub keeps itself. Each repository's About panel shows the topics it carries. The Gemini CLI gallery reads `gemini-cli-extension` on `allxsmith/bestax-skills`, so that topic stays. Topics are repository settings, so `skills-publish.yml` regenerating bestax-skills does not touch them. Add a topic when a package gains a new surface. ### What goes stale Third-party entries copy facts from this repo. A change to any of these makes some of them wrong. Say in the pull request which listings need an update, then open those updates once it ships. - **Adding, renaming or removing a skill.** Entries that name skills or say how many there are: claude-skills-collection, awesome-hermes-skills, claude-code-skills-zh, Awesome-Agent-Skills (JayLZhou), awesome-claude-code-and-skills and kodustech (both name `bestax-layout-scaffold`), skillsindex.dev, agenticskills.io, cursor.directory, ClawHub, Build with Claude (which also gives a count), awesome-ai-plugins, karanb192/awesome-claude-skills, heilcheng/awesome-agent-skills (one line per skill), awesome-openclaw-skills and awesome-frontend-skills (both name `bestax-layout-scaffold`), awesome-claude-code-toolkit and awesome-codex-skills (both name `bestax-form`), ccplugins, awesome-llm-skills, Chat2AnyLLM's `plugin_repos.json`, and the Tessl Registry and Skills Directory, which hold one entry per skill. Chat2AnyLLM's `skill_repos.json` scans the `skills/` folder on its own. - **Editing a skill.** cursor.directory and ClawHub hold copies of each skill's text, so they keep the old wording until someone pastes or uploads the new one. The Tessl Registry and Skills Directory publish a score and a security grade from a scan of each skill, and show the old one until the skill is analysed or resubmitted again. - **Changing what `bestax-mcp` offers.** Most MCP entries say it serves props, examples, CSS variables and Agent Skills, offline, with no API key. awesome-AI-driven-development also gives an example count, in English and Japanese. toolsdk-mcp-registry documents the `BESTAX_MCP_NO_VERSION_CHECK` variable, and the mcpm.sh registry lists each tool by name. AIAnytime, YuzeHao2023, ccplugins, best-of-mcp-servers, Chat2AnyLLM's `mcp_server_repos.json`, the Cline issue and mcp.directory carry the same description. official-mcp-servers, the awesome-bulma Tools entries and awesome-gemini-cli-extensions give a shorter one. - **A new major of `bestax-mcp`.** Awesome-MCP-ZH, TensorBlock, cursor.directory, the mcpm.sh registry, the Kilo marketplace, AIAnytime, ccplugins, Chat2AnyLLM, the Cline issue and mcp.directory give `npx -y bestax-mcp@1` as the command. The `bestax` plugin does not go stale here: it pins the exact version, and `skills-publish.yml` regenerates it after each release. - **A plugin release.** Once listed, awesome-copilot, the OpenAI directory and Kiro pin the `version` in bestax-skills' root `plugin.json`, Cursor Marketplace the same version in `.cursor-plugin/plugin.json`, and Build with Claude a copy of it in its own entry. Its patch counts the commits that touched the plugin's content, plus a number the generator raises when its output changes, so it rises with each change without a hand bump, and the MAJOR.MINOR comes from `plugin.version` in `plugin/manifest.json`. Update those entries when a release should reach them. Codex keys its plugin cache on the version too, and Claude Code reads the same version from `.claude-plugin/plugin.json`. The Grok Build entry pins a commit instead, which moves when their maintainers merge a version-bump pull request. - **Changing the plugin icon.** Anthropic's plugin directory takes the icon in bestax-skills' `.claude-plugin/icon.png` only the first time the plugin is saved or submitted, so a new `plugin/icon.png` does not reach that listing on its own. Cursor Marketplace has its own logo, `assets/logo.png` in bestax-skills, from `plugin/logo.png`. - **Raising the Node version `bestax-mcp` needs.** The mcpm.sh registry, the Kilo marketplace and the Cline issue repeat the `engines` floor from `bestax-mcp/package.json` as a requirement. - **Changing how `bestax-mcp` starts.** Glama's Dockerfile runs the `bestax-mcp` command, so edit it in Glama's admin. cursor.directory's MCP entry and the entries above that give the command need the same change. - **A bestax-migrate release.** The Codemod Registry wrapper keeps running the version it pins until it is bumped and republished. CONTRIBUTING.md has the steps under "Codemod Registry". - **Changing an install command.** awesome-claude-code-and-skills, claude-code-skills-zh, awesome-claude-code-toolkit and awesome-frontend-skills give `npx skills add https://github.com/allxsmith/bestax --skill `. awesome-codex-skills gives the Codex skill-installer form, `--repo allxsmith/bestax --path skills/`. ccplugins gives `/plugin marketplace add allxsmith/bestax-skills` and `/plugin install bestax@bestax`. - **Moving or renaming a package folder.** Entries link to `tree/main/bestax-mcp`, `tree/main/skills`, `tree/main/skills/bestax-layout-scaffold` (and every other skill folder, in heilcheng/awesome-agent-skills), `tree/main/create-bestax`, `tree/main/eslint-plugin` and `tree/main/bestax-migrate`. Chat2AnyLLM pins `skillsPath: skills` and `subPath: bestax-mcp`, and aitmpl.com pins the bestax-skills repo with `https://bestax.io`. The Cline issue links the logo in `bulma-ui/images/`. Plugin listings point at allxsmith/bestax-skills instead. - **Renaming a package or moving a page on bestax.io.** Entries use the package names, `https://bestax.io`, `/llms.txt` and `/llms-full.txt`. awesome-storybook links `/storybook/`. aitmpl.com links `/docs/guides/llms`, and AIAnytime and the Cline issue link its `#mcp-server` anchor, so renaming that heading breaks them. - **A new Bulma major.** Nearly every entry says "Bulma v1". Bestax is called bestax-bulma on React component-library lists and Bestax everywhere else. Package names stay as they are. Write a new or refreshed description so it says early on that Bestax is for building with Bulma v1, since Bulma is the name people search for. Older entries, such as the description in `bestax-mcp/server.json`, still put it last. --- ## Quick Start ### Create a Bestax App The fastest way to get started. The scaffolder sets up a Vite + React project with bestax-bulma and CSS pre-configured: ```bash pnpm create bestax@latest my-bestax-app cd my-bestax-app pnpm install pnpm run dev ``` :::info CSS is included automatically The scaffolder configures `bestax.css` for you — a single stylesheet that includes both Bulma and all bestax extras. No manual CSS setup needed. ::: That's it! Visit http://localhost:5173 to see your app. Skip ahead to [Next Steps](#next-steps), or keep reading to add bestax to an existing project. --- ### Add to an Existing Project #### Install Dependencies ```bash pnpm add @allxsmith/bestax-bulma ``` #### Add Bestax CSS Import the combined stylesheet in your application entry point (e.g. `main.jsx`, `main.tsx`, `index.js`): ```js import '@allxsmith/bestax-bulma/bestax.css'; ``` This single import includes both Bulma base styles and all bestax extras. :::tip Already using Bulma? If you already import Bulma CSS separately, you can keep that and just add the extras: ```js import 'bulma/css/bulma.min.css'; import '@allxsmith/bestax-bulma/extras.css'; ``` ::: --- ### Use Your First Component Replace `src/App.jsx` (or add to your existing app): ```jsx title="src/App.jsx" import { Button, Box, Title, Notification } from '@allxsmith/bestax-bulma'; import { useState } from 'react'; function App() { const [showAlert, setShowAlert] = useState(false); return ( Welcome to bestax-bulma! {showAlert && ( Great! You're ready to build with bestax-bulma. )} ); } export default App; ``` --- ### Run Your App ```bash pnpm run dev ``` Visit http://localhost:5173 to see your app running. --- ### Next Steps - [Installation Options](/docs/guides/getting-started/installation) -- Icon libraries, CDN, custom Bulma builds, and more - [Extra Components](/docs/guides/library/components) -- Toast, Dialog, Slider, Switch, and other extras - [Toolchains](/docs/guides/getting-started/react-setups) -- Next.js, TypeScript, and Create React App guides - [Browse Components](/docs/category/elements) -- Full API docs and live examples --- ## Security How Bestax protects its supply chain, how you can verify what you install, and where to report a vulnerability. ### What you install is what we built The packages released through CI — `@allxsmith/bestax-bulma`, `create-bestax`, `bestax-migrate`, `bestax-mcp` and `@allxsmith/eslint-plugin-bestax` — carry **npm provenance**: every version in the supported release lines below carries a signed attestation generated at publish time that links the tarball on the registry to the exact source commit and the public CI run that built it. (Versions older than those lines predate provenance and have none — another reason staying current is the supported posture. A package's very first version can also be a placeholder published by hand to create the name, which no laptop can attest; those are superseded by the first CI release.) Releases authenticate to npm via **OIDC trusted publishing** (short-lived, per-run tokens), so there is no long-lived npm token that could leak and be used to push a rogue release. Only the **latest release line** of each package receives security fixes (currently bestax-bulma 5.x, create-bestax 4.x, bestax-migrate 2.x, bestax-mcp 1.x, and eslint-plugin-bestax 1.x). Releases are fully automated from `main` via semantic-release, so the newest published version is always the patched one — staying current is the supported posture. See [SECURITY.md](https://github.com/allxsmith/bestax/blob/main/SECURITY.md) for the full policy. ### Verify it yourself - **Provenance on npmjs.com** — the package pages for [`@allxsmith/bestax-bulma`](https://www.npmjs.com/package/@allxsmith/bestax-bulma), [`create-bestax`](https://www.npmjs.com/package/create-bestax), [`bestax-migrate`](https://www.npmjs.com/package/bestax-migrate), [`bestax-mcp`](https://www.npmjs.com/package/bestax-mcp) and [`@allxsmith/eslint-plugin-bestax`](https://www.npmjs.com/package/@allxsmith/eslint-plugin-bestax) each show a _Provenance_ section linking an attested version to its source commit and build. - **`npm audit signatures`** — in projects installed with the npm CLI, run it to check registry signatures and provenance attestations for every package in your tree, Bestax included. (It's an npm command — for pnpm or yarn projects, rely on the lockfile guidance below and the provenance UI on npmjs.com.) - **Lockfiles** — commit your lockfile and install with a frozen/ci install (`npm ci`, `pnpm install --frozen-lockfile`) so your builds resolve exactly what you reviewed. Bestax's own CI does the same. ### How the repository is protected The monorepo applies defense-in-depth against supply-chain attacks: - **Dependency install scripts are blocked by default.** pnpm only runs install/postinstall scripts for an explicit allow-list of native builders — any dependency outside that short list can't execute code at install time. - **A 3-day dependency cooldown.** By default, versions published less than 3 days ago refuse to install, which defeats the common pattern where a hijacked package's malicious release is yanked within hours. (The dev-only `prettier` formatter is the one pinned exclusion.) - **Isolated `node_modules`.** pnpm's isolated linker makes undeclared (phantom) dependencies fail loudly instead of silently resolving. - **Frozen-lockfile CI.** Build and release jobs install with `--frozen-lockfile`; the only exception is the React 18/19 compatibility matrix, which deliberately re-resolves React for testing and never publishes. - **SHA-pinned GitHub Actions.** Every third-party action is pinned to a full commit SHA, so a moved tag can't inject code into the pipeline. - **CodeQL, dependency review, and Dependabot.** Code scanning covers the TypeScript sources and the workflow files themselves; a dependency-review gate blocks PRs that introduce dependencies with known advisories; grouped Dependabot PRs keep the tree current on a weekly cadence. ### OpenSSF assessments Two OpenSSF programs cover this repository, and both publish their results publicly: - **[OpenSSF Best Practices](https://www.bestpractices.dev/projects/14361)** — bestax holds the **passing** badge. The questionnaire behind it covers the documented contribution process, vulnerability reporting, automated testing, static analysis, secure delivery, and unique versioning with release notes. Every answer is public and cites the evidence in this repository, so each claim can be checked against what is actually here rather than taken on faith. - **[OpenSSF Scorecard](https://scorecard.dev/viewer/?uri=github.com/allxsmith/bestax)** — an automated scan that runs weekly from [`.github/workflows/scorecard.yml`](https://github.com/allxsmith/bestax/blob/main/.github/workflows/scorecard.yml) and publishes to the public viewer. It reads branch protection, pinned dependencies, token permissions, code review, signed releases, and known vulnerabilities straight out of the repository and scores them. Both badges are at the top of the [README](https://github.com/allxsmith/bestax#bestax) and of the README of each published package. The npm package pages pick them up on each package's next release. ### Reporting a vulnerability Please report privately — don't open a public issue: - Email [security@bestax.io](mailto:security@bestax.io), or - Use GitHub's private reporting: **Security → Advisories → Report a vulnerability** on the [repository](https://github.com/allxsmith/bestax/security). You'll get an acknowledgment within 48 hours, and we aim to triage and confirm within 7 days; the full disclosure process is in [SECURITY.md](https://github.com/allxsmith/bestax/blob/main/SECURITY.md). --- ## Telemetry Two bestax CLIs — `create-bestax` and `bestax-migrate` — can send a single anonymous usage event per run, and only if you say yes first. Telemetry is **opt-in**, the event contains nothing that could identify you, and it goes to a first-party endpoint on the maintainer's own infrastructure — no third-party analytics service is involved. This page is the complete disclosure: everything that is sent, everything that never is, and every way to control it. ### What we collect Each CLI sends at most one event, only after a **successful** run, and only if you opted in. #### create-bestax Sent once after a successful scaffold: | Field | Values | | ------------------ | --------------------------------------------------------------------------------- | | `template` | `vite` or `vite-ts` | | `bulmaFlavor` | `complete`, `prefixed`, `no-helpers`, `no-helpers-prefixed`, or `no-dark-mode` | | `iconLibrary` | `none`, `fontawesome`, `mdi`, `ionicons`, `material-icons`, or `material-symbols` | | `skills` | `true` or `false` — whether the bestax AI skills were installed | | `packageManager` | `npm`, `pnpm`, `yarn`, or `bun` | | CLI version | the `create-bestax` version that ran | | Node major version | e.g. `22` | | OS platform | the platform name, e.g. `darwin`, `linux`, `win32` | #### bestax-migrate Sent once after a successful run: | Field | Values | | ------------------ | ---------------------------------------------------------------------------------------------- | | `source` | what the app migrated from: a library, e.g. `react-bulma-components`, or `bulma-classes` | | `cssMode` | `bestax`, `bulma`, or `keep` | | `dry` | `true` or `false` — whether it was a dry run | | `deps` | `true` or `false` — whether `package.json` dependencies were updated | | Changed-file count | capped at 10,000 (the ingest endpoint buckets it as `0`/`1-9`/`10-49`/`50-199`/`200+`) | | TODO counts | per migration rule: the rule name (including `prop:` slugs) and a count, nothing else | | CLI version | the `bestax-migrate` version that ran | | Node major version | e.g. `22` | | OS platform | the platform name, e.g. `darwin`, `linux`, `win32` | Never file paths, never file contents, never code. The TODO report printed in your terminal lists files and lines; the telemetry event carries only rule names and counts. The `bulma-classes` source reads your own class strings, so its rule names are built only from Bulma's class names, bestax's component and prop names, and a fixed set of attribute names (`family:card`, `tag:Section`, `attr:dangerouslySetInnerHTML`); a class your app defines never appears in one. ### What we never collect By design, an event can never include: - names, emails, or any account information - IP addresses — the endpoint does not read them and does not store them - user agents (not stored) - machine identifiers of any kind - **random IDs of any kind** — no install ID, session ID, or device ID - file paths, project names, or file contents - environment variables Because no identifier of any kind exists, there is no way to correlate two events to the same user — even we cannot tell whether two events came from the same machine. ### How consent works Telemetry is off until you opt in, and once you answer you're never asked again (cancelling the question with Ctrl-C is not an answer — you may be asked on a later run): - `create-bestax` asks at the end of a successful scaffold. - `bestax-migrate` asks once after a run, and only on an interactive terminal. Your answer — yes or no — is stored in `~/.config/bestax/telemetry.json` (or `$XDG_CONFIG_HOME/bestax/telemetry.json` if you set `XDG_CONFIG_HOME`). Both CLIs share this file, so answering either one answers for both and you're only ever asked once. Delete that file to be asked again. #### Overrides | Control | Effect | | ------------------------------------------- | --------------------------------------------------------------------------------------- | | `--telemetry` / `--no-telemetry` | Flags on both CLIs — set the choice for this run **and persist it** to the consent file | | `BESTAX_TELEMETRY=1` / `BESTAX_TELEMETRY=0` | Enable or disable for this run only — never persisted | | `DO_NOT_TRACK=1` | Disables telemetry and the consent prompt itself | | `BESTAX_TELEMETRY_ENDPOINT=` | Redirects the event for this run — a test hook; only meaningful if you set it yourself | One interaction worth spelling out: with `DO_NOT_TRACK` set, an explicit `--telemetry` flag still applies **to that single run** (typing the flag is a direct ask, which the DNT convention lets win) — but under `DO_NOT_TRACK` the flag is **never saved**, so a copied command containing `--telemetry` cannot enable telemetry beyond the run it was typed for. ### Where the data goes Events go to `https://bestax.io/api/t`, a first-party Cloudflare Worker running on the maintainer's own Cloudflare account. It writes into Workers Analytics Engine as aggregate counts, retained for roughly 90 days. No third-party analytics service ever sees the data. As a server-side privacy backstop, the endpoint validates every field of every event and rejects anything else. With one exception, every field is a closed enum, a version string, or a bounded integer, so a modified or buggy client cannot get extra data stored in those fields. The exception is migration rule names, which are open-ended by design (the `prop:` slugs mean no fixed list exists): the endpoint bounds them — at most 20 per event, each 1–64 characters of `A-Za-z0-9._:-` — but stores them verbatim, so a modified client could record short arbitrary strings there. Aggregate queries treat unrecognized rule names as noise. ### The ESLint plugin `@allxsmith/eslint-plugin-bestax` sends **no telemetry at all** and makes no network requests. It reads the library's exported value tuples from the installed copy of `@allxsmith/bestax-bulma` and reports on the file in front of it; there is no network code in the package. The only URLs it carries are the documentation links in each rule's metadata, which ESLint prints beside a report and nothing fetches. ### The MCP server `bestax-mcp` sends **no telemetry at all** and makes no network requests — it stays fully offline. Some of the links it prints carry a `utm_source=bestax-mcp` query parameter. That covers the Docs and Storybook links on component answers, the link in the version-drift notice, and the bestax.io links inside component answers too, such as a summary's link to a related page. The server adds the tag as it writes each answer and leaves code examples exactly as they are. Skill bodies and their reference docs (`get_skill`, the MCP prompts and the skill resources) are served verbatim from the bundled markdown, so the bestax.io links in those stay untagged. If you visit the docs site through a tagged link, that visit is attributable in the site's own traffic analytics. That is the only measurement, and it happens on bestax.io like any other page visit. ### Why we collect this The answers decide where maintenance effort goes: which templates, icon libraries, Bulma flavors, and migration rules are worth investing in. If telemetry isn't for you, opting out costs nothing — and the issue tracker is always the higher-bandwidth channel: [github.com/allxsmith/bestax/issues](https://github.com/allxsmith/bestax/issues). --- ## Custom Component ## Custom Component skill The [`bestax-custom-component`](https://github.com/allxsmith/bestax/blob/main/skills/bestax-custom-component/SKILL.md) skill teaches an agent to build a new custom component the bestax way — starting by **checking whether a matching component already exists** — in either of two contexts. In an app using `@allxsmith/bestax-bulma`, it composes existing components, helper props, the public hooks, and `--bulma-*` CSS variables; inside the bestax monorepo, it covers the full library pipeline (helper hooks, the Bulma v1 SCSS pattern, stories, tests, and docs). ### Install ```bash npx skills add https://github.com/allxsmith/bestax --skill bestax-custom-component ``` ### Example An agent was asked to build a `ProfileCard` and followed the skill. #### Prompt ```text Build a ProfileCard component — avatar on top, then name, role, and a short description — following the bestax custom-component skill. ``` :::info What the skill checked first There is no `ProfileCard` in the library — but `Card`, `Image`, `Title`, `SubTitle`, and `Content` already exist. So rather than reinventing them, `ProfileCard` is a new component that **composes** the existing elements and adds only its own layout. (Had the request been a "label" or "badge", the skill would have stopped and pointed at the existing `Tag` / `Tags`.) ::: #### Live result `ProfileCard` here is the component under **Generated code** below. The live preview has it in scope; in your app, import it from wherever you saved it. ```tsx live function example() { return (
English mathematician who worked on Charles Babbage's proposed Analytical Engine. She was the first to recognise that the machine had applications beyond pure calculation, and published what is now regarded as the first algorithm intended to be carried out by a machine. British mathematician and logician who formalised the concepts of algorithm and computation with the Turing machine. His wartime codebreaking at Bletchley Park helped shorten the Second World War, and he is widely considered the father of theoretical computer science.
); } ``` #### Generated code **ProfileCard.tsx** ```tsx import React, { forwardRef } from 'react'; import { classNames, usePrefixedClassNames } from '../helpers/classNames'; import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses'; // Compose the existing elements rather than reinventing them. import { Image, Title, SubTitle, Content } from '../index'; export interface ProfileCardProps extends Omit, 'title' | 'color'>, BulmaClassesProps { name: string; role?: string; imageSrc: string; imageAlt?: string; } export const ProfileCard = forwardRef( ({ name, role, imageSrc, imageAlt, className, children, ...props }, ref) => { const { bulmaHelperClasses, rest } = useBulmaClasses(props); const cardClass = usePrefixedClassNames('profile-card'); const imageClass = usePrefixedClassNames('profile-card-image'); const bodyClass = usePrefixedClassNames('profile-card-body'); const combined = classNames(cardClass, bulmaHelperClasses, className); return (
{imageAlt
{name} {role && ( {role} )} {children && {children}}
); } ); ProfileCard.displayName = 'ProfileCard'; export default ProfileCard; ``` **_profilecard.scss** ```scss @use 'bulma/sass/utilities/initial-variables' as iv; @use 'bulma/sass/utilities/css-variables' as cv; $profile-card-width: 20rem !default; $profile-card-min-height: 26rem !default; $profile-card-avatar-size: 9rem !default; $profile-card-background: cv.getVar('scheme-main') !default; $profile-card-border: cv.getVar('border-weak') !default; $profile-card-radius: cv.getVar('radius-large') !default; $profile-card-shadow: 0 0.5em 1em -0.125em hsla(0, 0%, 4%, 0.1) !default; $profile-card-padding: 1.5rem !default; $profile-card-gap: 0.75rem !default; .#{iv.$class-prefix}profile-card { @include cv.register-vars( ( 'profile-card-width': #{$profile-card-width}, 'profile-card-min-height': #{$profile-card-min-height}, 'profile-card-avatar-size': #{$profile-card-avatar-size}, 'profile-card-background': #{$profile-card-background}, 'profile-card-border': #{$profile-card-border}, 'profile-card-radius': #{$profile-card-radius}, 'profile-card-shadow': #{$profile-card-shadow}, 'profile-card-padding': #{$profile-card-padding}, 'profile-card-gap': #{$profile-card-gap}, ) ); } .#{iv.$class-prefix}profile-card { display: flex; flex-direction: column; align-items: center; // horizontal centering of the column text-align: center; width: cv.getVar('profile-card-width'); min-height: cv.getVar('profile-card-min-height'); max-width: 100%; gap: cv.getVar('profile-card-gap'); padding: cv.getVar('profile-card-padding'); background-color: cv.getVar('profile-card-background'); border: 1px solid cv.getVar('profile-card-border'); border-radius: cv.getVar('profile-card-radius'); box-shadow: cv.getVar('profile-card-shadow'); } .#{iv.$class-prefix}profile-card-image { display: flex; justify-content: center; } // Enlarge the composed avatar and crop (not stretch) the portrait to a circle. .#{iv.$class-prefix}profile-card-image .#{iv.$class-prefix}image { width: cv.getVar('profile-card-avatar-size'); height: cv.getVar('profile-card-avatar-size'); } .#{iv.$class-prefix}profile-card-image .#{iv.$class-prefix}image img { width: 100%; height: 100%; object-fit: cover; } .#{iv.$class-prefix}profile-card-body { display: flex; flex-direction: column; gap: 0.25rem; } ``` **Usage** ```tsx import { ProfileCard } from '@allxsmith/bestax-bulma'; Wrote the first algorithm intended to be carried out by a machine. ; ``` :::note `ProfileCard` is an **example** produced by the skill — it is not part of the published `@allxsmith/bestax-bulma` package. The point is the _pattern_ (check first, compose existing elements, follow the SCSS convention, then **inspect it in a browser** to confirm spacing and alignment). See the full skill on [GitHub](https://github.com/allxsmith/bestax/tree/main/skills/bestax-custom-component). ::: --- ## Form ## Form skill The [`bestax-form`](https://github.com/allxsmith/bestax/blob/main/skills/bestax-form/SKILL.md) skill teaches an agent to build forms with the bestax form components. There is **no form library** — state is plain React, and errors surface via `color="danger"` + `message` + `messageColor`. ### Install ```bash npx skills add https://github.com/allxsmith/bestax --skill bestax-form ``` ### Signup & validation #### Prompt ```text Build a signup form (name, email, country) that validates on submit and shows inline errors — no form library — following the bestax form skill. ``` #### Live form Click **Create account** with empty fields to see the validation. ```tsx live function example() { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [country, setCountry] = useState(''); const [submitted, setSubmitted] = useState(false); const errors = { name: !name.trim() ? 'Name is required.' : undefined, email: !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email) ? 'Enter a valid email.' : undefined, country: !country ? 'Pick a country.' : undefined, }; const show = (k: keyof typeof errors) => (submitted ? errors[k] : undefined); return (
{ e.preventDefault(); setSubmitted(true); }} style={{ maxWidth: '28rem' }} > setName(e.target.value)} color={show('name') ? 'danger' : undefined} message={show('name')} messageColor="danger" iconLeftName="user" /> setEmail(e.target.value)} color={show('email') ? 'danger' : undefined} message={show('email')} messageColor="danger" iconLeftName="envelope" />
); } ``` #### Validation pattern Own the state, compute errors, and reflect them on each field with `color="danger"` (colors the input), `message` (the help text), and `messageColor="danger"` (colors the help text). ### Account settings #### Prompt ```text Build an account settings form with a bio, a timezone select, an email-digest radio group, interest checkboxes, and toggle switches — following the bestax form skill. ``` #### Live form ```tsx live function example() { const [bio, setBio] = useState(''); const [timezone, setTimezone] = useState('utc'); const [digest, setDigest] = useState('weekly'); const [interests, setInterests] = useState(['react']); const [darkMode, setDarkMode] = useState(true); const [twoFactor, setTwoFactor] = useState(false); return (