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.

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:

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:

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/