@polymorphism-tech/morph-spec 2.2.0 → 2.4.0

package/content/.claude/skills/workflows/morph-replicate.md

@@ -0,0 +1,213 @@
+# Skill: /morph-replicate
+
+> Workflow simplificado para replicar prototipos HTML em Blazor.
+> Use quando tiver um prototipo HTML pronto e precisar converter para codigo Blazor funcional.
+
+## Comando
+
+```bash
+/morph-replicate {feature-name} {prototype-path}
+```
+
+**Exemplo:**
+```bash
+/morph-replicate ui-redesign prototipo/
+```
+
+---
+
+## Workflow Simplificado
+
+### FASE 1: ANALISE DO PROTOTIPO
+
+1. **Ler todos os arquivos HTML em `{prototype-path}/`**
+   ```bash
+   # Encontrar todos os arquivos HTML
+   glob: {prototype-path}/**/*.html
+   glob: {prototype-path}/**/code.html  # Pattern comum de prototipos
+   ```
+
+2. **Extrair padroes de cada arquivo:**
+   - Layout (grid, flexbox, estrutura)
+   - Componentes (cards, buttons, forms, modals)
+   - Cores (extrair de inline styles e CSS)
+   - Fontes (font-family, sizes)
+   - Espacamentos (padding, margin, gap)
+   - Classes CSS usadas
+
+3. **Gerar mapeamento HTML → Blazor:**
+
+   | HTML Pattern | Blazor Equivalente |
+   |--------------|-------------------|
+   | `<button class="btn-primary">` | `<FluentButton Appearance="Appearance.Accent">` |
+   | `<div class="card">` | `<FluentCard>` ou HTML customizado |
+   | `<input type="text">` | `<FluentTextField>` |
+   | `<div class="modal">` | Modal customizado (se design especifico) |
+
+4. **Gerar lista de classes CSS a criar:**
+   ```markdown
+   ## Classes CSS Necessarias
+
+   - [ ] .page-layout
+   - [ ] .home-hero
+   - [ ] .card-premium
+   - [ ] .checkout-form
+   - [ ] .modal-overlay
+   - [ ] .animate-slideInUp
+   ```
+
+**PAUSA:** Aprovar mapeamento e lista de CSS
+
+---
+
+### FASE 2: TASKS (Lista de Telas)
+
+Gerar lista de telas para implementar na ordem correta:
+
+```markdown
+## Tasks de Implementacao
+
+### T001: Setup Design System
+- Criar/atualizar wwwroot/css/design-system.css
+- Adicionar todas as classes CSS listadas
+- Validar com `morph-spec validate-css`
+
+### T002: {Nome da Tela 1}
+- Ler: {prototype-path}/{tela1}.html
+- Criar/Atualizar: Pages/{Tela1}.razor
+- Componentes: FluentCard, FluentButton, etc.
+- CSS: .home-hero, .card-premium
+
+### T003: {Nome da Tela 2}
+- Ler: {prototype-path}/{tela2}.html
+- Criar/Atualizar: Pages/{Tela2}.razor
+- ...
+
+### TXXX: Validacao Final
+- Build completo
+- `morph-spec validate-css`
+- Testar responsividade
+```
+
+**PAUSA:** Aprovar lista de tasks
+
+---
+
+### FASE 3: IMPLEMENT (Por Tela)
+
+Para cada tela, seguir este fluxo:
+
+1. **Ler HTML do prototipo**
+   ```
+   Read: {prototype-path}/{tela}.html
+   ```
+
+2. **Ler arquivo .razor atual** (se existir)
+   ```
+   Read: Pages/{Tela}.razor
+   ```
+
+3. **Reescrever .razor usando Fluent UI/MudBlazor**
+   - Manter estrutura de layout do prototipo
+   - Substituir elementos HTML por componentes Blazor
+   - Aplicar classes CSS do design-system
+
+4. **Adicionar CSS ao design-system.css**
+   - Se classe nova foi usada no .razor
+   - Seguir padrao de nomenclatura (prefixo por pagina)
+
+5. **Build para validar**
+   ```bash
+   dotnet build
+   ```
+
+6. **Validar CSS**
+   ```bash
+   morph-spec validate-css src/MyApp.Web
+   ```
+
+---
+
+## Outputs
+
+Este workflow gera apenas:
+
+| Arquivo | Descricao |
+|---------|-----------|
+| `.razor` files | Paginas convertidas |
+| `design-system.css` | CSS atualizado |
+| `recap.md` | Resumo da implementacao (ao final) |
+
+**NAO gera:** proposal.md, spec.md, contracts.cs, tasks.json
+
+---
+
+## Exemplo de Execucao
+
+```markdown
+/morph-replicate checkout-redesign prototipo/checkout/
+
+📁 Analisando prototipo em prototipo/checkout/...
+
+**Arquivos encontrados:**
+- step1-cart.html
+- step2-payment.html
+- step3-confirmation.html
+
+**Padroes extraidos:**
+
+Cores:
+- Primary: #FF6B35
+- Secondary: #2D3047
+- Background: #FAFAFA
+
+Classes CSS a criar:
+- [ ] .checkout-layout
+- [ ] .checkout-steps
+- [ ] .checkout-form
+- [ ] .checkout-summary
+- [ ] .payment-options
+- [ ] .confirmation-message
+
+Mapeamento HTML → Blazor:
+- form.checkout-form → EditForm + FluentTextField
+- div.payment-card → FluentCard
+- button.btn-pay → FluentButton Accent
+
+---
+
+⛔ **PAUSA OBRIGATORIA**
+
+**Proximos passos:**
+1. ✅ Aprovar e gerar tasks de implementacao
+2. 🔄 Ajustar mapeamento
+3. 📋 Ver mais detalhes dos componentes
+```
+
+---
+
+## Quando Usar
+
+- ✅ Prototipo HTML pronto (Figma export, hand-coded, etc.)
+- ✅ Design ja aprovado pelo cliente
+- ✅ Apenas conversao visual (sem logica de negocio nova)
+- ✅ Codigo Blazor existente para atualizar
+
+## Quando NAO Usar
+
+- ❌ Feature nova com logica complexa (use FULL MORPH)
+- ❌ Infraestrutura Azure necessaria (use FULL MORPH)
+- ❌ Sem prototipo definido (use STANDARD ou FULL MORPH)
+
+---
+
+## Referencias
+
+- [HTML to Blazor Guide](../../../../framework/standards/html-to-blazor.md)
+- [CSS Naming Convention](../../../../framework/standards/css-naming.md)
+- [CSS Animations](../../../../framework/standards/css-animations.md)
+- [Fluent UI Blazor](../../../../framework/standards/fluent-ui-blazor.md)
+
+---
+
+*MORPH-SPEC v2.2.0 by Polymorphism Tech*

