vue-style-guide

Organize Vue 3, Nuxt 3, React, and Next.js project directories and enforce coding conventions.

1|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill vue-style-guide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: vue-style-guide
Source: https://github.com/Pancake-Q/claude-plugin-frontend/tree/main/skills/vue-style-guide
Command: npx skills add https://github.com/Pancake-Q/claude-plugin-frontend --skill vue-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, eslint, stylelint, and includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill ensures that Vue 3 / Nuxt 3 / React / Next.js projects adhere to coding conventions and best practices, improving code quality and maintainability.

Core Features & Use Cases

  • Code Organization: Automatically organizes project directory structures and files.
  • Coding Conventions: Enforces naming conventions, component patterns, and file placement.
  • Quick Reference: Provides a quick reference for common issues and solutions.
  • Use Case: When reviewing code or setting up a new project, use this Skill to automatically organize directories, enforce naming conventions, and ensure the project follows best practices.

Quick Start

Run the 'vue-style-guide' skill to automatically organize your Vue 3 project.

Frequently Asked Questions about vue-style-guide

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

FAQPage Schema
How do I automate Vue 3 project directory structuring and enforce coding conventions?

To automate Vue 3 project directory structuring, you can use a style guide skill to scan your codebase, diagnose structural issues, and reorganize files based on predefined rules and best practices. This enforces naming conventions and ensures maintainability.

Can I use the same coding conventions automation for React and Next.js projects?

Yes, coding conventions automation supports React and Next.js projects alongside Vue 3 and Nuxt 3. It applies predefined rules to organize directories, enforce component patterns, and ensure file placement across these different frontend frameworks.

Do I need TypeScript and specific linters to automate frontend project organization?

Yes, automating frontend project organization requires TypeScript, ESLint, and Stylelint. These dependencies provide the necessary parsing and diagnostic capabilities to enforce coding conventions and reorganize project directories accurately.

What is the best way to enforce naming conventions and component patterns in a Nuxt 3 project?

The best way to enforce naming conventions in a Nuxt 3 project is by running an automated style guide skill. It scans your project structure, diagnoses misnamed components, and reorganizes file placements according to established best practices.

When should I automate frontend project organization instead of manually restructuring directories?

You should automate frontend project organization when reviewing code or setting up a new project. Automating the process prevents manual errors, ensures consistent file placement, and quickly aligns your codebase with established coding conventions.