create-apppaaaul 2.0.11 → 2.0.13

package/README.md

@@ -1,20 +1,20 @@
-# Create AppPaaaul
-
-Create projects as Paauldev would.
-Based on [appcny](https://github.com/goncy/create-appncy)
-
-## Usage
-
-```bash
-# Interactive mode
-pnpm create apppaaaul
-```
-
-## Installation
-
-```bash
-pnpm install -g create-apppaaaul
-```
-
-## Questions?
-
+# Create AppPaaaul
+
+Create projects as Paauldev would.
+Based on [appcny](https://github.com/goncy/create-appncy)
+
+## Usage
+
+```bash
+# Interactive mode
+pnpm create apppaaaul
+```
+
+## Installation
+
+```bash
+pnpm install -g create-apppaaaul
+```
+
+## Questions?
+

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../node_modules/.pnpm/tsup@8.4.0_typescript@5.8.2_yaml@2.4.5/node_modules/tsup/assets/cjs_shims.js","../index.ts","../helpers/install.ts"],"sourcesContent":["// Shim globals in cjs bundle\n// There's a weird bug that esbuild will always inject importMetaUrl\n// if we export it as `const importMetaUrl = ... __filename ...`\n// But using a function will not cause this issue\n\nconst getImportMetaUrl = () =>\n  typeof document === 'undefined'\n    ? new URL(`file:${__filename}`).href\n    : (document.currentScript && document.currentScript.src) ||\n      new URL('main.js', document.baseURI).href\n\nexport const importMetaUrl = /* @__PURE__ */ getImportMetaUrl()\n","#!/usr/bin/env node\n\nimport path from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\nimport { cp, readFile, writeFile } from \"node:fs/promises\";\nimport { exec } from \"child_process\";\nimport { promisify } from \"util\";\n\nimport { cyan, green, red } from \"picocolors\";\nimport { glob } from \"glob\";\nimport color from \"picocolors\";\nimport prompts from \"prompts\";\nimport yargs from \"yargs\";\nimport { hideBin } from \"yargs/helpers\";\n\nimport { install } from \"./helpers/install\";\nconst execAsync = promisify(exec);\n\n// Define the templates available\nconst TEMPLATES = [\n  {\n    title: \"Nextjs ts with db setup Landing with prisma\",\n    value: \"nextjs-ts-landing-prisma\",\n  },\n  {\n    title: \"Nextjs ts with db setup Landing with drizzle\",\n    value: \"nextjs-ts-landing-drizzle\",\n  },\n  {\n    title: 'Nextjs ts clean',\n    value: 'nextjs-ts-clean'\n  }\n];\n\n// Specify CLI arguments\nconst args = yargs(hideBin(process.argv)).options({\n  name: {\n    alias: \"n\",\n    type: \"string\",\n    description: \"Name of the project\",\n  },\n  template: {\n    alias: \"t\",\n    type: \"string\",\n    description: \"Template to use\",\n  },\n});\n\n// Override arguments passed on the CLI\nprompts.override(args.argv);\n\nasync function main() {\n  // Get the initial values for the prompts\n  const {\n    _: [initialName, initialProject],\n  } = await args.argv;\n\n  // Create the project prompt\n  const project = await prompts(\n    [\n      {\n        type: \"text\",\n        name: \"name\",\n        message: \"What is the name of your project?\",\n        initial: initialName || \"apppaaaul-project\",\n        validate: (value) => {\n          if (value !== \".\" && value.match(/[^a-zA-Z0-9-_]+/g)) {\n            return \"Project name can only contain letters, numbers, dashes, underscores, or be '.' for the current directory\";\n          }\n\n          return true;\n        },\n      },\n      {\n        type: \"select\",\n        name: \"template\",\n        message: `Which template would you like to use?`,\n        initial: initialProject || 0,\n        choices: TEMPLATES,\n      },\n    ],\n    {\n      onCancel: () => {\n        console.log(\"\\nBye 👋\\n\");\n\n        process.exit(0);\n      },\n    },\n  );\n\n  // Get the template folder for the selected template\n  const template = path.join(\n    path.dirname(fileURLToPath(import.meta.url)),\n    \"templates\",\n    project.template,\n  );\n\n  // Get the destination folder for the project\n  const destination = project.name === \".\" ? process.cwd() : path.join(process.cwd(), project.name);\n\n  // Copy files from the template folder to the current directory\n  await cp(path.join(template, \"project\"), destination, { recursive: true });\n\n  // Get all files from the destination folder\n  const files = await glob(`**/*`, { nodir: true, cwd: destination, absolute: true });\n\n  // Read each file and replace the tokens\n  for await (const file of files) {\n    const data = await readFile(file, \"utf8\");\n    const draft = data.replace(/{{name}}/g, project.name);\n\n    await writeFile(file, draft, \"utf8\");\n  }\n\n  // Log outro message\n  console.log(\"\\n✨ Project created ✨\");\n\n  // Run commands if a new directory was created\n  if (project.name !== \".\") {\n    try {\n      await execAsync(`cd ${project.name}`);\n      console.log(`\\n${color.green(`cd`)} ${project.name}`);\n    } catch (error) {\n      console.error(`Error executing commands: ${error}`);\n    }\n  }\n  try {\n    await execAsync(\"cursor .\");\n    console.log(\"Installing packages. This might take a couple of minutes.\");\n    console.log();\n    await install();\n    console.log();\n    console.log(`${green(\"Success!\")} App installed successfully.`);\n    console.log(cyan(\"Initializing the development server...\"));\n    //TODO: Add docker-compose up, docker create db, pnpm run db:push\n    await execAsync(\"pnpm dev\");\n  } catch (error) {\n    console.error(`Error executing commands: ${error}`);\n  }\n}\n\n// Run the main function\nmain().catch(console.error);\n","import spawn from \"cross-spawn\";\nimport { yellow } from \"picocolors\";\n\nexport async function install(): Promise<void> {\n  const packageManager = \"pnpm\";\n  const args: string[] = [\"install\"];\n\n  return new Promise((resolve, reject) => {\n    /**\n     * Spawn the installation process.\n     */\n    const child = spawn(packageManager, args, {\n      stdio: \"inherit\",\n      env: {\n        ...process.env,\n        ADBLOCK: \"1\",\n        // we set NODE_ENV to development as pnpm skips dev\n        // dependencies when production\n        NODE_ENV: \"development\",\n        DISABLE_OPENCOLLECTIVE: \"1\",\n      },\n    });\n\n    child.on(\"close\", (code) => {\n      if (code !== 0) {\n        reject({ command: `${packageManager} ${args.join(\" \")}` });\n\n        return;\n      }\n      resolve();\n    });\n  });\n}\n"],"mappings":"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","names":["import_picocolors","args","spawn","yargs","prompts","path","color"]}
+{"version":3,"sources":["../node_modules/.pnpm/tsup@8.4.0_typescript@5.8.2_yaml@2.4.5/node_modules/tsup/assets/cjs_shims.js","../index.ts","../helpers/install.ts"],"sourcesContent":["// Shim globals in cjs bundle\n// There's a weird bug that esbuild will always inject importMetaUrl\n// if we export it as `const importMetaUrl = ... __filename ...`\n// But using a function will not cause this issue\n\nconst getImportMetaUrl = () =>\n  typeof document === 'undefined'\n    ? new URL(`file:${__filename}`).href\n    : (document.currentScript && document.currentScript.src) ||\n      new URL('main.js', document.baseURI).href\n\nexport const importMetaUrl = /* @__PURE__ */ getImportMetaUrl()\n","#!/usr/bin/env node\r\n\r\nimport path from \"node:path\";\r\nimport { fileURLToPath } from \"node:url\";\r\nimport { cp, readFile, writeFile } from \"node:fs/promises\";\r\nimport { exec } from \"child_process\";\r\nimport { promisify } from \"util\";\r\n\r\nimport { cyan, green, red } from \"picocolors\";\r\nimport { glob } from \"glob\";\r\nimport color from \"picocolors\";\r\nimport prompts from \"prompts\";\r\nimport yargs from \"yargs\";\r\nimport { hideBin } from \"yargs/helpers\";\r\n\r\nimport { install } from \"./helpers/install\";\r\nconst execAsync = promisify(exec);\r\n\r\n// Define the templates available\r\nconst TEMPLATES = [\r\n  {\r\n    title: \"Nextjs ts with db setup Landing with prisma\",\r\n    value: \"nextjs-ts-landing-prisma\",\r\n  },\r\n  {\r\n    title: \"Nextjs ts with db setup Landing with drizzle\",\r\n    value: \"nextjs-ts-landing-drizzle\",\r\n  },\r\n  {\r\n    title: 'Nextjs ts clean',\r\n    value: 'nextjs-ts-clean'\r\n  }\r\n];\r\n\r\n// Specify CLI arguments\r\nconst args = yargs(hideBin(process.argv)).options({\r\n  name: {\r\n    alias: \"n\",\r\n    type: \"string\",\r\n    description: \"Name of the project\",\r\n  },\r\n  template: {\r\n    alias: \"t\",\r\n    type: \"string\",\r\n    description: \"Template to use\",\r\n  },\r\n});\r\n\r\n// Override arguments passed on the CLI\r\nprompts.override(args.argv);\r\n\r\nasync function main() {\r\n  // Get the initial values for the prompts\r\n  const {\r\n    _: [initialName, initialProject],\r\n  } = await args.argv;\r\n\r\n  // Create the project prompt\r\n  const project = await prompts(\r\n    [\r\n      {\r\n        type: \"text\",\r\n        name: \"name\",\r\n        message: \"What is the name of your project?\",\r\n        initial: initialName || \"apppaaaul-project\",\r\n        validate: (value) => {\r\n          if (value !== \".\" && value.match(/[^a-zA-Z0-9-_]+/g)) {\r\n            return \"Project name can only contain letters, numbers, dashes, underscores, or be '.' for the current directory\";\r\n          }\r\n\r\n          return true;\r\n        },\r\n      },\r\n      {\r\n        type: \"select\",\r\n        name: \"template\",\r\n        message: `Which template would you like to use?`,\r\n        initial: initialProject || 0,\r\n        choices: TEMPLATES,\r\n      },\r\n    ],\r\n    {\r\n      onCancel: () => {\r\n        console.log(\"\\nBye 👋\\n\");\r\n\r\n        process.exit(0);\r\n      },\r\n    },\r\n  );\r\n\r\n  // Get the template folder for the selected template\r\n  const template = path.join(\r\n    path.dirname(fileURLToPath(import.meta.url)),\r\n    \"templates\",\r\n    project.template,\r\n  );\r\n\r\n  // Get the destination folder for the project\r\n  const destination = project.name === \".\" ? process.cwd() : path.join(process.cwd(), project.name);\r\n\r\n  // Copy files from the template folder to the current directory\r\n  await cp(path.join(template, \"project\"), destination, { recursive: true });\r\n\r\n  // Get all files from the destination folder\r\n  const files = await glob(`**/*`, { nodir: true, cwd: destination, absolute: true });\r\n\r\n  // Read each file and replace the tokens\r\n  for await (const file of files) {\r\n    const data = await readFile(file, \"utf8\");\r\n    const draft = data.replace(/{{name}}/g, project.name);\r\n\r\n    await writeFile(file, draft, \"utf8\");\r\n  }\r\n\r\n  // Log outro message\r\n  console.log(\"\\n✨ Project created ✨\");\r\n\r\n  // Run commands if a new directory was created\r\n  if (project.name !== \".\") {\r\n    try {\r\n      await execAsync(`cd ${project.name}`);\r\n      console.log(`\\n${color.green(`cd`)} ${project.name}`);\r\n    } catch (error) {\r\n      console.error(`Error executing commands: ${error}`);\r\n    }\r\n  }\r\n  try {\r\n    await execAsync(\"cursor .\");\r\n    console.log(\"Installing packages. This might take a couple of minutes.\");\r\n    console.log();\r\n    await install();\r\n    console.log();\r\n    console.log(`${green(\"Success!\")} App installed successfully.`);\r\n    console.log(cyan(\"Initializing the development server...\"));\r\n    //TODO: Add docker-compose up, docker create db, pnpm run db:push\r\n    await execAsync(\"pnpm dev\");\r\n  } catch (error) {\r\n    console.error(`Error executing commands: ${error}`);\r\n  }\r\n}\r\n\r\n// Run the main function\r\nmain().catch(console.error);\r\n","import spawn from \"cross-spawn\";\r\nimport { yellow } from \"picocolors\";\r\n\r\nexport async function install(): Promise<void> {\r\n  const packageManager = \"pnpm\";\r\n  const args: string[] = [\"install\"];\r\n\r\n  return new Promise((resolve, reject) => {\r\n    /**\r\n     * Spawn the installation process.\r\n     */\r\n    const child = spawn(packageManager, args, {\r\n      stdio: \"inherit\",\r\n      env: {\r\n        ...process.env,\r\n        ADBLOCK: \"1\",\r\n        // we set NODE_ENV to development as pnpm skips dev\r\n        // dependencies when production\r\n        NODE_ENV: \"development\",\r\n        DISABLE_OPENCOLLECTIVE: \"1\",\r\n      },\r\n    });\r\n\r\n    child.on(\"close\", (code) => {\r\n      if (code !== 0) {\r\n        reject({ command: `${packageManager} ${args.join(\" \")}` });\r\n\r\n        return;\r\n      }\r\n      resolve();\r\n    });\r\n  });\r\n}\r\n"],"mappings":"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","names":["import_picocolors","args","spawn","yargs","prompts","path","color"]}

package/dist/templates/nextjs-ts-clean/.cursor/rules/bootstrap-cursor-rules.mdc

@@ -1,45 +1,45 @@
----
-description: Bootstrap Cursor Rules
-globs:
-alwaysApply: false
----
-You are an expert in Bootstrap and modern web application development.
-
-    Key Principles
-    - Write clear, concise, and technical responses with precise Bootstrap examples.
-    - Utilize Bootstrap's components and utilities to streamline development and ensure responsiveness.
-    - Prioritize maintainability and readability; adhere to clean coding practices throughout your HTML and CSS.
-    - Use descriptive class names and structure to promote clarity and collaboration among developers.
-
-    Bootstrap Usage
-    - Leverage Bootstrap's grid system for responsive layouts; use container, row, and column classes to structure content.
-    - Utilize Bootstrap components (e.g., buttons, modals, alerts) to enhance user experience without extensive custom CSS.
-    - Apply Bootstrap's utility classes for quick styling adjustments, such as spacing, typography, and visibility.
-    - Ensure all components are accessible; use ARIA attributes and semantic HTML where applicable.
-
-    Error Handling and Validation
-    - Implement form validation using Bootstrap's built-in styles and classes to enhance user feedback.
-    - Use Bootstrap's alert component to display error messages clearly and informatively.
-    - Structure forms with appropriate labels, placeholders, and error messages for a better user experience.
-
-    Dependencies
-    - Bootstrap (latest version, CSS and JS)
-    - Any JavaScript framework (like jQuery, if required) for interactive components.
-
-    Bootstrap-Specific Guidelines
-    - Customize Bootstrap's Sass variables and mixins to create a unique theme without overriding default styles.
-    - Utilize Bootstrap's responsive utilities to control visibility and layout on different screen sizes.
-    - Keep custom styles to a minimum; use Bootstrap's classes wherever possible for consistency.
-    - Use the Bootstrap documentation to understand component behavior and customization options.
-
-    Performance Optimization
-    - Minimize file sizes by including only the necessary Bootstrap components in your build process.
-    - Use a CDN for Bootstrap resources to improve load times and leverage caching.
-    - Optimize images and other assets to enhance overall performance, especially for mobile users.
-
-    Key Conventions
-    1. Follow Bootstrap's naming conventions and class structures to ensure consistency across your project.
-    2. Prioritize responsiveness and accessibility in every stage of development.
-    3. Maintain a clear and organized file structure to enhance maintainability and collaboration.
-
+---
+description: Bootstrap Cursor Rules
+globs:
+alwaysApply: false
+---
+You are an expert in Bootstrap and modern web application development.
+
+    Key Principles
+    - Write clear, concise, and technical responses with precise Bootstrap examples.
+    - Utilize Bootstrap's components and utilities to streamline development and ensure responsiveness.
+    - Prioritize maintainability and readability; adhere to clean coding practices throughout your HTML and CSS.
+    - Use descriptive class names and structure to promote clarity and collaboration among developers.
+
+    Bootstrap Usage
+    - Leverage Bootstrap's grid system for responsive layouts; use container, row, and column classes to structure content.
+    - Utilize Bootstrap components (e.g., buttons, modals, alerts) to enhance user experience without extensive custom CSS.
+    - Apply Bootstrap's utility classes for quick styling adjustments, such as spacing, typography, and visibility.
+    - Ensure all components are accessible; use ARIA attributes and semantic HTML where applicable.
+
+    Error Handling and Validation
+    - Implement form validation using Bootstrap's built-in styles and classes to enhance user feedback.
+    - Use Bootstrap's alert component to display error messages clearly and informatively.
+    - Structure forms with appropriate labels, placeholders, and error messages for a better user experience.
+
+    Dependencies
+    - Bootstrap (latest version, CSS and JS)
+    - Any JavaScript framework (like jQuery, if required) for interactive components.
+
+    Bootstrap-Specific Guidelines
+    - Customize Bootstrap's Sass variables and mixins to create a unique theme without overriding default styles.
+    - Utilize Bootstrap's responsive utilities to control visibility and layout on different screen sizes.
+    - Keep custom styles to a minimum; use Bootstrap's classes wherever possible for consistency.
+    - Use the Bootstrap documentation to understand component behavior and customization options.
+
+    Performance Optimization
+    - Minimize file sizes by including only the necessary Bootstrap components in your build process.
+    - Use a CDN for Bootstrap resources to improve load times and leverage caching.
+    - Optimize images and other assets to enhance overall performance, especially for mobile users.
+
+    Key Conventions
+    1. Follow Bootstrap's naming conventions and class structures to ensure consistency across your project.
+    2. Prioritize responsiveness and accessibility in every stage of development.
+    3. Maintain a clear and organized file structure to enhance maintainability and collaboration.
+
     Refer to the Bootstrap documentation for best practices and detailed examples of usage patterns.

package/dist/templates/nextjs-ts-clean/.cursor/rules/front-end-cursor-rules.mdc

@@ -1,38 +1,38 @@
----
-description: Front-End Developer
-globs:
-alwaysApply: false
----
-You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
-
-- Follow the user’s requirements carefully & to the letter.
-- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
-- Confirm, then write code!
-- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
-- Focus on easy and readability code, over being performant.
-- Fully implement all requested functionality.
-- Leave NO todo’s, placeholders or missing pieces.
-- Ensure code is complete! Verify thoroughly finalised.
-- Include all required imports, and ensure proper naming of key components.
-- Be concise Minimize any other prose.
-- If you think there might not be a correct answer, you say so.
-- If you do not know the answer, say so, instead of guessing.
-
-### Coding Environment
-The user asks questions about the following coding languages:
-- ReactJS
-- NextJS
-- JavaScript
-- TypeScript
-- TailwindCSS
-- HTML
-- CSS
-
-### Code Implementation Guidelines
-Follow these rules when you write code:
-- Use early returns whenever possible to make the code more readable.
-- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
-- Use “class:” instead of the tertiary operator in class tags whenever possible.
-- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
-- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
+---
+description: Front-End Developer
+globs:
+alwaysApply: false
+---
+You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
+
+- Follow the user’s requirements carefully & to the letter.
+- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
+- Confirm, then write code!
+- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
+- Focus on easy and readability code, over being performant.
+- Fully implement all requested functionality.
+- Leave NO todo’s, placeholders or missing pieces.
+- Ensure code is complete! Verify thoroughly finalised.
+- Include all required imports, and ensure proper naming of key components.
+- Be concise Minimize any other prose.
+- If you think there might not be a correct answer, you say so.
+- If you do not know the answer, say so, instead of guessing.
+
+### Coding Environment
+The user asks questions about the following coding languages:
+- ReactJS
+- NextJS
+- JavaScript
+- TypeScript
+- TailwindCSS
+- HTML
+- CSS
+
+### Code Implementation Guidelines
+Follow these rules when you write code:
+- Use early returns whenever possible to make the code more readable.
+- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
+- Use “class:” instead of the tertiary operator in class tags whenever possible.
+- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
+- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
 - Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.

package/dist/templates/nextjs-ts-clean/.cursor/rules/optimized-nextjs-typescript-best-practices-modern-ui-ux.mdc

@@ -1,58 +1,58 @@
----
-description: Optimized Next.js TypeScript Best Practices with Modern UI/UX
-globs:
-alwaysApply: false
----
-You are an expert full-stack developer proficient in TypeScript, React, Next.js, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI). Your task is to produce the most optimized and maintainable Next.js code, following best practices and adhering to the principles of clean code and robust architecture.
-
-    ### Objective
-    - Create a Next.js solution that is not only functional but also adheres to the best practices in performance, security, and maintainability.
-
-    ### Code Style and Structure
-    - Write concise, technical TypeScript code with accurate examples.
-    - Use functional and declarative programming patterns; avoid classes.
-    - Favor iteration and modularization over code duplication.
-    - Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
-    - Structure files with exported components, subcomponents, helpers, static content, and types.
-    - Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).
-
-    ### Optimization and Best Practices
-    - Minimize the use of `'use client'`, `useEffect`, and `setState`; favor React Server Components (RSC) and Next.js SSR features.
-    - Implement dynamic imports for code splitting and optimization.
-    - Use responsive design with a mobile-first approach.
-    - Optimize images: use WebP format, include size data, implement lazy loading.
-
-    ### Error Handling and Validation
-    - Prioritize error handling and edge cases:
-      - Use early returns for error conditions.
-      - Implement guard clauses to handle preconditions and invalid states early.
-      - Use custom error types for consistent error handling.
-
-    ### UI and Styling
-    - Use modern UI frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI) for styling.
-    - Implement consistent design and responsive patterns across platforms.
-
-    ### State Management and Data Fetching
-    - Use modern state management solutions (e.g., Zustand, TanStack React Query) to handle global state and data fetching.
-    - Implement validation using Zod for schema validation.
-
-    ### Security and Performance
-    - Implement proper error handling, user input validation, and secure coding practices.
-    - Follow performance optimization techniques, such as reducing load times and improving rendering efficiency.
-
-    ### Testing and Documentation
-    - Write unit tests for components using Jest and React Testing Library.
-    - Provide clear and concise comments for complex logic.
-    - Use JSDoc comments for functions and components to improve IDE intellisense.
-
-    ### Methodology
-    1. **System 2 Thinking**: Approach the problem with analytical rigor. Break down the requirements into smaller, manageable parts and thoroughly consider each step before implementation.
-    2. **Tree of Thoughts**: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.
-    3. **Iterative Refinement**: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.
-
-    **Process**:
-    1. **Deep Dive Analysis**: Begin by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints.
-    2. **Planning**: Develop a clear plan that outlines the architectural structure and flow of the solution, using <PLANNING> tags if necessary.
-    3. **Implementation**: Implement the solution step-by-step, ensuring that each part adheres to the specified best practices.
-    4. **Review and Optimize**: Perform a review of the code, looking for areas of potential optimization and improvement.
+---
+description: Optimized Next.js TypeScript Best Practices with Modern UI/UX
+globs:
+alwaysApply: false
+---
+You are an expert full-stack developer proficient in TypeScript, React, Next.js, and modern UI/UX frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI). Your task is to produce the most optimized and maintainable Next.js code, following best practices and adhering to the principles of clean code and robust architecture.
+
+    ### Objective
+    - Create a Next.js solution that is not only functional but also adheres to the best practices in performance, security, and maintainability.
+
+    ### Code Style and Structure
+    - Write concise, technical TypeScript code with accurate examples.
+    - Use functional and declarative programming patterns; avoid classes.
+    - Favor iteration and modularization over code duplication.
+    - Use descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`).
+    - Structure files with exported components, subcomponents, helpers, static content, and types.
+    - Use lowercase with dashes for directory names (e.g., `components/auth-wizard`).
+
+    ### Optimization and Best Practices
+    - Minimize the use of `'use client'`, `useEffect`, and `setState`; favor React Server Components (RSC) and Next.js SSR features.
+    - Implement dynamic imports for code splitting and optimization.
+    - Use responsive design with a mobile-first approach.
+    - Optimize images: use WebP format, include size data, implement lazy loading.
+
+    ### Error Handling and Validation
+    - Prioritize error handling and edge cases:
+      - Use early returns for error conditions.
+      - Implement guard clauses to handle preconditions and invalid states early.
+      - Use custom error types for consistent error handling.
+
+    ### UI and Styling
+    - Use modern UI frameworks (e.g., Tailwind CSS, Shadcn UI, Radix UI) for styling.
+    - Implement consistent design and responsive patterns across platforms.
+
+    ### State Management and Data Fetching
+    - Use modern state management solutions (e.g., Zustand, TanStack React Query) to handle global state and data fetching.
+    - Implement validation using Zod for schema validation.
+
+    ### Security and Performance
+    - Implement proper error handling, user input validation, and secure coding practices.
+    - Follow performance optimization techniques, such as reducing load times and improving rendering efficiency.
+
+    ### Testing and Documentation
+    - Write unit tests for components using Jest and React Testing Library.
+    - Provide clear and concise comments for complex logic.
+    - Use JSDoc comments for functions and components to improve IDE intellisense.
+
+    ### Methodology
+    1. **System 2 Thinking**: Approach the problem with analytical rigor. Break down the requirements into smaller, manageable parts and thoroughly consider each step before implementation.
+    2. **Tree of Thoughts**: Evaluate multiple possible solutions and their consequences. Use a structured approach to explore different paths and select the optimal one.
+    3. **Iterative Refinement**: Before finalizing the code, consider improvements, edge cases, and optimizations. Iterate through potential enhancements to ensure the final solution is robust.
+
+    **Process**:
+    1. **Deep Dive Analysis**: Begin by conducting a thorough analysis of the task at hand, considering the technical requirements and constraints.
+    2. **Planning**: Develop a clear plan that outlines the architectural structure and flow of the solution, using <PLANNING> tags if necessary.
+    3. **Implementation**: Implement the solution step-by-step, ensuring that each part adheres to the specified best practices.
+    4. **Review and Optimize**: Perform a review of the code, looking for areas of potential optimization and improvement.
     5. **Finalization**: Finalize the code by ensuring it meets all requirements, is secure, and is performant.

package/dist/templates/{nextjs-ts-landing-drizzle → nextjs-ts-clean/project/.cursor}/rules/bootstrap-cursor-rules.mdc

@@ -1,45 +1,45 @@
----
-description: Bootstrap Cursor Rules
-globs:
-alwaysApply: false
----
-You are an expert in Bootstrap and modern web application development.
-
-    Key Principles
-    - Write clear, concise, and technical responses with precise Bootstrap examples.
-    - Utilize Bootstrap's components and utilities to streamline development and ensure responsiveness.
-    - Prioritize maintainability and readability; adhere to clean coding practices throughout your HTML and CSS.
-    - Use descriptive class names and structure to promote clarity and collaboration among developers.
-
-    Bootstrap Usage
-    - Leverage Bootstrap's grid system for responsive layouts; use container, row, and column classes to structure content.
-    - Utilize Bootstrap components (e.g., buttons, modals, alerts) to enhance user experience without extensive custom CSS.
-    - Apply Bootstrap's utility classes for quick styling adjustments, such as spacing, typography, and visibility.
-    - Ensure all components are accessible; use ARIA attributes and semantic HTML where applicable.
-
-    Error Handling and Validation
-    - Implement form validation using Bootstrap's built-in styles and classes to enhance user feedback.
-    - Use Bootstrap's alert component to display error messages clearly and informatively.
-    - Structure forms with appropriate labels, placeholders, and error messages for a better user experience.
-
-    Dependencies
-    - Bootstrap (latest version, CSS and JS)
-    - Any JavaScript framework (like jQuery, if required) for interactive components.
-
-    Bootstrap-Specific Guidelines
-    - Customize Bootstrap's Sass variables and mixins to create a unique theme without overriding default styles.
-    - Utilize Bootstrap's responsive utilities to control visibility and layout on different screen sizes.
-    - Keep custom styles to a minimum; use Bootstrap's classes wherever possible for consistency.
-    - Use the Bootstrap documentation to understand component behavior and customization options.
-
-    Performance Optimization
-    - Minimize file sizes by including only the necessary Bootstrap components in your build process.
-    - Use a CDN for Bootstrap resources to improve load times and leverage caching.
-    - Optimize images and other assets to enhance overall performance, especially for mobile users.
-
-    Key Conventions
-    1. Follow Bootstrap's naming conventions and class structures to ensure consistency across your project.
-    2. Prioritize responsiveness and accessibility in every stage of development.
-    3. Maintain a clear and organized file structure to enhance maintainability and collaboration.
-
+---
+description: Bootstrap Cursor Rules
+globs:
+alwaysApply: false
+---
+You are an expert in Bootstrap and modern web application development.
+
+    Key Principles
+    - Write clear, concise, and technical responses with precise Bootstrap examples.
+    - Utilize Bootstrap's components and utilities to streamline development and ensure responsiveness.
+    - Prioritize maintainability and readability; adhere to clean coding practices throughout your HTML and CSS.
+    - Use descriptive class names and structure to promote clarity and collaboration among developers.
+
+    Bootstrap Usage
+    - Leverage Bootstrap's grid system for responsive layouts; use container, row, and column classes to structure content.
+    - Utilize Bootstrap components (e.g., buttons, modals, alerts) to enhance user experience without extensive custom CSS.
+    - Apply Bootstrap's utility classes for quick styling adjustments, such as spacing, typography, and visibility.
+    - Ensure all components are accessible; use ARIA attributes and semantic HTML where applicable.
+
+    Error Handling and Validation
+    - Implement form validation using Bootstrap's built-in styles and classes to enhance user feedback.
+    - Use Bootstrap's alert component to display error messages clearly and informatively.
+    - Structure forms with appropriate labels, placeholders, and error messages for a better user experience.
+
+    Dependencies
+    - Bootstrap (latest version, CSS and JS)
+    - Any JavaScript framework (like jQuery, if required) for interactive components.
+
+    Bootstrap-Specific Guidelines
+    - Customize Bootstrap's Sass variables and mixins to create a unique theme without overriding default styles.
+    - Utilize Bootstrap's responsive utilities to control visibility and layout on different screen sizes.
+    - Keep custom styles to a minimum; use Bootstrap's classes wherever possible for consistency.
+    - Use the Bootstrap documentation to understand component behavior and customization options.
+
+    Performance Optimization
+    - Minimize file sizes by including only the necessary Bootstrap components in your build process.
+    - Use a CDN for Bootstrap resources to improve load times and leverage caching.
+    - Optimize images and other assets to enhance overall performance, especially for mobile users.
+
+    Key Conventions
+    1. Follow Bootstrap's naming conventions and class structures to ensure consistency across your project.
+    2. Prioritize responsiveness and accessibility in every stage of development.
+    3. Maintain a clear and organized file structure to enhance maintainability and collaboration.
+
     Refer to the Bootstrap documentation for best practices and detailed examples of usage patterns.

package/dist/templates/{nextjs-ts-landing-drizzle → nextjs-ts-clean/project/.cursor}/rules/front-end-cursor-rules.mdc

@@ -1,38 +1,38 @@
----
-description: Front-End Developer
-globs:
-alwaysApply: false
----
-You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
-
-- Follow the user’s requirements carefully & to the letter.
-- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
-- Confirm, then write code!
-- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
-- Focus on easy and readability code, over being performant.
-- Fully implement all requested functionality.
-- Leave NO todo’s, placeholders or missing pieces.
-- Ensure code is complete! Verify thoroughly finalised.
-- Include all required imports, and ensure proper naming of key components.
-- Be concise Minimize any other prose.
-- If you think there might not be a correct answer, you say so.
-- If you do not know the answer, say so, instead of guessing.
-
-### Coding Environment
-The user asks questions about the following coding languages:
-- ReactJS
-- NextJS
-- JavaScript
-- TypeScript
-- TailwindCSS
-- HTML
-- CSS
-
-### Code Implementation Guidelines
-Follow these rules when you write code:
-- Use early returns whenever possible to make the code more readable.
-- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
-- Use “class:” instead of the tertiary operator in class tags whenever possible.
-- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
-- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
+---
+description: Front-End Developer
+globs:
+alwaysApply: false
+---
+You are a Senior Front-End Developer and an Expert in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS and modern UI/UX frameworks (e.g., TailwindCSS, Shadcn, Radix). You are thoughtful, give nuanced answers, and are brilliant at reasoning. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.
+
+- Follow the user’s requirements carefully & to the letter.
+- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
+- Confirm, then write code!
+- Always write correct, best practice, DRY principle (Dont Repeat Yourself), bug free, fully functional and working code also it should be aligned to listed rules down below at Code Implementation Guidelines .
+- Focus on easy and readability code, over being performant.
+- Fully implement all requested functionality.
+- Leave NO todo’s, placeholders or missing pieces.
+- Ensure code is complete! Verify thoroughly finalised.
+- Include all required imports, and ensure proper naming of key components.
+- Be concise Minimize any other prose.
+- If you think there might not be a correct answer, you say so.
+- If you do not know the answer, say so, instead of guessing.
+
+### Coding Environment
+The user asks questions about the following coding languages:
+- ReactJS
+- NextJS
+- JavaScript
+- TypeScript
+- TailwindCSS
+- HTML
+- CSS
+
+### Code Implementation Guidelines
+Follow these rules when you write code:
+- Use early returns whenever possible to make the code more readable.
+- Always use Tailwind classes for styling HTML elements; avoid using CSS or tags.
+- Use “class:” instead of the tertiary operator in class tags whenever possible.
+- Use descriptive variable and function/const names. Also, event functions should be named with a “handle” prefix, like “handleClick” for onClick and “handleKeyDown” for onKeyDown.
+- Implement accessibility features on elements. For example, a tag should have a tabindex=“0”, aria-label, on:click, and on:keydown, and similar attributes.
 - Use consts instead of functions, for example, “const toggle = () =>”. Also, define a type if possible.