# Vue Creater

> Suite of tools for scaffolding high-fidelity Vue 3 applications using Vite 8 and Tailwind 4. Supports design-driven workflows via DSL and Tokens. Ideal for rapid prototyping or production-ready frontend setups.

- Skill: `helloggx/vue-creater` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add helloggx/vue-creater`
- Raw SKILL.md: https://api.skillmd.com/api/skills/helloggx/vue-creater/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: helloggx (https://skillmd.com/u/helloggx)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/helloggx/vue-creater

---


# Vue Web Artifacts Builder

## Data Flow & Context Management (CRITICAL)

You must maintain a **Session Context** to store file paths. Do not proceed to subsequent steps until you have populated the required variables.

* `$SKILL_DIR`: The absolute path to this skill's directory (where the vue-creater/SKILL.md is located).
* `$PROJECT_ROOT`: The absolute path to the project created in Step 1.
* `$DSL_PATH`: The absolute path to the `dsl.json` file generated in Step 2 (only for Default template workflow).

**IMPORTANT**: All script paths mentioned in this document are relative to `$SKILL_DIR`. When executing scripts, always use the full path: `$SKILL_DIR/scripts/script-name.py`

## Quick Start

### Step 0: Select Project Type

**FIRST STEP - MANDATORY**: You must ask the user to select a project type:

```
Please select the project type:

    1. **Default** (shadcn + tailwindcss + vite)
    2. **Nuxt Admin Dashboard** (shadcn + tailwindcss + nuxt)
    3. **Electron** (shadcn + tailwindcss + electron + vite)

    Choice [1/2/3]:
```

**STOP and WAIT for user input** - do NOT execute menu items automatically - accept number or cmd trigger or fuzzy command match

**Action based on user input:**

* **If Choice "1" (Default):**
    1. Proceed to Step 1 and follow the default workflow (Steps 1-4).

* **If Choice "2" (Nuxt Admin Dashboard):**
    1. Execute the script: `python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]`
       * *Condition*: If a project name is specified in the context, pass it as an argument. Otherwise, omit it to use the default name.
    2. **CAPTURE OUTPUT**: Look for the directory path in the script's output (last line before success message).
    3. **ASSIGN**: Set this path to variable `$PROJECT_ROOT`.
    4. **SKIP ALL REMAINING STEPS** - The Nuxt dashboard is fully configured and ready to use.
    5. Inform the user to run: `cd $PROJECT_ROOT && bun run dev`
    6. **END WORKFLOW** - Do not proceed to Steps 1-4.

* **If Choice "3" (Electron):**
    1. Execute the script: `python3 $SKILL_DIR/scripts/electron_vue_init.py [project-name]`
       * *Condition*: If a project name is specified in the context, pass it as an argument. Otherwise, omit it to use the default name.
    2. **CAPTURE OUTPUT**: Look for the directory path in the script's output (last line before success message).
    3. **ASSIGN**: Set this path to variable `$PROJECT_ROOT`.
    4. **SKIP Step 1 and Step 4** - Project scaffolding is complete.
    5. Proceed to **Step 2** to sync design data (DSL).

---

## Default Template Workflow (Choice 1)

To build powerful frontend claude.ai artifacts using the Vue ecosystem, follow these steps:
1. Initialize the project scaffold using script: `$SKILL_DIR/scripts/shadcn_vue_init.py`
2. Retrieve design data using tool: `get_dsl`
3. Apply design tokens and styles using tool: `get_token`
4. Start development server

**Stack**:
- **Core**: Vue 3 (Script Setup) + TypeScript + Vite v8.0.0
- **Styling**: Tailwind CSS v4 + shadcn-vue (Radix-vue based)
- **State & Logic**: Pinia (Store) + Vue Router + TanStack Query (vue-query)

### Step 1: Initialize Project Scaffolding

**Instruction**:
1. Execute the script: `python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]`
   * *Condition*: If a project name is specified in the context, pass it as an argument. Otherwise, omit it to use the default name.
2. **CAPTURE OUTPUT**: Look for the directory path in the script's output (last line before success message).
3. **ASSIGN**: Set this path to variable `$PROJECT_ROOT`.
4. *Validation*: If `$PROJECT_ROOT` is empty, stop and ask the user to verify the installation.

**What this script does**:

* ✅ Sets up Vue 3 + Vite 8.0.0
* ✅ Configures Tailwind CSS 4 (CSS-first configuration, no generic config js)
* ✅ Installs shadcn-vue and configures `components.json`
* ✅ Sets up Pinia, Vue Router, and Vue Query plugins

### Step 2: Sync Design Data (DSL)
you must ask question:
Please select the design source configuration:

    1. **Custom Design DSL** (Provide a URL or file path for the design tokens)
    2. **Use TOKEN_URL_LIGHT** (Read DSL URL from .env TOKEN_URL_LIGHT variable)
    3. **Use Default** (Skip design tokens, use default theme)

    Choice [1/2/3]:


**STOP and WAIT for user input** - do NOT execute menu items automatically - accept number or cmd trigger or fuzzy command match
Fetch the design structure and layout data from the source:

**Action based on user input:**

* **If Choice "1" (Custom):**
    1. Ask for URL (if missing).
    2. Execute `get_dsl` with the URL.
    3. **CAPTURE OUTPUT**: Look for the file path of the saved JSON (e.g., `.../dsl.json`).
    4. **ASSIGN**: Set this path to variable `$DSL_PATH`.

* **If Choice "2" (TOKEN_URL_LIGHT):**
    1. **Check for .env file existence**:
       - Look for `.env` file in the current working directory or project root.
       - **If .env file does NOT exist**: 
         - **STOP and WAIT for user input**
         - Prompt user to create `.env` file with the following content:
           ```
           TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json
           ```
         - Explain to user where to place the .env file and the required parameter.
         - **WAIT** until user confirms they have created and configured the .env file.
    2. After .env file is confirmed to exist, read the `TOKEN_URL_LIGHT` variable from `.env` file.
    3. **If TOKEN_URL_LIGHT is not defined in .env**: 
       - **STOP and WAIT for user input**
       - Prompt user to add `TOKEN_URL_LIGHT=https://your-token-url.com/dsl.json` to the `.env` file.
       - **WAIT** until user confirms they have added the variable.
    4. **If TOKEN_URL_LIGHT is defined**: Execute `get_dsl` with the URL from `TOKEN_URL_LIGHT`.
    5. **CAPTURE OUTPUT**: Look for the file path of the saved JSON (e.g., `.../dsl.json`).
    6. **ASSIGN**: Set this path to variable `$DSL_PATH`.

