skills.rest
bmslabs
bmslabsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vue-standard-components-ref

Document shared BM Vue components and layout contracts for Vue projects.

1|Updated Mar 18, 2026
Search Tags:#frontend#vue#design-system#ui-patterns#shared-components#layout-contracts
One-click install
npx skills add https://github.com/bmslabs/bmlabs-projects-templates --skill vue-standard-components-ref
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-standard-components-ref
Source: https://github.com/bmslabs/bmlabs-projects-templates/tree/main/view-vuejs/.github/skills/vue-standard-components-ref
Command: npx skills add https://github.com/bmslabs/bmlabs-projects-templates --skill vue-standard-components-ref

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Compact BM teams gain a standardized reference for shared Vue components and layout contracts, reducing ambiguity and rework across projects.

Core Features & Use Cases

  • Central catalog of reusable components such as AppButton, FormInput, FormSelect, FormTextarea, FormActions, AppBreadcrumb, Filter, Paginator, AppModal, BaseModal, ConfirmModal, PageHeader, AppSwitch, DataTable, and AppExportActions to enforce consistency.
  • Sidebar and DefaultLayout contracts with references and patterns to guide implementation in Vue 3 + TypeScript + Tailwind stacks.
  • Reuse and governance guidelines via the included references (production references, component sources, and production reusable components) to accelerate adoption in new templates.

Quick Start

Review the references to adopt the BM standard components and layout contracts across Vue projects.

Frequently Asked Questions about vue-standard-components-ref

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

FAQPage Schema
How do I standardize shared Vue components across multiple projects?▼

A Vue component reference catalog provides shared UI primitives and layout contracts. It includes components like AppButton, FormInput, and DataTable alongside DefaultLayout patterns to enforce visual consistency and reduce ambiguity across Vue projects.

What layout contracts are available for Vue 3 and TypeScript projects?▼

Vue 3 and TypeScript projects use Sidebar and DefaultLayout contracts defined in this reference. These layout patterns guide implementation in Tailwind stacks to ensure structural consistency across application templates.

Can I use this component reference with my existing Tailwind stack?▼

Yes, this component reference works with Tailwind stacks. The shared UI primitives and layout contracts are specifically designed to guide implementation within Vue 3, TypeScript, and Tailwind environments.

What frontend UI primitives are included in a shared component catalog?▼

This shared component catalog includes UI primitives like AppButton, AppModal, FormInput, FormSelect, DataTable, and AppExportActions. These cover standard form, table, navigation, and modal needs for frontend development.

How do I adopt shared layout contracts into a new Vue template?▼

Adopt shared layout contracts into a new Vue template by reviewing the included references directory. It contains production references and component sources providing governance guidelines to accelerate integration and reuse.

Why do I need a reference for shared Vue components and layout contracts?▼

You need a shared Vue component reference to reduce ambiguity and rework across teams. It provides standardized UI primitives and layout patterns, ensuring visual consistency without rebuilding components from scratch for every project.

Related Skills

Explore More Software Engineering Skills→
thehivegroup-aithehivegroup-ai

vue-component-standards

Provides Vue 3 component development standards using Composition API, TypeScript, and Tailwind CSS.

Official
Intermediate
retrip-airetrip-ai
2

base-ui-design

Standardize React UI components with Base UI design guidelines.

Official
Basic
FlorianRiquelmeFlorianRiquelme

Frontend CSS

Standardize CSS across frameworks with consistent methodology and production optimization.

Community
Basic
priyansh19priyansh19
1

design-guide

Establish and enforce CrewSpace UI design system standards across frontend components.

Community
Advanced