ganbatte-os 0.2.1

package/skills/frontend-dev/SKILL.md

@@ -0,0 +1,271 @@
+---
+name: fe
+description: Frontend developer mode for React, Next.js, or Vue/WeWeb projects. Use when asked to build or modify frontend components, pages, hooks, composables, or UI work. Enforces scalable architecture patterns (feature-folders, service layer, state hierarchy).
+argument-hint: "[component or feature description]"
+use-when:
+  - criar ou modificar componentes frontend (React, Next.js, Vue, WeWeb)
+  - trabalhar com paginas, hooks, composables, ou UI
+  - criar componentes WeWeb customizados
+  - modificar wwElement.vue ou ww-config.js
+do-not-use-for:
+  - diagnosticar componentes WeWeb com falha (use weweb-debug)
+  - trabalho backend ou API (use be)
+metadata:
+  category: mcp-enhancement
+---
+
+You are operating as a **Frontend Developer** for the G-OS project.
+
+## Task
+$ARGUMENTS
+
+## Architecture Reference
+
+**BEFORE writing any code**, read the architecture rule and applicable patterns library:
+- Rule: `./.G-OS/rules/react-architecture.md` — feature-based structure, service layer, state strategy
+- React patterns: `./.G-OS/libraries/frontend/react-patterns.md`
+- Next.js patterns: `./.G-OS/libraries/frontend/nextjs-patterns.md`
+- Vue/WeWeb patterns: `./.G-OS/libraries/frontend/vue-weweb-patterns.md`
+- WeWeb standalone local mode: `./.G-OS/libraries/frontend/weweb-local-dev.md`
+- Tailwind Variants: `./.G-OS/libraries/frontend/tailwind-variants.md` — tv() pattern
+- Base UI: `./.G-OS/libraries/frontend/base-ui.md` — headless components
+
+## Stack Detection
+
+Detect the project stack before proceeding:
+
+| Stack | Indicator | Patterns to Follow |
+|-------|-----------|-------------------|
+| React + Vite | `vite.config.ts` + no `next.config` | react-patterns.md |
+| Next.js | `next.config.js/ts` or `app/` dir | nextjs-patterns.md |
+| Vue/WeWeb | `wwElement.vue` or `ww-config.js` | vue-weweb-patterns.md + weweb-local-dev.md |
+| React (default) | Fallback | react-patterns.md |
+
+## Architecture Principles (All Frameworks)
+
+### 1. Feature-Based Structure
+- New feature = new folder under `features/` (or `src/features/`)
+- Each feature folder: `components/`, `hooks/` (or `composables/`), `services/`, `types.ts`, `index.ts`
+- Public API via `index.ts` — never import internal files across features
+- Component used by 1 feature = inside that feature. Used by 3+ = promote to shared
+
+### 2. Service Layer (mandatory)
+```
+Component → Hook/Composable → Service → HTTP Client
+  (UI)         (state)         (business)  (transport)
+```
+- Components NEVER call APIs directly
+- Services are pure functions/objects — no React/Vue state
+- Hooks/composables wire services to component state
+
+### 3. State Hierarchy
+- **UI-local**: `useState`/`ref()` — toggles, form inputs, modals
+- **Server data**: TanStack Query / VueQuery — API data with cache
+- **Global**: Zustand/Redux/Pinia — auth, theme, permissions only
+- **URL**: Router params — filters, pagination, search
+
+### 4. Component Responsibility
+- Presentation components: props in, events out, no logic
+- Container components: fetch data, manage state, compose UI
+- Split when component > 150 lines or mixes data fetching with complex UI
+
+## Stack-Specific Constraints (React + Vite — Default)
+
+- **Framework:** React 19 + Vite + TypeScript
+- **Routing:** TanStack Router v1 (`src/App.tsx`)
+- **UI:** shadcn/ui primitives + Tailwind CSS (CSS variables for theming)
+- **State/Data:** Supabase JS client + custom hooks in `src/hooks/`
+- **Tables:** TanStack Table
+
+## Pre-flight checklist (always run before writing code)
+
+1. Read `./.G-OS/agents/best-practices.system.md` and `./.G-OS/agents/uiux-planner.system.md` for the DoD of this work.
+2. Read `./.G-OS/rules/react-architecture.md` for architecture patterns.
+3. Check `src/lib/modulesRegistry.ts` — if adding a new page/route, **update `MODULES_REGISTRY`** first. `TAB_CONFIG` and `PAGE_REGISTRY` are derived from it.
+4. Check `src/lib/types.ts` for existing interfaces before defining new ones.
+5. Check `src/lib/hover-styles.ts` for interaction styles (`hover.ghost`, `hover.listItem`, `hover.card`).
+
+## Critical rules
+
+### Dark mode
+Dark mode is **DISABLED** (`DARK_MODE_ENABLED = false` in `useTheme.ts`). Do not add `dark:` Tailwind variants. Use CSS variable classes:
+```tsx
+className="bg-card text-foreground border-border"
+className="bg-muted text-muted-foreground"
+```
+
+### Responsive modals
+Always use `ResponsiveModal` (Dialog on desktop ≥640px, BottomSheet on mobile):
+```tsx
+import { ResponsiveModal } from '@/components/ui/responsive-modal';
+```
+
+### Toast notifications
+Use the 5 variants — **no emojis in titles** (icons render automatically):
+```tsx
+toast({ title: 'Criado com sucesso', variant: 'success' });
+toast({ title: 'Erro ao salvar', variant: 'destructive' });
+// variants: success | destructive | warning | info | default
+```
+
+### Async buttons
+Always add loading state to prevent double-clicks:
+```tsx
+const [loading, setLoading] = useState(false);
+const handleClick = async () => {
+  if (loading) return;
+  setLoading(true);
+  try { /* ... */ } finally { setLoading(false); }
+};
+<Button disabled={loading}>
+  {loading ? <Loader2 className="animate-spin" /> : <Icon />} Label
+</Button>
+```
+
+### Split view compatibility
+Pages that can appear in split view must use `h-full` (not `h-screen`):
+```tsx
+<div className="h-full overflow-auto"> {/* NOT h-screen */}
+```
+
+### Localhost-only features
+Gate scraping/validation features:
+```tsx
+const isLocal = (import.meta.env.VITE_API_URL || 'http://localhost:7001').includes('localhost');
+```
+
+### Permission gates
+Use `<PermissionGate>` to guard restricted UI:
+```tsx
+import { WriteGate, DeleteGate } from '@/components/PermissionGate';
+<WriteGate modulo="tarefas"><Button>Save</Button></WriteGate>
+```
+
+### npm on Windows
+```bash
+npm.cmd install <pkg>  # NOT npm install (may silently fail in Git Bash)
+```
+
+## WeWeb-Specific Constraints (Vue/WeWeb projects)
+
+When stack is Vue/WeWeb, these ADDITIONAL rules apply on top of the architecture principles above:
+
+### NON-NEGOTIABLE WeWeb Rules
+
+1. **Optional chaining OBRIGATORIO**: Todo acesso a `props.content` usa `?.` — `props.content?.title`, nunca `props.content.title`
+2. **computed() para dados de content**: NUNCA use `ref()` para dados derivados de `props.content`. Use `computed(() => props.content?.data || [])`
+3. **wwEditor blocks pareados**: Todo `/* wwEditor:start */` deve ter `/* wwEditor:end */` correspondente
+4. **wwLib para globals**: Use `wwLib.getFrontDocument()` / `wwLib.getFrontWindow()` — NUNCA `document` ou `window` direto
+5. **Root sem dimensoes fixas**: Root element sem `width`/`height` hardcoded, sem `position: fixed`, sem `padding`/`margin`
+6. **Single root element**: No fragments
+
+### Dual Script Pattern (RECOMENDADO)
+
+```vue
+<script>
+export default {
+  name: 'MyComponent',
+  wwDefaultContent: {
+    // ALL properties from ww-config.js
+  },
+}
+</script>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  content: { type: Object, default: () => ({}) },
+  uid: { type: String, default: '' },
+});
+const emit = defineEmits(['trigger-event']);
+// Logic here — imports auto-registered, refs auto-exposed
+</script>
+```
+
+### package.json Rules
+
+- `@weweb/cli: "latest"` (NUNCA versao fixa)
+- `sass` em devDependencies (WeWeb usa sass-loader)
+- ZERO pacotes npm privados
+- NO `"type": "module"`
+- NO build config files (webpack, vite, babel, tsconfig)
+- NO `vue` em dependencies (ja fornecido)
+
+### Debug
+
+Se o componente falha no build ou dashboard mostra "Failed", use a skill `weweb-debug` para diagnostico completo.
+
+## Design-to-Code Mode
+
+When the task involves converting a Figma design or screenshot to components, activate this mode.
+
+**Trigger signals:** "converter design", "Figma para codigo", "screenshot para componente", "implementar esse design", image attachment with UI design.
+
+### Stack detection for design-to-code
+
+| Stack indicator | Component pattern |
+|----------------|-------------------|
+| `tailwind-variants` in package.json | `tv()` + `twMerge()` + `data-slot` |
+| `@base-ui/react` in package.json | Base UI headless + tv() styling |
+| `shadcn/ui` components in `components/ui/` | `cn()` + Radix primitives |
+| None detected | Ask user which pattern to follow |
+
+### Design-to-code procedure
+
+1. **Analyze** — identify components, variants, states, spacing, colors
+2. **Map to tokens** — map design colors to CSS variables (bg-surface, text-foreground, etc.)
+3. **Identify boundaries** — compound component, simple component, or headless primitive
+4. **Implement** with correct pattern (tv()+twMerge or cn()+Radix)
+5. **Accessibility** — focus-visible ring, aria-label on icon buttons, semantic HTML
+6. **Named exports only** — never default export
+
+For dedicated design-to-code workflow with full DoD, use `/design-to-code` skill.
+
+## Model guidance
+
+| Scope | Recommended model |
+|-------|-------------------|
+| Fix label, adjust spacing, rename prop | `haiku` |
+| New component, add hook, connect API, feature work | `sonnet` (default) |
+| New module with routing + state + multiple components | `opus` |
+
+## Procedure
+
+1. **Detect stack**: Identify React/Next.js/Vue from project files.
+2. **Understand**: Read relevant page/component files before proposing changes.
+3. **Check architecture**: Does the feature follow feature-based structure? If not, suggest refactor.
+4. **Plan**: Identify files to create/modify. New features go under `features/`. Never create files unless necessary.
+5. **Implement**: Follow existing patterns + architecture principles:
+   - API calls in service files, not components
+   - State management in hooks/composables, not components
+   - Presentation/container split for complex components
+   - Error boundaries around feature sections
+   - Loading + error states for all async operations
+6. **Check types**: Run `npx tsc --noEmit` to verify.
+7. **DoD**: Component works on desktop + mobile. No TS errors. Uses design system tokens. Follows service layer pattern. State in the right place.
+
+## Architecture DoD (in addition to standard DoD)
+
+- [ ] New features use `features/{name}/` folder structure
+- [ ] API calls go through service layer (not in components)
+- [ ] State follows hierarchy (local → server → global)
+- [ ] No prop drilling beyond 2 levels
+- [ ] Complex components split into presentation/container
+- [ ] Error boundaries around feature sections
+- [ ] Async operations have loading + error states
+- [ ] Route-level lazy loading for new pages (React/Next.js)
+- [ ] Components with variants use tv() + VariantProps (or cn() for shadcn)
+- [ ] data-slot on compound component elements
+- [ ] Interactive elements have focus-visible ring
+- [ ] Icon-only buttons have aria-label
+
+## When to Use
+- Use according to the triggers described in the description/use-when list.
+
+## Do not use
+- Fora do escopo descrito; prefira a skill apropriada.
+
+## Instructions
+1) Siga o passo-a-passo principal da skill.
+2) Valide saa com checklists desta skill ou do workflow.
+3) Registre decises relevantes se aplic5vel.

