devsquad 1.0.0 → 1.1.1
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/bin/devsquad.js +37 -11
- package/package.json +2 -2
- package/src/init.js +70 -26
- package/src/update.js +95 -0
- package/templates/.claude/skills/cicd/SKILL.md +46 -0
- package/templates/.claude/skills/cicd/backend-ci.md +114 -0
- package/templates/.claude/skills/cicd/frontend-ci.md +97 -0
- package/templates/.claude/skills/clickup/SKILL.md +63 -14
- package/templates/.claude/skills/docs/templates.md +203 -39
- package/templates/.claude/skills/figma/SKILL.md +125 -26
- package/templates/.claude/skills/nestjs/api-contracts.md +221 -0
- package/templates/.claude/skills/react/setup.md +61 -14
- package/templates/.claude/skills/testing/SKILL.md +78 -0
- package/templates/.claude/skills/testing/backend.md +161 -0
- package/templates/.claude/skills/testing/e2e.md +156 -0
- package/templates/.claude/skills/testing/frontend.md +138 -0
- package/templates/CLAUDE.md +7 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: clickup
|
|
2
|
+
name: clickup
|
|
3
3
|
description: Organização de projetos e criação de tasks no ClickUp vinculadas ao desenvolvimento. Use quando o desenvolvedor precisar estruturar o backlog, criar tasks para um novo projeto, definir sprints ou entender como nomear branches vinculadas a tasks.
|
|
4
4
|
---
|
|
5
5
|
|
|
@@ -14,6 +14,8 @@ Space: [Nome do Projeto]
|
|
|
14
14
|
├── Lista: 👥 [Módulo principal]
|
|
15
15
|
├── Lista: 🎨 Frontend
|
|
16
16
|
├── Lista: 📱 Mobile (se aplicável)
|
|
17
|
+
├── Lista: 🧪 Testes & QA
|
|
18
|
+
├── Lista: 🚀 CI/CD & DevOps
|
|
17
19
|
├── Lista: 📝 Documentação
|
|
18
20
|
└── Lista: 🐛 Bugs
|
|
19
21
|
```
|
|
@@ -22,16 +24,21 @@ Space: [Nome do Projeto]
|
|
|
22
24
|
|
|
23
25
|
```
|
|
24
26
|
🔧 Setup & Infraestrutura
|
|
25
|
-
├── [ ] Inicializar repositório Git
|
|
26
|
-
├── [ ] Configurar banco de dados
|
|
27
|
-
├── [ ] Criar .env.example
|
|
28
|
-
|
|
27
|
+
├── [ ] Inicializar repositório Git → chore/initial-setup
|
|
28
|
+
├── [ ] Configurar banco de dados + Prisma → chore/database-setup
|
|
29
|
+
├── [ ] Criar .env.example → chore/environment-setup
|
|
30
|
+
├── [ ] Configurar GitHub Actions (lint + testes) → ci/setup-actions
|
|
31
|
+
└── [ ] Configurar Husky + Commitlint → chore/git-hooks
|
|
29
32
|
|
|
30
33
|
🔐 Autenticação
|
|
31
|
-
├── [ ] Implementar registro de usuário
|
|
32
|
-
├── [ ] Implementar login com JWT
|
|
33
|
-
├── [ ] Implementar refresh token
|
|
34
|
-
└── [ ] Implementar logout
|
|
34
|
+
├── [ ] Implementar registro de usuário → feature/CK-{id}-user-register
|
|
35
|
+
├── [ ] Implementar login com JWT → feature/CK-{id}-jwt-login
|
|
36
|
+
├── [ ] Implementar refresh token (httpOnly cookie) → feature/CK-{id}-refresh-token
|
|
37
|
+
└── [ ] Implementar logout → feature/CK-{id}-logout
|
|
38
|
+
|
|
39
|
+
🧪 Testes & QA
|
|
40
|
+
├── [ ] Configurar Jest + Supertest (backend) → chore/test-setup-backend
|
|
41
|
+
└── [ ] Configurar Vitest + Testing Library (frontend)→ chore/test-setup-frontend
|
|
35
42
|
```
|
|
36
43
|
|
|
37
44
|
## Padrão de task
|
|
@@ -45,21 +52,37 @@ DESCRIÇÃO:
|
|
|
45
52
|
[Por que essa task existe]
|
|
46
53
|
|
|
47
54
|
## Critérios de Aceitação
|
|
48
|
-
- [ ] [critério verificável]
|
|
49
|
-
- [ ] [critério verificável]
|
|
55
|
+
- [ ] [critério verificável e testável]
|
|
56
|
+
- [ ] [critério verificável e testável]
|
|
57
|
+
- [ ] Testes escritos e passando
|
|
58
|
+
- [ ] PR revisado e aprovado
|
|
50
59
|
|
|
51
60
|
## Branch Git
|
|
52
61
|
feature/CK-{id}-{slug}
|
|
62
|
+
|
|
63
|
+
## Estimativa
|
|
64
|
+
[XS / S / M / L / XL]
|
|
53
65
|
```
|
|
54
66
|
|
|
67
|
+
## Estimativas (T-Shirt sizing)
|
|
68
|
+
|
|
69
|
+
| Tamanho | Horas | Exemplos |
|
|
70
|
+
|---------|-------|---------|
|
|
71
|
+
| XS | < 2h | Fix de bug simples, ajuste de UI |
|
|
72
|
+
| S | 2-4h | CRUD simples, componente básico |
|
|
73
|
+
| M | 4-8h | Feature com lógica de negócio |
|
|
74
|
+
| L | 1-2d | Módulo completo (auth, pagamentos) |
|
|
75
|
+
| XL | > 2d | Arquitetura, migração, refactor grande |
|
|
76
|
+
|
|
55
77
|
## Status do fluxo
|
|
56
78
|
|
|
57
79
|
| Status | Significado |
|
|
58
80
|
|--------|-------------|
|
|
59
81
|
| Backlog | Definida, não iniciada |
|
|
60
|
-
| Em andamento | Branch criada |
|
|
61
|
-
| Em revisão | PR aberto |
|
|
62
|
-
| Bloqueada | Dependência pendente |
|
|
82
|
+
| Em andamento | Branch criada, dev trabalhando |
|
|
83
|
+
| Em revisão | PR aberto, aguardando review |
|
|
84
|
+
| Bloqueada | Dependência pendente — descrever o bloqueio |
|
|
85
|
+
| QA | Em testes/validação |
|
|
63
86
|
| Concluída | PR mergeado em develop |
|
|
64
87
|
|
|
65
88
|
## Vinculação Git ↔ ClickUp
|
|
@@ -73,3 +96,29 @@ git commit -m "feat(auth): implementar JWT login
|
|
|
73
96
|
|
|
74
97
|
Closes CK-42"
|
|
75
98
|
```
|
|
99
|
+
|
|
100
|
+
## Sprint Planning
|
|
101
|
+
|
|
102
|
+
```
|
|
103
|
+
Duração: 2 semanas
|
|
104
|
+
Capacidade padrão: 60% do tempo total (40% para bugs/reuniões/imprevistos)
|
|
105
|
+
|
|
106
|
+
Exemplo sprint de 2 semanas (1 dev):
|
|
107
|
+
80h totais × 60% = ~48h disponíveis
|
|
108
|
+
Tasks: 2L + 3M + 4S = 2×12h + 3×6h + 4×3h = 24+18+12 = 54h ≈ ok
|
|
109
|
+
|
|
110
|
+
Daily standup (15min):
|
|
111
|
+
1. O que fiz ontem?
|
|
112
|
+
2. O que farei hoje?
|
|
113
|
+
3. Algum bloqueio?
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
## Checklist de task bem definida
|
|
117
|
+
|
|
118
|
+
- [ ] Título começa com verbo no infinitivo
|
|
119
|
+
- [ ] Contexto explica o "por quê"
|
|
120
|
+
- [ ] Critérios de aceitação são verificáveis (não subjetivos)
|
|
121
|
+
- [ ] Branch Git definida com ID da task
|
|
122
|
+
- [ ] Estimativa de tamanho preenchida
|
|
123
|
+
- [ ] Dependências mapeadas (se houver)
|
|
124
|
+
- [ ] Inclui critério de teste passando
|
|
@@ -7,30 +7,46 @@ Estes blocos são **gerados no repositório do app** (não fazem parte do pacote
|
|
|
7
7
|
## README.md (completo)
|
|
8
8
|
|
|
9
9
|
```markdown
|
|
10
|
-
# Nome do
|
|
10
|
+
# 🚀 Nome do Projeto
|
|
11
11
|
|
|
12
12
|
> Uma linha: o que o sistema faz e para quem.
|
|
13
13
|
|
|
14
14
|
## Stack
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
| Camada | Tecnologias |
|
|
17
|
+
|--------|-------------|
|
|
18
|
+
| Backend | NestJS + Prisma + PostgreSQL |
|
|
19
|
+
| Frontend | React + TypeScript + Vite + TailwindCSS |
|
|
20
|
+
| Mobile | React Native + Expo + NativeWind |
|
|
21
|
+
| Auth | JWT (access 15min + refresh 7d, httpOnly cookie) |
|
|
22
|
+
| CI/CD | GitHub Actions + Railway (backend) + Vercel (frontend) |
|
|
19
23
|
|
|
20
24
|
## Pré-requisitos
|
|
21
25
|
|
|
22
|
-
- Node.js
|
|
23
|
-
- PostgreSQL
|
|
24
|
-
- Variáveis: copie `.env.example` para `.env`
|
|
26
|
+
- Node.js >= 20
|
|
27
|
+
- PostgreSQL >= 15
|
|
28
|
+
- Variáveis: copie `.env.example` para `.env` e preencha os valores
|
|
25
29
|
|
|
26
30
|
## Instalação
|
|
27
31
|
|
|
28
32
|
\`\`\`bash
|
|
29
|
-
#
|
|
30
|
-
cd backend
|
|
31
|
-
|
|
32
|
-
#
|
|
33
|
-
|
|
33
|
+
# Backend
|
|
34
|
+
cd backend
|
|
35
|
+
npm ci
|
|
36
|
+
cp .env.example .env # preencha DATABASE_URL, JWT_SECRET etc.
|
|
37
|
+
npx prisma migrate dev
|
|
38
|
+
npm run start:dev
|
|
39
|
+
|
|
40
|
+
# Frontend
|
|
41
|
+
cd frontend
|
|
42
|
+
npm ci
|
|
43
|
+
cp .env.example .env
|
|
44
|
+
npm run dev
|
|
45
|
+
|
|
46
|
+
# Mobile
|
|
47
|
+
cd mobile
|
|
48
|
+
npm ci
|
|
49
|
+
npx expo start
|
|
34
50
|
\`\`\`
|
|
35
51
|
|
|
36
52
|
## Documentação da API
|
|
@@ -38,9 +54,76 @@ cd frontend && npm ci && npm run dev
|
|
|
38
54
|
- Swagger: `http://localhost:3000/api/docs`
|
|
39
55
|
- Postman: `postman/collection.json`
|
|
40
56
|
|
|
57
|
+
## Design
|
|
58
|
+
|
|
59
|
+
- Figma: [link para o arquivo]
|
|
60
|
+
- Protótipo: [link para o protótipo interativo]
|
|
61
|
+
|
|
62
|
+
## Testes
|
|
63
|
+
|
|
64
|
+
\`\`\`bash
|
|
65
|
+
# Backend
|
|
66
|
+
cd backend
|
|
67
|
+
npm run test # unitários
|
|
68
|
+
npm run test:e2e # integração
|
|
69
|
+
|
|
70
|
+
# Frontend
|
|
71
|
+
cd frontend
|
|
72
|
+
npm run test:run # unitários
|
|
73
|
+
npm run e2e # e2e com Playwright
|
|
74
|
+
\`\`\`
|
|
75
|
+
|
|
41
76
|
## Licença
|
|
42
77
|
|
|
43
|
-
MIT
|
|
78
|
+
MIT © [Nome] [Ano]
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
## docs/ARCHITECTURE.md
|
|
84
|
+
|
|
85
|
+
```markdown
|
|
86
|
+
# Arquitetura
|
|
87
|
+
|
|
88
|
+
## Visão geral
|
|
89
|
+
|
|
90
|
+
[Diagrama ou descrição da arquitetura — monolito, microserviços, serverless]
|
|
91
|
+
|
|
92
|
+
## Decisões técnicas (ADRs)
|
|
93
|
+
|
|
94
|
+
### ADR-001: API versionada em /api/v1
|
|
95
|
+
**Contexto:** Precisamos evoluir contratos sem quebrar clientes legados.
|
|
96
|
+
**Decisão:** Prefixo global `api/v1` no NestJS; breaking changes em `/v2` no futuro.
|
|
97
|
+
**Consequências:** URLs mais longas; migrações de versão documentadas.
|
|
98
|
+
|
|
99
|
+
### ADR-002: Refresh token como cookie httpOnly
|
|
100
|
+
**Contexto:** localStorage é vulnerável a XSS (OWASP A03).
|
|
101
|
+
**Decisão:** Access token em memória, refresh token em cookie httpOnly; Secure; SameSite=Strict.
|
|
102
|
+
**Consequências:** Requer HTTPS em produção; CSP configurado corretamente.
|
|
103
|
+
|
|
104
|
+
### ADR-003: UUID como identificador de recursos
|
|
105
|
+
**Contexto:** IDs sequenciais expõem volume de dados e permitem enumeração (OWASP A01).
|
|
106
|
+
**Decisão:** Todos os IDs são UUID v4 gerado pelo PostgreSQL.
|
|
107
|
+
**Consequências:** URLs menos legíveis; índices ligeiramente maiores.
|
|
108
|
+
|
|
109
|
+
## Fluxo de autenticação
|
|
110
|
+
|
|
111
|
+
\`\`\`
|
|
112
|
+
Cliente → POST /auth/login → { access_token } + cookie(refresh_token)
|
|
113
|
+
Cliente → GET /recurso com Bearer {access_token}
|
|
114
|
+
Cliente → POST /auth/refresh com cookie → novo { access_token }
|
|
115
|
+
Cliente → POST /auth/logout → limpa cookie + invalida no banco
|
|
116
|
+
\`\`\`
|
|
117
|
+
|
|
118
|
+
## Estrutura de pastas
|
|
119
|
+
|
|
120
|
+
\`\`\`
|
|
121
|
+
backend/ ← NestJS + Prisma
|
|
122
|
+
frontend/ ← React + Vite
|
|
123
|
+
mobile/ ← React Native + Expo
|
|
124
|
+
postman/ ← Collections de API
|
|
125
|
+
docs/ ← Esta documentação
|
|
126
|
+
\`\`\`
|
|
44
127
|
```
|
|
45
128
|
|
|
46
129
|
---
|
|
@@ -50,21 +133,55 @@ MIT
|
|
|
50
133
|
```markdown
|
|
51
134
|
# Contribuindo
|
|
52
135
|
|
|
136
|
+
## Pré-requisitos
|
|
137
|
+
|
|
138
|
+
- Node.js >= 20
|
|
139
|
+
- Git configurado com nome e email
|
|
140
|
+
- Acesso ao ClickUp do projeto
|
|
141
|
+
|
|
142
|
+
## Fluxo de trabalho
|
|
143
|
+
|
|
144
|
+
1. Pegue uma task no ClickUp (status: Backlog)
|
|
145
|
+
2. Crie a branch: `git checkout -b feature/CK-{id}-{slug} develop`
|
|
146
|
+
3. Desenvolva e escreva testes
|
|
147
|
+
4. Faça commit seguindo Conventional Commits
|
|
148
|
+
5. Abra PR para `develop` com o template preenchido
|
|
149
|
+
6. Aguarde aprovação e merge
|
|
150
|
+
|
|
53
151
|
## Branches
|
|
54
152
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
153
|
+
| Branch | Propósito |
|
|
154
|
+
|--------|-----------|
|
|
155
|
+
| `main` | Produção — protegida, apenas via PR aprovado |
|
|
156
|
+
| `develop` | Integração — base para novas features |
|
|
157
|
+
| `feature/CK-{id}-{slug}` | Nova funcionalidade |
|
|
158
|
+
| `fix/CK-{id}-{slug}` | Correção de bug |
|
|
159
|
+
| `hotfix/{slug}` | Correção urgente em produção |
|
|
160
|
+
|
|
161
|
+
## Commits (Conventional Commits)
|
|
58
162
|
|
|
59
|
-
|
|
163
|
+
```
|
|
164
|
+
feat(auth): implementar login com JWT
|
|
165
|
+
fix(users): corrigir validação de email
|
|
166
|
+
docs(readme): atualizar instruções de instalação
|
|
167
|
+
chore(deps): atualizar dependências
|
|
168
|
+
test(auth): adicionar testes de refresh token
|
|
169
|
+
refactor(api): extrair lógica de paginação
|
|
170
|
+
```
|
|
60
171
|
|
|
61
|
-
|
|
172
|
+
## Padrão de PR
|
|
62
173
|
|
|
63
|
-
|
|
174
|
+
- Título: `feat(módulo): descrição curta`
|
|
175
|
+
- Preencha o template completamente
|
|
176
|
+
- Link da task: `Closes CK-{id}`
|
|
177
|
+
- Testes passando localmente antes de abrir o PR
|
|
178
|
+
- Nenhum `console.log` ou secret no código
|
|
64
179
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
-
|
|
180
|
+
## Code Review
|
|
181
|
+
|
|
182
|
+
- Reviews em até 24h úteis
|
|
183
|
+
- Aprovação de 1 reviewer para merge em develop
|
|
184
|
+
- Aprovação de 2 reviewers para merge em main
|
|
68
185
|
```
|
|
69
186
|
|
|
70
187
|
---
|
|
@@ -74,25 +191,35 @@ Conventional Commits: `feat:`, `fix:`, `docs:`, `chore:`.
|
|
|
74
191
|
```markdown
|
|
75
192
|
# Segurança
|
|
76
193
|
|
|
77
|
-
|
|
78
|
-
- Não abra issue pública com detalhes de exploit.
|
|
79
|
-
- Seguimos OWASP Top 10; revisões em releases importantes.
|
|
80
|
-
```
|
|
194
|
+
## Reportar vulnerabilidades
|
|
81
195
|
|
|
82
|
-
|
|
196
|
+
Não abra issues públicas com detalhes de exploits.
|
|
197
|
+
Envie um email para: [security@empresa.com]
|
|
83
198
|
|
|
84
|
-
|
|
199
|
+
Inclua:
|
|
200
|
+
- Descrição da vulnerabilidade
|
|
201
|
+
- Passos para reproduzir
|
|
202
|
+
- Impacto potencial
|
|
203
|
+
- Sugestão de correção (opcional)
|
|
85
204
|
|
|
86
|
-
|
|
87
|
-
# Arquitetura
|
|
205
|
+
Responderemos em até 48h úteis.
|
|
88
206
|
|
|
89
|
-
##
|
|
207
|
+
## Práticas adotadas
|
|
90
208
|
|
|
91
|
-
|
|
209
|
+
- OWASP Top 10 revisado em cada release
|
|
210
|
+
- Tokens JWT com expiração curta (15min access, 7d refresh)
|
|
211
|
+
- Refresh token como cookie httpOnly — não acessível via JavaScript
|
|
212
|
+
- Senhas com bcrypt (salt 12)
|
|
213
|
+
- Rate limiting em endpoints de autenticação
|
|
214
|
+
- Validação de inputs com class-validator em todos os DTOs
|
|
215
|
+
- UUIDs como IDs — sem enumeração
|
|
216
|
+
- Headers de segurança via Helmet
|
|
217
|
+
- CORS configurado explicitamente
|
|
92
218
|
|
|
93
|
-
|
|
219
|
+
## Dependências
|
|
94
220
|
|
|
95
|
-
|
|
221
|
+
- Auditoria automática via `npm audit` no CI
|
|
222
|
+
- Dependabot configurado para atualizações automáticas
|
|
96
223
|
```
|
|
97
224
|
|
|
98
225
|
---
|
|
@@ -102,16 +229,53 @@ Conventional Commits: `feat:`, `fix:`, `docs:`, `chore:`.
|
|
|
102
229
|
```markdown
|
|
103
230
|
## O que essa PR faz?
|
|
104
231
|
|
|
232
|
+
[Descrição objetiva do que foi implementado ou corrigido]
|
|
105
233
|
|
|
106
234
|
## Task relacionada
|
|
107
235
|
|
|
108
|
-
Closes
|
|
236
|
+
Closes CK-
|
|
237
|
+
|
|
238
|
+
## Como testar
|
|
239
|
+
|
|
240
|
+
1. [Passo 1]
|
|
241
|
+
2. [Passo 2]
|
|
109
242
|
|
|
110
243
|
## Checklist
|
|
111
244
|
|
|
112
|
-
- [ ] Testes passando
|
|
113
|
-
- [ ]
|
|
245
|
+
- [ ] Testes unitários escritos e passando
|
|
246
|
+
- [ ] Testes de integração passando
|
|
247
|
+
- [ ] Lint sem erros (`npm run lint`)
|
|
114
248
|
- [ ] `.env.example` atualizado (se novas variáveis)
|
|
115
|
-
- [ ] Postman
|
|
116
|
-
- [ ]
|
|
249
|
+
- [ ] Postman Collection atualizada (se novos endpoints)
|
|
250
|
+
- [ ] Swagger atualizado (se alterou contratos de API)
|
|
251
|
+
- [ ] Nenhum `console.log` no código
|
|
252
|
+
- [ ] Nenhum secret ou credencial no código
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
---
|
|
256
|
+
|
|
257
|
+
## .github/ISSUE_TEMPLATE/bug_report.md
|
|
258
|
+
|
|
259
|
+
```markdown
|
|
260
|
+
---
|
|
261
|
+
name: Bug report
|
|
262
|
+
about: Reporte um comportamento inesperado
|
|
263
|
+
labels: bug
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
## Descrição
|
|
267
|
+
[O que aconteceu vs o que deveria acontecer]
|
|
268
|
+
|
|
269
|
+
## Passos para reproduzir
|
|
270
|
+
1.
|
|
271
|
+
2.
|
|
272
|
+
3.
|
|
273
|
+
|
|
274
|
+
## Ambiente
|
|
275
|
+
- OS:
|
|
276
|
+
- Node:
|
|
277
|
+
- Navegador:
|
|
278
|
+
|
|
279
|
+
## Logs / Screenshots
|
|
280
|
+
[Cole logs ou prints relevantes]
|
|
117
281
|
```
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
---
|
|
2
|
-
name: figma
|
|
2
|
+
name: figma
|
|
3
3
|
description: Vinculação de protótipos Figma ao desenvolvimento e extração de tokens de design para TailwindCSS. Use quando o desenvolvedor precisar conectar o design ao código, extrair cores/tipografia/espaçamentos do Figma ou estruturar um arquivo de design para um novo projeto.
|
|
4
4
|
---
|
|
5
5
|
|
|
@@ -17,56 +17,155 @@ description: Vinculação de protótipos Figma ao desenvolvimento e extração d
|
|
|
17
17
|
## Tokens de design → tailwind.config.js
|
|
18
18
|
|
|
19
19
|
```javascript
|
|
20
|
-
// Copie
|
|
21
|
-
|
|
20
|
+
// Copie os valores exatos do Figma (Inspect → CSS)
|
|
21
|
+
export default {
|
|
22
22
|
theme: {
|
|
23
23
|
extend: {
|
|
24
24
|
colors: {
|
|
25
25
|
primary: {
|
|
26
|
+
50: '#eff6ff',
|
|
27
|
+
100: '#dbeafe',
|
|
26
28
|
500: '#3b82f6', // cor principal
|
|
27
29
|
600: '#2563eb', // hover
|
|
30
|
+
700: '#1d4ed8', // pressed
|
|
31
|
+
},
|
|
32
|
+
success: { DEFAULT: '#22c55e', light: '#dcfce7' },
|
|
33
|
+
error: { DEFAULT: '#ef4444', light: '#fee2e2' },
|
|
34
|
+
warning: { DEFAULT: '#f59e0b', light: '#fef3c7' },
|
|
35
|
+
// Neutros do Design System
|
|
36
|
+
gray: {
|
|
37
|
+
50: '#f9fafb',
|
|
38
|
+
100: '#f3f4f6',
|
|
39
|
+
500: '#6b7280',
|
|
40
|
+
900: '#111827',
|
|
28
41
|
},
|
|
29
|
-
success: '#22c55e',
|
|
30
|
-
error: '#ef4444',
|
|
31
|
-
warning: '#f59e0b',
|
|
32
42
|
},
|
|
33
43
|
fontFamily: {
|
|
34
|
-
sans: ['Inter', 'sans-serif'],
|
|
44
|
+
sans: ['Inter', 'sans-serif'], // fonte do Figma
|
|
45
|
+
mono: ['JetBrains Mono', 'monospace'],
|
|
46
|
+
},
|
|
47
|
+
fontSize: {
|
|
48
|
+
// Escala tipográfica do Design System
|
|
49
|
+
xs: ['12px', { lineHeight: '16px' }],
|
|
50
|
+
sm: ['14px', { lineHeight: '20px' }],
|
|
51
|
+
base: ['16px', { lineHeight: '24px' }],
|
|
52
|
+
lg: ['18px', { lineHeight: '28px' }],
|
|
53
|
+
xl: ['20px', { lineHeight: '28px' }],
|
|
54
|
+
'2xl':['24px', { lineHeight: '32px' }],
|
|
55
|
+
'3xl':['30px', { lineHeight: '36px' }],
|
|
56
|
+
},
|
|
57
|
+
spacing: {
|
|
58
|
+
// Usar múltiplos de 4 (grid de 4px)
|
|
59
|
+
// Tailwind já usa isso por padrão — não sobrescrever sem motivo
|
|
60
|
+
},
|
|
61
|
+
borderRadius: {
|
|
62
|
+
sm: '4px',
|
|
63
|
+
md: '8px',
|
|
64
|
+
lg: '12px',
|
|
65
|
+
xl: '16px',
|
|
66
|
+
full:'9999px',
|
|
67
|
+
},
|
|
68
|
+
boxShadow: {
|
|
69
|
+
card: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
|
70
|
+
modal:'0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
|
35
71
|
},
|
|
36
72
|
},
|
|
37
73
|
},
|
|
38
74
|
}
|
|
39
75
|
```
|
|
40
76
|
|
|
41
|
-
> 📖 Espelhar cores do Figma no Tailwind significa que quando o designer muda a paleta, você atualiza em um lugar e todos os componentes refletem a mudança.
|
|
42
|
-
|
|
43
77
|
## Tradução Figma → Tailwind
|
|
44
78
|
|
|
45
79
|
| Figma | Tailwind |
|
|
46
80
|
|-------|----------|
|
|
81
|
+
| Padding 4px | `p-1` |
|
|
82
|
+
| Padding 8px | `p-2` |
|
|
83
|
+
| Padding 12px | `p-3` |
|
|
47
84
|
| Padding 16px | `p-4` |
|
|
48
|
-
| Padding
|
|
85
|
+
| Padding 24px | `p-6` |
|
|
86
|
+
| Padding 32px | `p-8` |
|
|
49
87
|
| Gap 8px | `gap-2` |
|
|
50
|
-
|
|
|
51
|
-
| Border radius
|
|
52
|
-
|
|
|
53
|
-
|
|
|
88
|
+
| Gap 16px | `gap-4` |
|
|
89
|
+
| Border radius 4px | `rounded-sm` |
|
|
90
|
+
| Border radius 8px | `rounded-md` |
|
|
91
|
+
| Border radius 12px | `rounded-lg` |
|
|
92
|
+
| Font 14px / 400 | `text-sm font-normal` |
|
|
93
|
+
| Font 14px / 600 | `text-sm font-semibold` |
|
|
94
|
+
| Font 16px / 700 | `text-base font-bold` |
|
|
95
|
+
| Opacity 50% | `opacity-50` |
|
|
54
96
|
|
|
55
|
-
##
|
|
97
|
+
## Nomenclatura de componentes Figma ↔ React
|
|
56
98
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
99
|
+
```
|
|
100
|
+
Figma: Button/Primary/Default → <Button variant="primary" />
|
|
101
|
+
Figma: Button/Secondary/Hover → <Button variant="secondary" className="hover:..." />
|
|
102
|
+
Figma: Input/Default → <Input />
|
|
103
|
+
Figma: Input/Error → <Input error="mensagem" />
|
|
104
|
+
Figma: Card/Default → <Card />
|
|
105
|
+
Figma: Modal/Confirm → <ConfirmModal />
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
## Estados obrigatórios por componente
|
|
109
|
+
|
|
110
|
+
Exija estes estados no Figma antes de iniciar o desenvolvimento:
|
|
111
|
+
|
|
112
|
+
| Componente | Estados obrigatórios |
|
|
113
|
+
|------------|---------------------|
|
|
114
|
+
| Button | default, hover, active, disabled, loading |
|
|
115
|
+
| Input | default, focus, filled, error, disabled |
|
|
116
|
+
| Select | default, open, selected, disabled |
|
|
117
|
+
| Checkbox | unchecked, checked, indeterminate, disabled |
|
|
118
|
+
| Card | default, hover (se clicável) |
|
|
119
|
+
| Modal | aberto, fechando (se animado) |
|
|
120
|
+
|
|
121
|
+
## Dark mode — variáveis CSS
|
|
122
|
+
|
|
123
|
+
Se o projeto tiver dark mode, use variáveis CSS em vez de classes fixas:
|
|
124
|
+
|
|
125
|
+
```css
|
|
126
|
+
/* src/index.css */
|
|
127
|
+
:root {
|
|
128
|
+
--color-bg: #ffffff;
|
|
129
|
+
--color-text: #111827;
|
|
130
|
+
--color-border: #e5e7eb;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.dark {
|
|
134
|
+
--color-bg: #0f172a;
|
|
135
|
+
--color-text: #f1f5f9;
|
|
136
|
+
--color-border: #1e293b;
|
|
137
|
+
}
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
```javascript
|
|
141
|
+
// tailwind.config.js
|
|
142
|
+
darkMode: 'class',
|
|
143
|
+
theme: {
|
|
144
|
+
extend: {
|
|
145
|
+
backgroundColor: { DEFAULT: 'var(--color-bg)' },
|
|
146
|
+
textColor: { DEFAULT: 'var(--color-text)' },
|
|
147
|
+
borderColor: { DEFAULT: 'var(--color-border)' },
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
```
|
|
63
151
|
|
|
64
152
|
## Organização do arquivo Figma
|
|
65
153
|
|
|
66
154
|
```
|
|
67
|
-
📄 Cover ← Thumbnail
|
|
68
|
-
📄 Design System ← Cores, tipografia, componentes
|
|
69
|
-
📄 UI — Auth ← Login, registro, recuperação
|
|
70
|
-
📄 UI — [Módulo] ← Telas de cada módulo
|
|
71
|
-
📄 Protótipo ← Fluxo interativo
|
|
155
|
+
📄 Cover ← Thumbnail do projeto
|
|
156
|
+
📄 Design System ← Cores, tipografia, espaçamentos, ícones, componentes base
|
|
157
|
+
📄 UI — Auth ← Login, registro, recuperação de senha
|
|
158
|
+
📄 UI — [Módulo] ← Telas de cada módulo (uma página por módulo)
|
|
159
|
+
📄 Protótipo ← Fluxo interativo para validação
|
|
160
|
+
📄 Handoff ← Specs finais para desenvolvimento (anotações, medidas)
|
|
72
161
|
```
|
|
162
|
+
|
|
163
|
+
## Checklist handoff design → código
|
|
164
|
+
|
|
165
|
+
- [ ] Tela finalizada (não wireframe) e aprovada
|
|
166
|
+
- [ ] Todas as cores usando variáveis do Design System (não hex solto)
|
|
167
|
+
- [ ] Todos os estados documentados (hover, active, disabled, error, loading)
|
|
168
|
+
- [ ] Versão mobile definida (se responsivo)
|
|
169
|
+
- [ ] Tokens extraídos e mapeados no `tailwind.config.js`
|
|
170
|
+
- [ ] Link do Figma no README.md
|
|
171
|
+
- [ ] Fontes baixadas ou configuradas no Google Fonts
|