* **If Choice "3" (Use Default):**
    1. Log "Using default theme, skipping DSL fetch."
    2. **ASSIGN**: Set `$DSL_PATH` to empty or null to indicate no custom design tokens.

### Step 3: Apply Design Tokens

**Prerequisites**:
* Ensure `$PROJECT_ROOT` is defined (from Step 1).
* Ensure `$DSL_PATH` is defined (from Step 2).

**Instruction**:
You must now call the `get_token` tool using the exact paths captured previously.

**Strict Execution Logic**:
> IF `$DSL_PATH` is valid (User chose Custom):
>   Execute: `get_token(project_path=$PROJECT_ROOT, dsl_path=$DSL_PATH)`
>
> ELSE (User chose Default):
>   Log "Skipping token application for default theme."

**Goal**: Extract design tokens from the DSL file at `$DSL_PATH` and inject them into the Tailwind 4 configuration located inside `$PROJECT_ROOT`.

### Step 4: Start Development Server

**Instruction**:
1. Execute the command below immediately.
2. **CRITICAL**: You MUST use the chained command format (`&&`) to ensure the directory context is preserved.

```bash
cd "$PROJECT_ROOT" && bun run dev
```

**Note**: The project uses `bun` as the package manager for faster dependency installation and development server startup.

## Scripts Reference

### shadcn_vue_init.py

**Location**: `$SKILL_DIR/scripts/shadcn_vue_init.py`

**Usage**:
```bash
python3 $SKILL_DIR/scripts/shadcn_vue_init.py [project-name]
```

**Features**:
- Creates Vue 3 + Vite 8.0.0 project
- Configures Tailwind CSS 4 with CSS-first configuration
- Installs and configures shadcn-vue components
- Sets up Pinia, Vue Router, and TanStack Query
- Installs Zod for schema validation
- Installs VueUse for composition utilities
- Creates utility files (lib/utils.ts, composables/useApi.ts)
- Generates comprehensive README.md
- Cleans up unnecessary template files

### setup_nuxt_dashboard.py

**Location**: `$SKILL_DIR/scripts/setup_nuxt_dashboard.py`

**Usage**:
```bash
python3 $SKILL_DIR/scripts/setup_nuxt_dashboard.py [project-name]
```

**Features**:
- Extracts a pre-configured Nuxt 3 admin dashboard template from zip file
- Includes Shadcn UI components and Tailwind CSS configuration
- Installs all necessary dependencies using bun
- Provides a ready-to-use admin dashboard structure

## Reference

* **shadcn-vue**: https://www.shadcn-vue.com/
* **Tailwind CSS v4**: https://tailwindcss.com/docs/v4-beta (CSS-centric config)
* **Vite**: https://vitejs.dev/