npm - @polymorphism-tech/morph-spec - Versions diffs - 4.9.0 → 4.10.1 - Mend

@polymorphism-tech/morph-spec 4.9.0 → 4.10.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 (164) hide show

package/framework/skills/level-0-meta/morph-checklist/SKILL.md CHANGED Viewed

@@ -7,15 +7,21 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep
 # MORPH Checklists
-Types: `deploy`, `security`, `seo`, `performance`, `accessibility`, `legal-brazil`, `simulation` (ver skill: `morph:simulation-checklist`)
+Types: `deploy`, `security`, `seo`, `performance`, `accessibility`, `legal-brazil`, `simulation` (see skill: `morph:simulation-checklist`)
 ---
 ## Deploy
+### MORPH-SPEC Validation (run first)
+- [ ] `npx morph-spec validate-feature {feature}` — passes with 100% pass rate
+- [ ] `npx morph-spec approval-status {feature}` — all gates approved (design, plan, tasks)
+- [ ] `npx morph-spec state get {feature}` — phase is `implement`, all tasks `done`
+- [ ] Recap generated: `.morph/features/{feature}/5-implement/recap.md` exists
 ### Pre-Deploy
 - [ ] `dotnet build --configuration Release` passes
-- [ ] `dotnet test` passes
+- [ ] `dotnet test` passes (100% pass rate required — zero tolerance)
 - [ ] Migrations applied (`dotnet ef database update`)
 - [ ] Env vars configured (connection strings, API keys, feature flags)
@@ -94,28 +100,45 @@ Types: `deploy`, `security`, `seo`, `performance`, `accessibility`, `legal-brazi
 - [ ] 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">`
+- [ ] Skip links, `<html lang="...">` with correct locale
 - [ ] 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)
+## Legal Brazil (LGPD — Lei 13.709/2018)
+The Brazilian General Data Protection Law (LGPD) applies to any application that processes personal data of individuals in Brazil. Non-compliance can result in fines up to 2% of revenue (capped at R$50M per violation) from ANPD (Autoridade Nacional de Protecao de Dados).
+### Documentation (Art. 9, 23, 41)
+- [ ] Privacy policy published and accessible from every page — must include: categories of data collected, legal basis per category (Art. 7), processing purpose, retention period, DPO (Encarregado) contact name and email
+- [ ] Terms of use covering: service description, user responsibilities, governing forum (Brazilian jurisdiction required)
+- [ ] ROPA (Record of Processing Activities) — internal document mapping data flows per Art. 37
+### Consent & Data Subject Rights (Art. 7-9, 15-18)
+- [ ] Cookie consent banner with **granular opt-in** (not just "accept all") — separate toggles for analytics, marketing, essential
+- [ ] Explicit consent for marketing communications — checkbox unchecked by default, revocable at any time
+- [ ] Data subject rights page implementing all Art. 18 rights:
+  - [ ] Access: user can view all personal data held
+  - [ ] Correction: user can update inaccurate data
+  - [ ] Deletion: user can request full account/data deletion (Art. 18, IX)
+  - [ ] Portability: user can export data in machine-readable format (JSON/CSV)
+  - [ ] Opposition: user can object to specific processing
+- [ ] Rights requests processed within 15 days (Art. 19)
+### Technical Controls (Art. 46-49)
+- [ ] PII encrypted at rest (AES-256) and in transit (TLS 1.2+)
+- [ ] Data minimization: only collect what the legal basis justifies
+- [ ] Defined retention periods per data category — automatic purge after expiry
+- [ ] Anonymization/pseudonymization for analytics and logs
+- [ ] Access logs for all personal data operations (who accessed what, when)
+- [ ] Incident response plan: ANPD notification within **72 hours** of breach (Art. 48), user notification "within reasonable time"
+- [ ] Data Protection Impact Assessment (DPIA/RIPD) for high-risk processing (Art. 5, XVII)
+### DPO (Encarregado — Art. 41)
+- [ ] DPO designated and publicly identified (name + contact on privacy policy)
+- [ ] DPO contact channel operational (email or form)
+- [ ] DPO handles ANPD communications and data subject requests
 ---

package/framework/skills/level-0-meta/{code-review → morph-code-review}/SKILL.md RENAMED Viewed

