skills.rest
limkyulee
limkyuleeCOMMUNITY
Explore all skills by this author →
GitHub

vue-layer-app

Generate Vue 3 root configuration and bootstrapped src/app layer files.

Updated Mar 16, 2026
Search Tags:#typescript#vue#eslint#prettier#vite#project-setup#bootstrapping
One-click install
npx skills add https://github.com/limkyulee/front-skills --skill vue-layer-app
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-layer-app
Source: https://github.com/limkyulee/front-skills/tree/main/.opencode/vue-framework/vue-layer-app
Command: npx skills add https://github.com/limkyulee/front-skills --skill vue-layer-app

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill automates the creation of a Vue 3 project's root configuration and a bootstrapped src/app layer, eliminating the repetitive setup work and aligning project structure with best practices.

Core Features & Use Cases

  • Generate root config files: package.json, vite.config.ts, tsconfig.json, tsconfig.node.json, .env.example, eslint config, and .prettierrc.
  • Bootstrap layer: create src/main.ts, src/App.vue, and app initialization logic under src/app/.
  • Config-driven scaffolding: supports options like typescript, vueRouter, pinia, vitest, e2e, linter, prettier, and devtools; usable as the first step in vue-framework-gen or as a standalone enhancer for existing projects.

Quick Start

Create the full Vue project root configuration and bootstrapped app layer for a new project.

Frequently Asked Questions about vue-layer-app

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bootstrap a Vue 3 project with TypeScript and Vite configuration?▼

To bootstrap a Vue 3 project, this skill automates generating root configuration files like vite.config.ts and tsconfig.json alongside a bootstrapped src/app layer with proper TypeScript structure.

What files are needed to set up a Vue 3 app layer with ESLint and Prettier?▼

Setting up a Vue 3 app layer requires essential root files including package.json, eslint config, and .prettierrc, plus bootstrap files like src/main.ts and src/App.vue for proper initialization.

Can I configure Pinia, Vue Router, and Vitest during Vue project scaffolding?▼

Yes, Vue project scaffolding supports config-driven options for typescript, vueRouter, pinia, vitest, e2e, linter, prettier, and devtools to tailor the generated files to your requirements.

Does this Vue project setup work as a standalone enhancer or only with an orchestrator?▼

This Vue project setup works both as a standalone enhancer for existing projects and as the first step orchestrated by vue-framework-gen, adapting to user inputs like PROJECT_PATH and PKG_MANAGER.

What is the best way to automate creating a Vue 3 root config and src/app bootstrap layer?▼

The best way to automate creating a Vue 3 root config is using a config-driven scaffolding skill that enforces conditional file creation for essential files and initializes the src/app bootstrap layer.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
4

vite-syntax-config

Identify and fix Vite config issues in vite.config.ts using defineConfig and loadEnv.

Official
Intermediate
samhvw8samhvw8
10

frontend-dev-guidelines

Automates frontend development across React 18+, Vue 3, Svelte 5, and Angular frameworks.

Community
Basic
travisjneumantravisjneuman
88

vue-development

Guide Vue.js 3 development with Composition API, TypeScript, Pinia, and Nuxt 3.

Community
Advanced
saknarinZsaknarinZ

Project Creation

Generate cross-stack project scaffolds with Docker, ESLint, and environment templates.

Community
Advanced