@ramme-io/create-app 1.0.4 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +11 -13
  2. package/package.json +1 -1
  3. package/template/DESIGNER_GUIDE.md +52 -32
  4. package/template/README.md +33 -38
package/README.md CHANGED
@@ -2,17 +2,17 @@
2
2
 
3
3
  [![NPM Version](https://img.shields.io/npm/v/@ramme-io/create-app.svg)](https://www.npmjs.com/package/@ramme-io/create-app) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
4
 
5
- **The clean-room environment for modern product design.**
5
+ **A quick start for prototypes.**
6
6
 
7
- This repository is the official scaffolding tool for the Ramme ecosystem. It automates the setup of a production-grade frontend environment, pre-wiring the **Ramme UI** component library with the industry's most robust open-source technologies.
7
+ This repository is the scaffolding tool for the Ramme collection. It spins up a standard frontend environment, with the **Ramme UI** component library included.
8
8
 
9
- Designed for speed and structural integrity, this starter kit removes the friction of configuration so you can move from concept to interactive prototype in seconds.
9
+ Designed for quick builds, this starter kit standardizes configurations so you can move from concept to interactive prototype in seconds.
10
10
 
11
11
  ---
12
12
 
13
13
  ## Quick Start
14
14
 
15
- To scaffold a new project, run the initialization command in your terminal. This will generate a fresh directory with all dependencies linked and configured.
15
+ To spin up a new project, run the initialization command in your terminal. This will generate a new folder with all resources linked and configured.
16
16
 
17
17
  *(Replace `my-new-project` with your desired folder name).*
18
18
 
@@ -24,11 +24,11 @@ This single command will:
24
24
  1. **Scaffold** a high-performance Vite project structure.
25
25
  2. **Install** React 19, TypeScript, and Tailwind CSS.
26
26
  3. **Configure** the `@ramme-io/ui` component library and design tokens.
27
- 4. **Optimize** linting and build settings for immediate deployment.
27
+ 4. **Optimize** limited configuration for customization.
28
28
 
29
29
  ---
30
30
 
31
- ## Launch Sequence
31
+ ## Getting Started
32
32
 
33
33
  Once the scaffolding is complete, initialize your local environment:
34
34
 
@@ -43,18 +43,18 @@ pnpm install
43
43
  # or npm install
44
44
  ```
45
45
 
46
- **3. Ignite the dev server**
46
+ **3. Start the dev server**
47
47
  ```bash
48
48
  pnpm run dev
49
49
  ```
50
50
 
51
- Your prototype is now live at `http://localhost:5173`.
51
+ Your prototype is now running locally at `http://localhost:5173`.
52
52
 
53
53
  ---
54
54
 
55
55
  ## The Tech Stack
56
56
 
57
- This starter kit is not a proprietary framework; it is an opinionated orchestration of the best open-source tools available:
57
+ This starter kit is an opinionated selection of the best open-source tools available:
58
58
 
59
59
  * **Vite:** Next-generation tooling for instant server start and lightning-fast HMR (Hot Module Replacement).
60
60
  * **React:** The standard library for building composable user interfaces.
@@ -64,12 +64,10 @@ This starter kit is not a proprietary framework; it is an opinionated orchestrat
64
64
 
65
65
  ---
66
66
 
67
- ## The Ramme Ecosystem
68
-
69
- This tool is part of a suite of developer resources maintained by **Excesspool Limited Liability Company**:
67
+ ## Project Links
70
68
 
71
69
  * **`@ramme-io/ui`**: The core library of visual primitives.
72
- * **`@ramme-io/create-app`** (This Repository): The CLI scaffolding tool.
70
+ * **`@ramme-io/create-app`** (This Repository): The quick start kit.
73
71
 
74
72
  ---
75
73
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ramme-io/create-app",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "type": "module",
5
5
  "bin": {
6
6
  "create-ramme-app": "./index.js"
package/template/DESIGNER_GUIDE.md CHANGED
@@ -1,57 +1,77 @@
1
- # DESIGNER_GUIDE.md
1
+ # Ramme App Starter
2
2
 
3
- ## 1. What is the Ramme App Starter?
3
+ [![NPM Version](https://img.shields.io/npm/v/@ramme-io/create-app.svg)](https://www.npmjs.com/package/@ramme-io/create-app) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
4
 
5
- Welcome to the Ramme App Starter! Think of this as your pre-built, fully-wired canvas for creating interactive prototypes. It's designed specifically for product designers, founders, and creators who want to build and test high-fidelity ideas without getting stuck on complex technical setup.
5
+ **A quick start for prototypes.**
6
6
 
7
- The starter kit comes with our entire `@ramme-io/ui` component library, a dynamic theming system, and a modern development environment already configured. This lets you skip the tedious setup and jump straight into bringing your vision to life.
7
+ This repository is the scaffolding tool for the Ramme collection. It spins up a standard frontend environment, with the **Ramme UI** component library included.
8
8
 
9
- ## 2. Before You Start: Prerequisites
9
+ Designed for quick builds, this starter kit standardizes configurations so you can move from concept to interactive prototype in seconds.
10
10
 
11
- You only need two things on your computer to get started:
11
+ ---
12
12
 
13
- * **Node.js**: This is the underlying engine that runs the development environment. You can download the latest "LTS" (Long-Term Support) version from the official [Node.js website](https://nodejs.org/).
14
- * **A Code Editor**: We highly recommend using [Visual Studio Code](https://code.visualstudio.com/), as it's free and has excellent support for the technologies in this project.
13
+ ## Quick Start
15
14
 
16
- ## 3. The One-Command Setup (Sub-5-Minute Goal ⏱️)
15
+ To spin up a new project, run the initialization command in your terminal. This will generate a new folder with all resources linked and configured.
17
16
 
18
- Our primary goal is to get you from zero to a running prototype in under five minutes. The entire setup process is handled by a single command.
17
+ *(Replace `my-new-project` with your desired folder name).*
19
18
 
20
- Open your computer's terminal (on Mac, you can search for "Terminal"; on Windows, "PowerShell" or "Command Prompt"), and run the following command:
19
+ ```bash
20
+ npm create @ramme-io/app@latest my-new-project
21
+ ```
22
+
23
+ This single command will:
24
+ 1. **Scaffold** a high-performance Vite project structure.
25
+ 2. **Install** React 19, TypeScript, and Tailwind CSS.
26
+ 3. **Configure** the `@ramme-io/ui` component library and design tokens.
27
+ 4. **Optimize** limited configuration for customization.
28
+
29
+ ---
30
+
31
+ ## Getting Started
21
32
 
33
+ Once the scaffolding is complete, initialize your local environment:
34
+
35
+ **1. Enter the project directory**
22
36
  ```bash
23
- npm create @ramme-io/app@latest your-project-name
37
+ cd my-new-project
24
38
  ```
25
39
 
26
- This command will ask you for a project name (e.g., `my-new-prototype`). It will then automatically:
40
+ **2. Install dependencies**
41
+ ```bash
42
+ pnpm install
43
+ # or npm install
44
+ ```
27
45
 
28
- 1. Create a new folder with your project's name.
29
- 2. Install all the necessary dependencies, including React and `@ramme-io/ui`.
30
- 3. Set up all the required configuration files.
46
+ **3. Start the dev server**
47
+ ```bash
48
+ pnpm run dev
49
+ ```
31
50
 
32
- ## 4. Running Your Prototype
51
+ Your prototype is now running locally at `http://localhost:5173`.
33
52
 
34
- Once the installation is complete, navigate into your new project directory and start the development server.
53
+ ---
35
54
 
36
- `cd <your-project-name>`
37
- `npm run dev`
55
+ ## The Tech Stack
38
56
 
39
- Your new Ramme application will now be running at [http://localhost:5173](http://localhost:5173). Open this link in your web browser, and you will see the interactive style guide.
57
+ This starter kit is an opinionated selection of the best open-source tools available:
40
58
 
41
- ## 5. Exploring the Application
59
+ * **Vite:** Next-generation tooling for instant server start and lightning-fast HMR (Hot Module Replacement).
60
+ * **React:** The standard library for building composable user interfaces.
61
+ * **TypeScript:** Statically typed JavaScript for scalable, robust application logic.
62
+ * **Tailwind CSS:** A utility-first styling engine configured with Ramme design tokens.
63
+ * **@ramme-io/ui:** A pre-installed suite of accessible, unstyled primitives based on Radix UI.
42
64
 
43
- The application that's running is a complete, interactive prototype that also serves as a style guide for the `@ramme-io/ui` component library.
65
+ ---
44
66
 
45
- * **Live Components**: Every component you see is a live, interactive example. You can click buttons, open menus, and interact with forms to see exactly how they look and feel.
46
- * **Side Navigation**: Use the navigation on the left to jump between different pages and categories of components.
47
- * **Dynamic Theming**: Use the user menu in the top-right header to switch between themes and see how all components instantly adapt to different visual styles (like Dark Mode).
48
- * **Multi-Template System**: Use the "Dashboard | Docs" toggle in the header to switch between two different application layouts. Notice how the content stays the same, but the entire navigation structure changes.
67
+ ## Project Links
49
68
 
50
- ## 6. The Power of the Sitemap: Your First Change
69
+ * **`@ramme-io/ui`**: The core library of visual primitives.
70
+ * **`@ramme-io/create-app`** (This Repository): The quick start kit.
51
71
 
52
- The single most powerful feature of the Ramme starter is that the application's entire structure—its pages, navigation, titles, and icons—is controlled by a single file called a **sitemap**.
72
+ ---
53
73
 
54
- This is your central control panel. You don't need to hunt through component files to change a page title or reorder a navigation item. Let's try it.
74
+ ## License
55
75
 
56
- 1. **Open the Project in Your Code Editor**: Open the folder you created (e.g., `my-new-prototype`) in VS Code.
57
- 2. **Find the Sitemap**: In the file explorer on the left, navigate to `src` > `templates` > `dashboard` and open the `dashboard.sitemap.ts
76
+ Copyright © 2025 Excesspool Limited Liability Company.
77
+ This project is licensed under the [MIT License](LICENSE).
package/template/README.md CHANGED
@@ -2,81 +2,76 @@
2
2
 
3
3
  [![NPM Version](https://img.shields.io/npm/v/@ramme-io/create-app.svg)](https://www.npmjs.com/package/@ramme-io/create-app) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
4
4
 
5
- This repository is the official starter kit for building applications with the **Ramme UI** component library. It provides the ideal local environment for designers and developers to rapidly build, test, and validate high-fidelity, interactive prototypes.
5
+ **A quick start for prototypes.**
6
6
 
7
- The starter kit comes pre-configured with a modern frontend stack to ensure a smooth development experience, allowing you to focus on building your application instead of on project setup.
7
+ This repository is the scaffolding tool for the Ramme collection. It spins up a standard frontend environment, with the **Ramme UI** component library included.
8
+
9
+ Designed for quick builds, this starter kit standardizes configurations so you can move from concept to interactive prototype in seconds.
8
10
 
9
11
  ---
10
12
 
11
- ## Getting Started
13
+ ## Quick Start
12
14
 
13
- To create a new project using this starter kit, run the following command in your terminal. This will scaffold a new application in a directory of your choice.
15
+ To spin up a new project, run the initialization command in your terminal. This will generate a new folder with all resources linked and configured.
14
16
 
15
- *(Replace `your-project-name` with the actual name you want for your folder).*
17
+ *(Replace `my-new-project` with your desired folder name).*
16
18
 
17
19
  ```bash
18
- npm create @ramme-io/app@latest your-project-name
20
+ npm create @ramme-io/app@latest my-new-project
19
21
  ```
20
22
 
21
23
  This single command will:
24
+ 1. **Scaffold** a high-performance Vite project structure.
25
+ 2. **Install** React 19, TypeScript, and Tailwind CSS.
26
+ 3. **Configure** the `@ramme-io/ui` component library and design tokens.
27
+ 4. **Optimize** limited configuration for customization.
22
28
 
23
- - Create a new project folder.
24
-
25
- - Install all necessary dependencies, including React, Vite, and @ramme-io/ui.
26
-
27
- - Set up the recommended folder structure and configuration files.
28
-
29
- ##Post-Installation Steps
29
+ ---
30
30
 
31
- After the installation is complete, follow these 3 steps to launch your app:
31
+ ## Getting Started
32
32
 
33
- # 1. Navigate into your new project
33
+ Once the scaffolding is complete, initialize your local environment:
34
34
 
35
+ **1. Enter the project directory**
35
36
  ```bash
36
- cd your-project-name
37
+ cd my-new-project
37
38
  ```
38
- # 2. Install dependencies
39
39
 
40
+ **2. Install dependencies**
40
41
  ```bash
41
42
  pnpm install
43
+ # or npm install
42
44
  ```
43
- # 3. Start the development server
44
45
 
46
+ **3. Start the dev server**
45
47
  ```bash
46
48
  pnpm run dev
47
49
  ```
48
50
 
49
- Your new Ramme application will be running at [http://localhost:5173](http://localhost:5173)
51
+ Your prototype is now running locally at `http://localhost:5173`.
50
52
 
51
53
  ---
52
54
 
53
- ## What's Included?
54
- This starter kit is built on a modern, performant tech stack:
55
+ ## The Tech Stack
55
56
 
56
- * **Vite:** A next-generation frontend tooling that provides an extremely fast development server and build process.
57
+ This starter kit is an opinionated selection of the best open-source tools available:
57
58
 
58
- * **React:** A JavaScript library for building user interfaces.
59
-
60
- * **TypeScript:** A statically typed superset of JavaScript that adds type safety to your code.
61
-
62
- * **Tailwind CSS:** A utility-first CSS framework for rapid UI development.
63
-
64
- * **@ramme-io/ui:** Our own designer-centric component library, pre-installed and ready to use.
59
+ * **Vite:** Next-generation tooling for instant server start and lightning-fast HMR (Hot Module Replacement).
60
+ * **React:** The standard library for building composable user interfaces.
61
+ * **TypeScript:** Statically typed JavaScript for scalable, robust application logic.
62
+ * **Tailwind CSS:** A utility-first styling engine configured with Ramme design tokens.
63
+ * **@ramme-io/ui:** A pre-installed suite of accessible, unstyled primitives based on Radix UI.
65
64
 
66
65
  ---
67
66
 
68
- ## The Ramme Ecosystem
69
- The Ramme project is an integrated framework architected across three separate repositories:
67
+ ## Project Links
70
68
 
71
- * `@ramme-io/ui` A public, open-source component library distributed as an NPM package.
72
-
73
- * `ramme-app-starter` (This Repository): A public, open-source starter-kit application that provides the ideal local environment for building with Ramme.
74
-
75
- * `ramme-app-builder` A hosted SaaS application featuring our AI Prototyping Assistant, which guides users through the strategic A.D.A.P.T. Framework to build applications from a solid strategic foundation.
69
+ * **`@ramme-io/ui`**: The core library of visual primitives.
70
+ * **`@ramme-io/create-app`** (This Repository): The quick start kit.
76
71
 
77
72
  ---
78
73
 
79
74
  ## License
80
- This project is licensed under the MIT License.
81
-
82
75
 
76
+ Copyright © 2025 Excesspool Limited Liability Company.
77
+ This project is licensed under the [MIT License](LICENSE).