@@ -3,6 +3,9 @@ name: morph:code-review
 description: .NET/C# code review checklist covering naming conventions, architecture layer integrity, async patterns, logging, error handling, DI lifetimes, and DTO contracts. Use after implementing .NET code, before creating PRs, or when reviewing C# code for compliance with MORPH-SPEC standards.
 user-invocable: true
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep
+stacks:
+  - dotnet
+  - blazor
 ---
 # Code Review Checklist
@@ -23,12 +26,12 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep
 git diff --name-only main...HEAD -- "*.cs" | wc -l
 ```
-**Pular revisão se:**
-- 0 arquivos `.cs` alterados → sem código backend para revisar
-- Apenas mudanças em `*.json`, `*.csproj`, `*.md`, arquivos de migration → escopo de infra
-- Já existe `.morph/features/$ARGUMENTS/4-implement/code-review.md` criado hoje → já revisado
+**Skip review if:**
+- 0 `.cs` files changed → no backend code to review
+- Only changes in `*.json`, `*.csproj`, `*.md`, migration files → infrastructure scope
+- `.morph/features/$ARGUMENTS/5-implement/code-review.md` already exists from today → already reviewed
-Se skip: output `"Skipping code-review: [motivo]"` e parar.
+If skipping: output `"Skipping code-review: [reason]"` and stop.
 ---

package/framework/skills/level-0-meta/{code-review-nextjs → morph-code-review-nextjs}/SKILL.md RENAMED Viewed

@@ -3,6 +3,8 @@ name: morph:code-review-nextjs
 description: Next.js code review checklist covering naming conventions, component architecture (Server vs Client), data fetching patterns, form implementation, state management, TypeScript/Zod discipline, feature boundaries, and testing. Use after implementing Next.js code, before creating PRs, or when reviewing TSX/TS code for compliance with MORPH-SPEC Next.js standards.
 user-invocable: true
 allowed-tools: Read, Write, Edit, Bash, Glob, Grep
+stacks:
+  - nextjs
 ---
 # Next.js Code Review Checklist
@@ -17,7 +19,7 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep
 > **Ref:** `framework/standards/frontend/nextjs/testing.md`
 > **Example:** `references/review-example-nextjs.md` — filled-in review showing expected finding format.
 > **Script:** `scripts/scan-nextjs.mjs` — automated scan for CRITICAL/HIGH violations before manual review.
-> **Ref:** `.claude/skills/code-review/references/review-guidelines.md` — false-positive rubric, confidence scoring, evidence format.
+> **Ref:** `.claude/skills/morph-code-review/references/review-guidelines.md` — false-positive rubric, confidence scoring, evidence format.
 ---
@@ -27,12 +29,12 @@ allowed-tools: Read, Write, Edit, Bash, Glob, Grep
 git diff --name-only main...HEAD -- "*.tsx" "*.ts" | wc -l
 ```
-**Pular revisão se:**
-- 0 arquivos `.tsx`/`.ts` alterados → sem código frontend para revisar
-- Apenas mudanças em `*.json`, `*.md`, arquivos de config → escopo de infra
-- Já existe `.morph/features/$ARGUMENTS/4-implement/code-review-nextjs.md` criado hoje → já revisado
+**Skip review if:**
+- 0 `.tsx`/`.ts` files changed → no frontend code to review
+- Only changes in `*.json`, `*.md`, config files → infrastructure scope
+- `.morph/features/$ARGUMENTS/5-implement/code-review-nextjs.md` already exists from today → already reviewed
-Se skip: output `"Skipping code-review-nextjs: [motivo]"` e parar.
+If skipping: output `"Skipping code-review-nextjs: [reason]"` and stop.
 ---

package/framework/skills/level-0-meta/morph-frontend-review/SKILL.md ADDED Viewed

