@vojtaholik/create-static-kit 1.0.0 → 1.0.1

package/dist/cli.js

@@ -10,26 +10,67 @@ const TEMPLATES = {
     minimal: {
         name: "Minimal",
         description: "Just the basics - perfect starting point",
-        features: ["Basic HTML/SCSS structure", "Component system", "Build pipeline"]
+        features: [
+            "Basic HTML/SCSS structure",
+            "Component system",
+            "Build pipeline",
+        ],
     },
     default: {
         name: "Default",
         description: "Starter with examples and components",
-        features: ["Multiple page examples", "Component library", "SVG sprite system", "Basic styling"]
+        features: [
+            "Multiple page examples",
+            "Component library",
+            "SVG sprite system",
+            "Basic styling",
+        ],
     },
     styled: {
         name: "Styled",
         description: "Pre-styled with design system",
-        features: ["Modern CSS reset", "Design tokens", "Typography scale", "Component showcase"]
-    }
+        features: [
+            "Modern CSS reset",
+            "Design tokens",
+            "Typography scale",
+            "Component showcase",
+        ],
+    },
 };
+function showHelp() {
+    console.log(`${cyan("create-static-kit")} ${green("v1.0.0")}`);
+    console.log();
+    console.log("Usage:");
+    console.log("  npx @vojtaholik/create-static-kit <project-name> [options]");
+    console.log();
+    console.log("Options:");
+    console.log("  --template=<name>      Template to use (minimal, default)");
+    console.log("  --interactive          Force interactive mode");
+    console.log("  --no-cursor-rules      Skip including Cursor rules");
+    console.log("  --help, -h             Show this help message");
+    console.log();
+    console.log("Examples:");
+    console.log("  npx @vojtaholik/create-static-kit my-site");
+    console.log("  npx @vojtaholik/create-static-kit my-site --template=minimal");
+    console.log("  npx @vojtaholik/create-static-kit my-site --no-cursor-rules");
+    console.log("  npx @vojtaholik/create-static-kit my-site --interactive");
+    console.log();
+}
 async function main() {
+    const args = process.argv.slice(2);
+    // Check for help flag first (before showing header)
+    if (args.includes("--help") || args.includes("-h")) {
+        showHelp();
+        process.exit(0);
+    }
     console.log();
     console.log(`${cyan("create-static-kit")} ${green("v1.0.0")}`);
     console.log();
-    const args = process.argv.slice(2);
     let projectName = args[0];
-    let template = args.find(arg => arg.startsWith("--template="))?.split("=")[1];
+    let template = args
+        .find((arg) => arg.startsWith("--template="))
+        ?.split("=")[1];
+    const noCursorRules = args.includes("--no-cursor-rules");
     const interactive = args.includes("--interactive") || !projectName || !template;
     if (interactive) {
         const response = await prompts([
@@ -44,7 +85,7 @@ async function main() {
                     if (!/^[a-zA-Z0-9-_]+$/.test(value))
                         return "Project name can only contain letters, numbers, hyphens, and underscores";
                     return true;
-                }
+                },
             },
             {
                 type: "select",
@@ -53,28 +94,34 @@ async function main() {
                 choices: Object.entries(TEMPLATES).map(([key, config]) => ({
                     title: `${config.name} - ${config.description}`,
                     description: config.features.join(" • "),
-                    value: key
+                    value: key,
                 })),
-                initial: 0
+                initial: 0,
             },
             {
                 type: "confirm",
                 name: "cssReset",
                 message: "Include CSS reset?",
-                initial: true
+                initial: true,
             },
             {
                 type: "confirm",
                 name: "designTokens",
                 message: "Include design tokens?",
-                initial: false
+                initial: false,
+            },
+            {
+                type: "confirm",
+                name: "includeCursorRules",
+                message: "Include Cursor rules for better dev experience?",
+                initial: true,
             },
             {
                 type: "confirm",
                 name: "initGit",
                 message: "Initialize git repository?",
-                initial: true
-            }
+                initial: true,
+            },
         ]);
         if (!response.projectName) {
             console.log(red("✖") + " Operation cancelled");
@@ -85,7 +132,8 @@ async function main() {
             template: response.template,
             cssReset: response.cssReset,
             designTokens: response.designTokens,
-            initGit: response.initGit
+            includeCursorRules: response.includeCursorRules,
+            initGit: response.initGit,
         };
         await createProject(options);
     }
