skills.rest
oteroweb
oterowebCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

owfinance-layout-architecture

Document OWFINANCE dynamic layout architecture and routing conventions.

Updated Apr 2, 2026
Search Tags:#architecture#layout#routing#vue3#quasar#dynamic-layouts
One-click install
npx skills add https://github.com/oteroweb/OWFINANCE2026 --skill owfinance-layout-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: owfinance-layout-architecture
Source: https://github.com/oteroweb/OWFINANCE2026/tree/main/.agents/skills/owfinance-layout-architecture
Command: npx skills add https://github.com/oteroweb/OWFINANCE2026 --skill owfinance-layout-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Documents the architecture and development patterns for OWFINANCE dynamic layouts (Lite, Pro, Legacy), enabling teams to implement, modify or extend layouts consistently across the project.

Core Features & Use Cases

  • Defines the DynamicRoleLayout selector logic based on user preference and screen size
  • Provides component organization guidelines (liquid, pro, shared) and routing conventions
  • Helps diagnose common layout issues (e.g., pages rendering blank, layout not updating)

Quick Start

Start by reading the DynamicRoleLayout rules and replicate the layout patterns in a new or existing feature, ensuring router-view placement and responsive variants follow the documented conventions.

Frequently Asked Questions about owfinance-layout-architecture

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

FAQPage Schema
How do I implement dynamic layouts in Vue 3 based on user roles and screen size?▼

Dynamic layouts in Vue 3 use a DynamicRoleLayout selector combining user preference and screen size, requiring a single router-view per level and layout_mode state managed via Pinia.

Why does my Quasar layout render blank or fail to update when switching pages?▼

Blank rendering or update failures usually stem from incorrect router-view placement; ensure each layout level has exactly one router-view and follows documented routing conventions.

What is the correct way to organize components for Vue 3 dynamic layouts?▼

Component organization separates liquid, pro, and shared directories to ensure consistent layout implementation and maintainability across Lite, Pro, and Legacy variants.

How do I manage layout state across Lite, Pro, and Legacy variants using Pinia?▼

Layout state across Lite, Pro, and Legacy variants is managed via Pinia using a layout_mode state, which coordinates the DynamicRoleLayout selector to apply the correct responsive layout.

Can I use a single router-view for nested dynamic layouts in Quasar?▼

Dynamic layouts in Quasar require a single router-view per layout level to ensure proper rendering coordination when the DynamicRoleLayout selector switches between Lite, Pro, and Legacy variants.

Related Skills

Explore More Software Engineering Skills→
Axel-DaMageAxel-DaMage
2

vue-expert

Configure Vue 3 projects with Composition API, Pinia, Nuxt 3, Quasar, Capacitor, and Vite.

Community
Advanced
btabaskabtabaska
1

Generate Story

Generate CSF3 Storybook stories for React components with variant coverage.

Community
Intermediate
fanguyunfanguyun

vue-expert

Create Vue 3 components with Composition API and Pinia state management.

Community
Advanced
Endsi3gEndsi3g

clerk-vue-patterns

Implement reactive Clerk authentication patterns in Vue 3 with composables and router guards.

Community
Intermediate