fix(project-manager): remover Dify KB das descriptions, marcar nota TODO
Dify foi removido 06-03-2026. Skills brainstorm/discover ainda referenciam-no no corpo. Bump v1.2 + nota top-of-file. Reescrita workflow para próxima sessão. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -316,3 +316,15 @@ Hashtags/links: #2b6cb0
|
||||
|
||||
**Versao**: 1.0.0 | **Data**: 2026-03-10 | **Autor**: Descomplicar®
|
||||
*Paletas detalhadas por contexto: `references/color-palettes.md`*
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
|
||||
*Adicionar nova linha após cada erro corrigido.*
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
name: cinematic-site
|
||||
category: design-media
|
||||
description: "Constroi websites cinematograficos a partir de um site existente. Pipeline 4 passos: brand analysis, scene generation, build HTML/CSS, preview. Usar quando 'cinematic', 'website premium', 'site cinematografico', 'redesign site', 'nanobanana'."
|
||||
version: "1.0.0"
|
||||
created: 2026-04-07
|
||||
tools: [Bash, Read, Write, mcp__claude-in-chrome__read_page, mcp__claude-in-chrome__tabs_create_mcp, mcp__chrome-devtools__take_screenshot]
|
||||
---
|
||||
|
||||
# Skill: /cinematic-site
|
||||
|
||||
Constroi websites cinematograficos responsivos a partir de um site existente. Inspirado no Nanobanana 2 (#366 Jay E / RoboNuggets).
|
||||
|
||||
---
|
||||
|
||||
## Pipeline de 4 passos
|
||||
|
||||
### Passo 1 — Brand Analysis
|
||||
|
||||
Receber URL do site existente do utilizador.
|
||||
|
||||
1. Abrir URL via `mcp__claude-in-chrome__tabs_create_mcp` + `mcp__claude-in-chrome__read_page`
|
||||
2. Extrair:
|
||||
- Paleta de cores (hex codes das cores dominantes)
|
||||
- Logo (URL ou descricao)
|
||||
- Fontes usadas (font-family do CSS)
|
||||
- Tom de voz (formal, casual, tecnico)
|
||||
- Tipo de negocio e sector
|
||||
- Conteudo principal (hero text, servicos, about)
|
||||
3. Guardar analise em `/tmp/cinematic-site/brand-analysis.json`:
|
||||
|
||||
```json
|
||||
{
|
||||
"url": "https://...",
|
||||
"business": "restaurante italiano",
|
||||
"colors": {"primary": "#2C3E50", "secondary": "#E74C3C", "accent": "#F39C12"},
|
||||
"fonts": {"heading": "Playfair Display", "body": "Inter"},
|
||||
"tone": "acolhedor e premium",
|
||||
"logo_description": "...",
|
||||
"hero_text": "...",
|
||||
"sections": ["sobre", "menu", "reservas", "contacto"]
|
||||
}
|
||||
```
|
||||
|
||||
### Passo 2 — Scene Generation
|
||||
|
||||
Com base na analise, definir o design cinematografico:
|
||||
|
||||
1. **Hero section:** escolher tipo de animacao:
|
||||
- Parallax com imagem de fundo
|
||||
- Scroll-reveal progressivo
|
||||
- Video background concept (descricao, nao video real)
|
||||
- Cursor-follow effect
|
||||
2. **3-5 seccoes adicionais** com animacoes scroll-based:
|
||||
- Referenciar `Hub/04-Stack/02.03-IA/biblioteca-animacoes-scroll.md` para patterns disponiveis
|
||||
3. **Responsive breakpoints:** mobile-first, 3 breakpoints (mobile, tablet, desktop)
|
||||
4. Guardar plano em `/tmp/cinematic-site/scene-plan.md`
|
||||
|
||||
### Passo 3 — Build
|
||||
|
||||
Gerar ficheiros HTML/CSS/JS:
|
||||
|
||||
1. Criar `/tmp/cinematic-site/output/`:
|
||||
- `index.html` — single-page com todas as seccoes
|
||||
- `styles.css` — Tailwind ou CSS puro
|
||||
- `animations.js` — scroll observers + animacoes
|
||||
2. Regras de qualidade:
|
||||
- Referenciar `design.json` Descomplicar para standards
|
||||
- Mobile-first
|
||||
- Core Web Vitals: LCP <2.5s, CLS <0.1
|
||||
- Sem dependencias externas pesadas (max framer-motion ou CSS puro)
|
||||
- Acessibilidade basica (alt text, contraste, focus states)
|
||||
3. Incluir comentarios no HTML com seccoes claras
|
||||
|
||||
### Passo 4 — Preview
|
||||
|
||||
1. Abrir `index.html` no browser local: `xdg-open /tmp/cinematic-site/output/index.html`
|
||||
2. Tirar screenshot via `mcp__chrome-devtools__take_screenshot`
|
||||
3. Mostrar comparacao ao utilizador:
|
||||
- Site original (URL)
|
||||
- Novo site (screenshot)
|
||||
4. Pedir aprovacao antes de qualquer proximo passo
|
||||
5. Se aprovado, sugerir opcoes:
|
||||
- Copiar para pasta de projecto
|
||||
- Ajustar cores/seccoes
|
||||
- Exportar para Vercel/Netlify (manual)
|
||||
|
||||
---
|
||||
|
||||
## Regras
|
||||
|
||||
- **Nunca deploy automatico** — apenas preview local
|
||||
- **Nunca inventar conteudo** — usar texto real do site original
|
||||
- **Sempre referenciar design.json** para standards visuais
|
||||
- **Output em /tmp/cinematic-site/** — nunca em pastas de projecto sem aprovacao
|
||||
- **README.md incluido** com instrucoes de deploy manual
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
name: design-b2b
|
||||
description: >
|
||||
Design system para serviços B2B — agências, consultoria, SaaS, PMEs portuguesas.
|
||||
Propostas visuais, landing pages, apresentações e materiais para decisores PT.
|
||||
Usar quando: proposta comercial, landing page serviço B2B, apresentação cliente,
|
||||
one-pager, ou qualquer material visual para audiência empresarial portuguesa.
|
||||
---
|
||||
|
||||
# /design-b2b — Design System Serviços B2B
|
||||
|
||||
## Paleta
|
||||
|
||||
```css
|
||||
--primary: #1e3a5f; /* Azul institucional — confiança, autoridade */
|
||||
--accent: #f97316; /* Laranja acção — CTAs, destaques */
|
||||
--neutral: #f8fafc; /* Fundo profissional */
|
||||
--text: #1e293b; /* Texto principal */
|
||||
--muted: #64748b; /* Texto secundário, legendas */
|
||||
--border: #e2e8f0; /* Divisores subtis */
|
||||
```
|
||||
|
||||
## Estrutura proposta comercial
|
||||
|
||||
### One-pager (1 A4 ou landing page equivalente)
|
||||
1. **Header:** Logo cliente + logo Descomplicar + título proposta
|
||||
2. **Problema:** 2-3 bullets do problema actual do cliente
|
||||
3. **Solução:** O que entregamos (concreto, não vago)
|
||||
4. **Resultados:** Métricas esperadas (%, EUR, tempo)
|
||||
5. **Investimento:** Preço claro, sem asteriscos escondidos
|
||||
6. **Próximo passo:** CTA único — "Agendar Reunião" ou "Aceitar Proposta"
|
||||
|
||||
### Landing page serviço B2B
|
||||
1. Headline: benefício principal (não feature)
|
||||
2. Sub-headline: para quem é + resultado esperado
|
||||
3. Prova social: 3 logos de clientes ou 1 case study
|
||||
4. Serviços: 3-5 cards com ícone + nome + 1 linha
|
||||
5. Processo: 3-4 passos (simples e claro)
|
||||
6. CTA: formulário simples (nome, email, empresa, mensagem)
|
||||
|
||||
## Tom e linguagem B2B PT
|
||||
|
||||
- **Usar:** "optimizar", "aumentar eficiência", "reduzir custos"
|
||||
- **Evitar:** "disruptivo", "revolucionário", "próximo nível"
|
||||
- **Tratamento:** "Você" (neutro) ou "A sua empresa" — nunca "tu" em contexto formal
|
||||
- **Números:** sempre com fonte (ex: "30% redução de custos — caso Empresa X")
|
||||
|
||||
## Anti-slop checklist B2B
|
||||
|
||||
- [ ] Zero jargão sem explicação
|
||||
- [ ] Preços ou "Solicitar orçamento" — nunca ambiguidade
|
||||
- [ ] Casos reais, não hipotéticos
|
||||
- [ ] Mobile: decisores usam telemóvel para primeiro contacto
|
||||
- [ ] Social proof: logo real, não ilustração
|
||||
|
||||
## Referências visuais
|
||||
|
||||
Ver `~/.claude/design/referencias-visuais/servicos-b2b/`
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
name: design-ecommerce
|
||||
description: >
|
||||
Design system para e-commerce — lojas WooCommerce, páginas produto, checkout PT.
|
||||
Optimização conversão, layouts loja, UX checkout e elementos de confiança.
|
||||
Usar quando: criar ou optimizar loja WooCommerce, página produto, carrinho,
|
||||
checkout, ou qualquer elemento visual de e-commerce para mercado português.
|
||||
---
|
||||
|
||||
# /design-ecommerce — Design System E-commerce
|
||||
|
||||
## Paleta base (adaptar à marca do cliente)
|
||||
|
||||
```css
|
||||
--cta: #dc2626; /* Vermelho urgência — "Comprar Agora" */
|
||||
--trust: #16a34a; /* Verde confiança — "Pagamento Seguro" */
|
||||
--price: #1e3a5f; /* Azul preço destacado */
|
||||
--sale: #f59e0b; /* Âmbar promoção */
|
||||
--neutral: #ffffff;
|
||||
--text: #111827;
|
||||
```
|
||||
|
||||
## Elementos conversão obrigatórios
|
||||
|
||||
### Página produto
|
||||
1. Imagens: mínimo 4 ângulos, zoom, vídeo se possível
|
||||
2. Preço: destacado, desconto visível, preço original riscado
|
||||
3. Stock: urgência ("Últimas 3 unidades")
|
||||
4. CTA: "Adicionar ao Carrinho" (vermelho, proeminente)
|
||||
5. Confiança: selos Visa/MB/MBWay + devolução 30 dias
|
||||
6. Avaliações: estrelas + número (social proof)
|
||||
7. "Também pode gostar" + "Compraram juntos"
|
||||
|
||||
### Checkout PT
|
||||
- Referência Multibanco visível
|
||||
- MB Way como opção principal
|
||||
- Campo NIF opcional (B2B)
|
||||
- Morada: formato PT (Rua, nº, andar, código postal, localidade)
|
||||
|
||||
### Elementos de confiança PT
|
||||
- Selos: MBWay, Visa, Mastercard, PayPal
|
||||
- "Envio para Portugal Continental em 24-48h"
|
||||
- "Devolução gratuita em 30 dias"
|
||||
- "Suporte em português"
|
||||
|
||||
## Anti-slop checklist e-commerce
|
||||
|
||||
- [ ] Preços em EUR (não USD)
|
||||
- [ ] CTAs em PT-PT: "Comprar" não "Buy", "Carrinho" não "Cart"
|
||||
- [ ] Mobile: checkout testado em 375px (maioria compra no telemóvel)
|
||||
- [ ] Tempo de carregamento: imagens optimizadas <100KB
|
||||
- [ ] Trust badges visíveis acima do fold
|
||||
|
||||
## Referências visuais
|
||||
|
||||
Ver `~/.claude/design/referencias-visuais/ecommerce/`
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: design-saude
|
||||
description: >
|
||||
Design system para sector saúde — clínicas, KiviCare, consultórios médicos.
|
||||
Paleta, tipografia, CTAs e layouts optimizados para contexto clínico PT.
|
||||
Usar quando: criar landing page de clínica, página de serviços médicos,
|
||||
agendamento online, ou qualquer material visual para clientes saúde.
|
||||
---
|
||||
|
||||
# /design-saude — Design System Saúde
|
||||
|
||||
## Paleta
|
||||
|
||||
```css
|
||||
--primary: #0ea5e9; /* Azul confiança médica */
|
||||
--secondary: #10b981; /* Verde saúde/cura */
|
||||
--neutral: #f8fafc; /* Fundo limpo e asséptico */
|
||||
--text: #1e293b; /* Texto principal */
|
||||
--accent: #f59e0b; /* CTA urgência (marcar consulta) */
|
||||
--danger: #ef4444; /* Alertas, urgências */
|
||||
```
|
||||
|
||||
## Tipografia
|
||||
|
||||
- **Títulos:** Inter SemiBold — transmite profissionalismo sem frieza
|
||||
- **Corpo:** Inter Regular 16px, line-height 1.7 — legibilidade para público 40+
|
||||
- **Evitar:** fontes decorativas, cursivas, serifas antiquadas
|
||||
|
||||
## Layouts obrigatórios
|
||||
|
||||
### Landing page clínica
|
||||
1. Hero: foto médico real + headline "Cuidamos de si" + CTA "Marcar Consulta"
|
||||
2. Serviços: cards com ícone + nome + preço (se disponível)
|
||||
3. Equipa: fotos reais + credenciais
|
||||
4. Depoimentos: com nome e tratamento (anonimizado se necessário)
|
||||
5. Localização + horários + contacto
|
||||
6. CTA final: WhatsApp ou formulário
|
||||
|
||||
### CTAs saúde
|
||||
- Principal: "Marcar Consulta" (verde, proeminente)
|
||||
- Secundário: "Saber Mais" ou "Ver Serviços"
|
||||
- Urgência: "Consulta Hoje" (âmbar)
|
||||
|
||||
## Anti-slop checklist saúde
|
||||
|
||||
- [ ] Fotos de pessoas reais (não stock de médicos brancos genéricos)
|
||||
- [ ] RGPD: sem dados de pacientes visíveis em mockups
|
||||
- [ ] Cores acessíveis: contraste WCAG AA mínimo
|
||||
- [ ] Mobile: formulário agendamento testado em 375px
|
||||
- [ ] PT-PT: "consulta" não "appointment", "médico" não "doctor"
|
||||
|
||||
## Referências visuais
|
||||
|
||||
Ver `~/.claude/design/referencias-visuais/saude/`
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
name: design-solar
|
||||
description: >
|
||||
Design system para sector solar/fotovoltaico — SolarFV, instaladores, B2B energia.
|
||||
Paleta, calculadoras, propostas visuais e layouts para sector energias renováveis PT.
|
||||
Usar quando: landing page solar, proposta instalação FV, calculadora poupança,
|
||||
ou material visual para clientes energia solar.
|
||||
---
|
||||
|
||||
# /design-solar — Design System Solar/FV
|
||||
|
||||
## Paleta
|
||||
|
||||
```css
|
||||
--primary: #f59e0b; /* Amarelo solar — energia, optimismo */
|
||||
--secondary: #1e3a5f; /* Azul escuro — confiança, profissionalismo B2B */
|
||||
--green: #16a34a; /* Verde sustentabilidade */
|
||||
--neutral: #f9fafb; /* Fundo limpo */
|
||||
--text: #111827; /* Texto principal */
|
||||
```
|
||||
|
||||
## Elementos distintivos sector solar
|
||||
|
||||
### Calculadora de poupança (elemento central)
|
||||
- Input: consumo mensal kWh + factura actual
|
||||
- Output: poupança anual estimada + payback em anos
|
||||
- Visual: comparação antes/depois com gráfico simples
|
||||
|
||||
### Proposta instalação
|
||||
1. Sumário executivo (1 página): consumo actual → produção estimada → ROI
|
||||
2. Especificações técnicas: painéis, inversor, capacidade
|
||||
3. Financiamento: opções (compra, leasing, PPA)
|
||||
4. Garantias e certificações
|
||||
5. CTA: "Solicitar Visita Técnica"
|
||||
|
||||
## Tipografia
|
||||
|
||||
- **Títulos:** Poppins Bold — moderno, energético
|
||||
- **Dados/métricas:** Inter Mono — leiturabilidade para números
|
||||
- **Corpo:** Inter Regular
|
||||
|
||||
## Anti-slop checklist solar
|
||||
|
||||
- [ ] Números reais de produção (não inventar kWh)
|
||||
- [ ] Certificações visíveis (DGEG, SCE)
|
||||
- [ ] Mobile: calculadora funcional em 375px
|
||||
- [ ] B2B: tom técnico e sóbrio (não "salve o planeta")
|
||||
- [ ] PT: "fotovoltaico" não "fotovoltaica" (painel fotovoltaico)
|
||||
|
||||
## Referências visuais
|
||||
|
||||
Ver `~/.claude/design/referencias-visuais/solar/`
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
@@ -154,3 +154,15 @@ fidelidade, concisao visual, legibilidade, profissionalismo, brand compliance.
|
||||
---
|
||||
|
||||
**Versao**: 2.0.0 | **Data**: 2026-02-12 | **Autor**: Descomplicar
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
Registo de erros conhecidos e como evitá-los. Lido automaticamente antes de executar.
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
|
||||
*Adicionar nova linha após cada erro corrigido.*
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
name: penpot-pipeline
|
||||
description: >
|
||||
Pipeline Penpot→código: extrai designs do Penpot via MCP, converte para HTML/CSS/React.
|
||||
Usar quando: converter mockup Penpot para código, gerar componente a partir de design,
|
||||
exportar assets Penpot, sincronizar design system com código.
|
||||
---
|
||||
|
||||
# /penpot-pipeline — Pipeline Design→Código
|
||||
|
||||
Workflow formalizado para converter designs Penpot em código funcional.
|
||||
O MCP Penpot já existe (`mcp__penpot__*`) — esta skill formaliza o workflow.
|
||||
|
||||
---
|
||||
|
||||
## Workflow Completo
|
||||
|
||||
### Passo 1 — Encontrar o Design
|
||||
|
||||
```javascript
|
||||
// Listar projectos Penpot
|
||||
mcp__penpot__list_projects({})
|
||||
|
||||
// Listar ficheiros no projecto
|
||||
mcp__penpot__get_project_files({ project_id: "<ID>" })
|
||||
|
||||
// Buscar componente específico
|
||||
mcp__penpot__search_object({
|
||||
file_id: "<FILE_ID>",
|
||||
query: "<nome do componente>"
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 2 — Analisar Estrutura
|
||||
|
||||
```javascript
|
||||
// Schema disponível (ler uma vez por sessão)
|
||||
mcp__penpot__penpot_tree_schema({})
|
||||
|
||||
// Árvore do componente com screenshot
|
||||
mcp__penpot__get_object_tree({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>",
|
||||
depth: 3
|
||||
})
|
||||
|
||||
// Screenshot visual de alta resolução
|
||||
mcp__penpot__get_rendered_component({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>"
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 3 — Gerar Código
|
||||
|
||||
Com base na árvore + screenshot, gerar código na stack alvo:
|
||||
|
||||
#### HTML + CSS (vanilla)
|
||||
```
|
||||
- Usar variáveis CSS para cores/fonts do design system
|
||||
- Mobile-first (375px → 768px → 1200px)
|
||||
- Nomes de classes: BEM (block__element--modifier)
|
||||
- Acessibilidade: aria-labels, roles semânticos
|
||||
```
|
||||
|
||||
#### React + TailwindCSS
|
||||
```
|
||||
- Componente funcional com TypeScript
|
||||
- Props tipadas
|
||||
- Variantes via className condicional
|
||||
- Shadcn/ui para primitivos (Button, Card, Input)
|
||||
- Tailwind classes da paleta Descomplicar ou do cliente
|
||||
```
|
||||
|
||||
#### Next.js (Server Component por defeito)
|
||||
```
|
||||
- Server Component se sem interactividade
|
||||
- Client Component ('use client') apenas para eventos
|
||||
- Image: next/image com alt e sizes
|
||||
- Link: next/link
|
||||
```
|
||||
|
||||
### Passo 4 — Exportar Assets
|
||||
|
||||
```javascript
|
||||
// Exportar imagem/icon do design
|
||||
mcp__penpot__export_object({
|
||||
file_id: "<FILE_ID>",
|
||||
object_id: "<OBJECT_ID>",
|
||||
format: "svg" // svg | png | pdf
|
||||
})
|
||||
```
|
||||
|
||||
### Passo 5 — Auditoria 10/10
|
||||
|
||||
Antes de entregar código (Regra #49):
|
||||
- [ ] Segurança: sem XSS, sem dados expostos
|
||||
- [ ] Performance: imagens optimizadas, lazy loading
|
||||
- [ ] Acessibilidade: contraste, labels, keyboard nav
|
||||
- [ ] Mobile: testado em 375px
|
||||
- [ ] PT-PT: texto em português europeu
|
||||
|
||||
---
|
||||
|
||||
## Design System Descomplicar → Código
|
||||
|
||||
```css
|
||||
/* design.json → variáveis CSS */
|
||||
--color-primary: #1e3a5f;
|
||||
--color-accent: #f97316;
|
||||
--color-neutral: #f8fafc;
|
||||
--color-text: #1e293b;
|
||||
--color-muted: #64748b;
|
||||
--font-heading: 'Inter', sans-serif;
|
||||
--font-body: 'Inter', sans-serif;
|
||||
```
|
||||
|
||||
```tsx
|
||||
// Tailwind config (tailwind.config.ts)
|
||||
colors: {
|
||||
primary: '#1e3a5f',
|
||||
accent: '#f97316',
|
||||
neutral: '#f8fafc',
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Casos de Uso
|
||||
|
||||
### Landing page de serviço
|
||||
```
|
||||
1. mcp__penpot__search_object — encontrar frames "Hero", "Features", "CTA"
|
||||
2. get_object_tree para cada frame
|
||||
3. get_rendered_component para referência visual
|
||||
4. Gerar HTML/CSS seguindo /design-b2b ou /design-saude
|
||||
5. Integrar em WP (Elementor) ou Next.js
|
||||
```
|
||||
|
||||
### Componente React isolado
|
||||
```
|
||||
1. search_object — encontrar componente
|
||||
2. get_object_tree com depth=5 (para componentes complexos)
|
||||
3. Gerar TSX com props
|
||||
4. Exportar assets SVG
|
||||
5. Publicar em /components da biblioteca
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Anti-Patterns
|
||||
|
||||
- **Nunca** gerar código sem ver o screenshot (get_rendered_component)
|
||||
- **Nunca** assumir cores sem verificar design.json ou paleta do cliente
|
||||
- **Nunca** entregar sem testar mobile (375px)
|
||||
- **Nunca** hardcodar texto — usar variáveis/props
|
||||
|
||||
---
|
||||
|
||||
## Healing Log
|
||||
|
||||
```jsonl
|
||||
{"date":"","issue":"","fix":"","source":"user|auto"}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
*Skill /penpot-pipeline v1.0 | 06-04-2026 | Eixo 5.5 — Pipeline Penpot→Código*
|
||||
Reference in New Issue
Block a user