create-bestax 2.2.0 → 3.1.0

package/dist/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1E,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,IAAI,cAAc,EAChC,iBAAiB,IAAI,iBAAiB,EACtC,iBAAiB,IAAI,iBAAiB,GACvC,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAG1B,wBAAsB,cAAc,CAClC,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAGxB;AAED,wBAAsB,sBAAsB,CAC1C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC,CAGlB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGxD;AAED,wBAAsB,YAAY,CAChC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,IAAI,CAAC,CAGf;AAED,wBAAsB,aAAa,CACjC,UAAU,CAAC,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,UAAU,GACnB,OAAO,CAAC,IAAI,CAAC,CAGf;AAcD,wBAAgB,SAAS,IAAI,OAAO,CAwBnC;AAED,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAE1E;AAED,wBAAgB,MAAM,IAAI,IAAI,CAG7B"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAIpC,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAIvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC1E,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,YAAY,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7D,OAAO,EACL,iBAAiB,EACjB,wBAAwB,EACxB,cAAc,IAAI,cAAc,EAChC,iBAAiB,IAAI,iBAAiB,EACtC,iBAAiB,IAAI,iBAAiB,GACvC,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,iBAAiB,GAClB,MAAM,kBAAkB,CAAC;AAG1B,wBAAsB,cAAc,CAClC,UAAU,CAAC,EAAE,MAAM,GAClB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAGxB;AAED,wBAAsB,sBAAsB,CAC1C,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC,CAGlB;AAED,wBAAgB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM,CAGxD;AAED,wBAAsB,YAAY,CAChC,YAAY,EAAE,MAAM,EACpB,UAAU,EAAE,MAAM,GACjB,OAAO,CAAC,IAAI,CAAC,CAGf;AAED,wBAAsB,aAAa,CACjC,UAAU,CAAC,EAAE,MAAM,EACnB,OAAO,CAAC,EAAE,UAAU,GACnB,OAAO,CAAC,IAAI,CAAC,CAGf;AAcD,wBAAgB,SAAS,IAAI,OAAO,CA0BnC;AAED,wBAAgB,YAAY,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAE1E;AAED,wBAAgB,MAAM,IAAI,IAAI,CAG7B"}

package/dist/cli.js