package/content/.claude/{commands/morph-clarify.md → skills/workflows/phase-clarify.md}

@@ -1,12 +1,8 @@
 # MORPH Clarify - FASE 3
 
-Identifique ambiguidades na especificação e faça perguntas de clarificação para garantir que todos os edge cases estão cobertos.
-
-## Uso
+> INTERNAL: Workflow skill used by /morph-proposal during automated phase orchestration. Not a user command.
 
-```
-/morph-clarify {feature-name}
-```
+Identifique ambiguidades na especificação e faça perguntas de clarificação para garantir que todos os edge cases estão cobertos.
 
 ## Pré-requisitos
 
@@ -60,24 +56,6 @@ Com base na análise, gere **3-7 perguntas** focadas e específicas:
 **Impact:** {Como a resposta afeta a implementação}
 ```
 
-**Exemplo:**
-
-```markdown
-### Q1: Validação - Limite de Nome de Projeto
-
-**Context:** O spec menciona "nome de projeto" mas não especifica limites.
-
-**Question:** Qual o comprimento máximo do nome de projeto?
-
-**Options:**
-- A) 50 caracteres (padrão curto)
-- B) 100 caracteres (padrão médio)
-- C) 255 caracteres (padrão longo)
-- D) Sem limite (validar apenas se não vazio)
-
-**Impact:** Afeta validação do DTO, schema do banco, e UI (tamanho do input).
-```
-
 ### Passo 3: Categorizar Perguntas
 
 Organize perguntas por categoria:
@@ -108,16 +86,9 @@ Após receber respostas do usuário, atualize o spec com:
 ### Q1: {Título}
 **Answer:** {Resposta do usuário}
 **Date:** {YYYY-MM-DD}
-
-### Q2: {Título}
-**Answer:** {Resposta do usuário}
-**Date:** {YYYY-MM-DD}
 ```
 