@@ -96,13 +144,14 @@ async function main() {
             template: template || "default",
             cssReset: true,
             designTokens: false,
-            initGit: true
+            includeCursorRules: !noCursorRules,
+            initGit: true,
         };
         await createProject(options);
     }
 }
 async function createProject(options) {
-    const { projectName, template, cssReset, designTokens, initGit } = options;
+    const { projectName, template, cssReset, designTokens, includeCursorRules, initGit, } = options;
     console.log();
     console.log(`${cyan("✨")} Creating ${bold(projectName)}...`);
     console.log();
@@ -134,6 +183,10 @@ async function createProject(options) {
         if (designTokens) {
             await addDesignTokens(projectPath);
         }
+        // Remove Cursor rules if not wanted
+        if (!includeCursorRules) {
+            await removeCursorRules(projectPath);
+        }
         // Initialize git
         if (initGit) {
             await initializeGit(projectPath);
@@ -171,7 +224,7 @@ async function copyTemplate(templateName, projectPath) {
     const files = await fg("**/*", {
         cwd: templatePath,
         onlyFiles: true,
-        dot: true
+        dot: true,
     });
     for (const file of files) {
         const srcPath = path.join(templatePath, file);
@@ -190,7 +243,7 @@ async function generatePackageJson(projectName, projectPath) {
         scripts: {
             dev: "vite",
             build: "tsc && vite build",
-            preview: "vite preview"
+            preview: "vite preview",
         },
         devDependencies: {
             "@vojtaholik/static-kit-core": "^1.0.0",
@@ -199,30 +252,26 @@ async function generatePackageJson(projectName, projectPath) {
             postcss: "^8.5.6",
             "sass-embedded": "^1.90.0",
             typescript: "~5.9.2",
-            vite: "^7.1.1"
-        }
+            vite: "^7.1.1",
+        },
     };
     await fs.writeFile(path.join(projectPath, "package.json"), JSON.stringify(packageJson, null, 2));
 }
 async function generateViteConfig(projectPath) {
-    const viteConfig = `import { defineConfig } from "vite";
-import { createStaticKitConfig } from "@vojtaholik/static-kit-core/vite";
+    const viteConfig = `import { createStaticKitConfig } from "@vojtaholik/static-kit-core/vite";
 
-export default defineConfig(async (env) => {
-  const staticKitConfig = await createStaticKitConfig();
-  return staticKitConfig;
-});`;
+export default createStaticKitConfig();`;
     await fs.writeFile(path.join(projectPath, "vite.config.ts"), viteConfig);
 }
 async function generateStaticKitConfig(projectPath) {
     const config = {
         build: {
             base: "public/",
-            output: "dist"
+            output: "dist",
         },
         templates: {
-            language: "en"
-        }
+            language: "en",
+        },
     };
     await fs.writeFile(path.join(projectPath, "static-kit.config.json"), JSON.stringify(config, null, 2));
 }
@@ -262,7 +311,7 @@ p, h1, h2, h3, h4, h5, h6 {
     const mainScssPath = path.join(projectPath, "src", "styles", "main.scss");
     try {
         const mainScss = await fs.readFile(mainScssPath, "utf-8");
-        const updatedScss = `@import "reset";\n\n${mainScss}`;
+        const updatedScss = `@use "reset";\n\n${mainScss}`;
         await fs.writeFile(mainScssPath, updatedScss);
     }
     catch {
@@ -327,13 +376,22 @@ async function addDesignTokens(projectPath) {
     const mainScssPath = path.join(projectPath, "src", "styles", "main.scss");
     try {
         const mainScss = await fs.readFile(mainScssPath, "utf-8");
-        const updatedScss = `@import "tokens";\n\n${mainScss}`;
+        const updatedScss = `@use "tokens";\n\n${mainScss}`;
         await fs.writeFile(mainScssPath, updatedScss);
     }
     catch {
         // main.scss doesn't exist or can't be read
     }
 }
+async function removeCursorRules(projectPath) {
+    try {
+        const cursorDir = path.join(projectPath, ".cursor");
+        await fs.rm(cursorDir, { recursive: true, force: true });
+    }
+    catch {
+        // Directory doesn't exist or can't be removed, which is fine
+    }
+}
 async function initializeGit(projectPath) {
     const gitignore = `# Dependencies
 node_modules/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vojtaholik/create-static-kit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "CLI tool to create new Static Kit projects",
   "type": "module",
   "bin": {
@@ -34,7 +34,7 @@
     "scaffold",
     "template"
   ],
-  "author": "Vojta Holik <vojta@hey.com>",
+  "author": "Vojta Holik <vojta@holik.dev>",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/default/.cursor/rules/configuration.mdc

@@ -0,0 +1,20 @@
+---
+description: Static Kit configuration and build settings
+globs: ["static-kit.config.json", "static-kit.local.json"]
+alwaysApply: false
+---
+
+# Configuration
+
+Global build configuration in `static-kit.config.json`. Local overrides go in `static-kit.local.json` (ignored by git).
+
+## Configuration Files
+
+- `static-kit.config.json` - Global build configuration
+- `static-kit.local.json` - Local overrides (git ignored)
+
+## Guidelines
+
+- Keep global settings in main config
+- Use local config for environment-specific overrides
+- Local config is automatically ignored by git

package/templates/default/.cursor/rules/figma-integration.mdc

@@ -0,0 +1,22 @@
+---
+description: Figma MCP integration and design-to-dev workflow
+globs: ["**/*.html"]
+alwaysApply: false
+---
+
+# Figma Integration
+
+For Figma MCP integration, component and page file names should match Figma node/component names for proper mapping.
+
+## Design-to-Dev Workflow
+
+- Component/page file names should match Figma node names
+- Follow Static Kit conventions when generating from Figma designs
+- Maintain consistent naming between design and code
+- Use proper file placement per Static Kit rules
+
+## Guidelines
+
+- Generate HTML/SCSS from Figma following Static Kit conventions
+- Ensure proper file placement in src/ directories
+- Maintain design-code consistency through naming

package/templates/default/.cursor/rules/html-components.mdc

@@ -0,0 +1,24 @@
+---
+description: Reusable HTML components conventions
+globs: ["src/components/**/*.html"]
+alwaysApply: false
+---
+
+# HTML Components
+
+Reusable HTML components should follow specific naming and structure conventions.
+
+## File Naming
+
+- Use lowercase kebab-case for file names
+- Examples: `button.html`, `ui/card.html`
+
+## Structure Rules
+
+- No `<html>` or `<body>` tags in components
+- Keep components focused and reusable
+- Place under `src/components/` directory
+
+## Import Usage
+
+Components should be imported using `@components/` prefix in pages.

package/templates/default/.cursor/rules/html-pages.mdc

@@ -0,0 +1,22 @@
+---
+description: HTML pages structure and import conventions
+globs: ["src/pages/**/*.html"]
+alwaysApply: false
+---
+
+# HTML Pages
+
+HTML pages go in `src/pages/` directory. Use `@components/` prefix for imports, not relative paths.
+
+## Import Examples
+
+```html
+<!-- @import: @components/header.html -->
+<!-- @import: @components/footer.html -->
+```
+
+## Guidelines
+
+- Place all pages under `src/pages/` with correct folder structure
+- Use `@components/` prefix for component imports
+- Avoid relative imports unless absolutely necessary

package/templates/default/.cursor/rules/project-overview.mdc

@@ -0,0 +1,30 @@
+---
+description: Static Kit project overview and general guidelines
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# Static Kit Framework
+
+Static site framework with TypeScript, SCSS, and HTML imports. Integrated with Figma MCP for design-to-dev workflow.
+
+## Core Principles
+
+- Use `@components/` prefix for imports, not relative paths
+- Follow lowercase kebab-case naming for files
+- Keep modules isolated and modular
+- Maintain clean separation between pages, components, and styles
+
+## Git Conventions
+
+### Commit Message Conventions
+
+- `feat: new component/page`
+- `style: scss changes`
+- `fix: bugfix`
+- `design-sync: figma-linked update`
+
+### Ignored Files
+
+- `dist/` - Build output
+- `static-kit.local.json` - Local configuration overrides

package/templates/default/.cursor/rules/public-assets.mdc

@@ -0,0 +1,22 @@
+---
+description: Public assets organization and handling
+globs: ["public/**/*"]
+alwaysApply: false
+---
+
+# Public Assets
+
+Static assets copied directly to dist/ with no processing. Organize into logical folders.
+
+## Organization
+
+- `public/images/` - Image assets
+- `public/fonts/` - Font files
+- `public/` - Other static assets
+
+## Guidelines
+
+- Assets are copied as-is to dist/
+- No build-time processing
+- Organize into meaningful subdirectories
+- Reference in development as `/<filename>` (no 'public' prefix needed)

package/templates/default/.cursor/rules/scss-styles.mdc

@@ -0,0 +1,22 @@
+---
+description: SCSS styling conventions and import structure
+globs: ["src/styles/**/*.scss"]
+alwaysApply: false
+---
+
+# SCSS Styles
+
+SCSS entrypoint is `src/styles/main.scss`. Component styles should be imported into main.scss.
+
+## Import Structure
+
+```scss
+@import "./components/button.scss";
+```
+
+## Guidelines
+
+- Main entrypoint: `src/styles/main.scss`
+- Import component styles into main.scss
+- Follow modular SCSS architecture
+- Keep component styles organized and focused

package/templates/default/.cursor/rules/svg-icons.mdc

@@ -0,0 +1,22 @@
+---
+description: SVG icon naming and sprite conventions
+globs: ["src/icons/**/*.svg"]
+alwaysApply: false
+---
+
+# SVG Icons
+
+SVG icons should use lowercase-kebab-case naming. Folder structure defines sprite ID namespace.
+
+## Naming Convention
+
+```
+src/icons/ui/arrow.svg → <use href="/sprite.svg#ui-arrow"></use>
+```
+
+## Guidelines
+
+- Use lowercase kebab-case for icon names
+- Folder structure creates namespace (ui/, social/, etc.)
+- Icons are compiled into sprite.svg
+- Reference using sprite ID format: `namespace-iconname`

package/templates/default/.cursor/rules/typescript-js.mdc

@@ -0,0 +1,23 @@
+---
+description: TypeScript and JavaScript module conventions
+globs: ["src/js/**/*.ts", "src/js/**/*.js"]
+alwaysApply: false
+---
+
+# TypeScript/JavaScript Modules
+
+Component-specific scripts go in `src/js/components/`. Keep modules isolated with no bundler-only imports.
+
+## File Organization
+
+```
+src/js/components/modal.ts
+```
+
+## Guidelines
+
+- Place component scripts in `src/js/components/`
+- Keep modules isolated and modular
+- Avoid bundler-only patterns
+- Use effective TypeScript for library-style code
+- Maintain clean module boundaries

package/templates/minimal/.cursor/rules/configuration.mdc

@@ -0,0 +1,20 @@
+---
+description: Static Kit configuration and build settings
+globs: ["static-kit.config.json", "static-kit.local.json"]
+alwaysApply: false
+---
+
+# Configuration
+
+Global build configuration in `static-kit.config.json`. Local overrides go in `static-kit.local.json` (ignored by git).
+
+## Configuration Files
+
+- `static-kit.config.json` - Global build configuration
+- `static-kit.local.json` - Local overrides (git ignored)
+
+## Guidelines
+
+- Keep global settings in main config
+- Use local config for environment-specific overrides
+- Local config is automatically ignored by git

package/templates/minimal/.cursor/rules/figma-integration.mdc

@@ -0,0 +1,22 @@
+---
+description: Figma MCP integration and design-to-dev workflow
+globs: ["**/*.html"]
+alwaysApply: false
+---
+
+# Figma Integration
+
+For Figma MCP integration, component and page file names should match Figma node/component names for proper mapping.
+
+## Design-to-Dev Workflow
+
+- Component/page file names should match Figma node names
+- Follow Static Kit conventions when generating from Figma designs
+- Maintain consistent naming between design and code
+- Use proper file placement per Static Kit rules
+
+## Guidelines
+
+- Generate HTML/SCSS from Figma following Static Kit conventions
+- Ensure proper file placement in src/ directories
+- Maintain design-code consistency through naming

package/templates/minimal/.cursor/rules/html-components.mdc

@@ -0,0 +1,24 @@
+---
+description: Reusable HTML components conventions
+globs: ["src/components/**/*.html"]
+alwaysApply: false
+---
+
+# HTML Components
+
+Reusable HTML components should follow specific naming and structure conventions.
+
+## File Naming
+
+- Use lowercase kebab-case for file names
+- Examples: `button.html`, `ui/card.html`
+
+## Structure Rules
+
+- No `<html>` or `<body>` tags in components
+- Keep components focused and reusable
+- Place under `src/components/` directory
+
+## Import Usage
+
+Components should be imported using `@components/` prefix in pages.

package/templates/minimal/.cursor/rules/html-pages.mdc

@@ -0,0 +1,22 @@
+---
+description: HTML pages structure and import conventions
+globs: ["src/pages/**/*.html"]
+alwaysApply: false
+---
+
+# HTML Pages
+
+HTML pages go in `src/pages/` directory. Use `@components/` prefix for imports, not relative paths.
+
+## Import Examples
+
+```html
+<!-- @import: @components/header.html -->
+<!-- @import: @components/footer.html -->
+```
+
+## Guidelines
+
+- Place all pages under `src/pages/` with correct folder structure
+- Use `@components/` prefix for component imports
+- Avoid relative imports unless absolutely necessary

package/templates/minimal/.cursor/rules/project-overview.mdc

@@ -0,0 +1,30 @@
+---
+description: Static Kit project overview and general guidelines
+globs: ["**/*"]
+alwaysApply: true
+---
+
+# Static Kit Framework
+
+Static site framework with TypeScript, SCSS, and HTML imports. Integrated with Figma MCP for design-to-dev workflow.
+
+## Core Principles
+
+- Use `@components/` prefix for imports, not relative paths
+- Follow lowercase kebab-case naming for files
+- Keep modules isolated and modular
+- Maintain clean separation between pages, components, and styles
+
+## Git Conventions
+
+### Commit Message Conventions
+
+- `feat: new component/page`
+- `style: scss changes`
+- `fix: bugfix`
+- `design-sync: figma-linked update`
+
+### Ignored Files
+
+- `dist/` - Build output
+- `static-kit.local.json` - Local configuration overrides

package/templates/minimal/.cursor/rules/public-assets.mdc

@@ -0,0 +1,22 @@
+---
+description: Public assets organization and handling
+globs: ["public/**/*"]
+alwaysApply: false
+---
+
+# Public Assets
+
+Static assets copied directly to dist/ with no processing. Organize into logical folders.
+
+## Organization
+
+- `public/images/` - Image assets
+- `public/fonts/` - Font files
+- `public/` - Other static assets
+
+## Guidelines
+
+- Assets are copied as-is to dist/
+- No build-time processing
+- Organize into meaningful subdirectories
+- Reference in development as `/<filename>` (no 'public' prefix needed)

package/templates/minimal/.cursor/rules/scss-styles.mdc

@@ -0,0 +1,22 @@
+---
+description: SCSS styling conventions and import structure
+globs: ["src/styles/**/*.scss"]
+alwaysApply: false
+---
+
+# SCSS Styles
+
+SCSS entrypoint is `src/styles/main.scss`. Component styles should be imported into main.scss.
+
+## Import Structure
+
+```scss
+@import "./components/button.scss";
+```
+
+## Guidelines
+
+- Main entrypoint: `src/styles/main.scss`
+- Import component styles into main.scss
+- Follow modular SCSS architecture
+- Keep component styles organized and focused

package/templates/minimal/.cursor/rules/svg-icons.mdc

@@ -0,0 +1,22 @@
+---
+description: SVG icon naming and sprite conventions
+globs: ["src/icons/**/*.svg"]
+alwaysApply: false
+---
+
+# SVG Icons
+
+SVG icons should use lowercase-kebab-case naming. Folder structure defines sprite ID namespace.
+
+## Naming Convention
+
+```
+src/icons/ui/arrow.svg → <use href="/sprite.svg#ui-arrow"></use>
+```
+
+## Guidelines
+
+- Use lowercase kebab-case for icon names
+- Folder structure creates namespace (ui/, social/, etc.)
+- Icons are compiled into sprite.svg
+- Reference using sprite ID format: `namespace-iconname`

package/templates/minimal/.cursor/rules/typescript-js.mdc

@@ -0,0 +1,23 @@
+---
+description: TypeScript and JavaScript module conventions
+globs: ["src/js/**/*.ts", "src/js/**/*.js"]
+alwaysApply: false
+---
+
+# TypeScript/JavaScript Modules
+
+Component-specific scripts go in `src/js/components/`. Keep modules isolated with no bundler-only imports.
+
+## File Organization
+
+```
+src/js/components/modal.ts
+```
+
+## Guidelines
+
+- Place component scripts in `src/js/components/`
+- Keep modules isolated and modular
+- Avoid bundler-only patterns
+- Use effective TypeScript for library-style code
+- Maintain clean module boundaries