From 3f44c0b55771b30413c1942651302a8c89b4d559 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 18 Oct 2026 08:45:51 -0400 Subject: [PATCH 1/3] Add Bulma v1 instructions --- docs/README.instructions.md | 1 + instructions/bulma-v1.instructions.md | 207 ++++++++++++++++++++++++++ 2 files changed, 208 insertions(+) create mode 100644 instructions/bulma-v1.instructions.md diff --git a/docs/README.instructions.md b/docs/README.instructions.md index 710960f3d6..530ee2d4b3 100644 --- a/docs/README.instructions.md +++ b/docs/README.instructions.md @@ -49,6 +49,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on | [Best Practices and Guidance for Code Components](../instructions/pcf-best-practices.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-best-practices.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-best-practices.instructions.md) | Best practices and guidance for developing PCF code components | | [Bicep Code Best Practices](../instructions/bicep-code-best-practices.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbicep-code-best-practices.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbicep-code-best-practices.instructions.md) | Infrastructure as Code with Bicep | | [Blazor](../instructions/blazor.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fblazor.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fblazor.instructions.md) | Blazor component and application patterns | +| [Bulma v1](../instructions/bulma-v1.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md) | Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons, plus Bulma component libraries and agent tooling for React (Bestax) and Vue (Buefy) | | [C# Development](../instructions/csharp.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp.instructions.md) | Guidelines for building C# applications | | [C# MCP Server Development](../instructions/csharp-mcp-server.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-mcp-server.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-mcp-server.instructions.md) | Instructions for building Model Context Protocol (MCP) servers using the C# SDK | | [C# 코드 작성 규칙](../instructions/csharp-ko.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-ko.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-ko.instructions.md) | C# 애플리케이션 개발을 위한 코드 작성 규칙 by @jgkim999 | diff --git a/instructions/bulma-v1.instructions.md b/instructions/bulma-v1.instructions.md new file mode 100644 index 0000000000..dcca69bb32 --- /dev/null +++ b/instructions/bulma-v1.instructions.md @@ -0,0 +1,207 @@ +--- +description: 'Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons, plus Bulma component libraries and agent tooling for React (Bestax) and Vue (Buefy)' +applyTo: '**/*.html, **/*.css, **/*.scss, **/*.sass, **/*.jsx, **/*.tsx, **/*.vue' +--- + +# Bulma v1 + +Bulma v1 is a rewrite of the Bulma CSS framework on Dart Sass and CSS variables. Most tutorials and older code show Bulma 0.9, so follow these rules when you write or review Bulma code. + +## Key changes in Bulma v1 + +- **Same HTML, except tiles.** Class names did not change, so most 0.9 markup still renders. Tiles were removed. +- **Dart Sass only.** Build with the `sass` package. `node-sass` and LibSass can't compile it. +- **Sass modules.** Customize with `@use "bulma/sass" with (...)`. Setting variables and then calling `@import "bulma"` is the 0.9 pattern. +- **CSS variables.** Every component reads variables prefixed `--bulma-`, so you can theme with plain CSS and no build step. +- **Themes and dark mode.** A light theme and a dark theme ship by default. The dark theme follows the user's system setting. +- **Color palettes.** Each of the 7 main colors gets soft, bold, light, dark, invert and 21 numbered shades. +- **Grid.** The smart grid and fixed grid replace tiles. +- **Skeletons.** Loading placeholders, as standalone blocks and as an `is-skeleton` modifier. +- **Prefixed builds.** A prebuilt version prefixes every class with `bulma-`. + +## Installation + +```bash +npm install bulma +``` + +Import the compiled CSS once: + +```js +import 'bulma/css/bulma.min.css'; +``` + +Or load it from a CDN: + +```html + +``` + +Other builds live in `bulma/css/versions/`: + +| File | Use it when | +| ------------------------------- | ---------------------------------------------------- | +| `bulma-prefixed.css` | Bulma has to share a page with another CSS framework | +| `bulma-no-helpers.css` | You only want components, not the `has-*` helpers | +| `bulma-no-helpers-prefixed.css` | Both of the above | +| `bulma-no-dark-mode.css` | The site should always render in the light theme | + +## Customizing with Sass + +Pass variables through `@use ... with`: + +```scss +@use "bulma/sass" with ( + $primary: #8a4d76, + $link: #fa7c91, + $family-primary: '"Nunito", sans-serif' +); +``` + +- Don't generate `$primary: ...;` followed by `@import "bulma";`. That is the 0.9 setup, and Sass has deprecated `@import`. +- Import only what you need by loading the utilities first and then single modules, for example `@use "bulma/sass/utilities" with (...)` and `@use "bulma/sass/form"`. +- Several component variables are now split into hue, saturation and lightness (`$input-h`, `$input-s`, `$input-background-l`). A variable name from a 0.9 tutorial may no longer exist. Check Bulma's list of Sass variables before using one. + +## Customizing with CSS variables + +You can change colors at runtime without Sass. Main colors are built from hue, saturation and lightness variables, so overriding those updates every shade derived from them: + +```css +/* Load after Bulma */ +:root { + --bulma-primary-h: 280deg; + --bulma-primary-s: 60%; + --bulma-primary-l: 45%; +} +``` + +- Scope variables to a component to change one part only, for example `.button { --bulma-button-border-width: 2px; }`. +- In your own CSS, read Bulma's values with `var(--bulma-...)` instead of copying hex codes, so custom styles follow the theme. + +## Dark mode + +- The page is light by default and turns dark when the user's system prefers dark. +- Force a theme with `data-theme="dark"` or the `theme-dark` class, on `` or on any element. `data-theme="light"` and `theme-light` force light. +- Use `bulma-no-dark-mode.css` if the site should never switch. +- Pair **soft** backgrounds with **bold** text, for example `has-background-primary-soft has-text-primary-bold`. Soft and bold swap in dark mode, so the contrast holds. +- Avoid fixed colors such as `has-background-white` or hard-coded hex values for page surfaces. In custom CSS use `var(--bulma-scheme-main)` for the page background so it follows the theme. + +## Layout + +Tiles (`tile is-ancestor`, `is-parent`, `is-child`) are gone from Bulma v1, so that markup gets no styles. Use the smart grid, which fits as many cells per row as their minimum width allows: + +```html +
+
One
+
Two
+
Three, two columns wide
+
+``` + +For a set number of columns, wrap the grid in `fixed-grid`: + +```html +
+
+
One
+
Two
+
Three
+
+
+``` + +- Cells take `is-col-span-*`, `is-row-span-*`, `is-col-start-*` and `is-row-start-*`. +- `columns` and `column` (with sizes like `is-half` or `is-one-third`) still work for a single flex row. + +## Skeletons + +- Add `is-skeleton` to a component to show its loading state, for example `button is-skeleton`, `input is-skeleton` or `image is-64x64 is-skeleton`. +- Use `skeleton-block` for a plain placeholder box and `skeleton-lines` with empty child `div`s for text lines. + +## Bulma has no JavaScript + +- Bulma is CSS only. The navbar burger, dropdowns, modals and tabs need your own code to toggle `is-active`. +- Don't add Bootstrap attributes such as `data-bs-toggle`. They do nothing in Bulma. +- Don't mix in Bootstrap or Tailwind classes. Use Bulma's own names: `button` not `btn`, `column is-half` not `col-md-6`, `is-flex` not `d-flex`, `mt-4` and `px-2` for spacing, `has-text-centered` for alignment. + +## Component libraries + +In React or Vue, a Bulma component library handles the toggling and state for you. Check `package.json` first and keep using the library the project already has. Both libraries below ship an MCP server, Agent Skills and docs written for LLMs. + +### React: Bestax + +[Bestax](https://bestax.io) has typed React components for Bulma v1 in `@allxsmith/bestax-bulma`, for React 18 and 19. + +```tsx +import '@allxsmith/bestax-bulma/bestax.css'; +import { Block, Button } from '@allxsmith/bestax-bulma'; + +const save = ( + + + +); +``` + +- Pass Bulma modifiers as props, as in `color="primary"`, instead of class strings. +- Bulma helpers are props too. `mb="4"` renders `mb-4` and `textColor="primary"` renders `has-text-primary`. A value the library doesn't know renders nothing, so check it. +- Build forms from `Field` and `Control`. Bestax holds no form state, so validation lives in your code. + +**MCP server.** `bestax-mcp` answers offline from an index pinned to a bestax-bulma release. Its tools include `search_bestax`, `get_props`, `get_examples`, `get_css_variables`, `get_helper_props` and `lookup_bulma_classes`, which turns a Bulma class string into the matching component and props. Add it to `.vscode/mcp.json`: + +```json +{ + "servers": { + "bestax": { + "type": "stdio", + "command": "npx", + "args": ["-y", "bestax-mcp@1"] + } + } +} +``` + +**Agent Skills.** Seven skills cover page layouts, forms, theming, icons, custom components, CSS size and migration. Install one with `npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold`. + +**LLM docs.** [bestax.io/llms.txt](https://bestax.io/llms.txt) indexes the docs and [bestax.io/llms-full.txt](https://bestax.io/llms-full.txt) has all of them in one file. + +**Project tools.** `npm create bestax@latest my-app` scaffolds a Vite app. `bestax-migrate` moves raw Bulma classes or older React Bulma libraries onto Bestax. `@allxsmith/eslint-plugin-bestax` flags deprecated props and helper-prop values that render nothing. + +### Vue: Buefy + +[Buefy](https://buefy.org) has Vue 3 components for Bulma v1 in `buefy` 3.x. + +```ts +import { createApp } from 'vue'; +import Buefy from 'buefy'; +import 'buefy/dist/buefy.css'; +import App from './App.vue'; + +createApp(App).use(Buefy).mount('#app'); +``` + +- Pass Bulma modifiers through the `type` prop, as in ``, and sizes as `size="is-small"`, `"is-medium"` or `"is-large"`. +- Wrap form inputs in ``, which supplies the label and the validation message. +- Most components bind `v-model`. `b-table` also has named models such as `v-model:selected` and `v-model:current-page`. +- Name icons without the pack prefix, as in `icon="home"`, not `icon="mdi-home"`. +- Open toasts and other notices from code with the composables, for example `useToast()`. + +**MCP server.** `buefy-mcp` serves Buefy's component docs through four tools: `buefy_list_components`, `buefy_get_component` for props, events, slots and methods, `buefy_search` and `buefy_get_installation`. Add it to `.vscode/mcp.json`: + +```json +{ + "servers": { + "buefy": { + "type": "stdio", + "command": "npx", + "args": ["-y", "buefy-mcp"] + } + } +} +``` + +**Agent Skill.** One skill covers installation, the usage rules above, the key props and slots of every component, and common patterns such as a login form, a server-paginated table and a confirm dialog. Install it with `npx skills add buefy/buefy`. + +**LLM docs.** Buefy keeps its full component docs in one file, [`mcp.txt`](https://raw.githubusercontent.com/buefy/buefy/main/mcp.txt), in its repository. It's the same file `buefy-mcp` serves. + +With either library, ask its MCP server or read its LLM docs for a component's props instead of guessing them. From 1f5a55c4c7c6ba0dcbbe9c92a2ae5cb183f70020 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Sun, 18 Oct 2026 08:54:49 -0400 Subject: [PATCH 2/3] Pin the MCP servers and install skills without npx --- instructions/bulma-v1.instructions.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/instructions/bulma-v1.instructions.md b/instructions/bulma-v1.instructions.md index dcca69bb32..12d88fd338 100644 --- a/instructions/bulma-v1.instructions.md +++ b/instructions/bulma-v1.instructions.md @@ -147,25 +147,25 @@ const save = ( - Bulma helpers are props too. `mb="4"` renders `mb-4` and `textColor="primary"` renders `has-text-primary`. A value the library doesn't know renders nothing, so check it. - Build forms from `Field` and `Control`. Bestax holds no form state, so validation lives in your code. -**MCP server.** `bestax-mcp` answers offline from an index pinned to a bestax-bulma release. Its tools include `search_bestax`, `get_props`, `get_examples`, `get_css_variables`, `get_helper_props` and `lookup_bulma_classes`, which turns a Bulma class string into the matching component and props. Add it to `.vscode/mcp.json`: +**MCP server.** `bestax-mcp` answers offline from an index pinned to a bestax-bulma release. Its tools include `search_bestax`, `get_props`, `get_examples`, `get_css_variables`, `get_helper_props` and `lookup_bulma_classes`, which turns a Bulma class string into the matching component and props. Install it as a pinned dev dependency with `npm install --save-dev --save-exact bestax-mcp`, then add it to `.vscode/mcp.json`: ```json { "servers": { "bestax": { "type": "stdio", - "command": "npx", - "args": ["-y", "bestax-mcp@1"] + "command": "node", + "args": ["${workspaceFolder}/node_modules/bestax-mcp/dist/index.js"] } } } ``` -**Agent Skills.** Seven skills cover page layouts, forms, theming, icons, custom components, CSS size and migration. Install one with `npx skills add https://github.com/allxsmith/bestax --skill bestax-layout-scaffold`. +**Agent Skills.** Seven skills cover page layouts, forms, theming, icons, custom components, CSS size and migration. Install one with the GitHub CLI, `gh skills install allxsmith/bestax bestax-layout-scaffold`. **LLM docs.** [bestax.io/llms.txt](https://bestax.io/llms.txt) indexes the docs and [bestax.io/llms-full.txt](https://bestax.io/llms-full.txt) has all of them in one file. -**Project tools.** `npm create bestax@latest my-app` scaffolds a Vite app. `bestax-migrate` moves raw Bulma classes or older React Bulma libraries onto Bestax. `@allxsmith/eslint-plugin-bestax` flags deprecated props and helper-prop values that render nothing. +**Project tools.** `create-bestax` scaffolds a Vite app. `bestax-migrate` moves raw Bulma classes or older React Bulma libraries onto Bestax. `@allxsmith/eslint-plugin-bestax` flags deprecated props and helper-prop values that render nothing. ### Vue: Buefy @@ -186,21 +186,21 @@ createApp(App).use(Buefy).mount('#app'); - Name icons without the pack prefix, as in `icon="home"`, not `icon="mdi-home"`. - Open toasts and other notices from code with the composables, for example `useToast()`. -**MCP server.** `buefy-mcp` serves Buefy's component docs through four tools: `buefy_list_components`, `buefy_get_component` for props, events, slots and methods, `buefy_search` and `buefy_get_installation`. Add it to `.vscode/mcp.json`: +**MCP server.** `buefy-mcp` serves Buefy's component docs through four tools: `buefy_list_components`, `buefy_get_component` for props, events, slots and methods, `buefy_search` and `buefy_get_installation`. Install it as a pinned dev dependency with `npm install --save-dev --save-exact buefy-mcp`, then add it to `.vscode/mcp.json`: ```json { "servers": { "buefy": { "type": "stdio", - "command": "npx", - "args": ["-y", "buefy-mcp"] + "command": "node", + "args": ["${workspaceFolder}/node_modules/buefy-mcp/index.js"] } } } ``` -**Agent Skill.** One skill covers installation, the usage rules above, the key props and slots of every component, and common patterns such as a login form, a server-paginated table and a confirm dialog. Install it with `npx skills add buefy/buefy`. +**Agent Skill.** One skill covers installation, the usage rules above, the key props and slots of every component, and common patterns such as a login form, a server-paginated table and a confirm dialog. Install it by copying `SKILL.md` from the buefy/buefy repository to `.agents/skills/buefy/SKILL.md` in your project. **LLM docs.** Buefy keeps its full component docs in one file, [`mcp.txt`](https://raw.githubusercontent.com/buefy/buefy/main/mcp.txt), in its repository. It's the same file `buefy-mcp` serves. From 80ae73f0086fe6794ee74f0893a578087f348d18 Mon Sep 17 00:00:00 2001 From: Alex Smith Date: Fri, 30 Oct 2026 07:53:09 -0400 Subject: [PATCH 3/3] Keep the instructions to Bulma v1 and drop the component library setup The MCP servers and skills for Bestax and Buefy belong in plugins, so the file no longer branches on which library a project uses. One line still points React and Vue projects at a component library. --- docs/README.instructions.md | 2 +- instructions/bulma-v1.instructions.md | 85 +-------------------------- 2 files changed, 3 insertions(+), 84 deletions(-) diff --git a/docs/README.instructions.md b/docs/README.instructions.md index 530ee2d4b3..3062df2d6d 100644 --- a/docs/README.instructions.md +++ b/docs/README.instructions.md @@ -49,7 +49,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-instructions) for guidelines on | [Best Practices and Guidance for Code Components](../instructions/pcf-best-practices.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-best-practices.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fpcf-best-practices.instructions.md) | Best practices and guidance for developing PCF code components | | [Bicep Code Best Practices](../instructions/bicep-code-best-practices.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbicep-code-best-practices.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbicep-code-best-practices.instructions.md) | Infrastructure as Code with Bicep | | [Blazor](../instructions/blazor.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fblazor.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fblazor.instructions.md) | Blazor component and application patterns | -| [Bulma v1](../instructions/bulma-v1.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md) | Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons, plus Bulma component libraries and agent tooling for React (Bestax) and Vue (Buefy) | +| [Bulma v1](../instructions/bulma-v1.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fbulma-v1.instructions.md) | Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons | | [C# Development](../instructions/csharp.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp.instructions.md) | Guidelines for building C# applications | | [C# MCP Server Development](../instructions/csharp-mcp-server.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-mcp-server.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-mcp-server.instructions.md) | Instructions for building Model Context Protocol (MCP) servers using the C# SDK | | [C# 코드 작성 규칙](../instructions/csharp-ko.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-ko.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fcsharp-ko.instructions.md) | C# 애플리케이션 개발을 위한 코드 작성 규칙 by @jgkim999 | diff --git a/instructions/bulma-v1.instructions.md b/instructions/bulma-v1.instructions.md index 12d88fd338..1a8d4167d4 100644 --- a/instructions/bulma-v1.instructions.md +++ b/instructions/bulma-v1.instructions.md @@ -1,5 +1,5 @@ --- -description: 'Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons, plus Bulma component libraries and agent tooling for React (Bestax) and Vue (Buefy)' +description: 'Bulma v1 conventions: Dart Sass modules, CSS variables, themes and dark mode, the smart grid and skeletons' applyTo: '**/*.html, **/*.css, **/*.scss, **/*.sass, **/*.jsx, **/*.tsx, **/*.vue' --- @@ -121,87 +121,6 @@ For a set number of columns, wrap the grid in `fixed-grid`: ## Bulma has no JavaScript - Bulma is CSS only. The navbar burger, dropdowns, modals and tabs need your own code to toggle `is-active`. +- In React or Vue, a Bulma component library such as [Bestax](https://bestax.io) or [Buefy](https://buefy.org) handles that state for you. Keep using the one the project already has. - Don't add Bootstrap attributes such as `data-bs-toggle`. They do nothing in Bulma. - Don't mix in Bootstrap or Tailwind classes. Use Bulma's own names: `button` not `btn`, `column is-half` not `col-md-6`, `is-flex` not `d-flex`, `mt-4` and `px-2` for spacing, `has-text-centered` for alignment. - -## Component libraries - -In React or Vue, a Bulma component library handles the toggling and state for you. Check `package.json` first and keep using the library the project already has. Both libraries below ship an MCP server, Agent Skills and docs written for LLMs. - -### React: Bestax - -[Bestax](https://bestax.io) has typed React components for Bulma v1 in `@allxsmith/bestax-bulma`, for React 18 and 19. - -```tsx -import '@allxsmith/bestax-bulma/bestax.css'; -import { Block, Button } from '@allxsmith/bestax-bulma'; - -const save = ( - - - -); -``` - -- Pass Bulma modifiers as props, as in `color="primary"`, instead of class strings. -- Bulma helpers are props too. `mb="4"` renders `mb-4` and `textColor="primary"` renders `has-text-primary`. A value the library doesn't know renders nothing, so check it. -- Build forms from `Field` and `Control`. Bestax holds no form state, so validation lives in your code. - -**MCP server.** `bestax-mcp` answers offline from an index pinned to a bestax-bulma release. Its tools include `search_bestax`, `get_props`, `get_examples`, `get_css_variables`, `get_helper_props` and `lookup_bulma_classes`, which turns a Bulma class string into the matching component and props. Install it as a pinned dev dependency with `npm install --save-dev --save-exact bestax-mcp`, then add it to `.vscode/mcp.json`: - -```json -{ - "servers": { - "bestax": { - "type": "stdio", - "command": "node", - "args": ["${workspaceFolder}/node_modules/bestax-mcp/dist/index.js"] - } - } -} -``` - -**Agent Skills.** Seven skills cover page layouts, forms, theming, icons, custom components, CSS size and migration. Install one with the GitHub CLI, `gh skills install allxsmith/bestax bestax-layout-scaffold`. - -**LLM docs.** [bestax.io/llms.txt](https://bestax.io/llms.txt) indexes the docs and [bestax.io/llms-full.txt](https://bestax.io/llms-full.txt) has all of them in one file. - -**Project tools.** `create-bestax` scaffolds a Vite app. `bestax-migrate` moves raw Bulma classes or older React Bulma libraries onto Bestax. `@allxsmith/eslint-plugin-bestax` flags deprecated props and helper-prop values that render nothing. - -### Vue: Buefy - -[Buefy](https://buefy.org) has Vue 3 components for Bulma v1 in `buefy` 3.x. - -```ts -import { createApp } from 'vue'; -import Buefy from 'buefy'; -import 'buefy/dist/buefy.css'; -import App from './App.vue'; - -createApp(App).use(Buefy).mount('#app'); -``` - -- Pass Bulma modifiers through the `type` prop, as in ``, and sizes as `size="is-small"`, `"is-medium"` or `"is-large"`. -- Wrap form inputs in ``, which supplies the label and the validation message. -- Most components bind `v-model`. `b-table` also has named models such as `v-model:selected` and `v-model:current-page`. -- Name icons without the pack prefix, as in `icon="home"`, not `icon="mdi-home"`. -- Open toasts and other notices from code with the composables, for example `useToast()`. - -**MCP server.** `buefy-mcp` serves Buefy's component docs through four tools: `buefy_list_components`, `buefy_get_component` for props, events, slots and methods, `buefy_search` and `buefy_get_installation`. Install it as a pinned dev dependency with `npm install --save-dev --save-exact buefy-mcp`, then add it to `.vscode/mcp.json`: - -```json -{ - "servers": { - "buefy": { - "type": "stdio", - "command": "node", - "args": ["${workspaceFolder}/node_modules/buefy-mcp/index.js"] - } - } -} -``` - -**Agent Skill.** One skill covers installation, the usage rules above, the key props and slots of every component, and common patterns such as a login form, a server-paginated table and a confirm dialog. Install it by copying `SKILL.md` from the buefy/buefy repository to `.agents/skills/buefy/SKILL.md` in your project. - -**LLM docs.** Buefy keeps its full component docs in one file, [`mcp.txt`](https://raw.githubusercontent.com/buefy/buefy/main/mcp.txt), in its repository. It's the same file `buefy-mcp` serves. - -With either library, ask its MCP server or read its LLM docs for a component's props instead of guessing them.