-2. **Atualizar seções relevantes** com detalhes adicionados:
-   - Requisitos funcionais mais específicos
-   - Validações documentadas
-   - Edge cases cobertos
+2. **Atualizar seções relevantes** com detalhes adicionados
 
 ### Passo 6: Validar Edge Cases
 
@@ -130,19 +101,12 @@ Documente no spec como lidar com cada edge case identificado:
 **Scenario:** {Quando acontece}
 **Expected Behavior:** {Como o sistema deve reagir}
 **Implementation Notes:** {Dicas para implementação}
-
-**Example:**
-- Input: {exemplo de entrada problemática}
-- Output: {comportamento esperado}
 ```
 
 ### Passo 7: Atualizar State
 
 ```bash
-# Marcar fase como clarify
-node bin/state-manager.js set {feature-name} phase clarify
-
-# State permanece in_progress até usuário responder todas as perguntas
+npx morph-spec state set {feature-name} phase clarify
 ```
 
 ## Outputs Gerados/Atualizados
@@ -152,23 +116,6 @@ node bin/state-manager.js set {feature-name} phase clarify
   - Edge cases documentados
   - Requisitos mais específicos
 
-## ⛔ PAUSA OBRIGATÓRIA
-
-Apresente perguntas de clarificação e aguarde respostas do usuário.
-
-**Não prossiga até ter todas as respostas!**
-
-Após receber respostas, atualizar spec e apresentar:
-
-1. ✅ **Aprovar clarificações e continuar para tasks**
-   Prosseguir para `/morph-tasks` (FASE 4)
-
-2. 🔄 **Fazer mais perguntas** (se ainda houver dúvidas)
-   Iterar novamente nesta fase
-
-3. 📋 **Revisar spec atualizado**
-   Validar que clarificações foram bem incorporadas
-
 ## Critérios de Avanço
 
 - [x] Perguntas de clarificação identificadas (3-7)
@@ -181,4 +128,4 @@ Após receber respostas, atualizar spec e apresentar:
 
 ---
 
-**Feature:** $ARGUMENTS
+Continuar automaticamente para FASE 4 (Tasks) após clarificações resolvidas.

package/content/.claude/{commands/morph-design.md → skills/workflows/phase-design.md}

@@ -1,12 +1,8 @@
 # MORPH Design - FASE 2
 
-Expanda a proposta em especificação técnica completa, contracts, decisões arquiteturais e estimativa de custos.
-
-## Uso
+> INTERNAL: Workflow skill used by /morph-proposal during automated phase orchestration. Not a user command.
 
-```
-/morph-design {feature-name}
-```
+Expanda a proposta em especificação técnica completa, contracts, decisões arquiteturais e estimativa de custos.
 
 ## Pré-requisitos
 
@@ -21,8 +17,7 @@ Expanda a proposta em especificação técnica completa, contracts, decisões ar
 Leia os arquivos existentes da feature:
 
 ```bash
-# Verificar outputs existentes
-node bin/state-manager.js get {feature-name}
+npx morph-spec state get {feature-name}
 ```
 
 Leia:
@@ -140,19 +135,14 @@ Crie `.morph/project/outputs/{feature}/decisions.md` com ADRs relevantes:
 **Consequences:**
 **Pros:**
 - Pro 1
-- Pro 2
 
 **Cons:**
 - Con 1
-- Con 2
 
 **Alternatives Considered:**
 - Alternativa 1: {Por que foi rejeitada}
-- Alternativa 2: {Por que foi rejeitada}
 
 **Date:** {YYYY-MM-DD}
-
----
 ```
 
 **ADRs obrigatórios:**
