Expert coding agent for the Zammad helpdesk platform. Navigates Ruby on Rails backend, Vue 3 frontends (desktop/mobile), legacy CoffeeScript app, GraphQL API, and comprehensive developer manual.
This skill has safety concerns that you should review before use. Some patterns were detected that may pose a risk.Safety score: 60/100.
KillerSkills scans all public content for safety. Use caution before installing or executing flagged content.
Expert coding agent for Zammad, an open-source web-based helpdesk/customer support system. Provides fast, reliable guidance for shipping changes across Rails backend, Vue frontends, and legacy CoffeeScript app with minimal trial-and-error.
Helps developers navigate and contribute to the Zammad codebase by:
**Three Frontend Applications:**
1. **desktop-app (legacy)**: CoffeeScript + Spine.js MVC + Sprockets, uses REST API
- Location: `app/assets/`
- Testing: QUnit in `test/`
- Lint config: `coffeelint.json`
2. **desktop-view (modern)**: Vue 3 + TypeScript + GraphQL
- Location: `app/frontend/apps/desktop`
- State: Pinia stores
- Styling: Tailwind CSS
3. **mobile**: Vue 3 + TypeScript + GraphQL
- Location: `app/frontend/apps/mobile`
- State: Pinia stores
- Styling: Tailwind CSS
**Backend:**
**Shared Frontend Code:**
**Library Directory (`lib/`):**
- Helpers: `email_helper.rb`, `migration_helper.rb`, `sql_helper.rb`, `image_helper.rb`, etc.
- Integrations: `github/`, `gitlab/`, `microsoft_graph/`, `facebook.rb`, `telegram_helper.rb`, `whatsapp/`, etc.
- Features: `auto_wizard.rb`, `calendar_subscriptions/`, `escalation/`, `knowledge_base/`, `password_policy/`, `secure_mailing/`, etc.
- Core extensions: `core_ext/`
- Background services: `background_services/`, `sequencer/`, `transaction_dispatcher.rb`
**Legacy desktop-app:**
**Modern Vue apps (desktop-view + mobile):**
**Backend:**
Before making changes:
For runtime, environment, and setup details, always check:
**Project structure:**
```
app/
assets/ # Legacy desktop-app (CoffeeScript)
frontend/
apps/
desktop/ # Modern desktop-view (Vue)
mobile/ # Mobile app (Vue)
shared/ # Cross-app modules
tests/ # Vitest setup and helpers
controllers/ # Rails controllers
models/ # Rails models
views/ # Rails views
jobs/ # Background jobs
mailers/ # Email templates
helpers/ # View helpers
channels/ # ActionCable channels
policies/ # Authorization policies
services/ # Business logic
graphql/ # GraphQL API
lib/ # Core extensions, helpers, integrations
bin/ # Executable scripts
config/ # App configuration
db/ # Database migrations and schema
doc/developer_manual/ # Developer documentation
spec/ # RSpec tests
test/ # QUnit tests (legacy)
```
**Path aliases (from `tsconfig.base.json`):**
**For Vue apps (desktop-view/mobile):**
**For legacy desktop-app:**
**For backend:**
- Vue components: Vitest + Testing Library
- Backend: RSpec
- Legacy frontend: QUnit
- E2E: Cypress
The Developer Manual (`doc/developer_manual/`) is the source of truth for:
Reference config files rather than duplicating information.
**Adding a Vue component:**
1. Decide if it's app-specific (desktop/mobile) or shared
2. Place in appropriate directory
3. Use TypeScript and Composition API
4. Apply Tailwind styling
5. Wrap user-facing strings for i18n
6. Write Vitest tests
**Adding a GraphQL endpoint:**
1. Define schema in `app/graphql/`
2. Implement resolver
3. Add to appropriate type/query/mutation
4. Write RSpec tests
5. Update frontend queries if needed
**Modifying backend logic:**
1. Check if it affects GraphQL or REST API
2. Update `app/services/` for business logic
3. Modify models/controllers as needed
4. Write/update RSpec tests
5. Consider impact on all three frontends
**Example 1: Adding a shared Vue component**
```typescript
// File: app/frontend/shared/components/CommonElements/MyComponent.vue
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
// Component logic
</script>
<template>
<div class="flex items-center gap-2 p-4">
{{ t('myComponent.title') }}
</div>
</template>
```
**Example 2: Adding a GraphQL query**
```ruby
field :my_data, [Types::MyDataType], null: false do
description 'Fetch my data'
end
def my_data
# Resolver logic
end
```
**Example 3: Using path aliases**
```typescript
// Use configured aliases from tsconfig.base.json
import { useStore } from '#shared/stores/myStore'
import MyComponent from '#desktop/components/MyComponent.vue'
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/zammad-development-assistant/raw