skills.rest
AdrianAVA9
AdrianAVA9COMMUNITY
Explore all skills by this author →
GitHub

vue-view-generator

Guide Vue developers in implementing UI views with consistent layouts and shared components.

Updated Jan 20, 2026
Search Tags:#ui#layout#frontend#components#vue#design-system
One-click install
npx skills add https://github.com/AdrianAVA9/cero-base --skill vue-view-generator
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-view-generator
Source: https://github.com/AdrianAVA9/cero-base/tree/main/.agents/skills/vue-view-generator
Command: npx skills add https://github.com/AdrianAVA9/cero-base --skill vue-view-generator

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This Skill streamlines the development of Vue-based user interfaces by enforcing consistent layout structures, spacing rules, and the use of shared components, reducing UI inconsistencies and ensuring a uniform user experience.

Core Features & Use Cases

  • Layout Enforcement: Guides the proper selection and integration of AppLayout and FocusedLayout for different page types.
  • UI Standardization: Ensures internal padding, spacing, and component usage adhere to Fintrack design rules.
  • Component Utilization: Promotes the use of shared components like <LoadingIndicator>, <ConfirmationModal>, <CategorySelector>, <SurfaceCard>, <AmountInputCard>, and <AppButton>.
  • Route Metadata Setup: Assists in configuring route meta properties for header control and layout signals.
  • Best Practices: Provides guidelines on styling, responsive behavior, and accessibility considerations for Vue views.

Quick Start

When creating or restructuring a Vue page, use the shared components to ensure consistency and add the appropriate layout as specified in the project guidelines.

Frequently Asked Questions about vue-view-generator

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

FAQPage Schema
How do I standardize Vue UI layouts and spacing across a large-scale application?▼

Vue UI standardization uses shared components like SurfaceCard and AppButton alongside enforced layout containers. This ensures consistent spacing, cohesive page structures, and reduces UI inconsistencies in large-scale applications.

What is the best way to configure Vue route metadata for layout selection?▼

Configuring Vue route metadata involves setting meta properties for header control and layout signals. This directs the application to render the correct layout container, ensuring proper view structure and cohesive user experience.

How do I implement shared Vue components for consistent frontend design?▼

Implementing shared Vue components involves utilizing elements like LoadingIndicator, ConfirmationModal, and AmountInputCard. This promotes component reuse and ensures adherence to project design system rules across multiple views.

Can I use this approach for Vue applications requiring specific responsive and accessibility behavior?▼

Yes, this approach provides specific guidelines for styling, responsive behavior, and accessibility considerations in Vue views. It requires understanding Vue component import conventions to properly apply these design standards.

Why does my Vue component layout break when using inconsistent internal padding?▼

Vue component layouts break when internal padding and spacing do not adhere to project design rules. Enforcing UI standardization through shared components and specific layout container rules resolves these structural inconsistencies.

Related Skills

Explore More Software Engineering Skills→
juanjaragavijuanjaragavi

frontend

Define frontend architecture and accessibility guidelines for Next.js 15+ and Astro 5 projects.

Community
Advanced
wepn13232wepn13232
7

element-plus-table

Document Element Plus el-table attributes, events, slots, and tooltip behaviors.

Community
Intermediate
HeartcoolmanHeartcoolman
88

warp-ui-guidelines

Provide UI coding guidelines for the Warp client design system.

Community
Intermediate
Tea-4-LifeTea-4-Life

frontend-design

Create production-grade frontend interfaces with cohesive design systems and accessible tokens.

Official
Advanced