docs: quick start

Author: wibus-wee

docs/guide/quick-start.md

@@ -1,34 +1,56 @@
 # Quick Start
 
-## Create a new Jwc project
+## Scaffolding Your First jwc.js Project
 
-You can use npm, yarn or pnpm to install jwcjs. We recommend using pnpm, it is faster and more efficient. 
+::: warning
+This guide assumes you have Node.js 14.18+, 16+ installed. If you don't have Node.js installed, please install it from [here](https://nodejs.org/en/download/).
+:::
 
-You can install it with the following command:
+We provide a CLI tool to help you get started with jwc.js. It is called `create-jwcjs`, and you can use it to create a new template project with a single command:
 
 ::: code-group
-
 ```bash [npm]
-npm install jwcjs
+npm init jwcjs@latest
 ```
 
 ```bash [yarn]
-yarn add jwcjs
+yarn create jwcjs@latest
 ```
 
 ```bash [pnpm]
-pnpm add jwcjs
+pnpm create jwcjs@latest
 ```
 :::
 
-These commands will install jwcjs. You can use Vite, Rollup, Webpack, or any other build tool to build your project.
+You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + TypeScript + Jwc.js project, run:
+
+::: code-group
+```bash [npm 6.x]
+npm init jwcjs@latest <project-name> --template starter-vite-ts
+```
+
+```bash [npm 7.x+]
+npm init jwcjs@latest <project-name> -- --template starter-vite-ts
+```
 
-### Create a new project
+```bash [yarn]
+yarn create jwcjs@latest <project-name> --template starter-vite-ts
+```
 
-::: danger SORRY
-We have not yet published the package to npm, so you can only install it from github. And CLI is not yet available, so you can only use it in the project directory.
+```bash [pnpm]
+pnpm create jwcjs@latest <project-name> --template starter-vite-ts
+```
 :::
 
+
+### Our Templates
+
+We provide a few templates to help you get started with jwc.js. You can use them as a starting point for your project.
+
+| Template | Description |
+| --- | --- |
+| [`starter-vite-ts`](https://github.com/jwcjs/core/tree/main/packages/create-jwc/starter-vite-ts) | A starter template for Vite + TypeScript + Jwc.js |
+
 Once the project is created, follow the instructions to install dependencies and start the dev server:
 
 ::: code-group
@@ -74,5 +96,29 @@ This will create a js file in the dist directory. You can use it in your project
 ```html
 <script src="/dist/index.js"></script>
 
-<app-element cound="1" ></app-element>
-```
+<app-element count="1" ></app-element>
+```
+
+
+## Install jwcjs in an Existing Project
+
+You can use npm, yarn or pnpm to install jwcjs. We recommend using pnpm, it is faster and more efficient. 
+
+You can install it with the following command:
+
+::: code-group
+
+```bash [npm]
+npm install jwcjs
+```
+
+```bash [yarn]
+yarn add jwcjs
+```
+
+```bash [pnpm]
+pnpm add jwcjs
+```
+:::
+
+These commands will install jwcjs. You can use Vite, Rollup, Webpack, or any other build tool to build your project.