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>
2026-04-07 04:52:03 +01:00
parent 6285be6c2e
commit faef9b47dc
185 changed files with 9238 additions and 589 deletions
@@ -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*