@@ -163,77 +153,27 @@ Crie `.morph/project/outputs/{feature}/decisions.md` com ADRs relevantes:
 
 ### Passo 5: Estimar Custos
 
-Se houver recursos Azure na spec (arquivos Bicep):
-
-```bash
-# Calcular custos automaticamente
-node bin/calculate-costs.js .morph/project/outputs/{feature}/infra/*.bicep --verbose
-```
-
-O cost calculator:
-- Parseia arquivos Bicep e extrai recursos + SKUs
-- Calcula custo mensal baseado em pricing table do Azure
-- Valida contra limites configurados em `.morph/config/config.json`
-- Exit code 1 se exceder o limite `requiresADR` (padrão: $10)
+Se houver recursos Azure na spec:
 
 **Limites configuráveis** (em config.json):
 - `costs.limits.freeTierOnly`: $0 (apenas free tier)
 - `costs.limits.withApproval`: $10 (requer confirmação do usuário)
 - `costs.limits.requiresADR`: $10 (requer ADR documentado)
 
-**Exemplo de output:**
-```
-╔════════════════════════════════════════════════╗
-║         MORPH-SPEC COST CALCULATOR             ║
-╠════════════════════════════════════════════════╣
-║ sqlDatabase (Basic)              $4.99/mo     ║
-║ containerApp (Consumption)       $0.00/mo     ║
-║ appInsights (Free)               $0.00/mo     ║
-╠════════════════════════════════════════════════╣
-║ Total Monthly Cost:              $4.99        ║
-║ Requires Approval:               YES          ║
-║ Requires ADR:                    NO           ║
-╚════════════════════════════════════════════════╝
-```
-
-**Documente custos em `decisions.md`:**
-
-```markdown
-## ADR-XXX: Infrastructure Costs
-
-**Estimated Monthly Cost:** $X.XX
-
-**Breakdown:**
-- Azure SQL Basic: $5.00
-- Container App (scale-to-zero): $0.00
-- Storage LRS (1GB): $0.02
-- App Insights Free: $0.00
-
-**Total:** $5.02/month
-
-**Approval Required:** {Yes/No - based on $10 threshold}
-
-**Justification:**
-{Se > $10, justificar aqui}
-```
-
-4. Atualizar state com custo:
+Documente custos em `decisions.md` e atualize state:
 
 ```bash
-node bin/state-manager.js set {feature-name} costs.estimated {X.XX}
-node bin/state-manager.js set {feature-name} costs.approved {true/false}
+npx morph-spec state set {feature-name} costs.estimated {X.XX}
+npx morph-spec state set {feature-name} costs.approved {true/false}
 ```
 
 ### Passo 6: Atualizar State
 
 ```bash
-# Marcar fase como design
-node bin/state-manager.js set {feature-name} phase design
-
-# Marcar outputs criados
-node bin/state-manager.js mark-output {feature-name} spec
-node bin/state-manager.js mark-output {feature-name} contracts
-node bin/state-manager.js mark-output {feature-name} decisions
+npx morph-spec state set {feature-name} phase design
+npx morph-spec state mark-output {feature-name} spec
+npx morph-spec state mark-output {feature-name} contracts
+npx morph-spec state mark-output {feature-name} decisions
 ```
 
 ## Outputs Gerados
@@ -243,23 +183,13 @@ node bin/state-manager.js mark-output {feature-name} decisions
 - `.morph/project/outputs/{feature}/decisions.md` - ADRs (novo ou atualizado)
 - State atualizado com custos estimados
 
-## ⛔ PAUSA OBRIGATÓRIA
+## PAUSA OBRIGATÓRIA
 
 Apresente ao usuário 3 ações sugeridas:
 
