skills.rest
szejing
szejingCOMMUNITY
Explore all skills by this author →
GitHub

vue-component-development

Standardize Vue UI development in the Wemotoo CRM Portal with reusable components.

1|Updated Sep 9, 2024
Search Tags:#frontend#vue#coding-standards#design-system#ui-components#nuxt3#component-reusability
One-click install
npx skills add https://github.com/szejing/wemotoo-crm-portal --skill vue-component-development
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-component-development
Source: https://github.com/szejing/wemotoo-crm-portal/tree/main/.cursor/skills/vue-component-development
Command: npx skills add https://github.com/szejing/wemotoo-crm-portal --skill vue-component-development

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build and refactor Vue components and pages in the Wemotoo CRM Portal (Nuxt 3) to ensure UI consistency, reusability, and clean integration with the design system.

Core Features & Use Cases

  • Standardizes the approach to creating and updating UI in app/pages and app/components, promoting file-based routing, layouts, data loading, and shared components.
  • Encourages adherence to project CURSOR rules (vue-pages-components.mdc, general.mdc, composables.mdc, repository.mdc, schema.mdc) for structure, naming, TypeScript usage, and validation.
  • Use Case: When adding a new reusable form field or modal, follow the conventions to ensure compatibility with Nuxt 3 and the global design system.

Quick Start

Follow the CURSOR guidelines to add or modify Vue components and pages in the Wemotoo CRM Portal.

Frequently Asked Questions about vue-component-development

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

FAQPage Schema
What's the best way to build reusable Vue components in a Nuxt 3 CRM?▼

Building reusable Vue components in a Nuxt 3 CRM requires following standardized CURSOR rules for directory structure, naming, and TypeScript, ensuring UI consistency and clean integration with the design system.

How do I structure Vue pages and components for UI consistency?▼

Structure Vue pages and components for UI consistency by organizing files in app/pages and app/components directories using file-based routing, layouts, and shared components while adhering to project CURSOR guidelines.

Does this Vue component development approach work with Nuxt 3 file-based routing?▼

Yes, this Vue component development approach works with Nuxt 3 file-based routing by specifying guidelines for the app/pages and app/components directories, ensuring compatibility with layouts and data loading patterns.

When do I need to follow CURSOR rules for Vue UI development?▼

You need to follow CURSOR rules for Vue UI development when adding or updating pages, creating forms, modals, or reusable UI elements, ensuring DRY principles and component reusability across the CRM portal.

How do I create a reusable form field or modal in Vue?▼

To create a reusable form field or modal in Vue, follow the project's conventions for TypeScript usage and validation patterns, ensuring compatibility with Nuxt 3 and the global design system as specified in CURSOR rules.

Why does component reusability matter in CRM portal development?▼

Component reusability matters in CRM portal development because it promotes DRY principles, reduces duplicate code, and ensures UI consistency across forms, modals, and shared elements through standardized TypeScript and naming conventions.

Related Skills

Explore More Software Engineering Skills→
stevessrstevessr

vue-development-guides

Provide centralized Vue 3 and Nuxt 3 development best practices and references.

Community
Intermediate
szejingszejing
1

crm-portal-deployment

Deploy the Wemotoo CRM stack to Digital Ocean with Docker.

Community
Advanced
travisjneumantravisjneuman
88

vue-development

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

Community
Advanced
eserlaneserlan
2

web-component-design

Standardize cross-framework UI component design across React, Vue, and Svelte.

Community
Advanced