create-genia-os 2.1.1 → 2.3.0

package/template/.genia/skills/design/canvas-design.md

@@ -1,109 +1,109 @@
-# Skill: /canvas-design
-
-## Metadata
-- **Nome**: Canvas Design
-- **Comando**: /canvas-design
-- **Agente**: @dev
-- **Categoria**: design
-- **Versao**: 2.0
-
-## Descricao
-Criar arte visual bonita em .png e .pdf usando filosofia de design. Criar designs visuais originais para posters, pecas de arte e designs estaticos.
-
-## Quando Usar
-- Criar posters
-- Criar pecas de arte
-- Criar designs estaticos
-- Criar material visual para apresentacoes
-
-## Processo em Duas Etapas
-
-### 1. Criacao da Filosofia de Design (.md)
-### 2. Expressao no Canvas (.pdf ou .png)
-
-## Filosofia de Design
-
-### Nomear o Movimento (1-2 palavras)
-Exemplos:
-- "Brutalist Joy"
-- "Chromatic Silence"
-- "Metabolist Dreams"
-
-### Articular a Filosofia (4-6 paragrafos)
-Expressar como a filosofia se manifesta atraves de:
-- Espaco e forma
-- Cor e material
-- Escala e ritmo
-- Composicao e equilibrio
-- Hierarquia visual
-
-### Diretrizes Criticas
-- **Evitar redundancia**: Cada aspecto mencionado uma vez
-- **Enfatizar craftsmanship**: O trabalho deve parecer meticulosamente elaborado
-- **Deixar espaco criativo**: Especifico mas conciso
-
-## Exemplos de Filosofia
-
-### "Concrete Poetry"
-Comunicacao atraves de forma monumental e geometria bold. Blocos de cor massivos, tipografia escultural, divisoes espaciais brutalistas. Energia de poster polones encontra Le Corbusier.
-
-### "Chromatic Language"
-Cor como sistema primario de informacao. Precisao geometrica onde zonas de cor criam significado. Tipografia minimal - pequenas labels sans-serif.
-
-### "Analog Meditation"
-Contemplacao visual quieta atraves de textura e espaco respirando. Grao de papel, bleeds de tinta, vasto espaco negativo. Estetica de photobook japones.
-
-### "Geometric Silence"
-Ordem pura e contencao. Precisao baseada em grid, fotografia bold ou graficos stark, espaco negativo dramatico. Formalismo suico encontra honestidade material brutalista.
-
-## Criacao do Canvas
-
-### Principios
-- Trabalho de qualidade de museu ou revista
-- Padroes repetitivos e formas perfeitas
-- Tratamento como um diagrama de disciplina imaginaria
-- Tipografia esparsa e clinica
-- Paleta de cores limitada e intencional
-
-### Texto como Elemento Visual
-- Texto sempre minimal e visual-first
-- Contexto guia a escala
-- Sofisticacao nao-negociavel
-- Usar fontes do diretorio `./canvas-fonts`
-
-### Qualidade
-- Parecer que levou incontaveis horas para criar
-- Alguem no topo absoluto da sua area
-- Cuidado meticuloso em cada detalhe
-- Nada sobrepoe, formatacao impecavel
-
-## Output
-
-- Arquivo .md com a filosofia de design
-- Arquivo .pdf ou .png com o canvas final
-
-## Segunda Passagem (Refinamento)
-
-**CRITICO**: Ao refinar:
-- NAO adicionar mais graficos
-- Refinar o que ja foi criado
-- Tornar extremamente crisp
-- Respeitar filosofia de design
-- Respeitar principios de minimalismo
-
-## Multi-Paginas
-
-Quando solicitado multiplas paginas:
-- Criar paginas criativas na mesma linha da filosofia
-- Cada pagina distintamente diferente
-- Bundlar no mesmo .pdf ou multiplos .pngs
-- Tratar como um livro de mesa de cafe
-- Paginas como twists e memorias do original
-
-## Tasks Relacionadas
-- task:criar-poster
-- task:criar-arte-visual
-- task:design-grafico
-
-## Workflows
-- workflow:criacao-material-visual
+# Skill: /canvas-design
+
+## Metadata
+- **Nome**: Canvas Design
+- **Comando**: /canvas-design
+- **Agente**: @dev
+- **Categoria**: design
+- **Versao**: 2.0
+
+## Descricao
+Criar arte visual bonita em .png e .pdf usando filosofia de design. Criar designs visuais originais para posters, pecas de arte e designs estaticos.
+
+## Quando Usar
+- Criar posters
+- Criar pecas de arte
+- Criar designs estaticos
+- Criar material visual para apresentacoes
+
+## Processo em Duas Etapas
+
+### 1. Criacao da Filosofia de Design (.md)
+### 2. Expressao no Canvas (.pdf ou .png)
+
+## Filosofia de Design
+
+### Nomear o Movimento (1-2 palavras)
+Exemplos:
+- "Brutalist Joy"
+- "Chromatic Silence"
+- "Metabolist Dreams"
+
+### Articular a Filosofia (4-6 paragrafos)
+Expressar como a filosofia se manifesta atraves de:
+- Espaco e forma
+- Cor e material
+- Escala e ritmo
+- Composicao e equilibrio
+- Hierarquia visual
+
+### Diretrizes Criticas
+- **Evitar redundancia**: Cada aspecto mencionado uma vez
+- **Enfatizar craftsmanship**: O trabalho deve parecer meticulosamente elaborado
+- **Deixar espaco criativo**: Especifico mas conciso
+
+## Exemplos de Filosofia
+
+### "Concrete Poetry"
+Comunicacao atraves de forma monumental e geometria bold. Blocos de cor massivos, tipografia escultural, divisoes espaciais brutalistas. Energia de poster polones encontra Le Corbusier.
+
+### "Chromatic Language"
+Cor como sistema primario de informacao. Precisao geometrica onde zonas de cor criam significado. Tipografia minimal - pequenas labels sans-serif.
+
+### "Analog Meditation"
+Contemplacao visual quieta atraves de textura e espaco respirando. Grao de papel, bleeds de tinta, vasto espaco negativo. Estetica de photobook japones.
+
+### "Geometric Silence"
+Ordem pura e contencao. Precisao baseada em grid, fotografia bold ou graficos stark, espaco negativo dramatico. Formalismo suico encontra honestidade material brutalista.
+
+## Criacao do Canvas
+
+### Principios
+- Trabalho de qualidade de museu ou revista
+- Padroes repetitivos e formas perfeitas
+- Tratamento como um diagrama de disciplina imaginaria
+- Tipografia esparsa e clinica
+- Paleta de cores limitada e intencional
+
+### Texto como Elemento Visual
+- Texto sempre minimal e visual-first
+- Contexto guia a escala
+- Sofisticacao nao-negociavel
+- Usar fontes do diretorio `./canvas-fonts`
+
+### Qualidade
+- Parecer que levou incontaveis horas para criar
+- Alguem no topo absoluto da sua area
+- Cuidado meticuloso em cada detalhe
+- Nada sobrepoe, formatacao impecavel
+
+## Output
+
+- Arquivo .md com a filosofia de design
+- Arquivo .pdf ou .png com o canvas final
+
+## Segunda Passagem (Refinamento)
+
+**CRITICO**: Ao refinar:
+- NAO adicionar mais graficos
+- Refinar o que ja foi criado
+- Tornar extremamente crisp
+- Respeitar filosofia de design
+- Respeitar principios de minimalismo
+
+## Multi-Paginas
+
+Quando solicitado multiplas paginas:
+- Criar paginas criativas na mesma linha da filosofia
+- Cada pagina distintamente diferente
+- Bundlar no mesmo .pdf ou multiplos .pngs
+- Tratar como um livro de mesa de cafe
+- Paginas como twists e memorias do original
+
+## Tasks Relacionadas
+- task:criar-poster
+- task:criar-arte-visual
+- task:design-grafico
+
+## Workflows
+- workflow:criacao-material-visual

