skills.rest
jacksonlee-tw
jacksonlee-twCOMMUNITY
Explore all skills by this author →
GitHub

primevue3-development

Implements Vue 3 frontend features using PrimeVue 4, TailwindCSS, and layered composable-service architecture.

Updated Aug 15, 2026
Search Tags:#frontend development#component architecture#composables#tailwindcss#vue 3#datatable#primevue
One-click install
npx skills add https://github.com/jacksonlee-tw/mystock-vue --skill primevue3-development-jacksonlee-tw
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: primevue3-development
Source: https://github.com/jacksonlee-tw/mystock-vue/tree/main/mystock-analysis/.github/skills/primevue3-development
Command: npx skills add https://github.com/jacksonlee-tw/mystock-vue --skill primevue3-development-jacksonlee-tw

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building consistent Vue 3 + PrimeVue 4 frontends requires many architectural decisions—component structure, API layering, routing, state management, and styling conventions. This Skill encodes a complete, opinionated development workflow so every page, composable, and service follows the same proven patterns. ## Core Features & Use Cases - Layered Architecture Guidance: Enforces a clean View → Composable → Service → Endpoint separation so UI code never calls HTTP directly. - PrimeVue 4 Component Patterns: Provides ready-to-use recipes for DataTable (frozen columns, cell editing, pagination), Dialog, Form validation, Tabs, Toast/Confirm, and FileUpload via the references/primevue-patterns.md file. - Full Feature Scaffolding Checklist: Step-by-step process for adding a new page—view, lazy-loaded route, menu item, service, composable, and tests. - Use Case: When asked to "add an order management page", the Skill generates a CommonLayout-based view, a useOrderApi composable with readonly state, an orderService with endpoint constants, plus the router and AppMenu entries. ## Quick Start Ask the AI to create a new Vue page with a PrimeVue DataTable and CRUD dialog following this project's frontend conventions.

Frequently Asked Questions about primevue3-development

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

FAQPage Schema
How do I structure a Vue 3 component with PrimeVue 4?▼

Use <script setup> with imports ordered as Vue core, composables, utils, then PrimeVue services like useToast. Define props and emits first, then composable destructuring, local refs, computed values, methods, watchers, and lifecycle hooks in that sequence.

How to add a new page in a Vue 3 PrimeVue project?▼

Create a view file using CommonLayout slots, register a lazy-loaded route in router/index.js children, and add a menu entry with label, icon, and path in AppMenu.vue's model array. Optionally add a service and composable for API-backed pages.

Does PrimeVue 4 work with TailwindCSS and dark mode?▼

Yes, PrimeVue 4 uses the @primeuix/themes Aura preset alongside TailwindCSS for layout and spacing. Dark mode uses a selector strategy toggling an app-dark class on the html element via useLayout().toggleDarkMode().

What is the difference between a composable and a service in Vue?▼

A service handles raw API calls and data transformation with no UI state, while a composable wraps the service with reactive state like isLoading and error, returning readonly refs. Views consume composables and never call services or axios directly.

How do I implement cell editing in a PrimeVue DataTable?▼

Set editMode="cell" on the DataTable and provide an #editor template per column with InputText, InputNumber, or Dropdown. Handle the cell-edit-complete event to commit valid new values or call event.preventDefault() to reject invalid edits.

When should I add Pinia to a Vue 3 project?▼

Add Pinia only when state must be shared globally across unrelated components, such as authentication tokens or user info. Install it with npm, register createPinia() before the router in main.js, and define stores using the Composition API setup style.

Related Skills

Explore More Software Engineering Skills→
symbiosikasymbiosika

frontend-app

Scaffold and edit Vue 3 components and views with Vite and Tailwind CSS v4.

Official
Advanced
AINative-StudioAINative-Studio
2

testing-patterns

Define testing patterns for FastAPI and React with pytest, vitest, and Playwright.

Official
Advanced
parisgroup-aiparisgroup-ai
1

api-design

Standardize REST API design with OpenAPI specifications and versioning.

Official
Intermediate
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate