create-comate-pagebuilder 1.0.0

package/README.md

@@ -0,0 +1,95 @@
+# create-comate-pagebuilder
+
+Scaffold a React + Vite + Tailwind CSS project with PageBuilder template.
+
+## Usage
+
+### Using npm
+
+```bash
+npm create comate-pagebuilder@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+### Using npx
+
+```bash
+npx create-comate-pagebuilder@latest my-app
+cd my-app
+npm install
+npm run dev
+```
+
+### Using Yarn
+
+```bash
+yarn create comate-pagebuilder my-app
+cd my-app
+yarn
+yarn dev
+```
+
+### Using PNPM
+
+```bash
+pnpm create comate-pagebuilder my-app
+cd my-app
+pnpm install
+pnpm dev
+```
+
+## What's Included
+
+The generated project includes:
+
+- **React 18** - Modern React with hooks
+- **Vite** - Fast build tool and dev server
+- **Tailwind CSS** - Utility-first CSS framework
+- **Framer Motion** - Production-ready motion library
+- **Lucide React** - Beautiful & consistent icon set
+- **clsx** & **tailwind-merge** - Utility for constructing className strings
+
+### Optional Dependencies
+
+- **GSAP** - Professional-grade animation library
+- **Lottie Web** - Render After Effects animations
+- **Animate.css** - Ready-to-use CSS animations
+
+## Project Structure
+
+```
+my-app/
+├── src/
+│   ├── components/     # React components
+│   ├── pages/          # Page components
+│   ├── utils/          # Utility functions
+│   ├── App.jsx         # Main App component
+│   ├── main.jsx        # Entry point
+│   └── index.css       # Global styles
+├── index.html          # HTML template
+├── vite.config.js      # Vite configuration
+├── tailwind.config.js  # Tailwind configuration
+├── postcss.config.js   # PostCSS configuration
+└── package.json        # Project dependencies
+```
+
+## Available Scripts
+
+In the generated project directory:
+
+- `npm run dev` - Start development server
+- `npm run build` - Build for production
+- `npm run preview` - Preview production build
+
+## Learn More
+
+- [Vite Documentation](https://vitejs.dev/)
+- [React Documentation](https://react.dev/)
+- [Tailwind CSS Documentation](https://tailwindcss.com/)
+- [Framer Motion Documentation](https://www.framer.com/motion/)
+
+## License
+
+MIT

package/bin/index.js

@@ -0,0 +1,41 @@
+#!/usr/bin/env node
+
+const fs = require('fs-extra');
+const path = require('path');
+
+async function init() {
+  try {
+    // 获取项目名称（从命令行参数或默认值）
+    const args = process.argv.slice(2);
+    const projectName = args[0] || 'my-pagebuilder-app';
+
+    // 目标目录
+    const targetDir = path.join(process.cwd(), projectName);
+
+    // 检查目标目录是否已存在
+    if (fs.existsSync(targetDir)) {
+      console.error(`❌ Error: Directory "${projectName}" already exists.`);
+      process.exit(1);
+    }
+
+    // 模板目录
+    const templateDir = path.join(__dirname, '..', 'template');
+
+    console.log(`\n📦 Creating project: ${projectName}...\n`);
+
+    // 复制模板文件到目标目录
+    await fs.copy(templateDir, targetDir);
+
+    console.log('✅ Project created successfully!\n');
+    console.log('📝 Next steps:\n');
+    console.log(`   cd ${projectName}`);
+    console.log('   npm install');
+    console.log('   npm run dev\n');
+
+  } catch (error) {
+    console.error('❌ Error creating project:', error.message);
+    process.exit(1);
+  }
+}
+
+init();

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "create-comate-pagebuilder",
+  "version": "1.0.0",
+  "description": "Create a React + Vite + Tailwind CSS project with PageBuilder template",
+  "type": "commonjs",
+  "bin": {
+    "create-comate-pagebuilder": "./bin/index.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "create",
+    "pagebuilder",
+    "react",
+    "vite",
+    "tailwind",
+    "template",
+    "scaffold"
+  ],
+  "scripts": {
+    "test": "node bin/index.js test-project"
+  },
+  "dependencies": {
+    "fs-extra": "^11.2.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "author": "",
+  "license": "MIT"
+}

package/template/README.md

@@ -0,0 +1,102 @@
+# PageBuilder React Template
+
+🎨 **高保真前端原型快速启动模板**
+
+这是 PageBuilder 智能体的标准 React + Vite + Tailwind CSS 模板，开箱即用。
+
+## ✨ 特性
+
+- ⚡️ **Vite** - 极速开发体验
+- ⚛️ **React 18** - 最新 React 特性
+- 🎨 **Tailwind CSS** - 原子化 CSS 框架
+- 🎭 **Framer Motion** - 流畅的动画效果
+- 🎯 **Lucide React** - 现代图标库
+- 📦 **预配置路径别名** - 便捷的模块导入
+- 🎪 **标准配色系统** - Primary / Accent / Neutral
+- 🧩 **示例组件** - Hero / Card 等常用组件
+
+## 📦 安装
+
+```bash
+npm install
+```
+
+## 🚀 开发
+
+```bash
+npm run dev
+```
+
+访问 `http://localhost:3000`
+
+## 🏗️ 构建
+
+```bash
+npm run build
+```
+
+## 📁 项目结构
+
+```
+src/
+├── components/       # 组件目录
+│   ├── Hero.jsx     # Hero 组件
+│   └── Card.jsx     # 卡片组件
+├── pages/           # 页面目录
+│   └── Home.jsx     # 首页
+├── styles/          # 样式目录
+├── utils/           # 工具函数
+│   └── cn.js        # className 合并工具
+├── App.jsx          # 根组件
+├── main.jsx         # 入口文件
+└── index.css        # 全局样式
+```
+
+## 🎨 配色系统
+
+模板内置三套配色方案：
+
+- **Primary** - 主色（蓝色系）
+- **Accent** - 强调色（紫色系）
+- **Neutral** - 中性色（灰色系）
+
+在 `tailwind.config.js` 中可自定义。
+
+## 📚 可选动效库
+
+模板已在 `package.json` 中配置以下可选依赖：
+
+- `gsap` - 强大的动画库
+- `lottie-web` - Lottie 动画支持
+- `animate.css` - CSS 动画库
+
+根据需要安装：
+
+```bash
+npm install gsap lottie-web animate.css
+```
+
+## 🛠️ 路径别名
+
+已配置以下路径别名：
+
+- `@` → `src/`
+- `@components` → `src/components/`
+- `@pages` → `src/pages/`
+- `@styles` → `src/styles/`
+- `@utils` → `src/utils/`
+
+## 📖 使用建议
+
+1. **组件命名** - 使用 PascalCase（如 `HeroSection.jsx`）
+2. **样式优先级** - Tailwind > CSS Modules > 全局 CSS
+3. **动效使用** - Framer Motion 用于组件级，GSAP 用于页面级
+4. **响应式设计** - 优先使用 Tailwind 断点（sm/md/lg/xl/2xl）
+
+## 📝 License
+
+MIT
+
+---
+
+🤖 Generated by **PageBuilder** - 高保真前端原型智能体

package/template/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PageBuilder App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>