skills.rest
Flowm
FlowmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-project-structure

Scaffold Vue 3 projects with Vite, TypeScript, Tailwind CSS, and Cloudflare Workers.

3|1|Updated Nov 5, 2015
Search Tags:#typescript#frontend#vue#vite#tailwind#cloudflare-workers#project-structure
One-click install
npx skills add https://github.com/Flowm/dotfiles --skill frontend-project-structure
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-project-structure
Source: https://github.com/Flowm/dotfiles/tree/main/home/.agents/skills/frontend-project-structure
Command: npx skills add https://github.com/Flowm/dotfiles --skill frontend-project-structure

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the inconsistency and decision fatigue that come with setting up new Vue frontend projects, adding tooling to existing repos, or choosing standard libraries and patterns for common frontend needs, ensuring all projects follow uniform, production-ready conventions.

Core Features & Use Cases

  • Standardized Project Scaffolding: Provides a pre-defined, consistent repository layout and full tooling stack (Vue 3, Vite, TypeScript, Tailwind CSS, Cloudflare Workers) for new SPAs and frontend projects.
  • Tooling & Workflow Standardization: Defines consistent linting, formatting, testing, CI/CD, and deployment configurations so teams do not have to rebuild these from scratch for every project.
  • Library & Pattern Guidance: Offers default picks for common needs like state management, routing, charts, and PWA implementation, with clear rules for when to deviate from defaults. For example, when starting a new client-facing Vue app that will be deployed to Cloudflare Workers, use this Skill to generate the full project structure, config files, and CI pipeline in minutes instead of manually setting up each tool.

Quick Start

Use the frontend-project-structure skill to scaffold a new Vue 3 + Vite + TypeScript frontend project with Tailwind CSS, Cloudflare Workers deployment, and pre-configured linting, testing, and CI workflows.

Frequently Asked Questions about frontend-project-structure

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

FAQPage Schema
What's the best way to scaffold a Vue 3 and Vite project with TypeScript and Tailwind CSS?▼

The best way to scaffold a Vue 3 and Vite project is to use a standardized structure that pre-configures TypeScript and Tailwind CSS, ensuring a uniform, production-ready frontend setup without manual tooling configuration.

How do I configure CI/CD pipelines for deploying a Vue single-page application to Cloudflare Workers?▼

You can configure CI/CD pipelines for Vue single-page applications by applying a standardized project structure that includes pre-defined deployment configurations specifically tailored for Cloudflare Workers environments.

What linting and testing tools should I use for a standardized Vue 3 frontend project structure?▼

A standardized Vue 3 frontend project structure uses oxlint and oxfmt for consistent linting and formatting, alongside vitest for testing, eliminating the need to rebuild tooling workflows from scratch.

Does this Vue frontend project setup include default libraries for state management and routing?▼

Yes, this Vue frontend project setup provides default library picks for common needs like state management, routing, charts, and PWA implementation, complete with clear rules for when to deviate from these defaults.

Can I add standardized frontend tooling to an existing Vue repository instead of starting from scratch?▼

Yes, you can apply standardized frontend tooling to existing repositories to restructure codebases and enforce consistent configurations, rather than only using it to scaffold new single-page applications.

Why use a fixed tech stack of pnpm, Vite, and Tailwind CSS for frontend project scaffolding?▼

Using a fixed tech stack of pnpm, Vite, and Tailwind CSS for frontend project scaffolding eliminates decision fatigue, bypasses inconsistent setups, and ensures all Vue projects follow uniform, production-ready conventions.

Related Skills

Explore More Software Engineering Skills→
baiciebaicie
2

pnpm

Manage Node.js dependencies and monorepo workspaces using pnpm.

Community
Advanced
joelhooksjoelhooks
22

cloudflare-deploy

Deploy Cloudflare Workers and Pages via wrangler with authentication and domain setup.

Community
Advanced
jsevenheckjsevenheck

vitetest

Automate unit and integration testing in Vite projects with Vitest.

Community
Intermediate
wyattowalshwyattowalsh
4

frontend-designer

Design, scaffold, refactor, and audit React frontend codebases with Tailwind CSS v4 and shadcn/ui.

Community
Advanced