skills.rest
majedsiefalnasr
majedsiefalnasrCOMMUNITY
Explore all skills by this author →
Website𝕏@majedsiefalnasrGitHub

nuxt-frontend-engineering

Standardize Nuxt 3 frontend architecture with component, state, and RBAC patterns.

Updated Apr 10, 2026
Search Tags:#ui#architecture#frontend#vue#patterns#nuxt
One-click install
npx skills add https://github.com/majedsiefalnasr/bunyan-app-cursor --skill nuxt-frontend-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-frontend-engineering
Source: https://github.com/majedsiefalnasr/bunyan-app-cursor/tree/main/.agents/skills/nuxt-frontend-engineering
Command: npx skills add https://github.com/majedsiefalnasr/bunyan-app-cursor --skill nuxt-frontend-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Nuxt.js frontend engineering patterns and conventions are often inconsistently applied, leading to duplication, bugs, and slower delivery. This Skill standardizes the approach to frontend architecture, components, state management, and UI configuration for Nuxt projects.

Core Features & Use Cases

  • Standardized Nuxt 3 architecture: clear project layout, routing, and module usage.
  • Reusable patterns: composables, middleware, and stores that can be shared across apps.
  • RTL-ready UI guidance: consistent styling, theme configuration, and Nuxt UI usage.
  • Practical examples: RBAC middleware, Pinia store patterns, and UI configuration templates.

Quick Start

Review DESIGN.md and apply the Nuxt frontend patterns described here to align your project with Bunyan standards.

Frequently Asked Questions about nuxt-frontend-engineering

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

FAQPage Schema
How do I structure a Nuxt 3 project to avoid component architecture duplication?▼

Standardizing Nuxt 3 architecture involves applying structured patterns for component layout, documented composables, and shared stores to eliminate duplication and align with best practices.

What is the best way to manage state in Nuxt with Pinia?▼

Managing state in Nuxt with Pinia is standardized through reusable store patterns that ensure consistent data handling across your application while adhering to framework conventions.

How do I implement RBAC middleware in a Vue frontend application?▼

Implementing RBAC middleware in a Vue frontend is achieved by applying practical Nuxt middleware examples that enforce role-based access control before route rendering.

Does this Nuxt frontend engineering approach support RTL UI configuration?▼

Yes, this approach supports RTL UI configuration by providing consistent theme configuration and Nuxt UI usage guidance to ensure proper right-to-left styling across your project.

Can I use these frontend patterns with my existing Nuxt project configurations?▼

Yes, these standardized frontend patterns can be applied to existing Nuxt project configurations by reviewing the documented design guidelines and aligning your setup accordingly.

Why does inconsistent Nuxt component architecture lead to slower delivery?▼

Inconsistent Nuxt component architecture leads to slower delivery because it causes code duplication and bugs, which are resolved by standardizing engineering patterns and conventions.

Related Skills

Explore More Software Engineering Skills→
danghungtb26danghungtb26
3

project-conventions

Enforce naming and folder structure conventions for React TypeScript admin templates.

Community
Basic
SZolothSZoloth
11

frontend-design

Design and implement frontend interfaces from user requirements with HTML/CSS/JS.

Community
Intermediate
travisjneumantravisjneuman
88

vue-development

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

Community
Advanced
hector-mannyhector-manny

vue-patterns

Provide Vue.js 3 patterns and best practices for Vue, Nuxt, Vite, Pinia, and Vue Router projects.

Community
Advanced