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

0•

Mobile Development

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

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.

주요 기능

01Validation for JSON-RPC 2.0 compliant request building

02Strict 3-layer architectural enforcement (View, Service, Store)

03Standardized API service integration with transport types

04Ionic-specific component structure guidance

05Data-only Pinia store optimization for reactive state

060 GitHub stars

사용 사례

01Implementing type-safe API communication using specialized transport types

02Refactoring legacy Pinia stores to remove forbidden async logic

03Scaffolding new Vue 3 components with proper service-layer hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add golfergeek/orchestrator-ai front-end-structure-skill

For use in Claude.ai and ChatGPT

주요 기능

01Validation for JSON-RPC 2.0 compliant request building

02Strict 3-layer architectural enforcement (View, Service, Store)

03Standardized API service integration with transport types

04Ionic-specific component structure guidance

05Data-only Pinia store optimization for reactive state

060 GitHub stars

사용 사례

01Implementing type-safe API communication using specialized transport types

02Refactoring legacy Pinia stores to remove forbidden async logic

03Scaffolding new Vue 3 components with proper service-layer hooks

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add golfergeek/orchestrator-ai front-end-structure-skill

For use in Claude.ai and ChatGPT