npm - @polymorphism-tech/morph-spec - Versions diffs - 2.4.0 → 3.0.1 - Mend

@polymorphism-tech/morph-spec 2.4.0 → 3.0.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.

Files changed (87) hide show

package/content/.claude/skills/{checklists → level-0-meta}/morph-checklist.md RENAMED Viewed

@@ -1,117 +1,117 @@
-# Skill: /morph-checklist
-> **Layer:** 2 | **Load:** on-keyword | **Keywords:** checklist, deploy, security, seo, performance, accessibility, lgpd, legal
-Types: `deploy`, `security`, `seo`, `performance`, `accessibility`, `legal-brazil`, `simulation` (see [simulation-checklist.md](simulation-checklist.md))
----
-## Deploy
-### Pre-Deploy
-- [ ] `dotnet build --configuration Release` passes
-- [ ] `dotnet test` passes
-- [ ] Migrations applied (`dotnet ef database update`)
-- [ ] Env vars configured (connection strings, API keys, feature flags)
-### Infrastructure
-- [ ] Bicep/IaC updated (`az deployment group what-if`)
-- [ ] SSL/HTTPS configured
-- [ ] DNS pointing correctly
-- [ ] Health checks configured
-### Security & Monitoring
-- [ ] Secrets in Key Vault (not in code)
-- [ ] Managed Identity configured
-- [ ] CORS configured
-- [ ] Rate limiting enabled
-- [ ] Application Insights + alerts configured
-### Post-Deploy
-- [ ] Smoke tests executed
-- [ ] Rollback plan documented
----
-## Security
-### Auth & Authorization
-- [ ] Passwords hashed (bcrypt/Argon2), MFA available
-- [ ] JWT with short expiration + refresh tokens
-- [ ] RBAC + resource-based authorization
-- [ ] Ownership verification (user sees only their data)
-### Input & Headers
-- [ ] Server-side validation (never trust client)
-- [ ] HTML sanitized (XSS), parametrized queries (SQLi)
-- [ ] File upload validation (type, size, content)
-- [ ] Security headers: `X-Content-Type-Options: nosniff`, `X-Frame-Options: DENY`, `CSP: default-src 'self'`
-### Data
-- [ ] PII encrypted at rest, masked in logs
-- [ ] Card data never stored (use tokenization)
-- [ ] `dotnet list package --vulnerable` clean
----
-## SEO
-- [ ] `<title>` + `<meta description>` (150-160 chars)
-- [ ] `<link rel="canonical">` + `robots.txt` + `sitemap.xml`
-- [ ] Open Graph tags (og:title, og:description, og:image)
-- [ ] URLs friendly, heading hierarchy (H1>H2>H3)
-- [ ] Images optimized (WebP, lazy loading, alt text)
-- [ ] Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
----
-## Performance
-### Backend
-- [ ] `.AsNoTracking()` for reads, no N+1, projections (`.Select()`)
-- [ ] Indexes on search columns
-- [ ] Response/distributed caching with invalidation
-- [ ] All I/O operations are async (no `.Result` / `.Wait()`)
-### Frontend (Blazor)
-- [ ] Lazy loading, virtualization for large lists
-- [ ] Debounce search inputs
-- [ ] `@key` in loops, `ShouldRender()` for perf
-### Infrastructure
-- [ ] CDN for static assets, gzip/brotli compression
-- [ ] Connection pooling, scale-to-zero
----
-## Accessibility (WCAG 2.1)
-- [ ] Alt text on images, captions on videos
-- [ ] Contrast >= 4.5:1 (AA), color not sole indicator
-- [ ] Keyboard navigation works, focus visible
-- [ ] Skip links, `<html lang="pt-BR">`
-- [ ] Labels on all inputs, clear error messages
-- [ ] Valid HTML, ARIA used correctly
----
-## Legal Brazil (LGPD)
-### Documentation
-- [ ] Privacy policy (data collected, purpose, legal basis, DPO contact)
-- [ ] Terms of use (service description, responsibilities, forum)
-### Consent & Rights
-- [ ] Cookie banner with granular options
-- [ ] Explicit consent for marketing, revocation option
-- [ ] Data access, correction, deletion, portability
-### Technical
-- [ ] Data minimization, defined retention periods
-- [ ] Anonymization/pseudonymization where possible
-- [ ] Access logs for personal data
-- [ ] Incident response plan (ANPD notification in 72h)
----
-*MORPH-SPEC Checklist Skill*
+# Skill: /morph-checklist
+> **Layer:** 2 | **Load:** on-keyword | **Keywords:** checklist, deploy, security, seo, performance, accessibility, lgpd, legal
+Types: `deploy`, `security`, `seo`, `performance`, `accessibility`, `legal-brazil`, `simulation` (see [simulation-checklist.md](simulation-checklist.md))
+---
+## Deploy
+### Pre-Deploy
+- [ ] `dotnet build --configuration Release` passes
+- [ ] `dotnet test` passes
+- [ ] Migrations applied (`dotnet ef database update`)
+- [ ] Env vars configured (connection strings, API keys, feature flags)
+### Infrastructure
+- [ ] Bicep/IaC updated (`az deployment group what-if`)
+- [ ] SSL/HTTPS configured
+- [ ] DNS pointing correctly
+- [ ] Health checks configured
+### Security & Monitoring
+- [ ] Secrets in Key Vault (not in code)
+- [ ] Managed Identity configured
+- [ ] CORS configured
+- [ ] Rate limiting enabled
+- [ ] Application Insights + alerts configured
+### Post-Deploy
+- [ ] Smoke tests executed
+- [ ] Rollback plan documented
+---
+## Security
+### Auth & Authorization
+- [ ] Passwords hashed (bcrypt/Argon2), MFA available
+- [ ] JWT with short expiration + refresh tokens
+- [ ] RBAC + resource-based authorization
+- [ ] Ownership verification (user sees only their data)
+### Input & Headers
+- [ ] Server-side validation (never trust client)
+- [ ] HTML sanitized (XSS), parametrized queries (SQLi)
+- [ ] File upload validation (type, size, content)
+- [ ] Security headers: `X-Content-Type-Options: nosniff`, `X-Frame-Options: DENY`, `CSP: default-src 'self'`
+### Data
+- [ ] PII encrypted at rest, masked in logs
+- [ ] Card data never stored (use tokenization)
+- [ ] `dotnet list package --vulnerable` clean
+---
+## SEO
+- [ ] `<title>` + `<meta description>` (150-160 chars)
+- [ ] `<link rel="canonical">` + `robots.txt` + `sitemap.xml`
+- [ ] Open Graph tags (og:title, og:description, og:image)
+- [ ] URLs friendly, heading hierarchy (H1>H2>H3)
+- [ ] Images optimized (WebP, lazy loading, alt text)
+- [ ] Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
+---
+## Performance
+### Backend
+- [ ] `.AsNoTracking()` for reads, no N+1, projections (`.Select()`)
+- [ ] Indexes on search columns
+- [ ] Response/distributed caching with invalidation
+- [ ] All I/O operations are async (no `.Result` / `.Wait()`)
+### Frontend (Blazor)
+- [ ] Lazy loading, virtualization for large lists
+- [ ] Debounce search inputs
+- [ ] `@key` in loops, `ShouldRender()` for perf
+### Infrastructure
+- [ ] CDN for static assets, gzip/brotli compression
+- [ ] Connection pooling, scale-to-zero
+---
+## Accessibility (WCAG 2.1)
+- [ ] Alt text on images, captions on videos
+- [ ] Contrast >= 4.5:1 (AA), color not sole indicator
+- [ ] Keyboard navigation works, focus visible
+- [ ] Skip links, `<html lang="pt-BR">`
+- [ ] Labels on all inputs, clear error messages
+- [ ] Valid HTML, ARIA used correctly
+---
+## Legal Brazil (LGPD)
+### Documentation
+- [ ] Privacy policy (data collected, purpose, legal basis, DPO contact)
+- [ ] Terms of use (service description, responsibilities, forum)
+### Consent & Rights
+- [ ] Cookie banner with granular options
+- [ ] Explicit consent for marketing, revocation option
+- [ ] Data access, correction, deletion, portability
+### Technical
+- [ ] Data minimization, defined retention periods
+- [ ] Anonymization/pseudonymization where possible
+- [ ] Access logs for personal data
+- [ ] Incident response plan (ANPD notification in 72h)
+---
+*MORPH-SPEC Checklist Skill*

package/content/.claude/skills/level-1-workflows/README.md ADDED Viewed

@@ -0,0 +1,7 @@
+# Level 1: Workflows
+Phase orchestration and workflow management.
+**Purpose:** Skills that implement MORPH workflow phases (FASE 0-6).
+**Examples:** phase-setup, phase-design, phase-uiux

package/content/.claude/skills/{workflows → level-1-workflows}/morph-replicate.md RENAMED Viewed

@@ -1,213 +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*
+# 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*