@su-record/vibe 3.2.64 → 4.0.0

package/languages/typescript-tauri.md

@@ -1,365 +0,0 @@
-# TypeScript + Tauri v2 Quality Rules
-
-## Core Principles (inherited from core)
-
-```markdown
-# Core Principles (inherited from core)
-Single Responsibility (SRP)
-No Duplication (DRY)
-Reusability
-Low Complexity
-Function <= 30 lines, JSX <= 50 lines
-Nesting <= 3 levels
-Cyclomatic complexity <= 10
-```
-
-## Tauri Architecture Understanding
-
-```text
-Frontend (TypeScript/React/Vue/Svelte)
-- UI rendering
-- User interaction
-- @tauri-apps/api calls
-
-Tauri Core (Rust)
-- System API access
-- File system, network
-- Security sandbox
-```
-
-## TypeScript/Tauri Specific Rules
-
-### 1. Tauri Command Type Safety
-
-```typescript
-// Bad: Using any
-const result = await invoke('get_data');
-
-// Good: Clear type definition
-interface FileInfo {
-  path: string;
-  size: number;
-  modified: number;
-}
-
-const fileInfo = await invoke<FileInfo>('get_file_info', { path: '/path/to/file' });
-
-// Good: Command response type definition
-interface CommandResponse<T> {
-  success: boolean;
-  data?: T;
-  error?: string;
-}
-
-async function invokeCommand<T>(cmd: string, args?: Record<string, unknown>): Promise<T> {
-  try {
-    return await invoke<T>(cmd, args);
-  } catch (error) {
-    throw new Error(`Command ${cmd} failed: ${error}`);
-  }
-}
-```
-
-### 2. Tauri API Usage Patterns
-
-```typescript
-import { invoke } from '@tauri-apps/api/core';
-import { open, save } from '@tauri-apps/plugin-dialog';
-import { readTextFile, writeTextFile } from '@tauri-apps/plugin-fs';
-
-// Good: File dialog + read
-async function openFile(): Promise<string | null> {
-  const selected = await open({
-    multiple: false,
-    filters: [{ name: 'Text', extensions: ['txt', 'md'] }]
-  });
-
-  if (!selected) return null;
-
-  return await readTextFile(selected as string);
-}
-
-// Good: File save
-async function saveFile(content: string): Promise<void> {
-  const path = await save({
-    filters: [{ name: 'Text', extensions: ['txt'] }]
-  });
-
-  if (path) {
-    await writeTextFile(path, content);
-  }
-}
-```
-
-### 3. Event System Usage
-
-```typescript
-import { listen, emit } from '@tauri-apps/api/event';
-
-// Good: Event listener (cleanup required)
-function useBackendEvent<T>(eventName: string, handler: (payload: T) => void) {
-  useEffect(() => {
-    const unlisten = listen<T>(eventName, (event) => {
-      handler(event.payload);
-    });
-
-    return () => {
-      unlisten.then(fn => fn());
-    };
-  }, [eventName, handler]);
-}
-
-// Good: Frontend -> Backend event
-async function notifyBackend(action: string, data: unknown): Promise<void> {
-  await emit('frontend-action', { action, data });
-}
-```
-
-### 4. Window Management
-
-```typescript
-import { getCurrentWindow } from '@tauri-apps/api/window';
-
-// Good: Window control
-async function setupWindow(): Promise<void> {
-  const appWindow = getCurrentWindow();
-
-  // Set window size
-  await appWindow.setSize(new LogicalSize(800, 600));
-
-  // Center window
-  await appWindow.center();
-
-  // Set window title
-  await appWindow.setTitle('My Tauri App');
-}
-
-// Good: Window event listener
-function useWindowEvents() {
-  useEffect(() => {
-    const appWindow = getCurrentWindow();
-
-    const unlistenClose = appWindow.onCloseRequested(async (event) => {
-      // Check for unsaved changes
-      if (hasUnsavedChanges) {
-        event.preventDefault();
-        // Show confirmation dialog
-      }
-    });
-
-    return () => {
-      unlistenClose.then(fn => fn());
-    };
-  }, []);
-}
-```
-
-### 5. Rust Command Definition (Backend)
-
-```rust
-// src-tauri/src/main.rs or lib.rs
-
-// Good: Command definition
-#[tauri::command]
-fn greet(name: &str) -> String {
-    format!("Hello, {}!", name)
-}
-
-// Good: Async Command
-#[tauri::command]
-async fn read_file(path: String) -> Result<String, String> {
-    tokio::fs::read_to_string(&path)
-        .await
-        .map_err(|e| e.to_string())
-}
-
-// Good: Using State
-#[tauri::command]
-fn get_count(state: tauri::State<'_, AppState>) -> u32 {
-    *state.count.lock().unwrap()
-}
-
-// Register in main.rs
-fn main() {
-    tauri::Builder::default()
-        .invoke_handler(tauri::generate_handler![greet, read_file, get_count])
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}
-```
-
-### 6. Security Configuration (tauri.conf.json)
-
-```json
-{
-  "app": {
-    "security": {
-      "csp": "default-src 'self'; script-src 'self'"
-    }
-  },
-  "plugins": {
-    "fs": {
-      "scope": ["$APP/*", "$RESOURCE/*"]
-    },
-    "shell": {
-      "open": true,
-      "scope": []
-    }
-  }
-}
-```
-
-### 7. Custom Hook Pattern
-
-```typescript
-// Good: Tauri Command Hook
-function useTauriCommand<T, A extends Record<string, unknown>>(
-  command: string
-) {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const execute = useCallback(async (args?: A) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await invoke<T>(command, args);
-      setData(result);
-      return result;
-    } catch (e) {
-      const errorMsg = e instanceof Error ? e.message : String(e);
-      setError(errorMsg);
-      throw e;
-    } finally {
-      setLoading(false);
-    }
-  }, [command]);
-
-  return { data, loading, error, execute };
-}
-
-// Usage example
-function FileViewer() {
-  const { data: content, loading, error, execute } = useTauriCommand<string>('read_file');
-
-  const handleOpen = async () => {
-    await execute({ path: '/path/to/file.txt' });
-  };
-
-  return (
-    <div>
-      <button onClick={handleOpen} disabled={loading}>
-        {loading ? 'Loading...' : 'Open File'}
-      </button>
-      {error && <p className="error">{error}</p>}
-      {content && <pre>{content}</pre>}
-    </div>
-  );
-}
-```
-
-### 8. Build and Deploy
-
-```bash
-# Development mode
-npm run tauri dev
-
-# Production build
-npm run tauri build
-
-# Specific target
-npm run tauri build -- --target x86_64-pc-windows-msvc
-npm run tauri build -- --target aarch64-apple-darwin
-npm run tauri build -- --target x86_64-unknown-linux-gnu
-```
-
-## Recommended Folder Structure
-
-```text
-my-tauri-app/
-├── src/                    # Frontend
-│   ├── components/
-│   ├── hooks/
-│   │   └── useTauri.ts    # Tauri hooks
-│   ├── lib/
-│   │   └── commands.ts    # Command wrappers
-│   └── App.tsx
-├── src-tauri/              # Backend (Rust)
-│   ├── src/
-│   │   ├── main.rs
-│   │   └── commands/      # Command modules
-│   ├── Cargo.toml
-│   └── tauri.conf.json
-└── package.json
-```
-
-## Performance Optimization
-
-```typescript
-// Good: Large data streaming
-import { Channel } from '@tauri-apps/api/core';
-
-async function streamLargeFile(path: string): Promise<void> {
-  const channel = new Channel<string>();
-
-  channel.onmessage = (chunk) => {
-    // Process chunk by chunk
-    appendToDisplay(chunk);
-  };
-
-  await invoke('stream_file', { path, channel });
-}
-
-// Good: Background task
-async function runHeavyTask(): Promise<void> {
-  // Process in separate thread in Rust
-  await invoke('heavy_computation', { data: largeData });
-}
-```
-
-## Debugging
-
-```typescript
-// Good: Logging only in development mode
-const isDev = import.meta.env.DEV;
-
-function debugLog(message: string, data?: unknown): void {
-  if (isDev) {
-    console.log(`[Tauri] ${message}`, data);
-  }
-}
-
-// Good: Check Rust logs (in terminal)
-// RUST_LOG=debug npm run tauri dev
-```
-
-## Testing
-
-```typescript
-// Good: Command Mock
-import { mockIPC } from '@tauri-apps/api/mocks';
-
-beforeAll(() => {
-  mockIPC((cmd, args) => {
-    if (cmd === 'greet') {
-      return `Hello, ${args.name}!`;
-    }
-  });
-});
-
-test('greet command', async () => {
-  const result = await invoke('greet', { name: 'World' });
-  expect(result).toBe('Hello, World!');
-});
-```
-
-## Checklist
-
-- [ ] Define types for all Commands
-- [ ] Handle event listener cleanup
-- [ ] Minimize file access scope (tauri.conf.json)
-- [ ] Verify CSP configuration
-- [ ] Error handling (Rust -> Frontend)
-- [ ] Handle large data streaming
-- [ ] Separate development/production environments

