Colin-XKL · google-labs-jules · Dec 3, 2025
diff --git a/apps/cliq-doc/astro.config.mjs b/apps/cliq-doc/astro.config.mjs
@@ -10,35 +10,35 @@ export default defineConfig({
 			defaultLocale: 'root',
 			locales: {
 				root: {
-					label: 'English',
-					lang: 'en',
-				},
-				'zh-CN': {
 					label: '简体中文',
 					lang: 'zh-CN',
 				},
+				en: {
+					label: 'English',
+					lang: 'en',
+				},
 			},
 			sidebar: [
 				{
-					label: 'Start Here',
+					label: '开始',
 					translations: {
-						'zh-CN': '开始'
+						'en': 'Start Here'
 					},
 					items: [
-						{ label: 'Introduction', slug: 'intro', translations: { 'zh-CN': '介绍' } },
+						{ label: '介绍', slug: 'intro', translations: { 'en': 'Introduction' } },
 					],
 				},
 				{
-					label: 'Guides',
+					label: '指南',
 					translations: {
-						'zh-CN': '指南'
+						'en': 'Guides'
 					},
 					autogenerate: { directory: 'guides' },
 				},
 				{
-					label: 'Reference',
+					label: '参考',
 					translations: {
-						'zh-CN': '参考'
+						'en': 'Reference'
 					},
 					autogenerate: { directory: 'reference' },
 				},

diff --git a/apps/cliq-doc/src/content/docs/en/guides/development.md b/apps/cliq-doc/src/content/docs/en/guides/development.md
@@ -0,0 +1,68 @@
+---
+title: Development Environment and Build Guide
+description: Monorepo development environment setup and build guide
+---
+
+## Dependencies
+- Node：`>=22`
+- pnpm：`10`
+- Go：`1.24`
+- Nx：`19.8.3`（local）
+- Wails CLI（for `cliq-app`）：`go install github.com/wailsapp/wails/v2/cmd/wails@latest`
+
+## Workspace Structure
+- Applications
+  - `apps/cliq-app`：Wails hybrid application（Go + Vue）
+  - `apps/cliq-hub-backend`：Pure Go backend service
+  - `apps/cliq-hub-frontend`：Pure Vue web frontend
+- Packages
+  - `packages/shared-go-lib`：Go shared library（template definition/parsing/validation, YAML tools）
+  - `packages/shared-vue-ui`：Shared Vue components（currently includes `DynamicCommandForm`）
+- Root files
+  - `pnpm-workspace.yaml`、`package.json`、`nx.json`、`go.work`
+
+## Initialization and Installation
+- Install dependencies
+  - `pnpm install`
+- Verify Nx availability
+  - `pnpm nx --version`
+  - `pnpm nx graph --file=project-graph.html`
+- Install Wails CLI（for `cliq-app` development/build）
+  - `go install github.com/wailsapp/wails/v2/cmd/wails@latest`
+- Go workspace（`go.work` already configured with local module binding）
+  - View bindings：`go work edit -print`
+
+## Starting Development Servers
+- Wails application（`cliq-app`）
+  - `pnpm nx run cliq-app:serve`
+  - Note：calls `wails dev`，frontend behavior driven by `apps/cliq-app/wails.json`
+- Pure Go backend（`cliq-hub-backend`）
+  - `pnpm nx run cliq-hub-backend:serve`
+  - Equivalent：`go run ./apps/cliq-hub-backend/cmd/server`
+- Pure web frontend（`cliq-hub-frontend`）
+  - `pnpm nx run cliq-hub-frontend:serve`
+
+## Project Building
+- Wails application（frontend + desktop build）
+  - `pnpm nx run cliq-app:build`
+  - Note：first execute `frontend-build`（Vite build），then execute `wails build`
+- Pure Go backend
+  - `pnpm nx run cliq-hub-backend:build`
+  - Equivalent：`go build ./apps/cliq-hub-backend/cmd/server`
+- Pure web frontend
+  - `pnpm nx run cliq-frontend:build`
+
+## Testing and Validation
+- Go shared library tests
+  - `pnpm nx run shared-go-lib:test`
+  - Equivalent：`go test ./packages/shared-go-lib/...`
+
+## Common Issues
+- `nx: command not found`
+  - Run `pnpm install` to install workspace dependencies；verify with `pnpm nx --version`。
+- `@nx-go/nx-go` version resolution failure
+  - Use verified version：`3.3.1`（root `package.json` already configured）。
+- Wails build failure
+  - Confirm Wails CLI and system dependencies are installed locally；run `wails doctor` locally for troubleshooting。
+- Shared UI import failure
+  - Alias for `@repo/shared-vue-ui` already configured in `apps/cliq-app/frontend/vite.config.ts`；ensure `packages/shared-vue-ui/src` exists and exports components。
diff --git a/...t/docs/zh-CN/guides/syntax-consistency.md → ...tent/docs/en/guides/syntax-consistency.md b/...t/docs/zh-CN/guides/syntax-consistency.md → ...tent/docs/en/guides/syntax-consistency.md
@@ -1,5 +1,5 @@
 ---
-title: 语法一致性 (English)
+title: Syntax Consistency
 description: CLIQfile Syntax Consistency Guide
 ---
 
@@ -99,4 +99,4 @@ When adding or modifying CLIQfile syntax:
 2. Add to validation logic in backend
 3. Update frontend type handling
 4. Update all documentation files
-5. Test end-to-end
+5. Test end-to-end
diff --git a/apps/cliq-doc/src/content/docs/en/index.mdx b/apps/cliq-doc/src/content/docs/en/index.mdx
@@ -0,0 +1,24 @@
+---
+title: Welcome to cliQ Docs
+description: Documentation for cliQ
+template: splash
+hero:
+  tagline: Command Line Interface Quick-GUI
+  actions:
+    - text: Get Started
+      link: /intro
+      icon: right-arrow
+---
+
+import { Card, CardGrid } from '@astrojs/starlight/components';
+
+## Next steps
+
+<CardGrid stagger>
+	<Card title="Learn Syntax" icon="pencil">
+		Check the [cliqfile syntax](/reference/cliqfile-syntax) to create your own templates.
+	</Card>
+    <Card title="Development Guide" icon="setting">
+        Check the [Development Environment and Build Guide](/guides/development)
+    </Card>
+</CardGrid>
diff --git a/apps/cliq-doc/src/content/docs/en/intro.md b/apps/cliq-doc/src/content/docs/en/intro.md
@@ -0,0 +1,43 @@
+---
+title: Introduction
+description: What is cliQ?
+---
+
+**cliQ** pronunciation: /klɪk/, like "click"
+cliQ is a lightweight tool that transforms complex CLI commands into an intuitive and user-friendly graphical user interface (GUI).
+
+By defining a command template with placeholder variables, cliQ automatically generates a corresponding GUI. Users can input parameters via clicks and selections—no need to memorize command syntax—greatly improving usability and efficiency.
+
+## Key Features
+- **Command Template Definition**: Input a CLI command to generate a dynamic form interface.
+- **Import/Export Templates**: Share templates (`.cliqfile.yaml`) with others or import from teammates.
+- **Multiple Input Components**: Supports file pickers, number inputs, dropdowns, checkboxes, and more—adapting to various parameter types.
+- **Cross-Platform**: Works on Windows, macOS, and Linux.
+- **Template Marketplace**: Upload or download templates for common tools (e.g., ImageMagick, ffmpeg, pngquant) to build a shared ecosystem.
+
+## How to Use
+
+Download the appropriate package from the Releases page and double-click to run.
+
+**Windows**:
+Run the `.exe` file directly. Compatible with Windows 10 and later.
+cliQ depends on Webview. If not installed, a prompt will appear on first launch—follow the instructions to install it.
+
+**macOS**:
+Compatible with macOS 10.13 and later.
+Since the app is not signed, you may see a "damaged" warning. To resolve:
+1. Open Terminal and run:
+```bash
+sudo xattr -dr com.apple.quarantine /Users/colin/Downloads/cliq.app
+# Note: Update the path as needed. You can drag the app into Terminal to auto-fill the path.
+```
+2. Launch cliQ. If it opens successfully, the app is now trusted.
+3. (Optional) Move cliQ to your Applications folder for easier access.
+
+**Linux**:
+cliQ supports Linux, but the current release hasn't been fully tested. Feedback via GitHub Issues is welcome.
+
+## Tech Stack
+- Built with Wails for cross-platform support
+- Frontend: Vue 3 + TypeScript
+- UI Components: PrimeVue V4, Vite for build, partial styling with TailwindCSS
diff --git a/...t/docs/zh-CN/reference/cliqfile-syntax.md → ...tent/docs/en/reference/cliqfile-syntax.md b/...t/docs/zh-CN/reference/cliqfile-syntax.md → ...tent/docs/en/reference/cliqfile-syntax.md
@@ -1,6 +1,6 @@
 ---
-title: cliqfile 语法 (English)
-description: cliqfile.yaml 语法详解
+title: cliqfile YAML Syntax
+description: Detailed documentation for cliqfile.yaml syntax
 ---
 
 ## Overview
@@ -38,12 +38,12 @@ cmds:            # List of command definitions
 ### `name` (required)
 - **Type:** String
 - **Description:** A human-readable name for the template that appears in the UI
-- **Example:** `FFmpeg 视频处理工具`
+- **Example:** `FFmpeg Video Processing Tool`
 
 ### `description` (required)
 - **Type:** String
 - **Description:** A brief explanation of what the template does
-- **Example:** `使用 FFmpeg 进行视频格式转换、提取音频、压缩和调整分辨率等操作`
+- **Example:** `Perform video format conversion, audio extraction, compression, and resolution adjustment using FFmpeg`
 
 ### `version` (required)
 - **Type:** String
@@ -73,12 +73,12 @@ The `cmds` field is a list of command definitions. Each template can define mult
 #### `name` (required)
 - **Type:** String
 - **Description:** Name of the command that appears in the UI
-- **Example:** `格式转换`
+- **Example:** `Format Conversion`
 
 #### `description` (required)
 - **Type:** String
 - **Description:** Brief explanation of what this specific command does
-- **Example:** `将视频文件转换为其他格式`
+- **Example:** `Convert video files to other formats`
 
 #### `command` (required)
 - **Type:** String
@@ -111,12 +111,12 @@ Each variable in the `variables` list has the following fields:
 ### `label` (required)
 - **Type:** String
 - **Description:** The display label shown in the UI for this variable
-- **Example:** `输入文件`
+- **Example:** `Input File`
 
 ### `description` (required)
 - **Type:** String
 - **Description:** A longer description explaining the purpose of this variable
-- **Example:** `选择要转换的视频文件`
+- **Example:** `Select the video file to convert`
 
 ### `required` (required)
 - **Type:** Boolean
@@ -184,8 +184,8 @@ Default values can reference other variables using the `{{variable_name}}` synta
 ```yaml
 - name: output_file
   type: file_output
-  label: 输出文件
-  description: 选择转换后保存的位置和格式
+  label: Output File
+  description: Select the location and format to save after conversion
   required: true
   options:
     file_types: [".mp4", ".mkv", ".avi", ".mov", ".webm"]
@@ -198,13 +198,13 @@ A single template can define multiple related commands:
 
 ```yaml
 cmds:
-  - name: 格式转换
-    description: 将视频文件转换为其他格式
+  - name: Format Conversion
+    description: Convert video files to other formats
     command: "ffmpeg -i {{input_file}} -codec copy {{output_file}}"
     variables:
       # ... variable definitions
-  - name: 提取音频
-    description: 从视频文件中提取音频轨道
+  - name: Audio Extraction
+    description: Extract audio tracks from video files
     command: "ffmpeg -i {{input_file}} -vn {{output_file}}"
     variables:
       # ... variable definitions
@@ -240,31 +240,31 @@ Here's a complete example showing various variable types:
 
 ```yaml
 # Template metadata
-name: PNGQuant 压缩工具
-description: 使用 pngquant 高效压缩 PNG 图片
+name: PNGQuant Compression Tool
+description: Efficiently compress PNG images using pngquant
 version: "1.0"
 author: user123
 cliq_template_version: "1.0"
 
 cmds:
-  - name: 压缩
-    description: 压缩 PNG 文件
+  - name: Compress
+    description: Compress PNG file
     command: "pngquant {{input_file}} --output {{output_file}}"
     variables:
       - name: input_file
         type: file_input
-        label: 输入文件
-        description: 选择要压缩的 PNG 文件
+        label: Input File
+        description: Select the PNG file to compress
         required: true
         options:
           file_types: [".png"]
 
       - name: output_file
         type: file_output
-        label: 输出文件
-        description: 选择压缩后保存的位置
+        label: Output File
+        description: Select the location to save after compression
         required: true
         options:
           file_types: [".png"]
           default: "{{input_file}}_compressed.png"
-```
+```