@@ -57,6 +57,8 @@ export function createCLI() {
         .option('-t, --template <template>', 'template to use (vite, vite-ts)')
         .option('-b, --bulma <flavor>', 'Bulma CSS flavor (complete, prefixed, no-helpers, no-helpers-prefixed, no-dark-mode)')
         .option('-i, --icon <library>', 'icon library (none, fontawesome, mdi, ionicons, material-icons, material-symbols)')
+        .option('--skills', 'install the bestax AI skills into .claude/skills')
+        .option('--no-skills', 'do not install the bestax AI skills')
         .option('-y, --yes', 'skip prompts and use defaults or provided options')
         .action((projectDir, options) => {
         projectCreator.create(projectDir, options);

package/dist/constants.d.ts

@@ -20,13 +20,16 @@ export declare const MESSAGES: {
     readonly PROJECT_CREATED: "✔ Done! Project created successfully.";
     readonly NEXT_STEPS: "Next steps:";
     readonly HAPPY_CODING: "Happy coding! 🎉";
+    readonly SKILLS_ADDED: "✔ Installed bestax AI skills into .claude/skills/ (+ CLAUDE.md)";
 };
 export declare const PROMPTS: {
     readonly PROJECT_NAME: "Project name:";
     readonly SELECT_FRAMEWORK: "Select a framework:";
     readonly SELECT_ICON_LIBRARY: "Would you like to add an icon library?";
     readonly SELECT_BULMA_FLAVOR: "Which Bulma CSS flavor would you like to use?";
+    readonly INSTALL_SKILLS: "Install the bestax AI skills (.claude/skills) for Claude Code and other agents?";
 };
+export declare const CLAUDE_MD: (projectName: string) => string;
 export interface IconLibrary {
     name: string;
     display: string;

package/dist/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;wCAMQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;CAI7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;CAKV,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EAyCvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA0CtC,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,SAAS,EAAE,QAAQ,EAG/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kBAAkB,CAAC;AACpD,eAAO,MAAM,uBAAuB,MAAM,CAAC;AAC3C,eAAO,MAAM,kBAAkB,QAAsB,CAAC;AAEtD,eAAO,MAAM,QAAQ;;;;;wCAMQ,MAAM;uCAEP,MAAM;sCACP,MAAM;4CAEA,MAAM;;;;;CAM7B,CAAC;AAEX,eAAO,MAAM,OAAO;;;;;;CAOV,CAAC;AAIX,eAAO,MAAM,SAAS,GAAI,aAAa,MAAM,KAAG,MAgB/C,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,EAAE,WAAW,EAyCvC,CAAC;AAEF,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,aAAa,EAAE,WAAW,EA0CtC,CAAC"}

package/dist/constants.js

@@ -18,13 +18,34 @@ export const MESSAGES = {
     PROJECT_CREATED: '✔ Done! Project created successfully.',
     NEXT_STEPS: 'Next steps:',
     HAPPY_CODING: 'Happy coding! 🎉',
+    SKILLS_ADDED: '✔ Installed bestax AI skills into .claude/skills/ (+ CLAUDE.md)',
 };
 export const PROMPTS = {
     PROJECT_NAME: 'Project name:',
     SELECT_FRAMEWORK: 'Select a framework:',
     SELECT_ICON_LIBRARY: 'Would you like to add an icon library?',
     SELECT_BULMA_FLAVOR: 'Which Bulma CSS flavor would you like to use?',
+    INSTALL_SKILLS: 'Install the bestax AI skills (.claude/skills) for Claude Code and other agents?',
 };
+// Minimal CLAUDE.md scaffolded alongside the skills so an AI agent knows the
+// stack and where the skills live.
+export const CLAUDE_MD = (projectName) => `# ${projectName}
+
+This app is built with [\`@allxsmith/bestax-bulma\`](https://bestax.io) — React components for
+Bulma 1.x.
+
+## AI skills
+
+\`.claude/skills/\` contains Agent Skills that teach Claude how to build with this library. They load
+automatically when the task matches:
+
+- **bestax-custom-component** — build a new custom component the bestax way.
+- **bestax-form** — build forms with the bestax form components (no form library).
+- **bestax-theming** — colors, branding, and dark mode via the \`Theme\` component (\`colorMode\`).
+- **bestax-layout-scaffold** — scaffold full pages (app shell, landing, centered, card grid).
+
+Prefer the library's components and these skills over hand-written Bulma markup or custom CSS.
+`;
 export const ICON_LIBRARIES = [
     {
         name: 'none',
@@ -78,9 +99,9 @@ export const BULMA_FLAVORS = [
     {
         name: 'prefixed',
         display: 'Prefixed',
-        description: 'All classes prefixed with "bulma-" to avoid conflicts',
+        description: 'All classes prefixed with "bestax-" to avoid conflicts',
         color: chalk.blue,
-        importStatement: "import 'bulma/css/versions/bulma-prefixed.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';",
+        importStatement: "import '@allxsmith/bestax-bulma/versions/bestax-prefixed.css';",
         needsPrefix: true,
     },
     {
@@ -88,14 +109,14 @@ export const BULMA_FLAVORS = [
         display: 'No Helpers',
         description: 'Core components only, no utility classes',
         color: chalk.yellow,
-        importStatement: "import 'bulma/css/versions/bulma-no-helpers.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';",
+        importStatement: "import '@allxsmith/bestax-bulma/versions/bestax-no-helpers.css';",
     },
     {
         name: 'no-helpers-prefixed',
         display: 'No Helpers, Prefixed',
-        description: 'Core components only with "bulma-" prefix',
+        description: 'Core components only with "bestax-" prefix',
         color: chalk.magenta,
-        importStatement: "import 'bulma/css/versions/bulma-no-helpers-prefixed.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';",
+        importStatement: "import '@allxsmith/bestax-bulma/versions/bestax-no-helpers-prefixed.css';",
         needsPrefix: true,
     },
     {
@@ -103,6 +124,6 @@ export const BULMA_FLAVORS = [
         display: 'No Dark Mode',
         description: 'Light mode only, smaller bundle size',
         color: chalk.cyan,
-        importStatement: "import 'bulma/css/versions/bulma-no-dark-mode.min.css';\nimport '@allxsmith/bestax-bulma/extras.css';",
+        importStatement: "import '@allxsmith/bestax-bulma/versions/bestax-no-dark-mode.css';",
     },
 ];

package/dist/project-creator.d.ts

@@ -9,6 +9,7 @@ export interface CLIOptions {
     template?: string;
     bulma?: string;
     icon?: string;
+    skills?: boolean;
     yes?: boolean;
 }
 export declare class ProjectCreator {
@@ -18,6 +19,7 @@ export declare class ProjectCreator {
     checkExistingDirectory(targetPath: string, targetDir: string): Promise<boolean>;
     getTemplatePath(template: string): string;
     copyTemplate(template: string, targetPath: string): Promise<void>;
+    setupSkills(targetPath: string, projectName: string): Promise<void>;
     setupBulmaFlavor(targetPath: string, bulmaFlavor: string, template: string): Promise<void>;
     private getIconName;
     private getIconProps;

package/dist/project-creator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AA8BA,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,YAAY,CAAC,EAAE,MAAM;IAI3B,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAa3D,sBAAsB,CAC1B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC;IAkBnB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAInC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjE,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmDhB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IAYd,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IA2IV,mBAAmB,CACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAwEV,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAwHvE"}
+{"version":3,"file":"project-creator.d.ts","sourceRoot":"","sources":["../src/project-creator.ts"],"names":[],"mappings":"AAoCA,MAAM,WAAW,aAAa;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf;AAED,qBAAa,cAAc;IACzB,OAAO,CAAC,YAAY,CAAS;gBAEjB,YAAY,CAAC,EAAE,MAAM;IAI3B,cAAc,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;IAa3D,sBAAsB,CAC1B,UAAU,EAAE,MAAM,EAClB,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC;IAkBnB,eAAe,CAAC,QAAQ,EAAE,MAAM,GAAG,MAAM;IAInC,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMjE,WAAW,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAiBnE,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAmDhB,OAAO,CAAC,WAAW;IA2BnB,OAAO,CAAC,YAAY;IAYd,gBAAgB,CACpB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IA2IV,mBAAmB,CACvB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,WAAW,EAAE,MAAM,EACnB,QAAQ,EAAE,MAAM,GACf,OAAO,CAAC,IAAI,CAAC;IAwEV,MAAM,CAAC,UAAU,CAAC,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAqIvE"}

package/dist/project-creator.js

@@ -3,10 +3,10 @@ import { fileURLToPath } from 'url';
 import chalk from 'chalk';
 import fs from 'fs-extra';
 import { checkDirectoryExists, isDirectoryEmpty, emptyDirectory, ensureDirectory, copyDirectory, updatePackageJson, } from './file-system.js';
-import { promptProjectName, promptOverwriteDirectory, promptTemplate, promptIconLibrary, promptBulmaFlavor, } from './prompts.js';
+import { promptProjectName, promptOverwriteDirectory, promptTemplate, promptIconLibrary, promptBulmaFlavor, promptInstallSkills, } from './prompts.js';
 import { displayHeader, displaySuccess, displayError, displayCancelled, } from './display.js';
 import { validateProjectName } from './validators.js';
-import { MESSAGES, ICON_LIBRARIES, BULMA_FLAVORS } from './constants.js';
+import { MESSAGES, ICON_LIBRARIES, BULMA_FLAVORS, CLAUDE_MD, } from './constants.js';
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export class ProjectCreator {
     templatesDir;
@@ -45,6 +45,16 @@ export class ProjectCreator {
         await ensureDirectory(targetPath);
         await copyDirectory(templatePath, targetPath);
     }
+    async setupSkills(targetPath, projectName) {
+        const skillsSrc = path.join(this.templatesDir, 'skills');
+        if (!(await checkDirectoryExists(skillsSrc))) {
+            console.log(chalk.yellow('  Skipping skills — bundle not found in this build.'));
+            return;
+        }
+        await fs.copy(skillsSrc, path.join(targetPath, '.claude', 'skills'));
+        await fs.writeFile(path.join(targetPath, 'CLAUDE.md'), CLAUDE_MD(projectName));
+        console.log(chalk.green(MESSAGES.SKILLS_ADDED));
+    }
     async setupBulmaFlavor(targetPath, bulmaFlavor, template) {
         const flavor = BULMA_FLAVORS.find(f => f.name === bulmaFlavor);
         if (!flavor) {
@@ -251,7 +261,7 @@ export class ProjectCreator {
             // Build ConfigProvider props
             const configProps = [];
             if (needsPrefix) {
-                configProps.push('classPrefix="bulma-"');
+                configProps.push('classPrefix="bestax-"');
             }
             if (needsIconLibrary) {
                 // Map the icon library name to the correct value for ConfigProvider
@@ -364,6 +374,17 @@ export class ProjectCreator {
                 process.exit(1);
             }
         }
+        // Install AI skills? (use option -> --yes default -> prompt)
+        let installSkills;
+        if (options?.skills !== undefined) {
+            installSkills = options.skills;
+        }
+        else if (options?.yes) {
+            installSkills = true;
+        }
+        else {
+            installSkills = await promptInstallSkills();
+        }
         // Create project
         console.log();
         console.log(chalk.green(MESSAGES.CREATING_PROJECT(targetPath)));
@@ -373,6 +394,9 @@ export class ProjectCreator {
             await this.setupBulmaFlavor(targetPath, bulmaFlavor, template);
             await this.setupIconLibrary(targetPath, iconLibrary, template);
             await this.setupConfigProvider(targetPath, bulmaFlavor, iconLibrary, template);
+            if (installSkills) {
+                await this.setupSkills(targetPath, projectName);
+            }
             displaySuccess(targetDir);
         }
         catch (error) {

package/dist/prompts.d.ts

@@ -1,5 +1,6 @@
 export declare function promptProjectName(): Promise<string | null>;
 export declare function promptOverwriteDirectory(targetDir: string): Promise<boolean>;
+export declare function promptInstallSkills(): Promise<boolean>;
 export declare function promptTemplate(): Promise<string | null>;
 export declare function promptIconLibrary(): Promise<string | null>;
 export declare function promptBulmaFlavor(): Promise<string | null>;

package/dist/prompts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prompts.d.ts","sourceRoot":"","sources":["../src/prompts.ts"],"names":[],"mappings":"AAWA,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAUhE;AAED,wBAAsB,wBAAwB,CAC5C,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC,CASlB;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAY7D;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAahE;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAehE"}
+{"version":3,"file":"prompts.d.ts","sourceRoot":"","sources":["../src/prompts.ts"],"names":[],"mappings":"AAWA,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAUhE;AAED,wBAAsB,wBAAwB,CAC5C,SAAS,EAAE,MAAM,GAChB,OAAO,CAAC,OAAO,CAAC,CASlB;AAED,wBAAsB,mBAAmB,IAAI,OAAO,CAAC,OAAO,CAAC,CAS5D;AAED,wBAAsB,cAAc,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAY7D;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAahE;AAED,wBAAsB,iBAAiB,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAehE"}

package/dist/prompts.js

@@ -20,6 +20,15 @@ export async function promptOverwriteDirectory(targetDir) {
     });
     return response.overwrite === true;
 }
+export async function promptInstallSkills() {
+    const response = await prompts({
+        type: 'confirm',
+        name: 'skills',
+        message: PROMPT_MESSAGES.INSTALL_SKILLS,
+        initial: true,
+    });
+    return response.skills === true;
+}
 export async function promptTemplate() {
     const response = await prompts({
         type: 'select',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-bestax",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "Create a new bestax-bulma project",
   "type": "module",
   "bin": {
@@ -11,7 +11,8 @@
     "templates"
   ],
   "scripts": {
-    "build": "tsc",
+    "build": "node scripts/sync-skills.mjs && tsc",
+    "prepack": "node scripts/sync-skills.mjs",
     "dev": "tsc --watch",
     "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest",
     "test:watch": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --watch",
@@ -61,7 +62,7 @@
     "@playwright/test": "^1.57.0",
     "@types/fs-extra": "^11.0.4",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.0.1",
     "@types/prompts": "^2.4.9",
     "@types/wait-on": "^5.3.4",
     "jest": "^30.2.0",

package/templates/skills/bestax-custom-component/SKILL.md

@@ -0,0 +1,389 @@
+---
+name: bestax-custom-component
+description: Build a new custom Bulma "extra" component for @allxsmith/bestax-bulma — a React + TypeScript component with Bulma v1 SCSS (the CSS-variable pattern), Storybook stories, tests, and docs. Use when adding a component that goes beyond stock Bulma (like Dialog, Carousel, Switch, Slider, Rate, Taginput), or when extending an existing one to match the library's conventions.
+license: MIT
+---
+
+# Building a custom bestax-bulma component
+
+This skill teaches the end-to-end pattern the library uses for its custom "extra"
+components — the ones that aren't part of stock Bulma. Follow it whenever you add a new
+component to `@allxsmith/bestax-bulma`, or refactor a component to match house style.
+
+## Use when
+
+- Creating a new component beyond stock Bulma (an interactive widget, a composed element).
+- Writing the component's SCSS and you need it to follow the **Bulma v1 CSS-variable pattern**
+  (`register-vars` / `getVar`, `--bulma-*` custom properties, the class prefix).
+- Wiring a component into the package exports, the SCSS bundle, Storybook, tests, and docs.
+
+For **form** components (Field/Control/Input/etc.) use the `bestax-form` skill instead.
+
+## Check for an existing component first
+
+Before building anything, **search the library for a component that already does this — or a
+close synonym** — and tell the user what you found. Many requests are covered by an existing
+element, or are best built by composing existing ones. Building a near-duplicate (a "label" when
+`Tag` exists, a "banner" when `Notification` exists) fragments the API and is usually the wrong
+call.
+
+Where to look:
+
+- `bulma-ui/src/index.ts` — the full export list; scan it for the name and its synonyms.
+- `docs/docs/api/{elements,components,form}/` — one doc page per shipped component.
+- Storybook titles — `Elements/*`, `Components/*`, `Form/*`.
+
+Then decide, and **surface the decision to the user**:
+
+- **Exact / synonym match exists** → recommend using it. Don't build a duplicate. (E.g. a small
+  colored label/badge/chip → `Tag` / `Tags` already exist.)
+- **Partial overlap** → prefer **composing or extending** the existing pieces inside your new
+  component rather than re-implementing them. (E.g. a "profile card" → there's no `ProfileCard`,
+  but `Card`, `Image`, `Title`, `SubTitle`, and `Content` exist; build `ProfileCard` to compose
+  them.)
+- **Genuine gap** → build the new component using the pattern below.
+
+State plainly which case applies before writing code, e.g. _"`Tag` already covers a colored
+label — use that instead"_ or _"No `ProfileCard` exists; I'll build one composing the existing
+`Card`/`Image`/`Title` elements."_
+
+## File layout
+
+Every custom component has five files. Mirror the existing names exactly (PascalCase TSX,
+`_kebab.scss` partial):
+
+```
+bulma-ui/src/components/MyComponent.tsx              # React + TS component
+bulma-ui/src/components/MyComponent.stories.tsx      # Storybook stories
+bulma-ui/src/components/__tests__/MyComponent.test.tsx  # Jest + RTL tests
+bulma-ui/src/scss/components/_mycomponent.scss       # SCSS partial
+docs/docs/api/components/mycomponent.md              # Docusaurus docs page
+```
+
+Then wire two index files (see **Wiring & build**).
+
+## Component template
+
+Components use `forwardRef`, accept Bulma helper props via `BulmaClassesProps`, run them
+through `useBulmaClasses`, build their own classes with `usePrefixedClassNames`, and merge
+everything with `classNames`. Spread `rest` (the non-helper props) onto the DOM node.
+
+```tsx
+import React, { forwardRef } from 'react';
+import { classNames, usePrefixedClassNames } from '../helpers/classNames';
+import { useBulmaClasses, BulmaClassesProps } from '../helpers/useBulmaClasses';
+
+export type MyComponentColor =
+  | 'primary'
+  | 'link'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger';
+
+/**
+ * Props for the MyComponent component.
+ *
+ * @property {MyComponentColor} [color] - Bulma color modifier.
+ * @property {'small' | 'medium' | 'large'} [size] - Size modifier.
+ * @property {boolean} [isActive] - Whether the component is active.
+ */
+export interface MyComponentProps
+  extends
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,
+    Omit<BulmaClassesProps, 'color'> {
+  color?: MyComponentColor;
+  size?: 'small' | 'medium' | 'large';
+  isActive?: boolean;
+}
+
+/**
+ * MyComponent — short description of what it does.
+ *
+ * @example
+ * <MyComponent color="primary" size="large" isActive>Hello</MyComponent>
+ */
+export const MyComponent = forwardRef<HTMLDivElement, MyComponentProps>(
+  ({ color, size, isActive, className, children, ...props }, ref) => {
+    // 1. Pull Bulma helper classes (m/p, text*, display, etc.) out of props.
+    const { bulmaHelperClasses, rest } = useBulmaClasses(props);
+
+    // 2. Build this component's own classes (respects the Config classPrefix).
+    const mainClasses = usePrefixedClassNames('mycomponent', {
+      [`is-${color}`]: !!color,
+      [`is-${size}`]: !!size,
+      'is-active': !!isActive,
+    });
+
+    // 3. Merge: own classes + helper classes + caller className.
+    const combined = classNames(mainClasses, bulmaHelperClasses, className);
+
+    return (
+      <div ref={ref} className={combined} {...rest}>
+        {children}
+      </div>
+    );
+  }
+);
+
+MyComponent.displayName = 'MyComponent';
+
+export default MyComponent;
+```
+
+Rules that keep components consistent:
+
+- **Always `Omit<…, 'color'>`** from both `HTMLAttributes` and `BulmaClassesProps` when the
+  component exposes its own typed `color`, so the native/helper `color` doesn't collide.
+- **Never hand-build class strings.** Use `usePrefixedClassNames(base, conditionalMap)` so the
+  optional `classPrefix` from `Config` is honored, then `classNames(...)` to merge.
+- **Spread `rest`, not `props`**, onto the DOM node — `useBulmaClasses` has already stripped the
+  helper props out of `rest`, so they don't leak to the DOM as invalid attributes.
+- **Set `displayName`** on `forwardRef` components (needed for tests and Storybook autodocs).
+- **Element sizing uses an inline `'small' | 'medium' | 'large'` union**, mapped to `is-small` /
+  `is-medium` / `is-large` (see `Tabs.tsx`, `Control.tsx`). Do **not** reach for the `validSizes`
+  constant — that one is `'0'…'6' | 'auto'` and exists for **spacing** helpers, not element size.
+- **Format before you lint.** The repo enforces Prettier and ESLint fails on unformatted code.
+  Run `npx prettier --write` on your new files (or `npm run format` from the repo root) before
+  `npm run lint`. Copy snippets as a starting point, then let Prettier normalize them.
+
+See `references/api.md` for the full helper API and `references/patterns.md` for the complete
+Dialog walkthrough.
+
+## SCSS pattern (required)
+
+This is the library's house convention — **the Bulma v1 CSS-variable pattern**. Do not write
+plain hard-coded CSS or homebrew `--mycomponent-*` variables. Import Bulma's utilities, declare
+SCSS vars with `!default`, register them as `--bulma-*` custom properties on the root selector
+with `cv.register-vars`, then consume them with `cv.getVar`. Prefix every selector with
+`iv.$class-prefix`.
+
+```scss
+// bulma-ui/src/scss/components/_mycomponent.scss
+@use 'bulma/sass/utilities/initial-variables' as iv;
+@use 'bulma/sass/utilities/css-variables' as cv;
+
+// 1. SCSS variables, overridable, referencing Bulma vars via cv.getVar.
+$mycomponent-radius: cv.getVar('radius') !default;
+$mycomponent-background: cv.getVar('scheme-main') !default;
+$mycomponent-color: cv.getVar('text') !default;
+$mycomponent-padding: 1rem !default;
+
+// 2. Register them as runtime --bulma-* custom properties on the root selector.
+.#{iv.$class-prefix}mycomponent {
+  @include cv.register-vars(
+    (
+      'mycomponent-radius': #{$mycomponent-radius},
+      'mycomponent-background': #{$mycomponent-background},
+      'mycomponent-color': #{$mycomponent-color},
+      'mycomponent-padding': #{$mycomponent-padding},
+    )
+  );
+}
+
+// 3. Consume via cv.getVar. Prefix every selector with iv.$class-prefix.
+.#{iv.$class-prefix}mycomponent {
+  background-color: cv.getVar('mycomponent-background');
+  border-radius: cv.getVar('mycomponent-radius');
+  color: cv.getVar('mycomponent-color');
+  padding: cv.getVar('mycomponent-padding');
+}
+
+// Color variants reuse Bulma's registered color vars.
+.#{iv.$class-prefix}mycomponent.#{iv.$class-prefix}is-primary {
+  background-color: cv.getVar('primary');
+  color: cv.getVar('primary-invert');
+}
+
+// Respect reduced-motion if you animate.
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}mycomponent {
+    animation: none;
+  }
+}
+```
+
+Why this matters: registering vars makes the component themeable at runtime (the docs site and
+`Theme`/`Config` providers override `--bulma-*` properties), and the `iv.$class-prefix` keeps
+the component working when consumers opt into a class prefix to avoid collisions.
+
+The canonical reference file is `bulma-ui/src/scss/components/_dialog.scss`.
+
+## Stories
+
+`MyComponent.stories.tsx` beside the component. Use `tags: ['autodocs']` so the JSDoc becomes
+the docs page, declare `argTypes`, and write one named `function`-style render per variant.
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { MyComponent } from './MyComponent';
+
+const meta: Meta<typeof MyComponent> = {
+  title: 'Components/MyComponent',
+  component: MyComponent,
+  tags: ['autodocs'],
+  argTypes: {
+    color: {
+      control: 'select',
+      options: ['primary', 'link', 'info', 'success', 'warning', 'danger'],
+    },
+    isActive: { control: 'boolean' },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof MyComponent>;
+
+export const Default: Story = {
+  render: function DefaultExample() {
+    return <MyComponent>Default</MyComponent>;
+  },
+};
+
+export const Colors: Story = {
+  render: function ColorsExample() {
+    return (
+      <>
+        <MyComponent color="primary">Primary</MyComponent>
+        <MyComponent color="danger">Danger</MyComponent>
+      </>
+    );
+  },
+};
+```
+
+## Tests
+
+`__tests__/MyComponent.test.tsx`, Jest + `@testing-library/react`. Cover render, each prop →
+class mapping, the helper-prop passthrough, ref forwarding, and any interaction/a11y.
+
+```tsx
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { MyComponent } from '../MyComponent';
+
+describe('MyComponent', () => {
+  it('renders children', () => {
+    render(<MyComponent>Hello</MyComponent>);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('applies the color modifier', () => {
+    render(<MyComponent color="primary">x</MyComponent>);
+    expect(screen.getByText('x')).toHaveClass('mycomponent', 'is-primary');
+  });
+
+  it('passes Bulma helper props through', () => {
+    render(<MyComponent m="3">x</MyComponent>);
+    expect(screen.getByText('x')).toHaveClass('m-3');
+  });
+
+  it('forwards the ref', () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<MyComponent ref={ref}>x</MyComponent>);
+    expect(ref.current).toBeInstanceOf(HTMLDivElement);
+  });
+});
+```
+
+## Docs page
+
+`docs/docs/api/components/mycomponent.md` — Overview, Import, a Props table, and `Usage` with
+live examples. Live code blocks use the ` ```tsx live ` fence (Docusaurus live-codeblock).
+
+````md
+---
+title: MyComponent
+sidebar_label: MyComponent
+---
+
+# MyComponent
+
+## Overview
+
+Short description of the component.
+
+## Import
+
+```tsx
+import { MyComponent } from '@allxsmith/bestax-bulma';
+```
+
+## Props
+
+| Prop       | Type                         | Default | Description           |
+| ---------- | ---------------------------- | ------- | --------------------- |
+| `color`    | `'primary' \| 'link' \| ...` | —       | Bulma color modifier. |
+| `isActive` | `boolean`                    | `false` | Active state.         |
+
+## Usage
+
+### Default
+
+```tsx live
+<MyComponent>Hello</MyComponent>
+```
+````
+
+> Note: the Docusaurus docs load the **built** dist CSS. After SCSS changes, run
+> `cd bulma-ui && npm run build` before the new styles show up in the docs site (Storybook
+> compiles SCSS live and does not need this).
+
+## Wiring & build
+
+Two index files must be updated or the component won't ship:
+
+1. **Package export** — add to `bulma-ui/src/index.ts`, in the **components** group (the file
+   groups exports by directory — keep yours next to the other `./components/*` lines):
+   ```ts
+   export * from './components/MyComponent';
+   ```
+2. **SCSS bundle** — add to `bulma-ui/src/scss/components/_index.scss`:
+   ```scss
+   @use 'mycomponent';
+   ```
+
+Then build and verify:
+
+```sh
+cd bulma-ui
+npx prettier --write src/components/MyComponent.tsx src/scss/components/_mycomponent.scss
+npm run lint
+npm test
+npm run build      # compiles JS + the bestax/extras CSS bundles
+```
+
+## Visually inspect it in a browser
+
+Types and unit tests don't see layout. **Render the component and actually look at it** before
+you call it done — spacing, padding, vertical centering, alignment, and every variant/state
+(colors, sizes, hover/active, dark mode). Visual bugs hide from `tsc` and `@testing-library`.
+
+1. Run a surface that renders it: `npm run storybook` (compiles SCSS live) or the docs dev server.
+2. Open the component and inspect it. If a browser-automation tool (claude-in-chrome, Playwright)
+   is available, drive the browser and screenshot each variant; otherwise open it yourself and
+   eyeball it.
+3. Check the usual offenders:
+   - **Vertical centering of inline text** — `display: inline-block` + `line-height: 1` makes
+     text sit low. For chips/labels/buttons use `display: inline-flex; align-items: center;
+justify-content: center;` with a normal `line-height` (Bulma's `Tag` is the reference).
+   - Padding/gaps look balanced; nothing clips or overflows.
+   - Every color/size variant renders; dark mode is legible.
+
+Fix what you see, then re-inspect. A green test suite with a misaligned component is not done.
+
+## Checklist
+
+- [ ] **Checked the inventory first** — searched `src/index.ts` / docs / Storybook for an existing
+      match or synonym, and told the user (reuse/extend it, or confirm there's a genuine gap).
+- [ ] `MyComponent.tsx` — `forwardRef`, `Omit<…, 'color'>`, `useBulmaClasses`,
+      `usePrefixedClassNames`, `classNames`, spread `rest`, `displayName` set.
+- [ ] `_mycomponent.scss` — `@use` Bulma utilities, `$vars !default`, `cv.register-vars`,
+      `cv.getVar`, every selector prefixed with `iv.$class-prefix`.
+- [ ] `MyComponent.stories.tsx` — `tags: ['autodocs']`, `argTypes`, one story per variant.
+- [ ] `__tests__/MyComponent.test.tsx` — render, prop→class, helper passthrough, ref.
+- [ ] `docs/docs/api/components/mycomponent.md` — Overview / Import / Props / `tsx live`.
+- [ ] `src/index.ts` exports the component (in the `./components/*` group).
+- [ ] `scss/components/_index.scss` `@use`s the partial.
+- [ ] Prettier-formatted, then `npm run lint && npm test && npm run build` all pass.
+- [ ] **Rendered and visually inspected in a browser** — centering/spacing/variants all look
+      right (not just green tests).