flowfile-frontend-conventions

Define Vue 3 and Tauri 2 frontend conventions for the Flowfile application.

340|27|Updated Nov 9, 2024

Search Tags:#best practices #front-end development #Vue 3 #code conventions #Tauri 2

Ready to run

npx skills add https://github.com/Edwardvaneechoud/Flowfile --skill flowfile-frontend-conventions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: flowfile-frontend-conventions
Source: https://github.com/Edwardvaneechoud/Flowfile/tree/main/.claude/skills/flowfile-frontend-conventions
Command: npx skills add https://github.com/Edwardvaneechoud/Flowfile --skill flowfile-frontend-conventions

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides guidelines and best practices for developing the frontend of the Flowfile application, ensuring consistency and efficiency in the codebase.

Core Features & Use Cases

Vue 3 and Tauri Conventions: Offers conventions for path aliases, Pinia store mapping, and handling the axios trailing-slash 307 trap.
Development Best Practices: Provides guidance on the 19-file god-component TODO(refactor) policy and the sidecar boot/readiness/shutdown ladder.
Use Case: When developing new Vue components, views, stores, or routes in the Flowfile frontend, this Skill ensures adherence to the established conventions and best practices.

Quick Start

Use the flowfile-frontend-conventions skill to ensure that your new Vue component adheres to the established conventions for path aliases and Pinia store mapping.

Frequently Asked Questions about flowfile-frontend-conventions

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

FAQPage Schema

How do I handle the axios trailing-slash 307 redirect trap in a Tauri 2 application?▼

To handle the axios trailing-slash 307 trap in a Tauri 2 application, apply the established Flowfile frontend conventions for axios configuration. This prevents unexpected redirect behaviors during network requests.

What is the best way to structure Pinia store management in a Vue 3 frontend?▼

The best way to structure Pinia store management in a Vue 3 frontend is by following specific store mapping conventions. These guidelines ensure state management remains consistent and efficient across the Flowfile application codebase.

How do I set up path aliasing for Vue 3 components in a Tauri 2 project?▼

Set up path aliasing for Vue 3 components in a Tauri 2 project by applying the designated path alias conventions. This ensures correct module resolution and import consistency across the Flowfile frontend.

Does Flowfile frontend development require specific knowledge of Vue 3 and Tauri 2?▼

Yes, Flowfile frontend development requires prerequisite knowledge of Vue 3, Tauri 2, and general frontend development practices. This baseline expertise is necessary to implement the provided conventions effectively.

Why is there a TODO(refactor) policy for a 19-file god-component?▼

The TODO(refactor) policy for a 19-file god-component exists to manage large, unwieldy Vue components. It establishes a threshold to flag heavily coupled files for necessary architectural refactoring.

How do I manage the sidecar boot, readiness, and shutdown ladder in Tauri 2?▼

Manage the sidecar boot, readiness, and shutdown ladder in Tauri 2 by following the specific lifecycle best practices provided. This ensures stable process initialization and termination within the Flowfile application.