muscle-config 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cat-Div7
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,430 @@
+# muscle-config
+
+> Frontend scaffolding done right, every time.
+
+<p align="center">
+  <img alt="npm version" src="https://img.shields.io/npm/v/muscle-config?style=for-the-badge&color=CB3837&logo=npm&logoColor=white" />
+  <img alt="npm downloads" src="https://img.shields.io/npm/dm/muscle-config?style=for-the-badge&color=2ea043&logo=npm&logoColor=white" />
+  <img alt="license" src="https://img.shields.io/github/license/Cat-Div7/muscle-config?style=for-the-badge&color=blue" />
+  <img alt="last commit" src="https://img.shields.io/github/last-commit/Cat-Div7/muscle-config?style=for-the-badge&color=6e40c9&logo=github&logoColor=white" />
+  <img alt="PRs welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen?style=for-the-badge&logo=github&logoColor=white" />
+</p>
+
+`muscle-config` is a CLI tool that scaffolds production-ready frontend projects with a clean, opinionated folder structure — picking your framework, language, styling, routing, state management, and architecture in one guided setup.
+
+---
+
+## Quick Start
+
+```bash
+npx muscle-config
+```
+
+> No installation required.
+
+---
+
+## What It Does
+
+Instead of spending hours setting up a new project from scratch, `muscle-config` walks you through a series of prompts and generates a complete, ready-to-code frontend project with:
+
+- The right folder structure for your chosen architecture
+- All necessary dependencies installed
+- Config files pre-configured (TypeScript, Prettier, etc.)
+- Component library setup (MUI, Tailwind, Normal CSS)
+- Git repository initialized with an initial commit
+
+---
+
+## Safe by Design
+
+If anything fails mid-installation, `muscle-config` automatically rolls back and cleans up. No half-scaffolded projects left behind.
+
+---
+
+## How It Works
+
+`muscle-config` asks you a series of questions and generates a complete, ready-to-code frontend project in seconds.
+
+```
+1. Where to create    → new folder or current directory
+2. Project name       → only if new folder
+3. Framework          → React + TypeScript or JavaScript
+4. Styling            → Tailwind CSS v4 / MUI / Plain CSS / None
+5. Styling config     → options specific to chosen styling solution
+6. Architecture       → Feature-based / Layered / Skip
+7. Prettier           → formatting config, merges with Tailwind plugin if present
+8. Git                → optional git init + initial commit
+9. Done               → project is ready
+```
+
+Each choice builds on the previous one. When done, you get a fully scaffolded project with the right folder structure, dependencies installed, and config files ready — no manual setup needed.
+
+---
+
+## CLI Flow (For More Details)
+
+```
+Welcome screen
+│
+├── Q: Where would you like to create the project?
+│         ❯ Create in a new folder
+│           Use current directory
+│
+│     └── [ if current directory is not empty ]
+│               ⚠ Files detected: file1, file2 ...
+│
+│               Q: Creating a project here will overwrite existing files.
+│                  What would you like to do?
+│                       ❯ Cancel (recommended)
+│                         Continue anyway (deletes existing files)
+│
+├── Q: Project name?                    ← only if "new folder"
+│         ❯ my-app
+│
+├── Q: Choose your React setup:
+│         ❯ React + TypeScript
+│           React + JavaScript
+│
+└── Q: Choose your styling solution:
+          ❯ Tailwind CSS v4
+            MUI (Material UI)
+            None (plain CSS)
+            Skip
+
+
+── If Tailwind ────────────────────────────────────────────────
+
+├── Q: Tailwind configuration mode?
+│         ❯ Beginner  (recommended)
+│           Advanced  (full control)
+│
+├── [ Beginner ]
+│     │
+│     ├── Q: Enable Dark Mode?
+│     │         ❯ Yes  →  class strategy + ThemeToggle auto included
+│     │           No
+│     │
+│     └── Q: Choose a primary color:
+│               ❯ Indigo / Emerald / Neutral / Custom HEX / Skip
+│
+├── [ Advanced ]
+│     │
+│     ├── Q: Enable Dark Mode?
+│     │         ❯ Yes
+│     │           No
+│     │
+│     │     └── Q: Dark Mode strategy:
+│     │                 ❯ Manual toggle (class)  (recommended)
+│     │                   System preference (media)
+│     │
+│     │               └── Q: Add ThemeToggle component?  ← only if "class"
+│     │                           ❯ Yes
+│     │                             No
+│     │
+│     ├── Q: Choose a primary color:
+│     │         ❯ Indigo / Emerald / Neutral / Custom HEX / Skip
+│     │
+│     └── Q: Choose default font:
+│               ❯ Inter   — clean, modern, readable
+│                 Poppins — rounded, great for dashboards
+│                 Cairo   — elegant, great for bilingual apps
+│                 Skip
+│
+└── Q: Add Prettier plugin for Tailwind class sorting? (recommended)
+          ❯ Yes                                    ← fires for both Beginner and Advanced
+            No
+
+
+── If MUI ─────────────────────────────────────────────────────
+
+├── Q: Default theme mode:
+│         ❯ Light
+│           Dark
+│           System preference
+│
+├── Q: Add dark mode toggle component? (recommended — required for demo)
+│         ❯ Yes
+│           No
+│
+├── Q: Choose a primary color:
+│         ❯ Blue / Purple / Green / Custom HEX
+│
+├── Q: Add MUI Icons package? (@mui/icons-material)
+│         ❯ Yes
+│           No
+├── Q: Choose a default font:
+│         ❯ Inter   — clean, modern, readable
+│           Poppins — rounded, great for dashboards
+│           Cairo   — elegant, great for bilingual apps
+│           Skip
+│
+└── Q: Override App.jsx with a MUI demo template?  ← only if toggle = Yes
+          ❯ Yes
+            No
+
+── If CSS ─────────────────────────────────────────────────────
+
+├── Q: CSS configuration mode?
+│         ❯ Beginner  (recommended)
+│           Advanced  (full control)
+│           Skip  (use Vite default)
+│
+├── [ Beginner ]
+│     │
+│     ├── Q: Add a CSS reset?
+│     │         ❯ Yes / No
+│     │
+│     ├── Q: Choose a primary color:
+│     │         ❯ Indigo / Emerald / Neutral / Custom HEX / Skip
+│     │
+│     └── Q: Enable dark mode?
+│               ❯ Yes  →  media strategy (automatic)
+│                 No
+│
+└── [ Advanced ]
+      │
+      ├── Q: Add a CSS reset?
+      │         ❯ Yes / No
+      │
+      ├── Q: Choose a primary color:
+      │         ❯ Indigo / Emerald / Neutral / Custom HEX / Skip
+      │
+      ├── Q: Enable dark mode?
+      │         ❯ Yes
+      │           No
+      │
+      │     └── Q: Dark mode strategy:
+      │                 ❯ Manual toggle (class)  (recommended)
+      │                   System preference (media)
+      │
+      │               └── Q: Add ThemeToggle component?  ← only if "class"
+      │                           ❯ Yes
+      │                             No
+      │
+      ├── Q: Choose a default font:
+      │         ❯ Inter / Poppins / Cairo / Skip
+      │
+      ├── Q: Generate separate CSS files? (variables, reset, typography)
+      │         ❯ Yes  →  creates src/styles/ folder
+      │           No   →  everything in one index.css
+      └── Q: Override App.jsx with a CSS demo template?  ← only if toggle = Yes
+                ❯ Yes
+                  No
+
+── If None ────────────────────────────────────────────────────
+│
+└── → No extra steps, plain Vite CSS stays as-is
+
+
+── Architecture ───────────────────────────────────────────────
+
+├── Q: Choose architecture style:
+│         ❯ Layered        (recommended for small/mid apps) - more popular
+│           Feature-based  (recommended for large apps)
+│           Skip
+│
+├── [ Feature-based ]
+│     │
+│     ├── Q: Select features to generate:
+│     │         ❯ ◉ auth  ○ dashboard  ○ profile
+│     │           ○ settings  ○ home  ○ products
+│     │           ○ cart  ○ checkout
+│     │
+│     ├── Q: Select folders inside each feature:
+│     │         ❯ ◉ components  ◉ hooks  ◉ services
+│     │           ○ utils  ○ types  ○ validators  ○ api
+│     │
+│     ├── Q: Select shared folders in src/:
+│     │         ❯ ◉ components  ◉ hooks  ◉ layouts  ◉ pages
+│     │           ○ services  ○ utils  ○ types  ○ assets
+│     │           ○ api  ○ validators  ○ templates
+│     │           ○ themes  ○ lib
+│     │
+│     └── Q: Select folders to add an index file to:
+│               ❯ ○ components  ○ hooks  ○ services ...
+│
+└── [ Layered ]
+      │
+      ├── Q: Select folders in src/:
+      │         ❯ ◉ components  ◉ hooks  ◉ pages  ◉ layouts
+      │           ○ services  ○ utils  ○ types  ○ assets
+      │           ○ api  ○ validators  ○ templates
+      │
+      └── Q: Select folders to add an index file to:
+                ❯ ○ components  ○ hooks  ○ pages ...
+
+── Prettier ───────────────────────────────────────────────────
+│
+├── Q: Add Prettier?
+│         ❯ Yes
+│           No
+│
+├── Q: Use single quotes?
+│         ❯ Yes / No
+│
+├── Q: Use semicolons?
+│         ❯ Yes / No
+│
+└── Q: Tab width:
+          ❯ 2 spaces  (recommended)
+            4 spaces
+
+  [ if Tailwind + prettierTailwind was selected ]
+  → .prettierrc already exists with plugin config
+  → formatting prefs are merged in, plugin is preserved
+
+── Git ────────────────────────────────────────────────────────
+│
+├── Q: Initialize a Git repository?
+│         ❯ Yes
+│           No
+│
+└── [ if Yes ]
+      │
+      ├── Q: Create an initial commit?
+      │         ❯ Yes
+      │           No
+      │
+      └── [ if Yes ]
+                → commit message: "chore: initial commit"
+
+```
+
+---
+
+## 🛠 Supported Options
+
+| Category           | Available Now                          | Coming Soon                               |
+| ------------------ | -------------------------------------- | ----------------------------------------- |
+| Framework          | React + TypeScript, React + JavaScript | Next.js, Vue, Svelte                      |
+| Styling            | Tailwind CSS v4, MUI, Plain CSS, None  | —                                         |
+| Architecture       | Feature-based, Layered, Skip           | —                                         |
+| Formatter          | Prettier (with Tailwind plugin merge)  | ESLint config (if needed)                 |
+| Version Control    | Git init, Initial commit               | —                                         |
+| Path Aliases       | —                                      | @components, @hooks, @pages, etc..        |
+| Optional Libraries | —                                      | axios, lucide-react, framer-motion, etc.. |
+| State Management   | —                                      | Zustand, Context API boilerplate          |
+| Routing            | —                                      | React Router DOM                          |
+| Templates          | —                                      | Custom template support                   |
+
+---
+
+## 🗂 Example Output Structure
+
+```
+my-app/
+├── src/
+│   ├── features/
+│   │   └── auth/
+│   │       ├── components/
+│   │       ├── hooks/
+│   │       └── services/
+│   ├── components/
+│   ├── hooks/
+│   ├── layouts/
+│   ├── pages/
+│   ├── types/
+│   ├── utils/
+│   ├── index.css
+│   ├── App.tsx
+│   └── main.tsx
+├── public/
+├── tsconfig.json
+├── .eslintrc.json
+├── tailwind.config.ts
+├── .prettierrc
+├── .prettierignore
+└── package.json
+```
+
+---
+
+## Roadmap
+
+- [x] React + TypeScript/JavaScript
+- [x] Tailwind CSS v4
+- [x] MUI (Material UI)
+- [x] Normal CSS utilities
+- [x] Rollback on failure
+- [x] Feature-based and Layered architecture
+- [x] Prettier pre-configured
+- [x] Git init + initial commit
+- [ ] Path aliases (@context, @themes, @root)
+- [ ] Optional libraries (axios, lucide-react, framer-motion, react-query, etc..)
+- [ ] Zustand + React Query setup
+- [ ] Custom template support
+- [ ] Next.js support
+- [ ] Vue / Svelte support (future)
+
+---
+
+## Project Structure (This Repo)
+
+```
+muscle-config/
+├── src/
+│   ├── commands/
+│   │   └── create.command.ts             # Main create command orchestration
+│   ├── config/
+│   │   └── projectConfig.ts              # Project configuration types & defaults
+│   ├── features/
+│   │   ├── feature.interface.ts          # Feature contract interface
+│   │   ├── tailwind.feature.ts           # Tailwind v4 setup orchestration
+│   │   ├── mui.feature.ts                # MUI setup orchestration
+│   │   ├── css.feature.ts                # Plain CSS setup orchestration
+│   │   ├── architecture.feature.ts       # Architecture folder generation
+│   │   ├── prettier.feature.ts           # Prettier setup + .prettierrc merge
+│   │   └── git.feature.ts                # Git init + initial commit
+│   ├── generators/
+│   │   ├── react.generator.ts            # React + Vite scaffolding
+│   │   ├── css.generator.ts              # Tailwind index.css generator
+│   │   ├── css-plain.generator.ts        # Plain CSS generator (reset, variables, typography)
+│   │   ├── tailwind.config.generator.ts  # tailwind.config.ts/js generator
+│   │   ├── toggle.generator.ts           # Tailwind ThemeToggle generator
+│   │   ├── mui.generator.ts              # MUI files generator (theme, context, providers)
+│   │   └── architecture.generator.ts     # Folder structure generator
+│   ├── prompts/
+│   │   ├── directory.prompt.ts           # Output directory prompt
+│   │   ├── projectName.prompt.ts         # Project name prompt
+│   │   ├── framework.prompt.ts           # Framework selection prompt
+│   │   ├── styling.prompt.ts             # Styling solution prompt
+│   │   ├── tailwind.prompt.ts            # Tailwind configuration prompts
+│   │   ├── mui.prompt.ts                 # MUI configuration prompts
+│   │   ├── css.prompt.ts                 # Plain CSS configuration prompts
+│   │   ├── architecture.prompt.ts        # Architecture configuration prompts
+│   │   ├── prettier.prompt.ts            # Prettier configuration prompts
+│   │   └── git.prompt.ts                 # Git configuration prompts
+│   ├── templates/
+│   │   ├── react/
+│   │   │   ├── tailwind-v4/
+│   │   │   │   ├── vite.config.ts        # Vite config with Tailwind plugin (TS)
+│   │   │   │   ├── vite.config.js        # Vite config with Tailwind plugin (JS)
+│   │   │   │   └── index.css             # Base Tailwind CSS template
+│   │   │   ├── mui/
+│   │   │   │   ├── App.tsx               # MUI demo template (TS)
+│   │   │   │   └── App.jsx               # MUI demo template (JS)
+│   │   │   └── css/
+│   │   │       ├── App.tsx               # CSS demo template (TS)
+│   │   │       └── App.jsx               # CSS demo template (JS)
+│   │   ├── nextjs/                       # (coming soon)
+│   │   └── shared/                       # Shared static templates (coming soon)
+│   ├── utils/
+│   │   ├── welcome.ts                    # CLI welcome screen
+│   │   ├── logger.ts                     # Colored console output
+│   │   ├── spinner.ts                    # Loading spinner helper
+│   │   ├── directory.ts                  # Directory check and cleanup helpers
+│   │   ├── rollback.ts                   # Project and feature rollback utilities
+│   │   ├── files.ts                      # File/folder helpers (Not Available for now)
+│   │   └── install.ts                    # Dependency installer
+│   └── index.ts                          # Entry point
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+---
+
+## License
+
+MIT © [Cat-Div7](https://github.com/Cat-Div7)

package/dist/commands/create.command.js

@@ -0,0 +1,104 @@
+import path from "path";
+// Prompts
+import { askDirectoryMode } from "../prompts/directory.prompt.js";
+import { askProjectName } from "../prompts/projectName.prompt.js";
+import { askFramework } from "../prompts/framework.prompt.js";
+import { askStyling } from "../prompts/styling.prompt.js";
+import { askTailwindConfig } from "../prompts/tailwind.prompt.js";
+import { askMuiConfig } from "../prompts/mui.prompt.js";
+import { askCssConfig } from "../prompts/css.prompt.js";
+import { askArchitecture } from "../prompts/architecture.prompt.js";
+// Generators
+import { generateReactProject } from "../generators/react.generator.js";
+// Features
+import { tailwindFeature } from "../features/tailwind.feature.js";
+import { muiFeature } from "../features/mui.feature.js";
+import { cssFeature } from "../features/css.feature.js";
+import { createArchitectureFeature } from "../features/architecture.feature.js";
+// Utils
+import { checkCurrentDirectory } from "../utils/directory.js";
+import { rollbackProject } from "../utils/rollback.js";
+import { logger } from "../utils/logger.js";
+import { askPrettierConfig } from "../prompts/prettier.prompt.js";
+import { prettierFeature } from "../features/prettier.feature.js";
+import { askGitConfig } from "../prompts/git.prompt.js";
+import { gitFeature } from "../features/git.feature.js";
+export async function createProject() {
+    // Step 1: Directory mode
+    const directoryMode = await askDirectoryMode();
+    if (directoryMode === "current")
+        await checkCurrentDirectory();
+    // Step 2: Project name (skipped if using current directory)
+    let projectName = "";
+    if (directoryMode === "new")
+        projectName = await askProjectName();
+    // Step 3: Framework (React TS / React JS)
+    const framework = await askFramework();
+    // Step 4: Styling choice + config (collected upfront, before scaffolding)
+    const styling = await askStyling();
+    let tailwindConfig;
+    let muiConfig;
+    let cssConfig;
+    if (styling === "tailwind")
+        tailwindConfig = await askTailwindConfig();
+    if (styling === "mui")
+        muiConfig = await askMuiConfig();
+    if (styling === "css")
+        cssConfig = await askCssConfig();
+    // Step 5: Architecture layout
+    const architecture = await askArchitecture();
+    // Step 6: Prettier config
+    const prettierConfig = await askPrettierConfig();
+    // Step 7: Git initialize
+    const gitConfig = await askGitConfig();
+    // Build config object
+    const config = {
+        projectName,
+        framework,
+        directoryMode,
+        styling,
+        architecture,
+        prettier: prettierConfig,
+        git: gitConfig,
+    };
+    const projectPath = config.directoryMode === "current"
+        ? process.cwd()
+        : path.join(process.cwd(), config.projectName);
+    try {
+        // Scaffold base React + Vite project
+        await generateReactProject(config);
+        console.log("");
+        // Queue features based on user choices
+        // Each factory receives its config and returns a Feature with run()
+        const features = [];
+        if (styling === "tailwind" && tailwindConfig)
+            features.push(tailwindFeature(tailwindConfig));
+        if (styling === "mui" && muiConfig)
+            features.push(muiFeature(muiConfig));
+        if (styling === "css" && cssConfig)
+            features.push(cssFeature(cssConfig));
+        if (architecture.style !== "skip")
+            features.push(createArchitectureFeature(architecture));
+        if (prettierConfig.enabled)
+            features.push(prettierFeature(prettierConfig));
+        // Ask the git init in the end
+        features.push(gitFeature(config.git));
+        // Run each feature sequentially
+        for (const feature of features) {
+            await feature.run(projectPath);
+        }
+        // Done
+        const runCommand = config.directoryMode === "current" ? "" : `cd ${config.projectName} && `;
+        console.log("");
+        logger.success("Project created successfully!");
+        logger.dim("  Get started:");
+        logger.dim(`  ${runCommand}npm run dev`);
+        console.log("\n");
+    }
+    catch (error) {
+        // Full rollback if anything fails post-scaffolding
+        logger.error("Something went wrong during project creation.");
+        await rollbackProject(projectPath, config.directoryMode);
+        process.exit(1);
+    }
+}

package/dist/config/projectConfig.js

@@ -0,0 +1 @@
+export {};

package/dist/features/architecture.feature.js

@@ -0,0 +1,49 @@
+import fs from "fs/promises";
+import path from "path";
+import { spinner } from "../utils/spinner.js";
+import { logger } from "../utils/logger.js";
+import { generateArchitecture } from "../generators/architecture.generator.js";
+import { rollbackFeature } from "../utils/rollback.js";
+export function createArchitectureFeature(config) {
+    return {
+        name: "architecture",
+        async run(projectPath) {
+            try {
+                if (config.style === "skip") {
+                    logger.info("Skipping architecture setup.");
+                    return;
+                }
+                /**
+                 * STEP 1
+                 * Detect TypeScript or JavaScript
+                 */
+                const tsConfigPath = path.join(projectPath, "vite.config.ts");
+                let isTypeScript = false;
+                try {
+                    await fs.access(tsConfigPath);
+                    isTypeScript = true;
+                }
+                catch { }
+                /**
+                 * STEP 2
+                 * Generate folder structure
+                 */
+                spinner.start("Generating folder structure...");
+                await generateArchitecture(config, projectPath, isTypeScript);
+                spinner.succeed("Folder structure generated!");
+                /**
+                 * FINAL SUCCESS MESSAGE
+                 */
+                logger.success("Architecture setup complete!");
+            }
+            catch (error) {
+                spinner.fail("Failed to setup architecture.");
+                await rollbackFeature([
+                    path.join(projectPath, "src/features"),
+                    ...config.sharedFolders.map((f) => path.join(projectPath, "src", f)),
+                ]);
+                throw error;
+            }
+        },
+    };
+}