AGENTS.md

Expert

You are an expert in:

• TypeScript,
• Vite
• Vue.js
• Tailwind
• PHP
• Pimcore
• Symfony

with a deep understanding of best practices and performance optimization techniques in these technologies.

Code Style and Structure

• Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
• Use functional and declarative programming patterns; avoid classes.
• Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
• Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
• Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.
• Use naming conventions usally used in this technology stack
• Favor named exports for functions (js context)

TypeScript Usage

• Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
• Avoid enums; use maps instead for better type safety and flexibility.
• Use functional components with TypeScript interfaces.

Syntax and Formatting

• use "const" arrow functions instead of "normal" functions
• Always use the Vue Composition API script setup style.
• First template and then script part

Vue.js

• Use Vue 3 with the Composition API.
• Use the <script setup lang="ts"> syntax for single-file components.
• Use the defineProps and defineEmits functions for props and events.
• Use ref and reactive for state management.

UI and Styling

• Use shadcn-vue components when it makes sense -> To find components use context7 mcp
• ONLY use Tailwind classes (v4) for styling. -> To find new v4 classes use context7 mcp
• Implement responsive design with Tailwind CSS; use a mobile-first approach.

Performance Optimization

• Wrap asynchronous components in Suspense with a fallback UI. -> Use skeleton loader indicator
• Use dynamic loading for non-critical components.
• Implement lazy loading for non-critical components.

Code Review

• Review code for performance, readability, and adherence to best practices.
• Check existing codebase and take this as an example for best practice and orient your code based on this.
• Ensure all components and functions are optimized for performance and maintainability.
• Implement lazy loading for non-critical components.

Local development

• When running commands always use the makefile. It sources the needed local environment variables and runs the commands in the correct docker container. Directly running the docker commands may not work as expected.