symfonia-ai-tools 1.0.0

package/templates/packs/vue3/_ai/skills/new-module/SKILL.md

@@ -0,0 +1,177 @@
+# Skill: New Module (Vue 3 + TypeScript)
+
+## Trigger
+Use when creating a new feature module from scratch.
+
+## Input
+- Module name (e.g. "users", "notifications")
+- API endpoints (if any)
+- Key entities/types
+
+## Steps
+
+### 1. Create directory structure
+
+```
+{{MODULE_PATH}}[module-name]/
+├── components/              # Module-specific components
+├── composables/             # Module composables
+│   ├── use[Module]Form.ts
+│   └── use[Module]Filters.ts
+├── services/                # API services
+│   └── [Module].service.ts
+├── types/                   # TypeScript types
+│   └── [module].types.ts
+├── views/                   # Route views
+│   ├── [Module]ListView.vue
+│   └── [Module]DetailView.vue
+├── [module].store.ts        # Pinia store
+└── [module].routes.ts       # Route definitions
+```
+
+### 2. Define types
+
+```typescript
+// types/[module].types.ts
+export interface I[Entity] {
+  id: number;
+  // ... entity fields
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface I[Entity]Create {
+  // ... create payload (without id, timestamps)
+}
+
+export interface I[Entity]Update {
+  // ... update payload
+}
+
+export type T[Entity]Status = 'active' | 'inactive' | 'draft';
+
+export interface I[Entity]Filters {
+  search?: string;
+  status?: T[Entity]Status;
+  page: number;
+  limit: number;
+}
+```
+
+### 3. Create API service
+
+```typescript
+// services/[Module].service.ts
+import { useApi } from '@/composables/useApi';
+import type { I[Entity], I[Entity]Create, I[Entity]Update } from '../types/[module].types';
+
+const api = useApi();
+const BASE = '{{API_BASE_URL}}/[module]';
+
+const [Module]Service = {
+  getAll: (params?: Record<string, unknown>) => api.get<I[Entity][]>(BASE, { params }),
+  getById: (id: number) => api.get<I[Entity]>(`${BASE}/${id}`),
+  create: (data: I[Entity]Create) => api.post<I[Entity]>(BASE, data),
+  update: (id: number, data: I[Entity]Update) => api.put<I[Entity]>(`${BASE}/${id}`, data),
+  delete: (id: number) => api.delete<void>(`${BASE}/${id}`),
+};
+
+export default [Module]Service;
+```
+
+### 4. Create Pinia store
+
+```typescript
+// [module].store.ts
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+import [Module]Service from './services/[Module].service';
+import type { I[Entity], I[Entity]Filters } from './types/[module].types';
+
+export const use[Module]Store = defineStore('[module]', () => {
+  const items = ref<I[Entity][]>([]);
+  const loading = ref(false);
+  const currentItem = ref<I[Entity] | null>(null);
+  const filters = ref<I[Entity]Filters>({ page: 1, limit: 20 });
+
+  const total = computed(() => items.value.length);
+
+  async function fetchAll() {
+    loading.value = true;
+    try {
+      const { data } = await [Module]Service.getAll(filters.value);
+      items.value = data;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function fetchById(id: number) {
+    loading.value = true;
+    try {
+      const { data } = await [Module]Service.getById(id);
+      currentItem.value = data;
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  return { items, loading, currentItem, filters, total, fetchAll, fetchById };
+});
+```
+
+### 5. Create composables
+
+Create `use[Module]Form.ts` (form logic) and `use[Module]Filters.ts` (filter/search logic).
+Follow patterns from `composables.instructions.md`.
+
+### 6. Create views
+
+- `[Module]ListView.vue` - list with filters, pagination
+- `[Module]DetailView.vue` - detail/edit view
+
+Each view should use composables, not direct API calls.
+
+### 7. Define routes
+
+```typescript
+// [module].routes.ts
+import type { RouteRecordRaw } from 'vue-router';
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/[module]',
+    name: '[module].list',
+    component: () => import('./views/[Module]ListView.vue'),
+    meta: { title: '[Module]' },
+  },
+  {
+    path: '/[module]/:id',
+    name: '[module].detail',
+    component: () => import('./views/[Module]DetailView.vue'),
+    meta: { title: '[Module] Detail' },
+  },
+];
+
+export default routes;
+```
+
+### 8. Create tests
+
+- Unit test for store
+- Unit test for composables
+- Component test for views (mount + basic assertions)
+- Follow `vitest.instructions.md` patterns
+
+### 9. Verification checklist
+
+- [ ] Types defined with `I` prefix
+- [ ] Service uses functional pattern
+- [ ] Store uses composition API syntax
+- [ ] Composables follow `use[Name]` naming
+- [ ] Views use composables, not direct service calls
+- [ ] Routes use lazy loading (`() => import(...)`)
+- [ ] All files have TypeScript strict types
+- [ ] Tests created for store, composables, views
+- [ ] No `console.log` in code
+- [ ] `data-testid` on interactive elements

package/templates/packs/vue3/_guidelines.md

@@ -0,0 +1,45 @@
+
+
+---
+
+## Vue 3 + TypeScript
+
+**Architecture**: Modular structure with `{{MODULE_PATH}}` — `components/`, `store/`, `service/`, `types/`, `views/` per feature.
+
+### Core Principles
+- **Components (.vue)**: Visual layer only — NO business logic
+- **Composables (`useXxx`)**: All business logic
+- **Stores (Pinia)**: State management only — no API calls
+- **Services**: API calls — ALWAYS functional pattern, NEVER classes
+
+### Service Pattern
+```typescript
+export const MyService = () => {
+    const apiInstance = api();
+    const getData = async (): Promise<IData> => {
+        const response = await apiInstance.get('endpoint');
+        return response.data;
+    };
+    return { getData };
+};
+```
+
+### Code Standards
+- **Strict TypeScript** — never use `any`
+- Interfaces: `I` prefix (`IUserForm`), Enums: `E` prefix (`EUserRole`)
+- CSS classes: single-dash (`.notification-item-content`), NOT BEM
+- `data-testid`: camelCase values
+- No `console.log` in production code
+- No empty `<style>` blocks, no HTML comments in templates
+- Use `<script setup lang="ts">` with `withDefaults(defineProps<>())`
+
+### Component Library
+- Use existing components from `{{COMPONENT_LIB_PATH}}`
+- Import: `import { Button } from '{{COMPONENT_LIB_IMPORT}}'`
+
+### API
+- Use project `api()` composable for ALL HTTP requests
+- Prefix `{{API_BASE_URL}}` is auto-applied — never hardcode URLs
+
+### i18n
+- ALL user-facing text MUST use translation keys (`$t('key')`)

package/templates/packs/vue3/pack.json

@@ -0,0 +1,11 @@
+{
+  "name": "Vue 3 + TypeScript",
+  "description": "Composition API, Pinia, composables, forms, API",
+  "default": true,
+  "placeholders": {
+    "MODULE_PATH": { "question": "Sciezka do modulow", "default": "/src/modules/[feature]/" },
+    "COMPONENT_LIB_PATH": { "question": "Sciezka do komponentow UI", "default": "/src/components/" },
+    "COMPONENT_LIB_IMPORT": { "question": "Import komponentow", "default": "@/components" },
+    "API_BASE_URL": { "question": "Bazowy URL API", "default": "/api/v4" }
+  }
+}