elsabro 2.1.0 → 2.3.0

package/skills/desktop-app.md

@@ -0,0 +1,1351 @@
+---
+name: desktop-app
+description: Crear aplicaciones de escritorio multiplataforma con Tauri, React y Vite
+tags: [desktop, tauri, react, cross-platform, windows, macos, linux, native]
+difficulty: intermediate
+estimated_time: 30min
+---
+
+# Skill: Desktop App
+
+<when_to_use>
+Usar cuando el usuario menciona:
+- "aplicacion de escritorio"
+- "app nativa"
+- "tauri"
+- "electron alternative"
+- "desktop multiplataforma"
+- "app para Windows/Mac/Linux"
+- "aplicacion instalable"
+</when_to_use>
+
+<pre_requisites>
+## Pre-requisitos
+- Node.js 20+
+- Rust (instalado via rustup)
+- Dependencias del sistema:
+  - **macOS:** Xcode Command Line Tools
+  - **Windows:** Visual Studio Build Tools, WebView2
+  - **Linux:** webkit2gtk, libayatana-appindicator
+</pre_requisites>
+
+<tech_stack>
+## Stack Tecnologico
+| Categoria | Tecnologia | Version |
+|-----------|------------|---------|
+| Framework | Tauri | 2.x |
+| Frontend | React | 19.x |
+| Bundler | Vite | 6.x |
+| Language | TypeScript | 5.x |
+| Styling | Tailwind CSS | 4.x |
+| State | Zustand | 5.x |
+| Testing | Vitest + Playwright | 2.x |
+| Backend | Rust | stable |
+</tech_stack>
+
+<project_structure>
+## Estructura de Proyecto
+```
+my-desktop-app/
+├── src/                      # Frontend (React)
+│   ├── components/
+│   │   ├── ui/
+│   │   │   ├── Button.tsx
+│   │   │   └── Input.tsx
+│   │   └── layout/
+│   │       ├── Sidebar.tsx
+│   │       └── Titlebar.tsx
+│   ├── hooks/
+│   │   ├── useTauri.ts
+│   │   └── useStore.ts
+│   ├── stores/
+│   │   └── appStore.ts
+│   ├── lib/
+│   │   ├── tauri.ts          # Tauri API wrappers
+│   │   └── utils.ts
+│   ├── App.tsx
+│   ├── main.tsx
+│   └── index.css
+├── src-tauri/                # Backend (Rust)
+│   ├── src/
+│   │   ├── main.rs
+│   │   ├── lib.rs
+│   │   └── commands/
+│   │       ├── mod.rs
+│   │       └── file_ops.rs
+│   ├── icons/
+│   ├── capabilities/
+│   │   └── default.json
+│   ├── Cargo.toml
+│   ├── tauri.conf.json
+│   └── build.rs
+├── tests/
+│   ├── unit/
+│   │   └── components.test.tsx
+│   └── e2e/
+│       └── app.spec.ts
+├── package.json
+├── vite.config.ts
+├── tailwind.config.ts
+├── tsconfig.json
+└── README.md
+```
+</project_structure>
+
+<setup_steps>
+## Pasos de Setup
+
+### 1. Instalar Prerrequisitos
+
+**macOS:**
+```bash
+xcode-select --install
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+**Windows (PowerShell como Admin):**
+```powershell
+winget install Rustlang.Rustup
+# Instalar VS Build Tools desde https://visualstudio.microsoft.com/visual-cpp-build-tools/
+```
+
+**Linux (Ubuntu/Debian):**
+```bash
+sudo apt update
+sudo apt install libwebkit2gtk-4.1-dev build-essential curl wget file \
+  libxdo-dev libssl-dev libayatana-appindicator3-dev librsvg2-dev
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+### 2. Crear Proyecto Tauri
+
+```bash
+# Usando create-tauri-app
+npm create tauri-app@latest my-desktop-app -- --template react-ts
+
+cd my-desktop-app
+npm install
+```
+
+### 3. Instalar Dependencias Adicionales
+
+```bash
+# Frontend dependencies
+npm install zustand @tauri-apps/api@2
+
+# Styling
+npm install -D tailwindcss@4 @tailwindcss/vite
+
+# Testing
+npm install -D vitest @testing-library/react @testing-library/jest-dom
+npm install -D @playwright/test
+```
+
+### 4. Configurar Tailwind CSS v4
+
+**vite.config.ts:**
+```typescript
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  clearScreen: false,
+  server: {
+    port: 1420,
+    strictPort: true,
+    host: host || false,
+    hmr: host
+      ? {
+          protocol: 'ws',
+          host,
+          port: 1421,
+        }
+      : undefined,
+    watch: {
+      ignored: ['**/src-tauri/**'],
+    },
+  },
+});
+```
+
+**src/index.css:**
+```css
+@import "tailwindcss";
+
+@theme {
+  --color-primary: #3b82f6;
+  --color-secondary: #64748b;
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+
+/* Custom titlebar styles */
+.titlebar {
+  -webkit-app-region: drag;
+  user-select: none;
+}
+
+.titlebar-button {
+  -webkit-app-region: no-drag;
+}
+```
+
+### 5. Configurar Tauri
+
+**src-tauri/tauri.conf.json:**
+```json
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "My Desktop App",
+  "identifier": "com.myapp.desktop",
+  "version": "0.1.0",
+  "build": {
+    "beforeDevCommand": "npm run dev",
+    "devUrl": "http://localhost:1420",
+    "beforeBuildCommand": "npm run build",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "withGlobalTauri": true,
+    "windows": [
+      {
+        "title": "My Desktop App",
+        "width": 1200,
+        "height": 800,
+        "minWidth": 800,
+        "minHeight": 600,
+        "resizable": true,
+        "fullscreen": false,
+        "decorations": true,
+        "transparent": false,
+        "center": true
+      }
+    ],
+    "security": {
+      "csp": "default-src 'self'; img-src 'self' asset: https://asset.localhost"
+    }
+  },
+  "bundle": {
+    "active": true,
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.icns",
+      "icons/icon.ico"
+    ],
+    "targets": "all",
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": ""
+    },
+    "macOS": {
+      "entitlements": null,
+      "exceptionDomain": "",
+      "frameworks": [],
+      "minimumSystemVersion": "10.15",
+      "signingIdentity": null
+    },
+    "linux": {
+      "deb": {
+        "depends": []
+      },
+      "appimage": {
+        "bundleMediaFramework": true
+      }
+    }
+  }
+}
+```
+
+### 6. Configurar Capabilities
+
+**src-tauri/capabilities/default.json:**
+```json
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "identifier": "default",
+  "description": "Default permissions for the app",
+  "windows": ["main"],
+  "permissions": [
+    "core:default",
+    "core:window:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-close",
+    "core:window:allow-minimize",
+    "core:window:allow-maximize",
+    "core:window:allow-set-size",
+    "dialog:default",
+    "dialog:allow-open",
+    "dialog:allow-save",
+    "fs:default",
+    "fs:allow-read-text-file",
+    "fs:allow-write-text-file",
+    "shell:allow-open",
+    "notification:default"
+  ]
+}
+```
+
+### 7. Crear Backend Rust
+
+**src-tauri/src/main.rs:**
+```rust
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod commands;
+
+use commands::file_ops;
+
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .plugin(tauri_plugin_fs::init())
+        .plugin(tauri_plugin_shell::init())
+        .plugin(tauri_plugin_notification::init())
+        .invoke_handler(tauri::generate_handler![
+            file_ops::read_file,
+            file_ops::write_file,
+            file_ops::get_app_info,
+        ])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+
+**src-tauri/src/commands/mod.rs:**
+```rust
+pub mod file_ops;
+```
+
+**src-tauri/src/commands/file_ops.rs:**
+```rust
+use std::fs;
+use std::path::PathBuf;
+use tauri::Manager;
+
+#[derive(serde::Serialize)]
+pub struct AppInfo {
+    pub name: String,
+    pub version: String,
+    pub data_dir: String,
+}
+
+#[tauri::command]
+pub fn read_file(path: String) -> Result<String, String> {
+    fs::read_to_string(&path).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn write_file(path: String, contents: String) -> Result<(), String> {
+    fs::write(&path, contents).map_err(|e| e.to_string())
+}
+
+#[tauri::command]
+pub fn get_app_info(app: tauri::AppHandle) -> Result<AppInfo, String> {
+    let config = app.config();
+    let data_dir = app
+        .path()
+        .app_data_dir()
+        .map_err(|e| e.to_string())?
+        .to_string_lossy()
+        .to_string();
+
+    Ok(AppInfo {
+        name: config.product_name.clone().unwrap_or_default(),
+        version: config.version.clone().unwrap_or_default(),
+        data_dir,
+    })
+}
+```
+
+**src-tauri/Cargo.toml:**
+```toml
+[package]
+name = "my-desktop-app"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+edition = "2021"
+
+[lib]
+name = "my_desktop_app_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+tauri-plugin-dialog = "2"
+tauri-plugin-fs = "2"
+tauri-plugin-shell = "2"
+tauri-plugin-notification = "2"
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+```
+
+### 8. Crear Frontend React
+
+**src/main.tsx:**
+```typescript
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+
+**src/App.tsx:**
+```typescript
+import { useState } from 'react';
+import { Titlebar } from './components/layout/Titlebar';
+import { Sidebar } from './components/layout/Sidebar';
+import { Button } from './components/ui/Button';
+import { useAppStore } from './stores/appStore';
+import { useTauri } from './hooks/useTauri';
+
+function App() {
+  const { appInfo, isLoading } = useTauri();
+  const { theme, toggleTheme } = useAppStore();
+  const [content, setContent] = useState('');
+
+  const handleOpenFile = async () => {
+    const { open } = await import('@tauri-apps/plugin-dialog');
+    const { readTextFile } = await import('@tauri-apps/plugin-fs');
+
+    const selected = await open({
+      multiple: false,
+      filters: [{ name: 'Text', extensions: ['txt', 'md', 'json'] }],
+    });
+
+    if (selected) {
+      const text = await readTextFile(selected as string);
+      setContent(text);
+    }
+  };
+
+  const handleSaveFile = async () => {
+    const { save } = await import('@tauri-apps/plugin-dialog');
+    const { writeTextFile } = await import('@tauri-apps/plugin-fs');
+
+    const path = await save({
+      filters: [{ name: 'Text', extensions: ['txt'] }],
+    });
+
+    if (path) {
+      await writeTextFile(path, content);
+    }
+  };
+
+  return (
+    <div className={`h-screen flex flex-col ${theme === 'dark' ? 'dark' : ''}`}>
+      <Titlebar />
+
+      <div className="flex flex-1 overflow-hidden">
+        <Sidebar />
+
+        <main className="flex-1 p-6 bg-white dark:bg-gray-900 overflow-auto">
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
+              {appInfo?.name || 'Loading...'}
+            </h1>
+
+            <p className="text-gray-600 dark:text-gray-400 mb-6">
+              Version: {appInfo?.version || '-'}
+            </p>
+
+            <div className="flex gap-4 mb-6">
+              <Button onClick={handleOpenFile}>Open File</Button>
+              <Button onClick={handleSaveFile} variant="secondary">
+                Save File
+              </Button>
+              <Button onClick={toggleTheme} variant="ghost">
+                Toggle Theme
+              </Button>
+            </div>
+
+            <textarea
+              className="w-full h-64 p-4 border rounded-lg
+                         bg-gray-50 dark:bg-gray-800
+                         text-gray-900 dark:text-white
+                         border-gray-200 dark:border-gray-700
+                         focus:ring-2 focus:ring-primary focus:border-transparent"
+              value={content}
+              onChange={(e) => setContent(e.target.value)}
+              placeholder="Open a file or start typing..."
+            />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
+
+export default App;
+```
+
+**src/components/layout/Titlebar.tsx:**
+```typescript
+import { getCurrentWindow } from '@tauri-apps/api/window';
+
+export function Titlebar() {
+  const appWindow = getCurrentWindow();
+
+  const handleMinimize = () => appWindow.minimize();
+  const handleMaximize = () => appWindow.toggleMaximize();
+  const handleClose = () => appWindow.close();
+
+  return (
+    <div className="titlebar h-8 bg-gray-100 dark:bg-gray-800 flex items-center justify-between px-4">
+      <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+        My Desktop App
+      </span>
+
+      <div className="flex gap-2">
+        <button
+          onClick={handleMinimize}
+          className="titlebar-button w-6 h-6 rounded hover:bg-gray-200 dark:hover:bg-gray-700
+                     text-gray-600 dark:text-gray-400 flex items-center justify-center"
+        >
+          <MinusIcon />
+        </button>
+        <button
+          onClick={handleMaximize}
+          className="titlebar-button w-6 h-6 rounded hover:bg-gray-200 dark:hover:bg-gray-700
+                     text-gray-600 dark:text-gray-400 flex items-center justify-center"
+        >
+          <SquareIcon />
+        </button>
+        <button
+          onClick={handleClose}
+          className="titlebar-button w-6 h-6 rounded hover:bg-red-500 hover:text-white
+                     text-gray-600 dark:text-gray-400 flex items-center justify-center"
+        >
+          <XIcon />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const MinusIcon = () => (
+  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M20 12H4" />
+  </svg>
+);
+
+const SquareIcon = () => (
+  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <rect x="4" y="4" width="16" height="16" rx="1" strokeWidth={2} />
+  </svg>
+);
+
+const XIcon = () => (
+  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+  </svg>
+);
+```
+
+**src/components/layout/Sidebar.tsx:**
+```typescript
+interface NavItem {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+const navItems: NavItem[] = [
+  { id: 'home', label: 'Home', icon: <HomeIcon /> },
+  { id: 'files', label: 'Files', icon: <FolderIcon /> },
+  { id: 'settings', label: 'Settings', icon: <SettingsIcon /> },
+];
+
+export function Sidebar() {
+  return (
+    <aside className="w-64 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
+      <nav className="p-4">
+        <ul className="space-y-2">
+          {navItems.map((item) => (
+            <li key={item.id}>
+              <button
+                className="w-full flex items-center gap-3 px-3 py-2 rounded-lg
+                           text-gray-700 dark:text-gray-300
+                           hover:bg-gray-100 dark:hover:bg-gray-700
+                           transition-colors"
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </aside>
+  );
+}
+
+const HomeIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+  </svg>
+);
+
+const FolderIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+  </svg>
+);
+```
+
+**src/components/ui/Button.tsx:**
+```typescript
+import { ButtonHTMLAttributes, forwardRef } from 'react';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = '', variant = 'primary', size = 'md', children, ...props }, ref) => {
+    const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
+
+    const variants = {
+      primary: 'bg-primary text-white hover:bg-blue-600 focus:ring-primary',
+      secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
+      ghost: 'bg-transparent text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800',
+    };
+
+    const sizes = {
+      sm: 'px-3 py-1.5 text-sm',
+      md: 'px-4 py-2 text-base',
+      lg: 'px-6 py-3 text-lg',
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+```
+
+**src/components/ui/Input.tsx:**
+```typescript
+import { InputHTMLAttributes, forwardRef } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className = '', label, error, ...props }, ref) => {
+    return (
+      <div className="flex flex-col gap-1">
+        {label && (
+          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {label}
+          </label>
+        )}
+        <input
+          ref={ref}
+          className={`px-4 py-2 rounded-lg border
+                     bg-white dark:bg-gray-800
+                     text-gray-900 dark:text-white
+                     border-gray-300 dark:border-gray-600
+                     focus:ring-2 focus:ring-primary focus:border-transparent
+                     disabled:opacity-50 disabled:cursor-not-allowed
+                     ${error ? 'border-red-500' : ''} ${className}`}
+          {...props}
+        />
+        {error && <span className="text-sm text-red-500">{error}</span>}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+```
+
+### 9. Crear Hooks y Store
+
+**src/hooks/useTauri.ts:**
+```typescript
+import { useState, useEffect } from 'react';
+import { invoke } from '@tauri-apps/api/core';
+
+interface AppInfo {
+  name: string;
+  version: string;
+  data_dir: string;
+}
+
+export function useTauri() {
+  const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    async function fetchAppInfo() {
+      try {
+        const info = await invoke<AppInfo>('get_app_info');
+        setAppInfo(info);
+      } catch (err) {
+        setError(err as string);
+      } finally {
+        setIsLoading(false);
+      }
+    }
+
+    fetchAppInfo();
+  }, []);
+
+  return { appInfo, isLoading, error };
+}
+```
+
+**src/stores/appStore.ts:**
+```typescript
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface AppState {
+  theme: 'light' | 'dark';
+  sidebarOpen: boolean;
+  recentFiles: string[];
+  toggleTheme: () => void;
+  toggleSidebar: () => void;
+  addRecentFile: (path: string) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  persist(
+    (set) => ({
+      theme: 'light',
+      sidebarOpen: true,
+      recentFiles: [],
+
+      toggleTheme: () =>
+        set((state) => ({
+          theme: state.theme === 'light' ? 'dark' : 'light',
+        })),
+
+      toggleSidebar: () =>
+        set((state) => ({
+          sidebarOpen: !state.sidebarOpen,
+        })),
+
+      addRecentFile: (path) =>
+        set((state) => ({
+          recentFiles: [path, ...state.recentFiles.filter((p) => p !== path)].slice(0, 10),
+        })),
+    }),
+    {
+      name: 'app-storage',
+    }
+  )
+);
+```
+
+**src/lib/tauri.ts:**
+```typescript
+import { invoke } from '@tauri-apps/api/core';
+
+export async function readFile(path: string): Promise<string> {
+  return invoke<string>('read_file', { path });
+}
+
+export async function writeFile(path: string, contents: string): Promise<void> {
+  return invoke('write_file', { path, contents });
+}
+
+export async function showNotification(title: string, body: string): Promise<void> {
+  const { sendNotification } = await import('@tauri-apps/plugin-notification');
+  await sendNotification({ title, body });
+}
+```
+
+### 10. Crear Tests
+
+**tests/unit/components.test.tsx:**
+```typescript
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from '../../src/components/ui/Button';
+import { Input } from '../../src/components/ui/Input';
+
+// Mock Tauri APIs
+vi.mock('@tauri-apps/api/core', () => ({
+  invoke: vi.fn(),
+}));
+
+vi.mock('@tauri-apps/api/window', () => ({
+  getCurrentWindow: () => ({
+    minimize: vi.fn(),
+    toggleMaximize: vi.fn(),
+    close: vi.fn(),
+  }),
+}));
+
+describe('Button Component', () => {
+  it('renders with children', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('handles click events', () => {
+    const handleClick = vi.fn();
+    render(<Button onClick={handleClick}>Click me</Button>);
+
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies variant styles', () => {
+    const { rerender } = render(<Button variant="primary">Primary</Button>);
+    expect(screen.getByText('Primary')).toHaveClass('bg-primary');
+
+    rerender(<Button variant="secondary">Secondary</Button>);
+    expect(screen.getByText('Secondary')).toHaveClass('bg-gray-200');
+  });
+
+  it('applies size styles', () => {
+    const { rerender } = render(<Button size="sm">Small</Button>);
+    expect(screen.getByText('Small')).toHaveClass('text-sm');
+
+    rerender(<Button size="lg">Large</Button>);
+    expect(screen.getByText('Large')).toHaveClass('text-lg');
+  });
+});
+
+describe('Input Component', () => {
+  it('renders with label', () => {
+    render(<Input label="Email" />);
+    expect(screen.getByText('Email')).toBeInTheDocument();
+  });
+
+  it('shows error message', () => {
+    render(<Input error="Invalid input" />);
+    expect(screen.getByText('Invalid input')).toBeInTheDocument();
+  });
+
+  it('forwards ref', () => {
+    const ref = { current: null };
+    render(<Input ref={ref} />);
+    expect(ref.current).toBeInstanceOf(HTMLInputElement);
+  });
+});
+```
+
+**tests/e2e/app.spec.ts:**
+```typescript
+import { test, expect, _electron as electron } from '@playwright/test';
+import { join } from 'path';
+
+test.describe('Desktop App E2E', () => {
+  test.skip('should launch and display main window', async () => {
+    // This test requires a built app
+    const appPath = join(__dirname, '../../src-tauri/target/release/my-desktop-app');
+
+    const electronApp = await electron.launch({ executablePath: appPath });
+    const window = await electronApp.firstWindow();
+
+    // Wait for the app to load
+    await window.waitForSelector('text=My Desktop App');
+
+    // Take screenshot
+    await window.screenshot({ path: 'tests/screenshots/main-window.png' });
+
+    await electronApp.close();
+  });
+});
+```
+
+**vitest.config.ts:**
+```typescript
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+    include: ['tests/unit/**/*.test.{ts,tsx}'],
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});
+```
+
+**tests/setup.ts:**
+```typescript
+import '@testing-library/jest-dom';
+```
+</setup_steps>
+
+<verification>
+## Verificacion
+
+### Desarrollo Local
+
+```bash
+# Iniciar en modo desarrollo
+npm run tauri dev
+
+# Solo frontend (sin Tauri)
+npm run dev
+```
+
+### Ejecutar Tests
+
+```bash
+# Tests unitarios
+npm run test
+
+# Tests con coverage
+npm run test:coverage
+
+# Tests E2E (requiere build)
+npm run test:e2e
+```
+
+### Build de Produccion
+
+```bash
+# Build para la plataforma actual
+npm run tauri build
+
+# El instalador estara en:
+# - macOS: src-tauri/target/release/bundle/dmg/
+# - Windows: src-tauri/target/release/bundle/msi/
+# - Linux: src-tauri/target/release/bundle/deb/ o appimage/
+```
+</verification>
+
+<building>
+## Build Multiplataforma
+
+### Build Local
+
+```bash
+# Build para tu plataforma actual
+npm run tauri build
+
+# Build con debug info
+npm run tauri build -- --debug
+```
+
+### Build para Windows
+
+```bash
+# Desde Windows
+npm run tauri build
+
+# Cross-compile desde Linux/macOS (requiere toolchain)
+rustup target add x86_64-pc-windows-msvc
+npm run tauri build -- --target x86_64-pc-windows-msvc
+```
+
+### Build para macOS
+
+```bash
+# Desde macOS
+npm run tauri build
+
+# Universal binary (Intel + Apple Silicon)
+npm run tauri build -- --target universal-apple-darwin
+```
+
+### Build para Linux
+
+```bash
+# Desde Linux
+npm run tauri build
+
+# Targets especificos
+npm run tauri build -- --bundles deb
+npm run tauri build -- --bundles appimage
+npm run tauri build -- --bundles rpm
+```
+
+### GitHub Actions CI/CD
+
+**.github/workflows/build.yml:**
+```yaml
+name: Build
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: macos-latest
+            args: --target universal-apple-darwin
+          - platform: ubuntu-22.04
+            args: ''
+          - platform: windows-latest
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install Rust
+        uses: dtolnay/rust-action@stable
+
+      - name: Install dependencies (Ubuntu)
+        if: matrix.platform == 'ubuntu-22.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libwebkit2gtk-4.1-dev libayatana-appindicator3-dev librsvg2-dev
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Build Tauri app
+        uses: tauri-apps/tauri-action@v0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tagName: v__VERSION__
+          releaseName: 'v__VERSION__'
+          releaseBody: 'See the assets to download this version.'
+          releaseDraft: true
+          prerelease: false
+          args: ${{ matrix.args }}
+```
+</building>
+
+<common_issues>
+## Problemas Comunes
+
+### WebView2 no instalado (Windows)
+
+**Problema:** App no inicia en Windows.
+
+**Solucion:**
+```bash
+# Bundlear WebView2 con la app
+# En tauri.conf.json:
+{
+  "bundle": {
+    "windows": {
+      "webviewInstallMode": {
+        "type": "embedBootstrapper"
+      }
+    }
+  }
+}
+```
+
+### Permisos de archivo denegados
+
+**Problema:** No puede leer/escribir archivos.
+
+**Solucion:** Verificar capabilities en `src-tauri/capabilities/default.json`:
+```json
+{
+  "permissions": [
+    "fs:default",
+    "fs:allow-read-text-file",
+    "fs:allow-write-text-file"
+  ]
+}
+```
+
+### Build falla en Linux
+
+**Problema:** Missing webkit2gtk.
+
+**Solucion:**
+```bash
+# Ubuntu/Debian
+sudo apt install libwebkit2gtk-4.1-dev
+
+# Fedora
+sudo dnf install webkit2gtk4.1-devel
+
+# Arch
+sudo pacman -S webkit2gtk-4.1
+```
+
+### App muy grande
+
+**Problema:** El bundle es muy pesado.
+
+**Solucion:**
+```toml
+# Cargo.toml - Release profile
+[profile.release]
+lto = true
+opt-level = "s"
+codegen-units = 1
+panic = "abort"
+strip = true
+```
+
+### Hot reload no funciona
+
+**Problema:** Cambios no se reflejan.
+
+**Solucion:**
+```typescript
+// vite.config.ts
+export default defineConfig({
+  server: {
+    watch: {
+      // No ignorar src-tauri si necesitas recargar el backend
+      ignored: ['**/src-tauri/target/**'],
+    },
+  },
+});
+```
+
+### Invoke no encuentra comando
+
+**Problema:** `invoke('my_command')` falla.
+
+**Solucion:**
+```rust
+// Verificar que el comando esta registrado en main.rs
+.invoke_handler(tauri::generate_handler![
+    my_command,  // <- Debe estar aqui
+])
+```
+
+### Iconos no aparecen
+
+**Problema:** App sin icono en dock/taskbar.
+
+**Solucion:**
+```bash
+# Generar iconos en todos los tamanos
+npm run tauri icon /path/to/icon.png
+
+# O manualmente agregar en src-tauri/icons/:
+# - 32x32.png
+# - 128x128.png
+# - 128x128@2x.png
+# - icon.icns (macOS)
+# - icon.ico (Windows)
+```
+</common_issues>
+
+<best_practices>
+## Mejores Practicas
+
+### Seguridad
+
+```rust
+// Validar paths antes de operaciones de archivo
+#[tauri::command]
+fn read_file(app: tauri::AppHandle, path: String) -> Result<String, String> {
+    let app_dir = app.path().app_data_dir().map_err(|e| e.to_string())?;
+
+    // Solo permitir archivos dentro del directorio de la app
+    let canonical = std::fs::canonicalize(&path).map_err(|e| e.to_string())?;
+    if !canonical.starts_with(&app_dir) {
+        return Err("Access denied".to_string());
+    }
+
+    std::fs::read_to_string(&path).map_err(|e| e.to_string())
+}
+```
+
+### Performance
+
+```typescript
+// Lazy load modulos pesados
+const loadHeavyModule = async () => {
+  const { HeavyComponent } = await import('./HeavyComponent');
+  return HeavyComponent;
+};
+
+// Usar web workers para operaciones pesadas
+const worker = new Worker(new URL('./worker.ts', import.meta.url));
+```
+
+### Estado Persistente
+
+```typescript
+// Usar Zustand persist para guardar estado
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+const useStore = create(
+  persist(
+    (set) => ({
+      // state
+    }),
+    {
+      name: 'app-storage',
+      storage: createJSONStorage(() => localStorage),
+    }
+  )
+);
+```
+
+### Comunicacion IPC Eficiente
+
+```rust
+// Usar eventos para comunicacion continua
+#[tauri::command]
+fn start_watching(window: tauri::Window) {
+    std::thread::spawn(move || {
+        loop {
+            window.emit("update", serde_json::json!({ "status": "ok" })).unwrap();
+            std::thread::sleep(std::time::Duration::from_secs(1));
+        }
+    });
+}
+```
+
+```typescript
+// Frontend - escuchar eventos
+import { listen } from '@tauri-apps/api/event';
+
+const unlisten = await listen('update', (event) => {
+  console.log('Update:', event.payload);
+});
+
+// Cleanup
+unlisten();
+```
+</best_practices>
+
+<examples>
+## Ejemplos de Uso
+
+### App Basica
+
+```bash
+# Crear proyecto
+npm create tauri-app@latest my-app -- --template react-ts
+cd my-app
+
+# Desarrollo
+npm run tauri dev
+
+# Build
+npm run tauri build
+```
+
+### Con Base de Datos SQLite
+
+```toml
+# Cargo.toml
+[dependencies]
+rusqlite = { version = "0.31", features = ["bundled"] }
+```
+
+```rust
+use rusqlite::Connection;
+
+#[tauri::command]
+fn init_db(app: tauri::AppHandle) -> Result<(), String> {
+    let db_path = app.path().app_data_dir()
+        .map_err(|e| e.to_string())?
+        .join("data.db");
+
+    let conn = Connection::open(db_path).map_err(|e| e.to_string())?;
+
+    conn.execute(
+        "CREATE TABLE IF NOT EXISTS items (
+            id INTEGER PRIMARY KEY,
+            name TEXT NOT NULL,
+            created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+        )",
+        [],
+    ).map_err(|e| e.to_string())?;
+
+    Ok(())
+}
+```
+
+### Con System Tray
+
+```json
+// tauri.conf.json
+{
+  "app": {
+    "trayIcon": {
+      "iconPath": "icons/tray-icon.png",
+      "iconAsTemplate": true
+    }
+  }
+}
+```
+
+```rust
+// main.rs
+use tauri::{
+    menu::{Menu, MenuItem},
+    tray::TrayIconBuilder,
+};
+
+fn main() {
+    tauri::Builder::default()
+        .setup(|app| {
+            let quit = MenuItem::with_id(app, "quit", "Quit", true, None::<&str>)?;
+            let menu = Menu::with_items(app, &[&quit])?;
+
+            TrayIconBuilder::new()
+                .icon(app.default_window_icon().unwrap().clone())
+                .menu(&menu)
+                .on_menu_event(|app, event| match event.id.as_ref() {
+                    "quit" => app.exit(0),
+                    _ => {}
+                })
+                .build(app)?;
+
+            Ok(())
+        })
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+```
+</examples>