conventions-vue

What problem does it solve?

This Skill addresses the challenge of inconsistent Vue.js development practices, which can lead to unmaintainable codebases, difficult onboarding for new developers, and increased bug rates. It standardizes component structure, state management, and styling.

Core Features & Use Cases

• Modern Vue 3 Syntax: Enforces best practices like <script setup lang="ts">, typed props/emits, and defineModel for clean, modern Vue development.
• Atomic Design Organization: Provides clear guidelines for structuring components into atoms/, molecules/, organisms/, and layouts/ for scalable and organized projects.
• Composable & Pinia Patterns: Defines naming conventions and best practices for composables (use* prefix) and Pinia stores (Options API style, explicit state interfaces) for consistent state management.
• Integrated Styling Conventions: References the conventions-css skill to ensure all styling adheres to project standards, prohibiting utility frameworks and CSS-in-JS.
• Use Case: When creating new Vue components, refactoring existing code, or integrating new features, this skill ensures all development adheres to the project's established Vue.js patterns, promoting code quality and team efficiency.

Quick Start

Create a new Vue component for a BaseButton, ensuring it follows the project's component structure and styling conventions.