-1. ✅ **Aprovar design e continuar para clarificação**
-   Prosseguir para `/morph-clarify` (FASE 3)
-
-2. 🔄 **Ajustar escopo/complexidade**
-   Revisar spec.md para reduzir ou expandir funcionalidades
-
-3. 💰 **Revisar custos estimados** (se houver recursos Azure)
-   Ajustar SKUs ou recursos para ficar dentro do budget
-
-4. 📋 **Modificar contracts**
-   Ajustar interfaces/DTOs se necessário
-
-**Formato:** Escolher 3 das opções acima, contextualizadas para a feature
+1. **Aprovar design e continuar para clarificação**
+2. **Ajustar escopo/complexidade** - Revisar spec.md
+3. **Modificar contracts** - Ajustar interfaces/DTOs
 
 ## Critérios de Avanço
 
@@ -272,4 +202,4 @@ Apresente ao usuário 3 ações sugeridas:
 
 ---
 
-**Feature:** $ARGUMENTS
+Continuar automaticamente para FASE 3 (Clarify) após aprovação.

package/content/.claude/{commands/morph-setup.md → skills/workflows/phase-setup.md}

@@ -1,12 +1,8 @@
 # MORPH Setup - FASE 1
 
-Inicialize o contexto e prepare o ambiente para uma feature aprovada.
-
-## Uso
+> INTERNAL: Workflow skill used by /morph-proposal during automated phase orchestration. Not a user command.
 
-```
-/morph-setup {feature-name}
-```
+Inicialize o contexto e prepare o ambiente para uma feature aprovada.
 
 ## Pré-requisitos
 
@@ -21,10 +17,10 @@ Inicialize o contexto e prepare o ambiente para uma feature aprovada.
 Confirme que a feature existe no state:
 
 ```bash
-node bin/state-manager.js get {feature-name}
+npx morph-spec state get {feature-name}
 ```
 
-Se não existir, volte para `/morph-proposal`.
+Se não existir, volte para FASE 0 (proposal).
 
 ### Passo 2: Carregar Contexto do Projeto
 
@@ -47,7 +43,7 @@ Leia os seguintes arquivos para entender o projeto:
 ### Passo 3: Confirmar Stack
 
 Baseado no proposal e contexto, confirme:
-- Stack tecnológica (Blazor Server, Next.js, Shopify, etc.)
+- Stack tecnológica (Blazor Server, Next.js, etc.)
 - Padrões arquiteturais aplicáveis
 - Componentes reutilizáveis existentes
 
@@ -56,7 +52,7 @@ Baseado no proposal e contexto, confirme:
 Mostre os agentes detectados no proposal:
 
 ```bash
-node bin/state-manager.js get {feature-name}
+npx morph-spec state get {feature-name}
 ```
 
 Parse o JSON e liste os `activeAgents` com seus emojis e responsabilidades (consulte `.morph/config/agents.json`).
@@ -66,8 +62,8 @@ Parse o JSON e liste os `activeAgents` com seus emojis e responsabilidades (cons
 Marque a feature como na fase SETUP:
 
 ```bash
-node bin/state-manager.js set {feature-name} phase setup
-node bin/state-manager.js set {feature-name} status in_progress
+npx morph-spec state set {feature-name} phase setup
+npx morph-spec state set {feature-name} status in_progress
 ```
 
 ## Outputs
@@ -83,10 +79,6 @@ node bin/state-manager.js set {feature-name} status in_progress
    - Lista de agentes com emojis
    - Responsabilidades de cada um
 
-3. **Próximos passos**:
-   - Se feature tem UI/UX keywords → `/morph-uiux` (FASE 1.5)
-   - Se NÃO tem UI/UX → `/morph-design` (FASE 2)
-
 ## Critérios de Avanço
 
 - [x] Contexto do projeto carregado
@@ -97,4 +89,4 @@ node bin/state-manager.js set {feature-name} status in_progress
 
 ---
 
-**Feature:** $ARGUMENTS
+Continuar automaticamente para próxima fase (UI/UX se detectado, ou Design).