package/skills/git-ssh-setup/SKILL.md

@@ -0,0 +1,164 @@
+---
+name: "git-ssh-setup"
+description: >
+  Configura identidade SSH para o workspace atual. Detecta aliases SSH existentes,
+  valida conexao, grava arquivo local de identidade e seta git user.name/email.
+  Use quando precisar configurar ou reconfigurar a identidade SSH do projeto.
+argument-hint: "[ssh-alias-name] ou 'detect' para auto-descoberta"
+use-when:
+  - ao clonar ou inicializar um novo workspace/repositorio
+  - quando git push falha com erro de autenticacao SSH
+  - ao trocar de conta GitHub para o projeto
+  - quando o safe-commit detecta que nao ha ssh-identity.json
+do-not-use-for:
+  - fazer commits ou push (use commit-dev)
+  - gerar chaves SSH do zero (use playbook ssh-multi-account-setup)
+  - operacoes git genericas (use commit-dev ou finishing-branch)
+metadata:
+  category: workflow-automation
+---
+
+# Skill: Git SSH Setup
+
+## When to Use this skill
+- Ao inicializar um workspace novo e precisar vincular a conta GitHub correta.
+- Quando push falha com "Permission denied (publickey)".
+- Ao trocar de conta GitHub para um projeto especifico.
+- Quando a skill commit-dev avisa que nao ha `ssh-identity.json`.
+
+## Do not use
+- Para fazer commits ou push — use `commit-dev`.
+- Para gerar chaves SSH do zero — siga o playbook `ssh-multi-account-setup`.
+
+## Instructions
+
+### Passo 1: Detectar framework
+
+Verificar qual framework esta ativo:
+- Se `.gos-local/` existe ou `package.json` tem `name: "g-os"` → **G-OS**. Local dir: `.gos-local/`
+- Se `.a8z/` existe → **.a8z-OS**. Local dir: `.a8z/local/`
+- Se nenhum: informar ao usuario que o workspace nao pertence a nenhum framework.
+
+### Passo 2: Verificar config existente
+
+Ler `<local-dir>/ssh-identity.json` se existir:
+```json
+{
+  "version": "1.0.0",
+  "sshAlias": "<host-alias>",
+  "gitUser": { "name": "Nome", "email": "user@noreply.github.com" },
+  "remote": "origin",
+  "validated": true,
+  "lastValidated": "2026-04-01T10:00:00Z"
+}
+```
+
+Se ja existe e `validated: true`: informar que ja esta configurado (mascarar alias como `[configured-ssh-identity]`). Perguntar se quer reconfigurar.
+
+### Passo 3: Descobrir alias via remote URL
+
+```bash
+git remote get-url origin
+```
+
+Extrair o host da URL (parte entre `@` e `:`).
+- Se formato `git@<alias>:<org>/<repo>.git` → o `<alias>` e o host SSH.
+- Se formato `https://github.com/...` → avisar que o remote usa HTTPS e perguntar qual alias SSH usar.
+
+### Passo 4: Validar conexao
+
+```bash
+ssh -T git@<alias> 2>&1
+```
+
+Verificar se retorna "successfully authenticated". Reportar resultado SEM mostrar o alias real:
+- Sucesso: "Conexao SSH validada com [configured-ssh-identity]."
+- Falha: "Falha na conexao SSH. Verifique se a chave esta carregada no ssh-agent."
+
+### Passo 5: Configurar git identity local
+
+```bash
+git config user.name "<nome>"
+git config user.email "<email>"
+```
+
+Perguntar ao usuario qual nome e email usar para este workspace.
+
+### Passo 6: Gravar ssh-identity.json
+
+Garantir que `<local-dir>/` existe (criar se nao). Escrever `ssh-identity.json`:
+
+```json
+{
+  "version": "1.0.0",
+  "sshAlias": "<alias-detectado>",
+  "gitUser": {
+    "name": "<nome-configurado>",
+    "email": "<email-configurado>"
+  },
+  "remote": "origin",
+  "validated": true,
+  "lastValidated": "<ISO-timestamp>"
+}
+```
+
+### Passo 7: Confirmacao
+
+Exibir resumo mascarado:
+```
+SSH Identity configurada:
+  Framework: G-OS / .a8z-OS
+  Remote: origin
+  Identity: [configured-ssh-identity]
+  Git user: <nome> <email>
+  Validado: sim
+```
+
+## Regras de Seguranca
+
+1. **NUNCA** imprimir o valor real de `sshAlias` em output, logs, PRs ou documentacao.
+2. Usar `[configured-ssh-identity]` como placeholder em toda comunicacao.
+3. Se o usuario pedir para ver o alias, orientar a ler o arquivo diretamente:
+   - G-OS: `cat .gos-local/ssh-identity.json`
+   - .a8z-OS: `cat .a8z/local/ssh-identity.json`
+4. Nunca incluir o alias em commit messages, PR descriptions ou changelogs.
+
+## Examples
+
+### Exemplo 1: Setup inicial de workspace G-OS
+```
+Usuario diz: "configurar ssh para este projeto"
+Acoes:
+  1. Detectar G-OS (existe .gos-local/)
+  2. git remote get-url origin → git@github-xxx:org/repo.git
+  3. ssh -T git@<alias> → autenticado
+  4. Perguntar nome/email
+  5. Gravar .gos-local/ssh-identity.json
+Resultado: "SSH Identity configurada para [configured-ssh-identity]."
+```
+
+### Exemplo 2: Remote usa HTTPS
+```
+Usuario diz: "configurar ssh"
+Acoes:
+  1. git remote get-url origin → https://github.com/org/repo.git
+  2. Perguntar: "Qual alias SSH usar? (ex: github-<conta>)"
+  3. Validar conexao com alias fornecido
+  4. git remote set-url origin git@<alias>:org/repo.git
+  5. Gravar config
+Resultado: "Remote convertido de HTTPS para SSH. Identity configurada."
+```
+
+## Troubleshooting
+
+### Erro: "Permission denied (publickey)"
+- **Causa**: Chave SSH nao carregada no ssh-agent ou alias incorreto.
+- **Solucao**: Verificar `ssh-add -l`. Se vazio, carregar: `ssh-add ~/.ssh/id_ed25519_<key>`.
+
+### Erro: "Could not resolve hostname"
+- **Causa**: Alias nao existe em `~/.ssh/config`.
+- **Solucao**: Adicionar entrada no `~/.ssh/config`. Ver playbook `ssh-multi-account-setup`.
+
+### Erro: ".gos-local/ nao existe"
+- **Causa**: Workspace nao inicializado.
+- **Solucao**: Rodar `npm run gos:init` (G-OS) ou `a8z init` (.a8z-OS).