🚀 Create StartKit Vue CLI

CLI tool to generate Vue.js projects with Tailwind CSS following Clean Code and SOLID principles

A modern project generator that creates Vue.js applications with professional architecture, similar to npm create vue@latest but with enhanced structure and best practices.

✨ What You Get

When you use this CLI, you get a complete Vue.js project with:

• 🎨 Modern UI: Tailwind CSS 4.x with beautiful gradients and responsive design
• 🏗️ Clean Architecture: Organized following SOLID and Clean Code principles
• ⚡ Fast Development: Vite 7.x for instant hot-reload and optimal builds
• 🧩 Reusable Components: Pre-built components including modals, forms, and navigation
• 📱 Mobile-First: Fully responsive design optimized for all devices
• 🔧 Development Tools: Vue DevTools integration and professional structure
• 📦 Scalable: Modular architecture organized by features and sections
• 🔍 SEO Ready: Automatic robots.txt and sitemap.xml generation for better search engine visibility
• 🤖 AI Development: Includes context_cursor.txt for enhanced AI coding assistance in Visual Studio Code

🚀 Quick Start

Create a new project

1# Using npm
2npm create startkit-vue@latest my-vue-app
3
4# Using yarn
5yarn create startkit-vue my-vue-app
6
7# Using pnpm
8pnpm create startkit-vue my-vue-app

That's it! Your Vue.js project will be running at http://localhost:5173

🏗️ Project Structure

1create-startkit-vue/
2├── bin/                      # CLI tool
3│   └── create-startkit.js    # Project generator script
4│
5└── template/                 # Project template
6    ├── public/               # Static public assets
7    │   ├── favicon.ico      # Site favicon
8    │   └── robots.txt       # SEO robots file
9    │
10    ├── src/
11    │   ├── assets/          # Project assets
12    │   │   ├── images/      # Image files
13    │   │   │   └── logo.svg # Site logo
14    │   │   └── styles/      # Global styles
15    │   │       └── main.css # Main stylesheet with Tailwind
16    │   │
17    │   ├── core/             # Core application code
18    │   │   ├── constants/    # Global constants
19    │   │   │   └── index.js  # Centralized constants
20    │   │   ├── router/       # Vue Router setup
21    │   │   │   └── index.js  # Route definitions
22    │   │   ├── services/     # API and service layer
23    │   │   │   ├── api/      # Base API configuration
24    │   │   │   ├── contact/  # Contact-related services
25    │   │   │   └── services/ # Business services
26    │   │   └── types/        # Type definitions
27    │   │       └── api.types.js # API-related types
28    │   │
29    │   ├── features/         # Feature-based components
30    │   │   └── home/         # Home page feature
31    │   │       ├── HomeView.vue    # Main view
32    │   │       └── sections/       # Page sections
33    │   │           ├── AboutSection.vue
34    │   │           ├── ContactSection.vue
35    │   │           ├── HeroSection.vue
36    │   │           ├── ServicesSection.vue
37    │   │           └── StackSection.vue
38    │   │
39    │   ├── layout/          # Application layout
40    │   │   └── App.vue      # Root component
41    │   │
42    │   ├── shared/          # Shared/common code
43    │   │   ├── components/  # Reusable components
44    │   │   │   ├── BaseButton.vue   # Button component
45    │   │   │   ├── BaseModal.vue    # Modal component
46    │   │   │   ├── ContactForm.vue  # Contact form
47    │   │   │   ├── CountUpNumber.vue# Number animation
48    │   │   │   ├── Footer.vue       # Site footer
49    │   │   │   └── Navbar.vue       # Navigation
50    │   │   └── utils/       # Utility functions
51    │   │
52    │   └── main.js          # Application entry
53    │
54    ├── .env.example         # Environment variables
55    ├── index.html           # HTML entry point
56    ├── jsconfig.json        # JavaScript config
57    ├── package.json         # Dependencies
58    ├── README.md            # Project docs
59    └── vite.config.js       # Vite config

🛠️ Tech Stack Included

• Framework: Vue.js 3.5.17
• Styling: Tailwind CSS 4.1.11
• Build Tool: Vite 7.0.0
• Icons: Tabler Icons Vue
• Router: Vue Router 4
• Development: Vue DevTools integration
• SEO Tools:
  • Automatic sitemap.xml generation
  • Configured robots.txt
  • SEO-friendly routes
• AI Development:
  • Preconfigured context_cursor.txt for AI pair programming
  • Enhanced code completion with AI assistance

🎯 Architecture Principles

SOLID Principles Applied

• 🎯 Single Responsibility: Each component and service has one clear purpose
• 🔓 Open/Closed: Easy to extend without modifying existing code
• 🔄 Liskov Substitution: Components are interchangeable and consistent
• 🧩 Interface Segregation: Clean, focused interfaces for better maintainability
• 🔀 Dependency Inversion: Dependencies point to abstractions, not concretions

Clean Code Features

• 📁 Organized Structure: Feature-based folder organization with section-based components
• 🔧 Reusable Components: Base components for common UI elements
• 📝 Clear Naming: Self-documenting code with meaningful names
• 🧪 Testable: Architecture designed for easy unit testing
• 📚 Documented: JSDoc annotations and clear README files

📞 Support & Community

• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions
• 📧 Contact: hola@ecortes.cl

📄 License

MIT License - see LICENSE file for details.

---