What is the primary responsibility of the Service Layer?

The Service Layer handles the heavy lifting: building requests using transport types, executing API calls, and processing the business logic before updating the data-only stores.

Can I use this skill to refactor existing Vue projects?

Absolutely. This skill is ideal for identifying 'architectural debt' in existing projects, such as business logic trapped in components or async methods inside stores.

Why shouldn't I put API calls directly in Pinia stores?

Placing async logic or API calls in stores breaks the architecture's reactivity model and makes state harder to track. This skill enforces stores as data-only repositories to ensure the UI updates predictably.

How does this skill handle API request security?

It utilizes strict transport types and validation builders to ensure all JSON-RPC 2.0 requests are type-safe and correctly structured before being sent to the backend.

Front-End Architecture & Structure

Name: Front-End Architecture & Structure
Author: GolferGeek

byGolferGeek

Mobile Development

Implements a strict three-layer architecture for Vue 3 and Ionic applications to ensure clean state management and scalable API integration.

About

The Front-End Structure skill enforces a rigorous separation of concerns within Vue 3 and Ionic environments, specifically optimized for the Orchestrator AI framework. By dividing the codebase into three distinct layers—Data-only Pinia stores, API-focused services, and reactive components—it prevents common architectural pitfalls like breaking reactivity with complex store logic. This skill provides the patterns and validation needed to build robust, type-safe front-ends using standardized transport types and JSON-RPC 2.0 compliant request builders, ensuring the UI remains performant and maintainable as the application scales.

Key Features

Validation for JSON-RPC 2.0 compliant request building
Strict 3-layer architectural enforcement (View, Service, Store)
Standardized API service integration with transport types
Ionic-specific component structure guidance
Data-only Pinia store optimization for reactive state
0 GitHub stars

Use Cases

Implementing type-safe API communication using specialized transport types
Refactoring legacy Pinia stores to remove forbidden async logic
Scaffolding new Vue 3 components with proper service-layer hooks

About

Key Features

Validation for JSON-RPC 2.0 compliant request building
Strict 3-layer architectural enforcement (View, Service, Store)
Standardized API service integration with transport types
Ionic-specific component structure guidance
Data-only Pinia store optimization for reactive state
0 GitHub stars

Use Cases

Implementing type-safe API communication using specialized transport types
Refactoring legacy Pinia stores to remove forbidden async logic
Scaffolding new Vue 3 components with proper service-layer hooks