Enforce standardized Vue 3 conventions for components, composables, and stores.
npx skills add https://github.com/caiokf/homepage --skill conventions-vue
Please help me install this Agent Skill. Skill: conventions-vue Source: https://github.com/caiokf/homepage/tree/main/.claude/skills/conventions-vue Command: npx skills add https://github.com/caiokf/homepage --skill conventions-vue
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.
<script setup lang="ts">, typed props/emits, and defineModel for clean, modern Vue development.atoms/, molecules/, organisms/, and layouts/ for scalable and organized projects.use* prefix) and Pinia stores (Options API style, explicit state interfaces) for consistent state management.conventions-css skill to ensure all styling adheres to project standards, prohibiting utility frameworks and CSS-in-JS.Create a new Vue component for a BaseButton, ensuring it follows the project's component structure and styling conventions.
High-intent search queries and answers about installing and using this skill.
Enforce consistent Vue conventions by standardizing script setup with TypeScript, typed props and emits, atomic component organization (atoms, molecules, organisms, layouts), and scoped styling with CSS custom properties. This prevents drift in implementations and improves maintainability across your codebase.
Use `<script setup lang="ts">` with explicit prop and emit typings, atomic design folder structure (atoms/, molecules/, organisms/, layouts/), composables prefixed with `use*`, and Pinia stores in Options API style. This ensures clean, modern Vue development aligned with project standards.
No. These conventions mandate script setup and prohibit the Options API and mixins. This enforces modern Vue 3 practices, reduces code fragmentation, and ensures consistent patterns across components and state management.
Name composables with the `use*` prefix and define Pinia stores using Options API style with explicit state interfaces. This standardizes state management patterns, improves discoverability, and maintains consistency with component structure.
Yes. Conventions require scoped styles, CSS custom properties, and adherence to the `conventions-css` skill. Utility frameworks and CSS-in-JS are prohibited to maintain unified styling standards across your project.
Your project must use Vue 3, TypeScript, and support script setup syntax. You need an established atomic or domain directory structure and should plan to refactor existing components away from Options API and mixins to align with standards.
mayervcAutomate Movie App project setup with Vite, React, and TypeScript.
jonnymuirAnalyze CSS custom property implementations for naming conventions and cascade layer declarations.
Jonathan0823Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.
runkidsAudit Pinia stores and enforce Vue 3 state management best practices.