package/template/.genia/skills/design/frontend-design.md

@@ -1,140 +1,140 @@
-# Skill: /frontend-design
-
-## Metadata
-- **Nome**: Frontend Design
-- **Comando**: /frontend-design
-- **Agente**: @dev
-- **Categoria**: design
-- **Versao**: 2.0
-
-## Descricao
-Criar interfaces frontend distintivas e production-grade com alta qualidade de design. Gera codigo criativo e polido que evita estetica generica de IA.
-
-## Quando Usar
-- Construir componentes web
-- Criar landing pages
-- Desenvolver dashboards
-- Criar componentes React
-- Estilizar/embelezar qualquer UI web
-
-## Design Thinking
-
-Antes de codar, entender contexto e comprometer-se com direcao estetica BOLD:
-
-### Proposito
-O que este interface resolve? Quem usa?
-
-### Tom (Escolher um extremo)
-- Brutalmente minimal
-- Maximalismo caotico
-- Retro-futurista
-- Organico/natural
-- Luxo/refinado
-- Playful/toy-like
-- Editorial/magazine
-- Brutalista/raw
-- Art deco/geometrico
-- Soft/pastel
-- Industrial/utilitario
-
-### Diferenciacao
-O que torna isso INESQUECIVEL? Qual e a coisa que alguem vai lembrar?
-
-## Diretrizes Esteticas
-
-### Tipografia
-- Escolher fontes BONITAS, UNICAS e INTERESSANTES
-- EVITAR: Arial, Inter, Roboto, system fonts
-- PREFERIR: Fonts distintivos que elevam a estetica
-- Parear display font com body font refinado
-
-### Cor e Tema
-- Comprometer-se com estetica coesa
-- Usar CSS variables para consistencia
-- Cores dominantes com acentos fortes > paletas timidas
-
-### Motion
-- Usar animacoes para efeitos e micro-interacoes
-- Priorizar CSS-only para HTML
-- Usar Motion library para React
-- Focus em momentos de alto impacto: page load com staggered reveals
-
-### Composicao Espacial
-- Layouts inesperados
-- Assimetria
-- Overlap
-- Flow diagonal
-- Elementos que quebram o grid
-- Negative space generoso OU densidade controlada
-
-### Backgrounds e Detalhes Visuais
-- Criar atmosfera e profundidade
-- Gradient meshes
-- Noise textures
-- Geometric patterns
-- Layered transparencies
-- Dramatic shadows
-- Custom cursors
-- Grain overlays
-
-## NUNCA Usar
-
-- Familias de fonte overused (Inter, Roboto, Arial)
-- Esquemas de cor cliche (purple gradients on white)
-- Layouts previsiveis
-- Design cookie-cutter sem carater
-
-## Exemplo de Implementacao
-
-```css
-:root {
-  --bg-dark: #0a0a0b;
-  --accent: #ff6b35;
-  --text: #fafafa;
-  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-body {
-  background: var(--bg-dark);
-  background-image: url("data:image/svg+xml,..."); /* noise texture */
-  font-family: 'Space Grotesk', sans-serif;
-  color: var(--text);
-}
-
-.hero {
-  display: grid;
-  grid-template-columns: 1fr 1.5fr;
-  gap: 4rem;
-  min-height: 100vh;
-  padding: 6rem;
-}
-
-.card {
-  background: rgba(255,255,255,0.03);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255,255,255,0.1);
-  border-radius: 16px;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
-}
-```
-
-## Principios
-
-1. **Intencionalidade**: Executar a visao com precisao
-2. **Memorabilidade**: Criar algo que pessoas lembrem
-3. **Coesao**: Ponto de vista estetico claro
-4. **Refinamento**: Meticuloso em cada detalhe
-
-## Tasks Relacionadas
-- task:criar-landing-page
-- task:design-dashboard
-- task:estilizar-componente
-
-## Workflows
-- workflow:desenvolvimento-frontend
-- workflow:criar-interface
+# Skill: /frontend-design
+
+## Metadata
+- **Nome**: Frontend Design
+- **Comando**: /frontend-design
+- **Agente**: @dev
+- **Categoria**: design
+- **Versao**: 2.0
+
+## Descricao
+Criar interfaces frontend distintivas e production-grade com alta qualidade de design. Gera codigo criativo e polido que evita estetica generica de IA.
+
+## Quando Usar
+- Construir componentes web
+- Criar landing pages
+- Desenvolver dashboards
+- Criar componentes React
+- Estilizar/embelezar qualquer UI web
+
+## Design Thinking
+
+Antes de codar, entender contexto e comprometer-se com direcao estetica BOLD:
+
+### Proposito
+O que este interface resolve? Quem usa?
+
+### Tom (Escolher um extremo)
+- Brutalmente minimal
+- Maximalismo caotico
+- Retro-futurista
+- Organico/natural
+- Luxo/refinado
+- Playful/toy-like
+- Editorial/magazine
+- Brutalista/raw
+- Art deco/geometrico
+- Soft/pastel
+- Industrial/utilitario
+
+### Diferenciacao
+O que torna isso INESQUECIVEL? Qual e a coisa que alguem vai lembrar?
+
+## Diretrizes Esteticas
+
+### Tipografia
+- Escolher fontes BONITAS, UNICAS e INTERESSANTES
+- EVITAR: Arial, Inter, Roboto, system fonts
+- PREFERIR: Fonts distintivos que elevam a estetica
+- Parear display font com body font refinado
+
+### Cor e Tema
+- Comprometer-se com estetica coesa
+- Usar CSS variables para consistencia
+- Cores dominantes com acentos fortes > paletas timidas
+
+### Motion
+- Usar animacoes para efeitos e micro-interacoes
+- Priorizar CSS-only para HTML
+- Usar Motion library para React
+- Focus em momentos de alto impacto: page load com staggered reveals
+
+### Composicao Espacial
+- Layouts inesperados
+- Assimetria
+- Overlap
+- Flow diagonal
+- Elementos que quebram o grid
+- Negative space generoso OU densidade controlada
+
+### Backgrounds e Detalhes Visuais
+- Criar atmosfera e profundidade
+- Gradient meshes
+- Noise textures
+- Geometric patterns
+- Layered transparencies
+- Dramatic shadows
+- Custom cursors
+- Grain overlays
+
+## NUNCA Usar
+
+- Familias de fonte overused (Inter, Roboto, Arial)
+- Esquemas de cor cliche (purple gradients on white)
+- Layouts previsiveis
+- Design cookie-cutter sem carater
+
+## Exemplo de Implementacao
+
+```css
+:root {
+  --bg-dark: #0a0a0b;
+  --accent: #ff6b35;
+  --text: #fafafa;
+  --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+body {
+  background: var(--bg-dark);
+  background-image: url("data:image/svg+xml,..."); /* noise texture */
+  font-family: 'Space Grotesk', sans-serif;
+  color: var(--text);
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 4rem;
+  min-height: 100vh;
+  padding: 6rem;
+}
+
+.card {
+  background: rgba(255,255,255,0.03);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 16px;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+}
+```
+
+## Principios
+
+1. **Intencionalidade**: Executar a visao com precisao
+2. **Memorabilidade**: Criar algo que pessoas lembrem
+3. **Coesao**: Ponto de vista estetico claro
+4. **Refinamento**: Meticuloso em cada detalhe
+
+## Tasks Relacionadas
+- task:criar-landing-page
+- task:design-dashboard
+- task:estilizar-componente
+
+## Workflows
+- workflow:desenvolvimento-frontend
+- workflow:criar-interface