felvieira Mobile/Desktop Developer - Tauri v2 (OPCIONAL)
Skill OPCIONAL. Usa Tauri para empacotar o frontend web como app nativo para Android, Windows, macOS e Linux.
Governanca Global
Esta skill segue GLOBAL.md, policies/execution.md, policies/handoffs.md, policies/quality-gates.md, policies/token-efficiency.md, policies/stack-flexibility.md, policies/tool-safety.md e policies/evals.md.
Para setup detalhado, permissoes e builds nativos, consultar docs/skill-guides/mobile-tauri.md apenas quando necessario.
Quando Usar
- adaptar projeto web para app desktop ou mobile via Tauri
- configurar build nativo, permissao e integracao com APIs nativas
Quando Nao Usar
- quando o projeto nao precisa de distribuicao nativa
- para deploy web padrao sem camada nativa
Entradas Esperadas
- frontend web funcional
- restricoes de plataforma e distribuicao
- requisitos de permissao, storage e notificacao
Saidas Esperadas
- estrategia de empacotamento nativo
- configuracao de permissao e build coerentes
- handoff claro para QA/Deploy
Responsabilidades
- Configurar projeto Tauri no repositório existente
- Adaptar frontend para mobile/desktop (navegação, safe areas, responsividade)
- Gerar builds nativos (APK, .exe/.msi, .dmg, .deb/.AppImage)
- Configurar permissões nativas com princípio de menor privilégio
- Implementar features nativas (notificações, file system, shell)
- Otimizar performance para dispositivos mobile de baixo custo
Stack
Framework: Tauri v2
Frontend: Mesmo React/Next.js do projeto web
Side-car: Rust (via Tauri core)
Build: Cargo + Tauri CLI
Android: Tauri Android plugin → APK
Desktop: Windows (.exe/.msi), macOS (.dmg), Linux (.deb/.AppImage)
Setup
npm install -D @tauri-apps/cli@latest
npx tauri init
npm install @tauri-apps/api@latest
npm install @tauri-apps/plugin-notification @tauri-apps/plugin-fs @tauri-apps/plugin-shell @tauri-apps/plugin-http
Configuracao Base
{
"$schema": "https://raw.githubusercontent.com/nicogaldamez/tauri-schema/refs/heads/main/tauri.conf.json",
"build": {
"beforeBuildCommand": "npm run build",
"beforeDevCommand": "npm run dev",
"frontendDist": "../out",
"devUrl": "http://localhost:3000"
},
"productName": "MeuApp",
"version": "1.0.0",
"identifier": "com.empresa.meuapp",
"app": {
"security": {
"csp": "default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.empresa.com"
},
"windows": [
{
"title": "MeuApp",
"width": 1024,
"height": 768,
"minWidth": 360,
"minHeight": 640,
"resizable": true,
"fullscreen": false
}
]
},
"bundle": {
"active": true,
"icon": [
"icons/32x32.png",
"icons/128x128.png",
"icons/128x128@2x.png",
"icons/icon.icns",
"icons/icon.ico"
],
"targets": "all",
"windows": {
"wix": {
"language": "pt-BR"
}
},
"macOS": {
"minimumSystemVersion": "10.15"
},
"linux": {
"deb": {
"depends": ["libwebkit2gtk-4.1-0", "libssl3"]
}
}
},
"plugins": {
"notification": {
"enabled": true
},
"fs": {
"scope": {
"allow": ["$APPDATA/**", "$DOWNLOAD/**"],
"deny": ["$HOME/.ssh/**"]
}
}
}
}
Adaptacoes Mobile
Deteccao de Plataforma
import { platform } from '@tauri-apps/plugin-os';
function isTauri(): boolean {
return typeof window !== 'undefined' && '__TAURI__' in window;
}
async function getPlatform(): Promise<'android' | 'ios' | 'windows' | 'macos' | 'linux' | 'web'> {
if (!isTauri()) return 'web';
const p = await platform();
return p as 'android' | 'ios' | 'windows' | 'macos' | 'linux';
}
Hook de Navegacao Mobile
import { useState, useEffect } from 'react';
interface MobileNavState {
showBackButton: boolean;
showBottomNav: boolean;
showSidebar: boolean;
safeAreaInsets: {
top: number;
bottom: number;
left: number;
right: number;
};
}
function useMobileNavigation(): MobileNavState {
const [state, setState] = useState<MobileNavState>({
showBackButton: false,
showBottomNav: false,
showSidebar: true,
safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 },
});
useEffect(() => {
async function detect() {
const p = await getPlatform();
const isMobile = p === 'android' || p === 'ios';
setState({
showBackButton: isMobile,
showBottomNav: isMobile,
showSidebar: !isMobile,
safeAreaInsets: isMobile
? { top: 44, bottom: 34, left: 0, right: 0 }
: { top: 0, bottom: 0, left: 0, right: 0 },
});
}
detect();
}, []);
return state;
}
CSS Safe Areas
:root {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
--safe-area-left: env(safe-area-inset-left, 0px);
--safe-area-right: env(safe-area-inset-right, 0px);
}
.app-container {
padding-top: var(--safe-area-top);
padding-bottom: var(--safe-area-bottom);
padding-left: var(--safe-area-left);
padding-right: var(--safe-area-right);
min-height: 100dvh;
}
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: var(--safe-area-bottom);
background: white;
border-top: 1px solid #e5e7eb;
z-index: 50;
}
.top-header {
position: sticky;
top: 0;
padding-top: var(--safe-area-top);
background: white;
border-bottom: 1px solid #e5e7eb;
z-index: 50;
}
Comandos de Build
npx tauri dev
npx tauri build
npx tauri android build --apk
npx tauri android dev
Setup Android
Pre-requisitos
Android Studio com SDK 33+, NDK 25+, Build Tools 33+. JAVA_HOME apontando para JDK 17.
export ANDROID_HOME="$HOME/Android/Sdk"
export NDK_HOME="$ANDROID_HOME/ndk/25.2.9519653"
export JAVA_HOME="/usr/lib/jvm/java-17-openjdk"
export PATH="$PATH:$ANDROID_HOME/platform-tools:$ANDROID_HOME/tools"
Init e Build
npx tauri android init
npx tauri android build --apk
O APK gerado fica em src-tauri/gen/android/app/build/outputs/apk/universal/release/.
Features Nativas
Notificacoes
import {
isPermissionGranted,
requestPermission,
sendNotification,
} from '@tauri-apps/plugin-notification';
async function notify(title: string, body: string): Promise<void> {
let granted = await isPermissionGranted();
if (!granted) {
const permission = await requestPermission();
granted = permission === 'granted';
}
if (!granted) return;
sendNotification({ title, body });
}
File System
import { writeTextFile, readTextFile, BaseDirectory } from '@tauri-apps/plugin-fs';
async function saveData(filename: string, data: Record<string, unknown>): Promise<void> {
await writeTextFile(filename, JSON.stringify(data, null, 2), {
baseDir: BaseDirectory.AppData,
});
}
async function loadData<T>(filename: string): Promise<T | null> {
try {
const content = await readTextFile(filename, {
baseDir: BaseDirectory.AppData,
});
return JSON.parse(content) as T;
} catch {
return null;
}
}
Checklist Pre-Build
Permissoes minimas configuradas (allowlist restritivo)
CSP configurado no tauri.conf.json
Icones gerados para todas as plataformas (32, 128, 256, 512, icns, ico)
Splash screen configurada para Android
Deep links configurados (se aplicavel)
Auto-update configurado para desktop (se aplicavel)
Testado em dispositivo real (Android + desktop)
Performance validada em dispositivo de baixo custo
Fallback offline implementado para features criticas
Assinatura de APK configurada para release
Checkpoint: rodar o build de release (não o dev) para cada plataforma alvo → instalar no dispositivo real (não só emulador) → testar as features nativas e o fallback offline de verdade (modo avião, não só "deveria funcionar"). Se algo falhar só no build de release (permissão faltando, CSP bloqueando request que funcionava em dev), corrigir a config e repetir o build completo — não patchear no dispositivo e considerar resolvido.
Evidencia de Conclusao
- build e permissao planejados com menor privilegio
- impacto de mobile/desktop documentado
- riscos de distribuicao e QA destacados
Handoff
Recebe do Frontend
- App web funcional com build de producao
- Assets (icones, splash) em alta resolucao
- Lista de features que precisam de acesso nativo
- Variaveis de ambiente documentadas
Entrega para QA
- APK de debug e release assinado
- Executaveis desktop (Windows, macOS, Linux)
- Lista de permissoes nativas utilizadas e justificativa
- Instrucoes de instalacao por plataforma
- Matriz de features nativas vs web (o que funciona em cada)
Regra de Codigo
Comentarios no codigo so fazem sentido quando explicam contexto nao obvio, restricoes externas ou workarounds temporarios. Nomes de funcoes, variaveis e tipos devem ser autoexplicativos.