package/languages/typescript-vue.md

@@ -1,354 +0,0 @@
-# TypeScript + Vue/Nuxt Quality Rules
-
-## Core Principles (inherited from core)
-
-```markdown
-# Core Principles (inherited from core)
-Single Responsibility (SRP)
-No Duplication (DRY)
-Reusability
-Low Complexity
-Function <= 30 lines, Template <= 100 lines
-Nesting <= 3 levels
-Cyclomatic complexity <= 10
-```
-
-## Vue 3 + TypeScript Specific Rules
-
-### 1. Use Composition API (Avoid Options API)
-
-```typescript
-// Bad: Options API (legacy)
-export default {
-  data() {
-    return { count: 0 };
-  },
-  methods: {
-    increment() {
-      this.count++;
-    }
-  }
-};
-
-// Good: Composition API + script setup
-<script setup lang="ts">
-import { ref, computed, onMounted } from 'vue';
-
-const count = ref(0);
-const doubled = computed(() => count.value * 2);
-
-function increment() {
-  count.value++;
-}
-
-onMounted(() => {
-  console.log('Component mounted');
-});
-</script>
-```
-
-### 2. Type-safe Props/Emits
-
-```typescript
-// Good: Props type definition
-interface Props {
-  userId: string;
-  title?: string;
-  items: Item[];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: 'Default Title',
-});
-
-// Good: Emits type definition
-interface Emits {
-  (e: 'update', value: string): void;
-  (e: 'delete', id: number): void;
-  (e: 'select', item: Item): void;
-}
-
-const emit = defineEmits<Emits>();
-
-// Usage
-emit('update', 'new value');
-emit('delete', 123);
-```
-
-### 3. Separate Logic with Composables
-
-```typescript
-// Good: composables/useUser.ts
-import { ref, computed } from 'vue';
-import type { User } from '@/types';
-
-export function useUser(userId: string) {
-  const user = ref<User | null>(null);
-  const isLoading = ref(false);
-  const error = ref<string | null>(null);
-
-  const fullName = computed(() =>
-    user.value ? `${user.value.firstName} ${user.value.lastName}` : ''
-  );
-
-  async function fetchUser() {
-    isLoading.value = true;
-    error.value = null;
-    try {
-      const response = await api.getUser(userId);
-      user.value = response.data;
-    } catch (e) {
-      error.value = 'Failed to load user';
-    } finally {
-      isLoading.value = false;
-    }
-  }
-
-  return {
-    user,
-    isLoading,
-    error,
-    fullName,
-    fetchUser,
-  };
-}
-
-// Usage in component
-<script setup lang="ts">
-const { user, isLoading, fetchUser } = useUser(props.userId);
-
-onMounted(fetchUser);
-</script>
-```
-
-### 4. Pinia State Management
-
-```typescript
-// Good: stores/user.ts
-import { defineStore } from 'pinia';
-import type { User } from '@/types';
-
-interface UserState {
-  currentUser: User | null;
-  users: User[];
-  isLoading: boolean;
-}
-
-export const useUserStore = defineStore('user', {
-  state: (): UserState => ({
-    currentUser: null,
-    users: [],
-    isLoading: false,
-  }),
-
-  getters: {
-    isLoggedIn: (state) => !!state.currentUser,
-    userCount: (state) => state.users.length,
-  },
-
-  actions: {
-    async login(email: string, password: string) {
-      this.isLoading = true;
-      try {
-        const user = await authApi.login(email, password);
-        this.currentUser = user;
-      } finally {
-        this.isLoading = false;
-      }
-    },
-
-    logout() {
-      this.currentUser = null;
-    },
-  },
-});
-
-// Setup Store style (recommended)
-export const useUserStore = defineStore('user', () => {
-  const currentUser = ref<User | null>(null);
-  const isLoggedIn = computed(() => !!currentUser.value);
-
-  async function login(email: string, password: string) {
-    currentUser.value = await authApi.login(email, password);
-  }
-
-  return { currentUser, isLoggedIn, login };
-});
-```
-
-### 5. Nuxt 3 Specific Rules
-
-```typescript
-// Good: Server API Routes (server/api/)
-// server/api/users/[id].get.ts
-export default defineEventHandler(async (event) => {
-  const id = getRouterParam(event, 'id');
-
-  if (!id) {
-    throw createError({
-      statusCode: 400,
-      message: 'ID is required',
-    });
-  }
-
-  const user = await prisma.user.findUnique({ where: { id } });
-
-  if (!user) {
-    throw createError({
-      statusCode: 404,
-      message: 'User not found',
-    });
-  }
-
-  return user;
-});
-
-// Good: useFetch / useAsyncData
-<script setup lang="ts">
-// SSR supported data fetching
-const { data: user, pending, error } = await useFetch<User>(
-  `/api/users/${props.userId}`
-);
-
-// With caching key
-const { data: posts } = await useAsyncData(
-  `user-${props.userId}-posts`,
-  () => $fetch(`/api/users/${props.userId}/posts`)
-);
-</script>
-
-// Good: Middleware
-// middleware/auth.ts
-export default defineNuxtRouteMiddleware((to, from) => {
-  const { isLoggedIn } = useUserStore();
-
-  if (!isLoggedIn && to.path !== '/login') {
-    return navigateTo('/login');
-  }
-});
-```
-
-### 6. Component Structure
-
-```vue
-<!-- Good: Recommended component structure -->
-<script setup lang="ts">
-// 1. Type imports
-import type { User, Item } from '@/types';
-
-// 2. Component imports
-import UserAvatar from '@/components/UserAvatar.vue';
-
-// 3. Props/Emits
-interface Props {
-  user: User;
-  editable?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  editable: false,
-});
-
-const emit = defineEmits<{
-  (e: 'update', user: User): void;
-}>();
-
-// 4. Composables
-const { isLoading, save } = useUserForm();
-
-// 5. Reactive state
-const formData = ref({ ...props.user });
-const isEditing = ref(false);
-
-// 6. Computed
-const canSave = computed(() =>
-  formData.value.name.length > 0 && !isLoading.value
-);
-
-// 7. Methods
-async function handleSave() {
-  await save(formData.value);
-  emit('update', formData.value);
-}
-
-// 8. Lifecycle
-onMounted(() => {
-  console.log('Component ready');
-});
-</script>
-
-<template>
-  <div class="user-card">
-    <UserAvatar :src="user.avatar" />
-    <h2>{{ user.name }}</h2>
-    <button
-      v-if="editable"
-      :disabled="!canSave"
-      @click="handleSave"
-    >
-      Save
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.user-card {
-  padding: 1rem;
-  border-radius: 8px;
-}
-</style>
-```
-
-## Anti-patterns
-
-```typescript
-// Bad: Using v-if and v-for together
-<li v-for="user in users" v-if="user.isActive">
-
-// Good: Filter with computed
-const activeUsers = computed(() => users.value.filter(u => u.isActive));
-<li v-for="user in activeUsers">
-
-// Bad: Mutating props directly
-props.user.name = 'New Name';
-
-// Good: Emit to parent
-emit('update', { ...props.user, name: 'New Name' });
-
-// Bad: Overusing $refs
-this.$refs.input.focus();
-
-// Good: template ref + expose
-const inputRef = ref<HTMLInputElement>();
-defineExpose({ focus: () => inputRef.value?.focus() });
-```
-
-## File Structure (Nuxt 3)
-
-```text
-project/
-├── components/
-│   ├── ui/              # Base UI components
-│   ├── features/        # Feature-specific components
-│   └── layouts/         # Layout components
-├── composables/         # Composition functions
-├── stores/              # Pinia stores
-├── server/
-│   ├── api/             # API routes
-│   ├── middleware/      # Server middleware
-│   └── utils/           # Server utilities
-├── pages/               # File-based routing
-├── middleware/          # Client middleware
-├── types/               # TypeScript types
-└── utils/               # Utility functions
-```
-
-## Checklist
-
-- [ ] Use Composition API + `<script setup>`
-- [ ] Define Props/Emits types
-- [ ] Separate logic with Composables
-- [ ] Use Pinia Setup Store style
-- [ ] No `any` type usage
-- [ ] Separate v-if/v-for
-- [ ] Use scoped styles