@@ -0,0 +1,362 @@
+---
+name: morph:frontend-review
+description: Complete frontend audit — validates design outputs (design-system, WCAG contrast,
+  mockups), static accessibility scan (TSX + Razor), responsive screenshots at 3
+  breakpoints via Playwright, axe-core a11y at runtime, and SEO (Next.js metadata). Covers Next.js
+  and Blazor. Triggered at end of phase-uiux and post-implementation.
+argument-hint: "[feature-name]"
+user-invocable: true
+allowed-tools: Read, Write, Edit, Bash, Glob, Grep, AskUserQuestion,
+  mcp__playwright__browser_navigate, mcp__playwright__browser_resize,
+  mcp__playwright__browser_take_screenshot, mcp__playwright__browser_snapshot,
+  mcp__playwright__browser_evaluate, mcp__playwright__browser_console_messages
+cliVersion: "4.8.19"
+stacks:
+  - blazor
+  - nextjs
+---
+# Frontend Review
+> Complete frontend audit: design outputs, static + runtime accessibility, responsive
+> screenshots and SEO. Triggered at end of `phase-uiux` (validates design) and post-implementation
+> (validates implemented code).
+> **Note about MCP:** The `mcp__playwright__` prefix corresponds to the Playwright server name
+> as configured in the project's `settings.json`. If the server has a different name (e.g.,
+> `plugin_playwright_playwright`), adjust the prefix in the calls below.
+---
+## Step 0 — Detect Context and Stack
+```bash
+node .claude/skills/morph-post-implementation/scripts/detect-stack.mjs
+```
+Output JSON: `{ stack: "DOTNET" | "NEXTJS" | "FULLSTACK" | "UNKNOWN", frontendPath, backendPath, startCommand }`
+Beyond the stack, determine the **context** by examining what exists:
+```bash
+# Check if design outputs exist
+ls .morph/features/$ARGUMENTS/2-ui/ 2>/dev/null
+# Check if implemented frontend files exist
+find . -name "*.tsx" -o -name "*.razor" 2>/dev/null | head -5
+```
+- If `.morph/features/$ARGUMENTS/2-ui/ui-design-system.md` exists → context includes **design validation**
+- If implemented frontend files exist (`.tsx`, `.razor`) → context includes **implementation validation**
+- Both can coexist
+Store `stack`, `frontendPath`, `startCommand` and the detected context — all steps depend on them.
+---
+## Step 1 — Design Outputs Validation (if context includes design validation)
+```bash
+npx morph-spec validate-feature $ARGUMENTS
+```
+Verify existence and quality of the 4 mandatory outputs in `.morph/features/$ARGUMENTS/2-ui/`:
+```
+[ ] ui-design-system.md — color palette, typography tokens, spacing
+[ ] ui-mockups.md — wireframes with responsive states
+[ ] ui-components.md — technical component specs
+[ ] ui-flows.md — user journeys and edge cases
+[ ] WCAG AA Contrast: primary and text colors ≥ 4.5:1 (check ui-design-system.md)
+[ ] Documented touch targets: ≥ 44x44px for mobile
+[ ] Loading/error/empty states defined in mockups
+```
+**🚫 BLOCK** if `validate-feature` fails or mandatory outputs missing.
+Read `ui-design-system.md` and manually verify that primary and text colors have a contrast ratio
+≥ 4.5:1. Reference tools: WebAIM Contrast Checker (WCAG 2.1 AA criteria).
+---
+## Step 2 — Static Accessibility Scan
+```bash
+node .claude/skills/morph-frontend-review/scripts/scan-accessibility.mjs $frontendPath
+```
+The script automatically detects file extensions to determine Next.js (`.tsx`) vs
+Blazor (`.razor`). If `frontendPath` is not defined, the script uses `.` (project root).
+**Checks implemented:**
+| ID | Severity | Files | Checks |
+|----|-----------|---------|---------|
+| `IMG_MISSING_ALT` | CRITICAL | .tsx, .razor | `<img` missing `alt=` attribute |
+| `INPUT_MISSING_LABEL` | HIGH | .tsx, .razor | `<input`/`<InputText`/`<FluentTextField` without `aria-label`, `aria-labelledby`, or associated `<label for=` |
+| `HEADING_HIERARCHY` | HIGH | .tsx, .razor | Heading level skip (H1→H3 skipping H2) |
+| `LINK_NO_TEXT` | HIGH | .tsx, .razor | `<a` empty or with only icon and no `aria-label` |
+| `BUTTON_NO_TEXT` | HIGH | .tsx, .razor | `<button`/`<FluentButton` no text and no `aria-label` |
+| `AUTOPLAY_MEDIA` | MEDIUM | .tsx, .razor | `<video`/`<audio` with `autoPlay` without `muted` |
+| `FLUENT_CHECKBOX_NO_LABEL` | MEDIUM | .razor | `<FluentCheckbox` without `Label=` |
+**🚫 BLOCK** if any CRITICAL finding or HIGH count ≥ 3.
+Fix all CRITICALs before continuing. For HIGH < 3, record in summary as warnings.
+---
+## Step 3 — Frontend Code Scan (if context includes implementation validation)
+### If NEXTJS or FULLSTACK:
+```bash
+node .claude/skills/morph-code-review-nextjs/scripts/scan-nextjs.mjs $frontendPath
+```
+> Skip if already run by `post-implementation` in the same session.
+**🚫 BLOCK** if CRITICAL findings found.
+### If DOTNET or FULLSTACK (Blazor):
+Manually verify the main checklist categories for the implemented feature:
+```
+[ ] Blazor components with correctly typed parameters
+[ ] EventCallback<T> for events — no direct Action/Func
+[ ] Dispose implemented where there are subscriptions (IDisposable)
+[ ] No business logic in .razor files (separate into @code or classes)
+[ ] StateHasChanged() called only when necessary
+[ ] Forms with EditForm and DataAnnotationsValidator
+[ ] Required fields with [Required] and defined error messages
+```
+**🚫 BLOCK** if any CRITICAL item is found.
+---
+## Step 4 — Responsive Screenshots (Playwright MCP)
+### 4a. Detect Dev Server
+```bash
+node .claude/skills/morph-post-implementation/scripts/detect-dev-server.mjs "$startCommand"
+```
+### 4b. If dev server available (exit 0):
+Extract the main feature URLs by reading `spec.md`:
+```bash
+Read: .morph/features/$ARGUMENTS/1-design/spec.md
+```
+For each main page (max 3), capture screenshots at 3 breakpoints:
+```javascript
+// Mobile (375px)
+await mcp__playwright__browser_resize({ width: 375, height: 812 });
+await mcp__playwright__browser_navigate({ url: '<feature-url>' });
+await mcp__playwright__browser_take_screenshot({
+  type: 'png',
+  filename: `.morph/features/${ARGUMENTS}/visual-screenshots/mobile-<page>.png`
+});
+// Tablet (768px)
+await mcp__playwright__browser_resize({ width: 768, height: 1024 });
+await mcp__playwright__browser_navigate({ url: '<feature-url>' });
+await mcp__playwright__browser_take_screenshot({
+  type: 'png',
+  filename: `.morph/features/${ARGUMENTS}/visual-screenshots/tablet-<page>.png`
+});
+// Desktop (1440px)
+await mcp__playwright__browser_resize({ width: 1440, height: 900 });
+await mcp__playwright__browser_navigate({ url: '<feature-url>' });
+await mcp__playwright__browser_take_screenshot({
+  type: 'png',
+  filename: `.morph/features/${ARGUMENTS}/visual-screenshots/desktop-<page>.png`
+});
+```
+Screenshots saved to: `.morph/features/$ARGUMENTS/visual-screenshots/`
+(works in both phase `2-ui` and `5-implement`)
+### 4c. If dev server NOT available (exit 1):
+**⚠️ WARNING: Dev server not found.**
+Request explicit user confirmation before skipping screenshots:
+```
+Dev server not detected. Responsive screenshots via Playwright cannot be captured.
+Options:
+1. Start the server manually and re-run /morph:frontend-review
+2. Explicitly confirm you want to skip screenshots and why
+Cannot proceed to axe-core without dev server.
+```
+**Wait for response before continuing.**
+---
+## Step 5 — axe-core Runtime (Playwright MCP, if dev server active)
+For each feature page (use the same URLs from Step 4):
+```javascript
+// Navigate to the page
+await mcp__playwright__browser_navigate({ url: '<feature-url>' });
+// Inject axe-core via CDN and run WCAG 2.1 AA scan
+await mcp__playwright__browser_evaluate({
+  function: `async () => {
+    if (!window.axe) {
+      await new Promise((resolve, reject) => {
+        const s = document.createElement('script');
+        s.src = 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.9.1/axe.min.js';
+        s.onload = resolve;
+        s.onerror = reject;
+        document.head.appendChild(s);
+      });
+    }
+    const results = await window.axe.run(document, {
+      runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] }
+    });
+    return results.violations.map(v => ({
+      id: v.id,
+      impact: v.impact,
+      description: v.description,
+      nodes: v.nodes.length,
+      helpUrl: v.helpUrl
+    }));
+  }`
+});
+```
+Group violations by impact:
+- `critical` / `serious` → **🚫 BLOCK** (do not create PR)
+- `moderate` / `minor` → report as warnings in summary, non-blocking
+Also check for accessibility-related console errors:
+```javascript
+await mcp__playwright__browser_console_messages({ level: 'error' });
+```
+---
+## Step 6 — SEO Check (Next.js only)
+Scan feature `page.tsx` files to verify metadata:
+```bash
+# Find feature pages
+find . -name "page.tsx" -path "*$ARGUMENTS*" 2>/dev/null
+# Check if they have metadata
+grep -l "export const metadata\|export async function generateMetadata" $(find . -name "page.tsx" -path "*$ARGUMENTS*" 2>/dev/null)
+```
+Checklist per page:
+```
+[ ] export const metadata with title and description
+[ ] og:title and og:description (Open Graph)
+[ ] og:image defined (for social sharing)
+[ ] No duplicate titles between pages
+[ ] robots doesn't block public page indexing
+```
+> SEO doesn't block PR — report as warnings in final summary.
+---
+## Step 7 — Responsive Design Checklist
+After viewing Step 4 screenshots:
+```
+[ ] Mobile (375px): no horizontal scroll, buttons ≥ 44px, legible text
+[ ] Tablet (768px): layout adapts (sidebar collapses, grid adjusts columns)
+[ ] Desktop (1440px): uses available space, no stretched content
+[ ] Navigation works on all breakpoints
+[ ] Forms accessible on mobile (visible labels, large enough inputs)
+```
+If screenshots were not captured (dev server unavailable), mark as "unverified" and
+record in summary.
+---
+## Step 8 — Summary and Artifacts
+Create consolidated summary file:
+```bash
+mkdir -p ".morph/features/$ARGUMENTS/visual-screenshots"
+```
+Save to `.morph/features/$ARGUMENTS/visual-screenshots/morph:frontend-review-summary.md`:
+```markdown
+# Frontend Review — {feature}
+**Date:** {date}
+**Stack:** {detected stack}
+**Context:** design validation | implementation validation | both
+## Results
+### Step 1 — Design Outputs
+- validate-feature: ✅ PASS / 🚫 BLOCK
+- Outputs verified: ui-design-system.md, ui-mockups.md, ui-components.md, ui-flows.md
+- WCAG Contrast: {result}
+### Step 2 — Static Accessibility Scan
+- Files scanned: {N}
+- Findings: {total} ({CRITICAL: N, HIGH: N, MEDIUM: N})
+- Status: ✅ PASS / 🚫 BLOCK
+### Step 3 — Frontend Code Scan
+- Status: ✅ PASS / 🚫 BLOCK / ⏭️ skipped (already run)
+### Step 4 — Responsive Screenshots
+- Mobile (375px): {paths or "not captured"}
+- Tablet (768px): {paths or "not captured"}
+- Desktop (1440px): {paths or "not captured"}
+### Step 5 — axe-core Runtime
+- Critical/serious violations: {N} → ✅ / 🚫
+- Warnings (moderate/minor): {N}
+### Step 6 — SEO (Next.js)
+- Pages with metadata: {N}/{total}
+- Gaps: {list or "none"}
+## Overall Status
+**{✅ PASS / 🚫 BLOCK}**
+{If BLOCK: reason(s) listed here}
+```
+---
+## Block Summary
+| Step | Block Condition |
+|------|-------------------|
+| Step 1 | `validate-feature` failed or mandatory outputs missing |
+| Step 2 | Any CRITICAL finding or HIGH ≥ 3 in static scan |
+| Step 3 | Any CRITICAL finding in code scan |
+| Step 5 | Dev server active + axe-core violations `critical` or `serious` |
+**All BLOCKs must be resolved before creating the PR (when run post-implementation).**
+---
+*MORPH-SPEC by Polymorphism Tech*