ganbatte-os 0.2.37 → 0.2.41
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.gos/agents/profiles/ganbatte-os-master.md +100 -0
- package/.gos/libraries/caveman-rules.md +58 -0
- package/.gos/libraries/cloudflare-stack-kb.md +161 -0
- package/.gos/libraries/component-reuse-gate.md +75 -0
- package/.gos/libraries/default-stack-kb.md +98 -0
- package/.gos/libraries/engineering-best-practices.md +208 -0
- package/.gos/libraries/gos-compress-setup.md +62 -0
- package/.gos/libraries/intake-questions-mom-test.md +91 -0
- package/.gos/libraries/lucide-icons-policy.md +174 -0
- package/.gos/libraries/security-best-practices.md +138 -0
- package/.gos/libraries/supabase-stack-kb.md +124 -0
- package/.gos/libraries/timer-pattern-spec.md +252 -0
- package/.gos/libraries/typeform-pattern-spec.md +204 -0
- package/.gos/libraries/ui-guardrails-checklist.md +144 -0
- package/.gos/libraries/visual-diff-lenses.md +114 -0
- package/.gos/playbooks/audit-streaming-playbook.md +86 -0
- package/.gos/skills/adr-tech-decisions/SKILL.md +166 -0
- package/.gos/skills/audit-screenshots/SKILL.md +200 -142
- package/.gos/skills/cloudflare-pages-setup/SKILL.md +180 -0
- package/.gos/skills/figma-print-diff/SKILL.md +170 -0
- package/.gos/skills/gos-caveman/SKILL.md +110 -0
- package/.gos/skills/gos-compress/SKILL.md +134 -0
- package/.gos/skills/gos-compress/scripts/compress.py +346 -0
- package/.gos/skills/gos-compress/scripts/setup.py +91 -0
- package/.gos/skills/idea-intake/SKILL.md +147 -0
- package/.gos/skills/plan-blueprint/SKILL.md +18 -3
- package/.gos/skills/plan-to-tasks/SKILL.md +37 -1
- package/.gos/skills/prd-from-intake/SKILL.md +94 -0
- package/.gos/skills/prototype-orchestrator/SKILL.md +120 -0
- package/.gos/skills/registry.json +12 -1
- package/.gos/skills/timer-component-pattern/SKILL.md +245 -0
- package/.gos/skills/typeform-form-pattern/SKILL.md +210 -0
- package/.gos/skills/ui-guardrails/SKILL.md +111 -0
- package/.gos/templates/intakeTemplate.md +41 -0
- package/.gos/templates/planTemplate.md +25 -4
- package/.gos/templates/prdLeanTemplate.md +40 -0
- package/.gos/templates/taskTemplate.md +29 -5
- package/package.json +1 -1
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
# Engineering Best Practices — G-OS
|
|
2
|
+
|
|
3
|
+
> Padroes de codigo, arquitetura e workflow. Aplicado em todo `plan-blueprint`, codegen e revisao.
|
|
4
|
+
|
|
5
|
+
## TypeScript — strict mode obrigatorio
|
|
6
|
+
|
|
7
|
+
```json
|
|
8
|
+
// tsconfig.json
|
|
9
|
+
{
|
|
10
|
+
"compilerOptions": {
|
|
11
|
+
"strict": true,
|
|
12
|
+
"noImplicitAny": true,
|
|
13
|
+
"strictNullChecks": true,
|
|
14
|
+
"noUncheckedIndexedAccess": true,
|
|
15
|
+
"noFallthroughCasesInSwitch": true
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
### Regras
|
|
21
|
+
|
|
22
|
+
- **Nunca** `as any`, `@ts-ignore` sem comentario justificando.
|
|
23
|
+
- **Permitido** `@ts-expect-error` com comentario obrigatorio.
|
|
24
|
+
- `interface` para objetos de dominio e contratos.
|
|
25
|
+
- `type` para unions, intersections, utilitarios.
|
|
26
|
+
- **Nunca enum** — use `const X = { ... } as const` + `type Status = typeof X[keyof typeof X]`.
|
|
27
|
+
- Generics tipados — sem `T = any`.
|
|
28
|
+
|
|
29
|
+
## React 18 — patterns
|
|
30
|
+
|
|
31
|
+
### Componentes
|
|
32
|
+
- Funcionais sempre. Class components proibidos.
|
|
33
|
+
- `function declaration` para componentes principais (export default).
|
|
34
|
+
- `arrow function` para callbacks/handlers.
|
|
35
|
+
- Props tipadas via `interface`.
|
|
36
|
+
- Children: `React.ReactNode` (nao `JSX.Element[]`).
|
|
37
|
+
|
|
38
|
+
### Hooks
|
|
39
|
+
- `useState` para estado local primitivo.
|
|
40
|
+
- `useReducer` para state machine (>3 transicoes).
|
|
41
|
+
- `useEffect` apenas para sincronizacao com sistema externo (DOM, network, subscriptions).
|
|
42
|
+
- **NUNCA** `useEffect` para derivar state — calcular inline ou `useMemo`.
|
|
43
|
+
- Custom hooks com prefix `use` + camelCase (`useAuth`, `useProjects`).
|
|
44
|
+
|
|
45
|
+
### Estado global
|
|
46
|
+
- Servidor: TanStack Query (cache + invalidation).
|
|
47
|
+
- Cliente: Zustand para complexo, `useState` lift-up para simples.
|
|
48
|
+
- **Nunca** Redux em projeto novo.
|
|
49
|
+
|
|
50
|
+
## TanStack Query — patterns
|
|
51
|
+
|
|
52
|
+
```tsx
|
|
53
|
+
// Query key como tupla [domain, params]
|
|
54
|
+
const projects = useQuery({
|
|
55
|
+
queryKey: ['projects', { status: 'active' }],
|
|
56
|
+
queryFn: () => api.projects.list({ status: 'active' }),
|
|
57
|
+
staleTime: 60_000, // 1min
|
|
58
|
+
});
|
|
59
|
+
|
|
60
|
+
// Mutation com invalidacao
|
|
61
|
+
const createProject = useMutation({
|
|
62
|
+
mutationFn: api.projects.create,
|
|
63
|
+
onSuccess: () => qc.invalidateQueries({ queryKey: ['projects'] }),
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Anti-patterns
|
|
68
|
+
- Refetch on window focus em lista grande (custo de rede).
|
|
69
|
+
- queryKey como string (`'projects'`) — sempre array.
|
|
70
|
+
- Mutation sem `onError` quando UX precisa rollback.
|
|
71
|
+
|
|
72
|
+
## TanStack Router — patterns
|
|
73
|
+
|
|
74
|
+
- Routes em `src/routes/<path>.tsx` com file-based routing OU codegen.
|
|
75
|
+
- Loader para dados criticos (bloqueia render ate ter).
|
|
76
|
+
- Search params via `validateSearch` Zod.
|
|
77
|
+
- Type-safe params: `Route.useParams()`.
|
|
78
|
+
|
|
79
|
+
## File structure (single-app)
|
|
80
|
+
|
|
81
|
+
```
|
|
82
|
+
src/
|
|
83
|
+
routes/ # rotas TanStack
|
|
84
|
+
components/
|
|
85
|
+
ui/ # shadcn primitives
|
|
86
|
+
<feature>/ # componentes especificos do dominio
|
|
87
|
+
hooks/ # custom hooks reutilizaveis
|
|
88
|
+
lib/
|
|
89
|
+
supabase.ts # client
|
|
90
|
+
utils.ts # cn(), formatters
|
|
91
|
+
schemas/ # Zod schemas
|
|
92
|
+
types/ # tipos compartilhados
|
|
93
|
+
api/ # client API (workers fetch wrappers)
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## File structure (monorepo)
|
|
97
|
+
|
|
98
|
+
```
|
|
99
|
+
apps/
|
|
100
|
+
web/ # frontend
|
|
101
|
+
worker/ # backend Workers
|
|
102
|
+
packages/
|
|
103
|
+
ui/ # design system compartilhado
|
|
104
|
+
schemas/ # Zod schemas usados front+back
|
|
105
|
+
types/ # tipos compartilhados
|
|
106
|
+
config/ # tsconfig base, eslint base
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Naming
|
|
110
|
+
|
|
111
|
+
- Componentes: `PascalCase` (`ProjectCard.tsx`).
|
|
112
|
+
- Hooks: `camelCase` com `use` prefix (`useProjects.ts`).
|
|
113
|
+
- Utils: `camelCase` (`formatCurrency.ts`).
|
|
114
|
+
- Types: `PascalCase` (`Project`, `User`).
|
|
115
|
+
- Constants: `SCREAMING_SNAKE_CASE` (`MAX_FILE_SIZE`).
|
|
116
|
+
- Booleans: `is/has/should` prefix (`isLoading`, `hasError`).
|
|
117
|
+
|
|
118
|
+
## Commits — Conventional Commits
|
|
119
|
+
|
|
120
|
+
```
|
|
121
|
+
<type>(<scope>): <subject>
|
|
122
|
+
|
|
123
|
+
[body]
|
|
124
|
+
|
|
125
|
+
[footer]
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
Types: `feat`, `fix`, `refactor`, `chore`, `docs`, `test`, `style`, `perf`, `ci`.
|
|
129
|
+
|
|
130
|
+
Exemplos:
|
|
131
|
+
- `feat(auth): add magic link login`
|
|
132
|
+
- `fix(projects): correct active count`
|
|
133
|
+
- `refactor(api): extract supabase client`
|
|
134
|
+
|
|
135
|
+
## Branches
|
|
136
|
+
|
|
137
|
+
- `main` — producao.
|
|
138
|
+
- `dev` — integracao.
|
|
139
|
+
- `feat/<slug>` — feature em desenvolvimento.
|
|
140
|
+
- `fix/<slug>` — bug fix.
|
|
141
|
+
- `chore/<slug>` — limpeza.
|
|
142
|
+
|
|
143
|
+
## Workflow
|
|
144
|
+
|
|
145
|
+
1. `feat/<slug>` -> commits pequenos e atomicos.
|
|
146
|
+
2. PR para `dev`.
|
|
147
|
+
3. Code review obrigatorio (auto-review aceito em MVP descartavel).
|
|
148
|
+
4. CI passa (build + tsc + tests).
|
|
149
|
+
5. Merge squash.
|
|
150
|
+
6. `dev` -> `main` periodicamente.
|
|
151
|
+
|
|
152
|
+
## Testing
|
|
153
|
+
|
|
154
|
+
### MVP descartavel
|
|
155
|
+
- Smoke test manual antes de deploy.
|
|
156
|
+
- Sem unit tests obrigatorios.
|
|
157
|
+
|
|
158
|
+
### Continuo
|
|
159
|
+
- Vitest para units (so logica pura, formatadores, hooks).
|
|
160
|
+
- Playwright para E2E em fluxos criticos (login, checkout, dashboard).
|
|
161
|
+
- Coverage minima: 60% em logica de negocio.
|
|
162
|
+
- **NAO** testar componentes UI puros (chumba implementacao).
|
|
163
|
+
|
|
164
|
+
## Performance
|
|
165
|
+
|
|
166
|
+
- Lazy load rotas: `React.lazy` + `Suspense`.
|
|
167
|
+
- Code split por feature (TanStack Router cuida).
|
|
168
|
+
- Imagens: WebP via Cloudflare Image Transformations.
|
|
169
|
+
- Bundle target: <200KB inicial gzip.
|
|
170
|
+
- Lighthouse score 90+ em mobile.
|
|
171
|
+
|
|
172
|
+
## Acessibilidade
|
|
173
|
+
|
|
174
|
+
- Labels em todos inputs (`htmlFor` + `id` ou `aria-label`).
|
|
175
|
+
- Roles ARIA em componentes custom.
|
|
176
|
+
- Focus management em modal/drawer.
|
|
177
|
+
- Contraste AA (4.5:1 texto, 3:1 UI).
|
|
178
|
+
- Keyboard navigation em todos os flows interativos.
|
|
179
|
+
|
|
180
|
+
Detalhe completo: `libraries/ui-guardrails-checklist.md`.
|
|
181
|
+
|
|
182
|
+
## Architecture — Hexagonal-ish (continuo)
|
|
183
|
+
|
|
184
|
+
```
|
|
185
|
+
src/
|
|
186
|
+
domain/ # entidades, value objects, regras puras
|
|
187
|
+
application/ # use cases, services
|
|
188
|
+
infrastructure/ # adapters (supabase, workers, http)
|
|
189
|
+
ui/ # React components
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
Em MVP descartavel, achatar para `lib/` + `components/` direto.
|
|
193
|
+
|
|
194
|
+
## Anti-patterns
|
|
195
|
+
|
|
196
|
+
- Componente >500 linhas — quebrar em sub-components.
|
|
197
|
+
- Hook com >5 useState — provavelmente precisa useReducer.
|
|
198
|
+
- Funcao com >50 linhas — extrair sub-funcoes.
|
|
199
|
+
- `any` em props — sempre tipar.
|
|
200
|
+
- `console.log` em codigo que vai pra prod — usar logger ou remover.
|
|
201
|
+
- TODO sem prazo/owner — vira divida tecnica permanente.
|
|
202
|
+
- Comentario explicando WHAT do codigo — refatorar nome em vez de comentar.
|
|
203
|
+
|
|
204
|
+
## Referencias completas
|
|
205
|
+
|
|
206
|
+
- `docs-tools/docs/engineering/dev/02-padroes-codigo.md` — base completa.
|
|
207
|
+
- `docs-tools/docs/engineering/arquitetura/hexagonal.md` — para apps continuos.
|
|
208
|
+
- `docs-tools/docs/engineering/dev/01-workflow-desenvolvimento.md` — fluxo de trabalho.
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# gos-compress Setup Guide
|
|
2
|
+
|
|
3
|
+
> Setup unico do compressor LLMLingua-2 (sandeco). Roda 1x por maquina.
|
|
4
|
+
|
|
5
|
+
## Pre-requisitos
|
|
6
|
+
|
|
7
|
+
- Python 3.10+
|
|
8
|
+
- Disco livre: ~1.5GB (modelo + venv)
|
|
9
|
+
- (Opcional) GPU CUDA para acelerar — detectada automaticamente
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
cd <projeto>/.gos/skills/gos-compress
|
|
15
|
+
python scripts/setup.py
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Setup automatico:
|
|
19
|
+
1. Cria `.venv/` na pasta da skill
|
|
20
|
+
2. Atualiza pip
|
|
21
|
+
3. Instala `llmlingua` + `anthropic`
|
|
22
|
+
4. Baixa modelo HuggingFace `microsoft/llmlingua-2-xlm-roberta-large-meetingbank` (~1GB)
|
|
23
|
+
5. Salva cache em `~/.cache/huggingface/`
|
|
24
|
+
|
|
25
|
+
Primeira execucao: 5-15 minutos (download).
|
|
26
|
+
Execucoes seguintes: instantaneo (cache reusado).
|
|
27
|
+
|
|
28
|
+
## Validar
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
"<skill-dir>/.venv/Scripts/python.exe" "<skill-dir>/scripts/compress.py" --text "teste de compressao" --rate 0.5
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Output esperado: texto comprimido + stats (origin_tokens, compressed_tokens, ratio).
|
|
35
|
+
|
|
36
|
+
## Variaveis de ambiente
|
|
37
|
+
|
|
38
|
+
- `ANTHROPIC_API_KEY` — apenas se usar `--ask` para enviar contexto comprimido ao Claude.
|
|
39
|
+
|
|
40
|
+
## Troubleshooting
|
|
41
|
+
|
|
42
|
+
### "ModuleNotFoundError: llmlingua"
|
|
43
|
+
Setup nao rodou. Rodar `python scripts/setup.py` na pasta da skill.
|
|
44
|
+
|
|
45
|
+
### "CUDA out of memory"
|
|
46
|
+
Forcar CPU: `export CUDA_VISIBLE_DEVICES=""` antes de rodar.
|
|
47
|
+
|
|
48
|
+
### "HF download lento"
|
|
49
|
+
Mirror: `export HF_ENDPOINT=https://hf-mirror.com` antes de rodar setup.
|
|
50
|
+
|
|
51
|
+
### "permission denied .venv"
|
|
52
|
+
Windows: rodar shell como admin OU usar `python -m venv .venv` manualmente.
|
|
53
|
+
|
|
54
|
+
## Distribuicao
|
|
55
|
+
|
|
56
|
+
`.venv` e modelo NAO sao commitados/distribuidos. Cada usuario roda setup local. Adicionar ao `.gitignore` da skill:
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
.venv/
|
|
60
|
+
__pycache__/
|
|
61
|
+
*.pyc
|
|
62
|
+
```
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# Intake Questions — Mom Test + SPIN para nao-tecnicos
|
|
2
|
+
|
|
3
|
+
> Banco de perguntas usado por `idea-intake`. Linguagem coloquial, PT-BR.
|
|
4
|
+
|
|
5
|
+
## Principios
|
|
6
|
+
|
|
7
|
+
1. **Mom Test**: pergunte sobre o passado (concreto), nao o futuro (hipotetico). Nunca "voce usaria/pagaria?". Sempre "voce ja teve esse problema? como resolveu?".
|
|
8
|
+
2. **SPIN**: Situation, Problem, Implication, Need-payoff. Em ordem. Nao pular.
|
|
9
|
+
3. **Sem jargao**: "banco de dados" -> "lugar onde a informacao fica salva". "API" -> "uma porta que outros sistemas usam pra falar com o seu". "Auth" -> "quem ve o que".
|
|
10
|
+
4. **Especifico, nao generico**: "uma vez" e melhor que "ja aconteceu".
|
|
11
|
+
5. **1 pergunta por vez**. Espere a resposta. Nao acumule.
|
|
12
|
+
|
|
13
|
+
## Bloco 1 — Situacao (Mom Test concreta)
|
|
14
|
+
|
|
15
|
+
Escolher 1-2 conforme o tom da conversa:
|
|
16
|
+
|
|
17
|
+
- "Me conta a ultima vez que isso aconteceu — uma situacao especifica, nao em geral."
|
|
18
|
+
- "O que voce estava fazendo quando o problema bateu?"
|
|
19
|
+
- "Onde voce estava? No celular, no computador, fora de casa?"
|
|
20
|
+
- "Quem mais estava junto? (sozinho, com colega, com cliente, com filho)"
|
|
21
|
+
|
|
22
|
+
Anti-padrao: "voce costuma ter esse problema?" — abre porta pra resposta vaga.
|
|
23
|
+
|
|
24
|
+
## Bloco 2 — Problema
|
|
25
|
+
|
|
26
|
+
- "Como voce resolveu na hora? Mesmo que tenha sido com gambiarra."
|
|
27
|
+
- "Quanto tempo voce gastou ate conseguir resolver?"
|
|
28
|
+
- "O que mais te incomodou nessa hora — a demora, o esforco, a confusao?"
|
|
29
|
+
- "Voce ja tentou alguma ferramenta/jeito antes? Por que nao deu certo?"
|
|
30
|
+
|
|
31
|
+
## Bloco 3 — Implicacao
|
|
32
|
+
|
|
33
|
+
- "O que acontece se voce nao resolver isso? (pra voce, pra outras pessoas)"
|
|
34
|
+
- "Quantas vezes por semana/mes isso acontece?"
|
|
35
|
+
- "Tem algum custo (dinheiro, cliente perdido, briga em casa) quando o problema fica sem resolucao?"
|
|
36
|
+
|
|
37
|
+
## Bloco 4 — Persona
|
|
38
|
+
|
|
39
|
+
- "Quem mais alem de voce passa por isso? Tenta descrever uma pessoa especifica que voce conhece."
|
|
40
|
+
- "Que tipo de pessoa NUNCA passaria por isso?"
|
|
41
|
+
- "Essa pessoa que sofre — ela e do tipo que ja paga por software, ou e a primeira vez?"
|
|
42
|
+
|
|
43
|
+
## Bloco 5 — Job-to-be-done
|
|
44
|
+
|
|
45
|
+
- "Se voce abrisse uma solucao magica amanha, qual e a PRIMEIRA coisa que voce faria com ela?"
|
|
46
|
+
- "Qual e o resultado final que voce quer? (descreve o estado depois de usar — 'minha mae conseguiu agendar', 'fechei a venda', 'recebi o relatorio sem precisar pedir')"
|
|
47
|
+
- "Tem coisas que voce QUER que essa solucao NAO faca? (sem isso vira complicado/feio/caro)"
|
|
48
|
+
|
|
49
|
+
## Bloco 6 — Telas-chave (sem jargao tecnico)
|
|
50
|
+
|
|
51
|
+
- "Imagina que abriu o produto agora. O que voce ESPERA ver na primeira tela?"
|
|
52
|
+
- "Quantos cliques/toques voce aceita ate resolver? (1, 3, 10?)"
|
|
53
|
+
- "Se a solucao fosse uma planilha, ja resolveria? Por que nao?"
|
|
54
|
+
- "Tem algum produto parecido que te inspira? (nome, link, ou descricao)"
|
|
55
|
+
- "Tem algum produto parecido que voce ODEIA? Por que?"
|
|
56
|
+
|
|
57
|
+
## Bloco 7 — Sucesso e descartabilidade
|
|
58
|
+
|
|
59
|
+
CRITICO. Define perfil de arquitetura:
|
|
60
|
+
|
|
61
|
+
- "Esse produto e pra usar UMA vez (validar uma ideia, mostrar pra alguem, testar conceito) ou voce quer manter rodando por meses/anos?"
|
|
62
|
+
- "Se for pra usar uma vez: quem usa junto com voce? Voce sozinho, 5 amigos, 100 estranhos?"
|
|
63
|
+
- "Como voce vai saber, depois de usar, que valeu a pena? Em uma frase humana, sem numeros."
|
|
64
|
+
- "Quanto voce pode investir pra isso existir? (tempo seu? dinheiro? ambos?)"
|
|
65
|
+
|
|
66
|
+
## Sinais de alerta (re-perguntar)
|
|
67
|
+
|
|
68
|
+
- Resposta vaga ("e tipo... uma plataforma de gestao") -> pedir um exemplo concreto.
|
|
69
|
+
- Sempre "talvez/depende" -> falta de problema real, considerar abortar.
|
|
70
|
+
- Usuario descrevendo SOLUCAO no lugar de PROBLEMA -> redirecionar: "ok, isso e UMA forma de resolver — mas qual e o problema que essa coisa resolve?".
|
|
71
|
+
|
|
72
|
+
## Sinais de alerta (problema fraco)
|
|
73
|
+
|
|
74
|
+
Se ao final do Bloco 3 (Implicacao):
|
|
75
|
+
- Custo zero ("e que seria legal ter")
|
|
76
|
+
- Sem frequencia clara ("acontece as vezes")
|
|
77
|
+
- Sem persona alem do proprio usuario ("acho que outras pessoas tambem teriam")
|
|
78
|
+
|
|
79
|
+
-> Marcar `descartavel: true` automaticamente e perguntar se vale seguir.
|
|
80
|
+
|
|
81
|
+
## Anti-perguntas (NAO fazer)
|
|
82
|
+
|
|
83
|
+
- "Voce pagaria por isso?" (Mom Test rejeita)
|
|
84
|
+
- "Seria legal se...?" (compromisso fake)
|
|
85
|
+
- "O que voce acha de uma feature X?" (chumbando solucao)
|
|
86
|
+
- "Em geral, qual seu maior problema?" (vago)
|
|
87
|
+
- "Voce usaria?" (futuro hipotetico)
|
|
88
|
+
|
|
89
|
+
## Output esperado ao fim
|
|
90
|
+
|
|
91
|
+
15 perguntas no maximo, 5 blocos cobertos, resumo factual em 5 bullets — usuario valida ou corrige.
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# Lucide Icons Policy — G-OS
|
|
2
|
+
|
|
3
|
+
> Regra do dono: **NUNCA usar emojis em codigo gerado**. Sempre usar Lucide React.
|
|
4
|
+
> Excecao: usuario pediu emoji explicitamente OU output em texto plano para usuario final humano.
|
|
5
|
+
|
|
6
|
+
## Por que
|
|
7
|
+
|
|
8
|
+
1. Consistencia visual (todos os icones na mesma grid 24x24).
|
|
9
|
+
2. Tema-aware (`currentColor` segue color/dark mode).
|
|
10
|
+
3. Tree-shaking (so icones usados entram no bundle).
|
|
11
|
+
4. Acessibilidade (sized + aria-friendly).
|
|
12
|
+
5. Profissionalismo — emojis em UI corporativa parecem amador.
|
|
13
|
+
|
|
14
|
+
## Stack
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install lucide-react
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Uso padrao
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { Folder, Plus, Trash2, Settings } from "lucide-react";
|
|
24
|
+
|
|
25
|
+
<Button>
|
|
26
|
+
<Plus className="h-4 w-4" />
|
|
27
|
+
Novo projeto
|
|
28
|
+
</Button>
|
|
29
|
+
|
|
30
|
+
<Folder className="h-5 w-5 text-muted-foreground" />
|
|
31
|
+
|
|
32
|
+
// Icon-only button — aria-label OBRIGATORIO
|
|
33
|
+
<Button variant="ghost" size="icon" aria-label="Configuracoes">
|
|
34
|
+
<Settings className="h-4 w-4" />
|
|
35
|
+
</Button>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Tamanhos canonicos
|
|
39
|
+
|
|
40
|
+
| Contexto | className |
|
|
41
|
+
|----------|-----------|
|
|
42
|
+
| Inline em texto | `h-3 w-3` ou `h-3.5 w-3.5` |
|
|
43
|
+
| Inside button (sm) | `h-4 w-4` |
|
|
44
|
+
| Inside button (default) | `h-4 w-4` |
|
|
45
|
+
| Inside button (lg) | `h-5 w-5` |
|
|
46
|
+
| Icon-only button | `h-4 w-4` |
|
|
47
|
+
| Section heading | `h-5 w-5` |
|
|
48
|
+
| Empty state | `h-12 w-12` ou `h-16 w-16` |
|
|
49
|
+
| Hero / illustration | `h-24 w-24` |
|
|
50
|
+
|
|
51
|
+
## Cores
|
|
52
|
+
|
|
53
|
+
```tsx
|
|
54
|
+
// Default — segue cor do parent (currentColor)
|
|
55
|
+
<Plus className="h-4 w-4" />
|
|
56
|
+
|
|
57
|
+
// Cor especifica via Tailwind
|
|
58
|
+
<AlertCircle className="h-5 w-5 text-destructive" />
|
|
59
|
+
<CheckCircle2 className="h-5 w-5 text-success" />
|
|
60
|
+
<Info className="h-5 w-5 text-muted-foreground" />
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Mapeamento emoji -> Lucide (referencia rapida)
|
|
64
|
+
|
|
65
|
+
| Emoji | Lucide | Uso |
|
|
66
|
+
|-------|--------|-----|
|
|
67
|
+
| 👍 | `ThumbsUp` | aprovado |
|
|
68
|
+
| 👎 | `ThumbsDown` | rejeitado |
|
|
69
|
+
| ✅ | `Check` ou `CheckCircle2` | sucesso |
|
|
70
|
+
| ❌ | `X` ou `XCircle` | erro/fechar |
|
|
71
|
+
| ⚠️ | `AlertTriangle` | aviso |
|
|
72
|
+
| ℹ️ | `Info` | informacao |
|
|
73
|
+
| 🔍 | `Search` | busca |
|
|
74
|
+
| 📅 | `Calendar` | data |
|
|
75
|
+
| 📝 | `Pencil` ou `FileText` | editar / nota |
|
|
76
|
+
| 🗑️ | `Trash2` | deletar |
|
|
77
|
+
| ⚙️ | `Settings` | configuracoes |
|
|
78
|
+
| 👤 | `User` | usuario |
|
|
79
|
+
| 👥 | `Users` | grupo |
|
|
80
|
+
| 🏠 | `Home` | home |
|
|
81
|
+
| 📂 | `Folder` | pasta |
|
|
82
|
+
| 📄 | `FileText` | documento |
|
|
83
|
+
| 💾 | `Save` | salvar |
|
|
84
|
+
| 🔒 | `Lock` | privado |
|
|
85
|
+
| 🔓 | `Unlock` | publico |
|
|
86
|
+
| 📈 | `TrendingUp` | crescimento |
|
|
87
|
+
| 📉 | `TrendingDown` | queda |
|
|
88
|
+
| ⏰ | `Clock` | horario |
|
|
89
|
+
| 🔔 | `Bell` | notificacao |
|
|
90
|
+
| ❤️ | `Heart` | favorito |
|
|
91
|
+
| ⭐ | `Star` | rating |
|
|
92
|
+
| 🚀 | `Rocket` | launch |
|
|
93
|
+
| 🎯 | `Target` | objetivo |
|
|
94
|
+
| 💡 | `Lightbulb` | ideia |
|
|
95
|
+
| 🔧 | `Wrench` | ferramenta |
|
|
96
|
+
| 📊 | `BarChart3` | grafico |
|
|
97
|
+
| 📥 | `Download` ou `Inbox` | download |
|
|
98
|
+
| 📤 | `Upload` ou `Send` | upload |
|
|
99
|
+
| 🔗 | `Link` | link |
|
|
100
|
+
| 📌 | `Pin` | fixar |
|
|
101
|
+
| 🌟 | `Sparkles` | destaque |
|
|
102
|
+
| 🎨 | `Palette` | design |
|
|
103
|
+
| 🔥 | `Flame` | hot/destaque |
|
|
104
|
+
| ✨ | `Sparkles` | novo/magico |
|
|
105
|
+
|
|
106
|
+
## Estados visuais com Lucide (skeleton, empty, error)
|
|
107
|
+
|
|
108
|
+
### Skeleton loading
|
|
109
|
+
```tsx
|
|
110
|
+
import { Skeleton } from "@/components/ui/skeleton";
|
|
111
|
+
|
|
112
|
+
<div className="space-y-3">
|
|
113
|
+
<Skeleton className="h-4 w-3/4" />
|
|
114
|
+
<Skeleton className="h-4 w-1/2" />
|
|
115
|
+
<Skeleton className="h-32 w-full" />
|
|
116
|
+
</div>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Empty state
|
|
120
|
+
```tsx
|
|
121
|
+
import { Inbox } from "lucide-react";
|
|
122
|
+
|
|
123
|
+
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
124
|
+
<Inbox className="h-12 w-12 text-muted-foreground mb-4" />
|
|
125
|
+
<h3 className="text-lg font-semibold">Nenhum projeto ainda</h3>
|
|
126
|
+
<p className="text-sm text-muted-foreground mt-1 mb-4">
|
|
127
|
+
Comece criando seu primeiro projeto.
|
|
128
|
+
</p>
|
|
129
|
+
<Button>
|
|
130
|
+
<Plus className="h-4 w-4 mr-2" />
|
|
131
|
+
Novo projeto
|
|
132
|
+
</Button>
|
|
133
|
+
</div>
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### Error state
|
|
137
|
+
```tsx
|
|
138
|
+
import { AlertTriangle, RotateCw } from "lucide-react";
|
|
139
|
+
|
|
140
|
+
<div className="flex flex-col items-center justify-center py-12 text-center">
|
|
141
|
+
<AlertTriangle className="h-12 w-12 text-destructive mb-4" />
|
|
142
|
+
<h3 className="text-lg font-semibold">Algo deu errado</h3>
|
|
143
|
+
<p className="text-sm text-muted-foreground mt-1 mb-4">{error.message}</p>
|
|
144
|
+
<Button variant="outline" onClick={retry}>
|
|
145
|
+
<RotateCw className="h-4 w-4 mr-2" />
|
|
146
|
+
Tentar de novo
|
|
147
|
+
</Button>
|
|
148
|
+
</div>
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
## Anti-patterns
|
|
152
|
+
|
|
153
|
+
- Emoji em codigo gerado: `<button>👍 Aprovar</button>` — REPROVADO.
|
|
154
|
+
- Texto unicode visual: `✓` em vez de `<Check />` — REPROVADO em codigo.
|
|
155
|
+
- Inline SVG quando Lucide tem o icone — usar Lucide.
|
|
156
|
+
- FontAwesome / Heroicons / outros — usar Lucide (one icon lib policy).
|
|
157
|
+
- Icon sem `aria-label` em icon-only button — REPROVADO em a11y.
|
|
158
|
+
|
|
159
|
+
## Excecoes (emoji permitido)
|
|
160
|
+
|
|
161
|
+
- Output em terminal/Bash que sera lido por humano (ex: `npm run doctor`).
|
|
162
|
+
- Documentacao README.md (estilo).
|
|
163
|
+
- Slack messages, ClickUp comments (texto plano fora de codigo de UI).
|
|
164
|
+
- Mensagens em chat enquanto agente conversa com usuario (regra global do agente — nao em codigo gerado).
|
|
165
|
+
- Usuario pede explicitamente: "use emoji aqui".
|
|
166
|
+
|
|
167
|
+
## Validacao automatica
|
|
168
|
+
|
|
169
|
+
`ui-guardrails` checa toda task de UI:
|
|
170
|
+
- [ ] Imports de `lucide-react` quando ha icone declarado?
|
|
171
|
+
- [ ] Zero emoji unicode em strings de UI (regex `/[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]/u`)?
|
|
172
|
+
- [ ] Icon-only buttons com `aria-label`?
|
|
173
|
+
|
|
174
|
+
Falha em qualquer -> bloqueia codegen.
|
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
# Security Best Practices — G-OS
|
|
2
|
+
|
|
3
|
+
> Checklist de seguranca aplicavel ao stack default (React + Workers + Supabase). Aplicado por `ui-guardrails`, `adr-tech-decisions` e validado por `validate-plan` quando viavel.
|
|
4
|
+
|
|
5
|
+
## Principio: defense-in-depth pragmatico
|
|
6
|
+
|
|
7
|
+
MVP descartavel: priorize itens **must**. Continuo: cobrir todos.
|
|
8
|
+
|
|
9
|
+
## 1. Secrets e variaveis de ambiente
|
|
10
|
+
|
|
11
|
+
### Must
|
|
12
|
+
- [ ] **Nunca** committar `.env`, `.dev.vars`, `wrangler.toml` com secrets.
|
|
13
|
+
- [ ] `.env.example` apenas com chaves vazias.
|
|
14
|
+
- [ ] Workers: secrets via `wrangler secret put` (nao `vars` em wrangler.toml).
|
|
15
|
+
- [ ] Pages: env vars sensiveis somente em "encrypted" no dashboard.
|
|
16
|
+
- [ ] Front (Vite): apenas `VITE_*` vars publicas. **NUNCA** `service_role` Supabase no front.
|
|
17
|
+
|
|
18
|
+
### Should
|
|
19
|
+
- [ ] Rotation de chaves a cada 90 dias em prod.
|
|
20
|
+
- [ ] Audit log de quem acessou secret.
|
|
21
|
+
|
|
22
|
+
## 2. Supabase — Row Level Security (RLS)
|
|
23
|
+
|
|
24
|
+
### Must
|
|
25
|
+
- [ ] **RLS sempre ON** em toda tabela com dados de usuario.
|
|
26
|
+
- [ ] Policy `permissive` baseada em `auth.uid()` para `select|insert|update|delete`.
|
|
27
|
+
- [ ] Tabelas publicas (read-only): `policy USING (true)` em SELECT, sem INSERT/UPDATE/DELETE.
|
|
28
|
+
- [ ] Frontend usa SOMENTE `anon_key`. `service_role_key` SO em Workers/Edge Functions.
|
|
29
|
+
|
|
30
|
+
### Should
|
|
31
|
+
- [ ] View de auditoria de RLS (ver `docs-tools/supabase/guia-rls.md` no projeto base).
|
|
32
|
+
- [ ] Testes que tentam acessar dado de outro user e devem falhar.
|
|
33
|
+
- [ ] `BYPASSRLS` documentado caso a caso (admin queries).
|
|
34
|
+
|
|
35
|
+
### Pattern padrao para tabela "minha"
|
|
36
|
+
```sql
|
|
37
|
+
alter table public.<tabela> enable row level security;
|
|
38
|
+
|
|
39
|
+
create policy "select_own"
|
|
40
|
+
on public.<tabela> for select
|
|
41
|
+
using (auth.uid() = user_id);
|
|
42
|
+
|
|
43
|
+
create policy "insert_own"
|
|
44
|
+
on public.<tabela> for insert
|
|
45
|
+
with check (auth.uid() = user_id);
|
|
46
|
+
|
|
47
|
+
create policy "update_own"
|
|
48
|
+
on public.<tabela> for update
|
|
49
|
+
using (auth.uid() = user_id)
|
|
50
|
+
with check (auth.uid() = user_id);
|
|
51
|
+
|
|
52
|
+
create policy "delete_own"
|
|
53
|
+
on public.<tabela> for delete
|
|
54
|
+
using (auth.uid() = user_id);
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
## 3. Auth (Supabase)
|
|
58
|
+
|
|
59
|
+
### Must
|
|
60
|
+
- [ ] Magic link OU OAuth — evitar password como primary.
|
|
61
|
+
- [ ] Email allowlist em projeto interno (via RLS ou Edge Function).
|
|
62
|
+
- [ ] `auth.uid()` sempre referenciada no front via `supabase.auth.getUser()` (nao trust local cache).
|
|
63
|
+
- [ ] Logout invalida sessao remota (`supabase.auth.signOut({ scope: 'global' })`).
|
|
64
|
+
|
|
65
|
+
### Should
|
|
66
|
+
- [ ] MFA (TOTP) para admin.
|
|
67
|
+
- [ ] Rate limit em endpoints de auth via Supabase config.
|
|
68
|
+
|
|
69
|
+
## 4. CORS & CSRF
|
|
70
|
+
|
|
71
|
+
### Must
|
|
72
|
+
- [ ] Workers retornam `Access-Control-Allow-Origin` SO para origens conhecidas (nao `*` em prod).
|
|
73
|
+
- [ ] CSRF: tokens em forms sensiveis OU SameSite=Strict cookies.
|
|
74
|
+
- [ ] Anti-clickjacking: `X-Frame-Options: DENY` em paginas auth.
|
|
75
|
+
|
|
76
|
+
## 5. Inputs e validacao
|
|
77
|
+
|
|
78
|
+
### Must
|
|
79
|
+
- [ ] Validar todo input do usuario com Zod no front E backend (defense-in-depth).
|
|
80
|
+
- [ ] SQL: usar parametrizadas (Supabase JS ja faz). NUNCA concatenar string.
|
|
81
|
+
- [ ] HTML: nunca renderizar conteudo do usuario como HTML bruto — sempre sanitizar via lib dedicada (DOMPurify) antes de injetar.
|
|
82
|
+
- [ ] File upload: validar mime type + tamanho server-side (em Workers ou Supabase Storage policy).
|
|
83
|
+
|
|
84
|
+
## 6. Logs e observabilidade
|
|
85
|
+
|
|
86
|
+
### Must
|
|
87
|
+
- [ ] Nao logar PII (email, telefone, CPF) em texto plano.
|
|
88
|
+
- [ ] Mascarar tokens em logs (regex `[A-Za-z0-9]{32,}` -> `***`).
|
|
89
|
+
- [ ] Wrangler tail apenas em dev — desabilitar em prod.
|
|
90
|
+
|
|
91
|
+
### Should
|
|
92
|
+
- [ ] Sentry ou Cloudflare Logs para erros nao-tratados.
|
|
93
|
+
|
|
94
|
+
## 7. Dependencias
|
|
95
|
+
|
|
96
|
+
### Must
|
|
97
|
+
- [ ] `npm audit` em CI (falha em high/critical).
|
|
98
|
+
- [ ] Lockfile committed (`package-lock.json` ou `pnpm-lock.yaml`).
|
|
99
|
+
- [ ] Atualizar deps com versao patch a cada sprint (renovate-bot opcional).
|
|
100
|
+
|
|
101
|
+
## 8. Deployment
|
|
102
|
+
|
|
103
|
+
### Must
|
|
104
|
+
- [ ] HTTPS forced (Cloudflare ja faz por default).
|
|
105
|
+
- [ ] HSTS header em paginas auth.
|
|
106
|
+
- [ ] Wrangler `compatibility_date` recente (max 6 meses atras).
|
|
107
|
+
|
|
108
|
+
### Should
|
|
109
|
+
- [ ] Branch protection no GitHub (require PR + review + checks).
|
|
110
|
+
- [ ] Preview deploys com auth (Cloudflare Access).
|
|
111
|
+
|
|
112
|
+
## 9. RLS audit checklist (pre-launch)
|
|
113
|
+
|
|
114
|
+
```
|
|
115
|
+
[ ] Toda tabela com user data tem RLS ON?
|
|
116
|
+
[ ] Toda RLS tem policy permissive baseada em auth.uid()?
|
|
117
|
+
[ ] anon role consegue SELECT em tabelas publicas?
|
|
118
|
+
[ ] anon role NAO consegue SELECT em tabelas privadas?
|
|
119
|
+
[ ] authenticated role enxerga apenas suas linhas?
|
|
120
|
+
[ ] service_role key NAO esta em codigo do front?
|
|
121
|
+
[ ] Trigger updated_at em todas as tabelas?
|
|
122
|
+
[ ] Constraints UNIQUE em colunas-chave (email, slug)?
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## 10. MVP descartavel — relax permitido
|
|
126
|
+
|
|
127
|
+
Quando `descartavel: true` no PRD:
|
|
128
|
+
- RLS pode ser unico (todos veem tudo) se publico — declarar no ADR.
|
|
129
|
+
- Auth pode ser opcional (Cloudflare Access free).
|
|
130
|
+
- Sentry/observabilidade -> Cloudflare Logs nativos sao suficientes.
|
|
131
|
+
- npm audit medium permitido se nao afeta runtime.
|
|
132
|
+
|
|
133
|
+
## Referencias
|
|
134
|
+
|
|
135
|
+
- `docs-tools/supabase/guia-rls.md` — auditoria de RLS no projeto base.
|
|
136
|
+
- `docs-tools/docs/engineering/banco-dados/` — patterns de Postgres.
|
|
137
|
+
- OWASP Top 10 (https://owasp.org/Top10/).
|
|
138
|
+
- Supabase Hardening Checklist (https://supabase.com/docs/guides/platform/going-into-prod).
|