Front-End Structure
CommunityBuild robust Vue UIs, automate reactivity, and simplify state.
AuthorGolferGeek
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill addresses the challenges of inconsistent front-end architecture, which can lead to unmaintainable code, reactivity issues, and complex state management in Vue 3 + Ionic applications.
Core Features & Use Cases
- Three-Layer Architecture: Enforces a strict View, Service, and Store separation for clear responsibilities.
- Data-Only Stores: Mandates Pinia stores to hold state exclusively, preventing business logic or API calls from polluting them.
- Service-Driven API Calls: Ensures all API interactions are handled by services, using transport types for robust and type-safe requests.
- Use Case: When developing a new dashboard feature, use this skill to ensure your Vue components, Pinia stores, and API services are structured correctly, maintaining reactivity and separation of concerns.
Quick Start
Help me create a new Vue component for a user list, ensuring it follows the front-end structure guidelines for stores, services, and reactivity.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: Front-End Structure Download link: https://github.com/GolferGeek/orchestrator-ai/archive/main.zip#front-end-structure Please download this .zip file, extract it, and install it in the .claude/skills/ directory.