forgecraft-mcp 1.2.0 → 1.3.2

package/templates/web-react/hooks.yaml

@@ -1,44 +1,44 @@
-tag: WEB-REACT
-section: hooks
-hooks:
-  - name: i18n-enforcement
-    trigger: pre-commit
-    description: "Scan JSX/TSX for hardcoded user-facing strings not wrapped in t()"
-    filename: pre-commit-i18n.sh
-    script: |
-      #!/bin/bash
-      STAGED=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx|jsx)$')
-      if [ -z "$STAGED" ]; then exit 0; fi
-      VIOLATIONS=0
-      for file in $STAGED; do
-        # Find string literals in JSX that aren't in t() calls, className, data-testid, etc.
-        if grep -nE '>\s*[A-Z][a-z]+(\s+[a-z]+)+\s*<' "$file" | grep -vE '(className|data-testid|aria-|console\.)' > /tmp/i18n_violations 2>/dev/null; then
-          if [ -s /tmp/i18n_violations ]; then
-            echo "  ⚠️  $file — possible untranslated string:"
-            cat /tmp/i18n_violations | head -3
-            VIOLATIONS=$((VIOLATIONS + 1))
-          fi
-        fi
-      done
-      rm -f /tmp/i18n_violations
-      if [ $VIOLATIONS -gt 0 ]; then
-        echo "⚠️  $VIOLATIONS file(s) may have untranslated strings. Use t() wrapper."
-      fi
-
-  - name: a11y-lint
-    trigger: pre-commit
-    description: "Run accessibility checks on staged JSX/TSX files"
-    filename: pre-commit-a11y.sh
-    script: |
-      #!/bin/bash
-      STAGED=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx|jsx)$')
-      if [ -z "$STAGED" ]; then exit 0; fi
-      # Check for div used as button without role
-      for file in $STAGED; do
-        if grep -nE '<div\s+onClick' "$file" | grep -v 'role=' > /tmp/a11y_violations 2>/dev/null; then
-          if [ -s /tmp/a11y_violations ]; then
-            echo "  ⚠️  $file — clickable div without role attribute. Use <button> or add role=\"button\""
-          fi
-        fi
-      done
-      rm -f /tmp/a11y_violations
+tag: WEB-REACT
+section: hooks
+hooks:
+  - name: i18n-enforcement
+    trigger: pre-commit
+    description: "Scan JSX/TSX for hardcoded user-facing strings not wrapped in t()"
+    filename: pre-commit-i18n.sh
+    script: |
+      #!/bin/bash
+      STAGED=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx|jsx)$')
+      if [ -z "$STAGED" ]; then exit 0; fi
+      VIOLATIONS=0
+      for file in $STAGED; do
+        # Find string literals in JSX that aren't in t() calls, className, data-testid, etc.
+        if grep -nE '>\s*[A-Z][a-z]+(\s+[a-z]+)+\s*<' "$file" | grep -vE '(className|data-testid|aria-|console\.)' > /tmp/i18n_violations 2>/dev/null; then
+          if [ -s /tmp/i18n_violations ]; then
+            echo "  ⚠️  $file — possible untranslated string:"
+            cat /tmp/i18n_violations | head -3
+            VIOLATIONS=$((VIOLATIONS + 1))
+          fi
+        fi
+      done
+      rm -f /tmp/i18n_violations
+      if [ $VIOLATIONS -gt 0 ]; then
+        echo "⚠️  $VIOLATIONS file(s) may have untranslated strings. Use t() wrapper."
+      fi
+
+  - name: a11y-lint
+    trigger: pre-commit
+    description: "Run accessibility checks on staged JSX/TSX files"
+    filename: pre-commit-a11y.sh
+    script: |
+      #!/bin/bash
+      STAGED=$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(tsx|jsx)$')
+      if [ -z "$STAGED" ]; then exit 0; fi
+      # Check for div used as button without role
+      for file in $STAGED; do
+        if grep -nE '<div\s+onClick' "$file" | grep -v 'role=' > /tmp/a11y_violations 2>/dev/null; then
+          if [ -s /tmp/a11y_violations ]; then
+            echo "  ⚠️  $file — clickable div without role attribute. Use <button> or add role=\"button\""
+          fi
+        fi
+      done
+      rm -f /tmp/a11y_violations

package/templates/web-react/instructions.yaml

@@ -1,207 +1,207 @@
-tag: WEB-REACT
-section: instructions
-blocks:
-  - id: react-component-architecture
-    tier: recommended
-    title: "React Component Architecture"
-    content: |
-      ## React & Frontend Standards
-
-      ### Component Architecture
-      - Atomic Design: atoms → molecules → organisms → templates → pages.
-      - Components are pure UI. No API calls, no business logic, no direct state management.
-      - Container/Presenter split: containers fetch data, presenters render UI.
-      - All components must have TypeScript props interfaces. No `any` types.
-      - No inline styles. Use CSS modules, Tailwind, or styled-components consistently.
-
-  - id: react-state-management
-    tier: recommended
-    title: "State Management"
-    content: |
-      ### State Management
-      - Local state (useState) for UI-only state (open/closed, hover, form inputs).
-      - Shared state via context or state library ONLY when 3+ components need the same data.
-      - Server state via React Query / TanStack Query / SWR — NEVER manually cache API responses.
-      - No prop drilling beyond 2 levels. Use composition (children) or context.
-
-  - id: react-i18n
-    tier: recommended
-    title: "Internationalization (i18n)"
-    content: |
-      ### Internationalization — From Day One
-      - EVERY user-facing string goes through the i18n system. No hardcoded display text.
-      - Use react-i18next or next-intl.
-      - Translation keys namespaced by feature: `members.table.header.name`.
-      - Date, number, currency formatting via Intl API — never manual formatting.
-
-  - id: react-forms
-    tier: recommended
-    title: "Forms"
-    content: |
-      ### Forms
-      - Use a form library (React Hook Form or Formik). No manual onChange handlers per field.
-      - Validation schema defined separately (Zod, Yup) and shared with backend if possible.
-      - All forms must handle: loading state, validation errors, submission errors, success feedback.
-
-  - id: react-api-integration
-    tier: recommended
-    title: "API Integration"
-    content: |
-      ### API Integration
-      - All API calls go through a centralized API client module.
-      - API client handles: auth headers, base URL from config, error transformation, retry logic.
-      - Use React Query for all server state.
-
-  - id: react-accessibility
-    tier: recommended
-    title: "Accessibility (a11y)"
-    content: |
-      ### Accessibility (a11y) — Non-Negotiable
-      - Semantic HTML elements (nav, main, section, article, button — not div for everything).
-      - All interactive elements keyboard-accessible. All images have alt text.
-      - ARIA labels on non-obvious interactive elements.
-      - Color contrast minimum AA (4.5:1 for text).
-
-  - id: react-error-boundaries
-    tier: recommended
-    title: "Error Handling & Suspense"
-    content: |
-      ### Error Boundaries
-      - Wrap feature areas in Error Boundaries — a crash in one widget must not take down the page.
-      - Error boundaries display user-friendly fallback UI with retry action.
-      - Log caught errors to monitoring service (Sentry, DataDog, etc.).
-      - Never catch errors silently — always report and show feedback.
-
-      ### Suspense & Loading States
-      - Use React Suspense for code-split components and async data.
-      - Every async operation has three states: loading, success, error. No blank screens.
-      - Skeleton loaders preferred over spinners for layout stability (reduces CLS).
-      - Optimistic updates for user-driven mutations (like/unlike, form submit).
-
-  - id: react-deployment
-    tier: recommended
-    title: "React Deployment & Hosting"
-    content: |
-      ## Frontend Deployment
-
-      ### Platform Selection
-      - **Vercel**: First choice for Next.js. Zero-config deploys, edge functions, image optimization built in.
-        ISR / on-demand revalidation works natively. Preview deployments on every PR.
-      - **Netlify**: Great for static + serverless. Form handling, edge functions, split testing built in.
-        Works well with Gatsby, Astro, plain React (via adapter).
-      - **Cloudflare Pages**: Unlimited bandwidth, global edge. Best for static or Pages Functions.
-      - **AWS Amplify / S3+CloudFront**: Full control, lower cost at scale. More ops overhead.
-      - Self-hosted Docker: only when platform restrictions require it.
-
-      ### Build & Deploy
-      - CI builds produce a static bundle (`dist/` or `.next/`). Same bundle deploys to staging then prod.
-      - Preview deployments for every PR — URL posted in PR comments for stakeholder review.
-      - Environment variables injected at build time (`NEXT_PUBLIC_*`, `VITE_*`). No secrets in client bundles.
-      - Build cache enabled (Turborepo, Nx, or platform-native). Target < 2 min builds.
-
-      ### Performance Budgets
-      - JavaScript budget: < {{js_budget_kb | default: 200}} KB compressed for initial load.
-      - Lighthouse CI in pipeline. Fail build if performance score drops below {{lighthouse_min | default: 90}}.
-      - Monitor Core Web Vitals in production (Vercel Analytics, web-vitals library, or RUM).
-
-      ### Edge & CDN
-      - Static assets served from CDN with immutable cache headers (content-hashed filenames).
-      - HTML entry point: short cache (5 min) or stale-while-revalidate.
-      - Use edge middleware for: redirects, A/B testing, geo-routing, auth checks (avoid full round-trip).
-
-  - id: web-react-testing
-    tier: recommended
-    title: "React-Specific Testing Patterns"
-    content: |
-      ## React-Specific Testing Patterns
-
-      ### Component-Level Visual Regression
-      - Run every Storybook story through Chromatic or Percy on each PR.
-      - Stories are the visual spec. A story without at least one state variant per meaningful prop combination is incomplete.
-      - Snapshot diff threshold: 0% pixel change for exact-match surfaces; configure per-story for components with intentional animation or dynamic content.
-
-      ### Interaction Testing (Testing Library)
-      - Use `@testing-library/user-event` over `fireEvent`. It simulates real browser input sequences (focus, keydown, keyup, input, change) rather than synthetic events.
-      - Test behavior, not implementation: assert what the user sees, not which internal functions were called.
-      - Never assert on component internals — class names, internal state, refs — unless they are the public contract.
-      - `getByRole` and `getByLabelText` are the correct primary queries. `getByTestId` is the last resort.
-
-      ### Expose-Store-to-Window (Playwright / E2E Layer)
-      For React applications with a shared state store (Redux, Zustand, Context-based stores), expose
-      the store to `window` in the test environment:
-      ```typescript
-      // In store initialization
-      if (process.env.NODE_ENV === 'test' || import.meta.env.VITEST) {
-        (window as any).__store = store;
-      }
-      ```
-      Playwright tests can then assert both what the screen renders AND what the application's store
-      believes is true — independently. This catches the failure class where UI renders correctly but
-      internal state is corrupted: optimistic updates that corrupt on failure, form state that looks
-      submitted but is not saved, filters that render active but have no effect on query state.
-
-      ### Vertical Chain Test (Critical Flows)
-      For flows that cross more than one architectural boundary (UI → service → persistence), write
-      one Playwright test that follows the full chain:
-      1. User action (click, form submit)
-      2. Intercept or query the API layer response (`page.waitForResponse`)
-      3. Assert store state via `window.__store`
-      4. Assert rendered UI outcome
-      5. If the flow persists data: assert the database or backend state via a test API endpoint
-
-      This is not a unit test and not a happy-path flow test. It is a chain verification — one trigger,
-      every boundary inspected. Specify in the architectural constitution which flows receive this
-      treatment. Minimum: authentication flow, primary write operation, and any multi-step wizard.
-
-      ### Accessibility at Component Level
-      - Run `axe-core` in every Storybook story via `@storybook/addon-a11y`. Violations block story acceptance.
-      - Run `axe` at the page level in Playwright E2E suite on every route.
-      - Add `aria-label`, `aria-describedby`, and `role` to every interactive component that is not a native HTML element. Accessibility is not a feature — it is a correctness criterion.
-      - Keyboard navigation: every interactive element must be reachable and operable via keyboard alone. Test tab order in E2E suite for critical flows.
-
-  - id: web-react-smoke-testing
-    tier: recommended
-    title: "React App Smoke Testing (Post-Deploy)"
-    content: |
-      ## React App Smoke Testing
-
-      ### Required: Playwright Full Browser
-      Tag all smoke tests `@smoke` for isolated execution:
-      ```
-      npx playwright test --config playwright.smoke.config.ts --grep @smoke
-      ```
-
-      Minimum smoke suite for every React app:
-      - **Page loads**: all key routes render, document title present, no console errors
-      - **Auth wall**: protected route redirects unauthenticated user to login page
-      - **Core journey**: primary user action (sign-in or key feature) completes end-to-end
-      - **a11y baseline**: no critical axe violations on the landing route
-
-      ```typescript
-      // tests/smoke/app.smoke.ts
-      import { test, expect } from '@playwright/test';
-      import AxeBuilder from '@axe-core/playwright';
-
-      test('@smoke home page loads without errors', async ({ page }) => {
-        const errors: string[] = [];
-        page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
-        await page.goto('/');
-        expect(await page.title()).not.toBe('');
-        expect(errors.filter(e => !e.includes('DevTools'))).toHaveLength(0);
-      });
-
-      test('@smoke protected route redirects unauthenticated', async ({ page }) => {
-        await page.goto('/dashboard');
-        await expect(page).toHaveURL(/login/);
-      });
-
-      test('@smoke no critical a11y violations on home', async ({ page }) => {
-        await page.goto('/');
-        const results = await new AxeBuilder({ page }).analyze();
-        const critical = results.violations.filter(v => v.impact === 'critical');
-        expect(critical).toHaveLength(0);
-      });
-      ```
-
-      Use `retries: 1` in smoke config — one retry before calling a failure. Smoke failure
-      means the deploy is broken, not the test.
+tag: WEB-REACT
+section: instructions
+blocks:
+  - id: react-component-architecture
+    tier: recommended
+    title: "React Component Architecture"
+    content: |
+      ## React & Frontend Standards
+
+      ### Component Architecture
+      - Atomic Design: atoms → molecules → organisms → templates → pages.
+      - Components are pure UI. No API calls, no business logic, no direct state management.
+      - Container/Presenter split: containers fetch data, presenters render UI.
+      - All components must have TypeScript props interfaces. No `any` types.
+      - No inline styles. Use CSS modules, Tailwind, or styled-components consistently.
+
+  - id: react-state-management
+    tier: recommended
+    title: "State Management"
+    content: |
+      ### State Management
+      - Local state (useState) for UI-only state (open/closed, hover, form inputs).
+      - Shared state via context or state library ONLY when 3+ components need the same data.
+      - Server state via React Query / TanStack Query / SWR — NEVER manually cache API responses.
+      - No prop drilling beyond 2 levels. Use composition (children) or context.
+
+  - id: react-i18n
+    tier: recommended
+    title: "Internationalization (i18n)"
+    content: |
+      ### Internationalization — From Day One
+      - EVERY user-facing string goes through the i18n system. No hardcoded display text.
+      - Use react-i18next or next-intl.
+      - Translation keys namespaced by feature: `members.table.header.name`.
+      - Date, number, currency formatting via Intl API — never manual formatting.
+
+  - id: react-forms
+    tier: recommended
+    title: "Forms"
+    content: |
+      ### Forms
+      - Use a form library (React Hook Form or Formik). No manual onChange handlers per field.
+      - Validation schema defined separately (Zod, Yup) and shared with backend if possible.
+      - All forms must handle: loading state, validation errors, submission errors, success feedback.
+
+  - id: react-api-integration
+    tier: recommended
+    title: "API Integration"
+    content: |
+      ### API Integration
+      - All API calls go through a centralized API client module.
+      - API client handles: auth headers, base URL from config, error transformation, retry logic.
+      - Use React Query for all server state.
+
+  - id: react-accessibility
+    tier: recommended
+    title: "Accessibility (a11y)"
+    content: |
+      ### Accessibility (a11y) — Non-Negotiable
+      - Semantic HTML elements (nav, main, section, article, button — not div for everything).
+      - All interactive elements keyboard-accessible. All images have alt text.
+      - ARIA labels on non-obvious interactive elements.
+      - Color contrast minimum AA (4.5:1 for text).
+
+  - id: react-error-boundaries
+    tier: recommended
+    title: "Error Handling & Suspense"
+    content: |
+      ### Error Boundaries
+      - Wrap feature areas in Error Boundaries — a crash in one widget must not take down the page.
+      - Error boundaries display user-friendly fallback UI with retry action.
+      - Log caught errors to monitoring service (Sentry, DataDog, etc.).
+      - Never catch errors silently — always report and show feedback.
+
+      ### Suspense & Loading States
+      - Use React Suspense for code-split components and async data.
+      - Every async operation has three states: loading, success, error. No blank screens.
+      - Skeleton loaders preferred over spinners for layout stability (reduces CLS).
+      - Optimistic updates for user-driven mutations (like/unlike, form submit).
+
+  - id: react-deployment
+    tier: recommended
+    title: "React Deployment & Hosting"
+    content: |
+      ## Frontend Deployment
+
+      ### Platform Selection
+      - **Vercel**: First choice for Next.js. Zero-config deploys, edge functions, image optimization built in.
+        ISR / on-demand revalidation works natively. Preview deployments on every PR.
+      - **Netlify**: Great for static + serverless. Form handling, edge functions, split testing built in.
+        Works well with Gatsby, Astro, plain React (via adapter).
+      - **Cloudflare Pages**: Unlimited bandwidth, global edge. Best for static or Pages Functions.
+      - **AWS Amplify / S3+CloudFront**: Full control, lower cost at scale. More ops overhead.
+      - Self-hosted Docker: only when platform restrictions require it.
+
+      ### Build & Deploy
+      - CI builds produce a static bundle (`dist/` or `.next/`). Same bundle deploys to staging then prod.
+      - Preview deployments for every PR — URL posted in PR comments for stakeholder review.
+      - Environment variables injected at build time (`NEXT_PUBLIC_*`, `VITE_*`). No secrets in client bundles.
+      - Build cache enabled (Turborepo, Nx, or platform-native). Target < 2 min builds.
+
+      ### Performance Budgets
+      - JavaScript budget: < {{js_budget_kb | default: 200}} KB compressed for initial load.
+      - Lighthouse CI in pipeline. Fail build if performance score drops below {{lighthouse_min | default: 90}}.
+      - Monitor Core Web Vitals in production (Vercel Analytics, web-vitals library, or RUM).
+
+      ### Edge & CDN
+      - Static assets served from CDN with immutable cache headers (content-hashed filenames).
+      - HTML entry point: short cache (5 min) or stale-while-revalidate.
+      - Use edge middleware for: redirects, A/B testing, geo-routing, auth checks (avoid full round-trip).
+
+  - id: web-react-testing
+    tier: recommended
+    title: "React-Specific Testing Patterns"
+    content: |
+      ## React-Specific Testing Patterns
+
+      ### Component-Level Visual Regression
+      - Run every Storybook story through Chromatic or Percy on each PR.
+      - Stories are the visual spec. A story without at least one state variant per meaningful prop combination is incomplete.
+      - Snapshot diff threshold: 0% pixel change for exact-match surfaces; configure per-story for components with intentional animation or dynamic content.
+
+      ### Interaction Testing (Testing Library)
+      - Use `@testing-library/user-event` over `fireEvent`. It simulates real browser input sequences (focus, keydown, keyup, input, change) rather than synthetic events.
+      - Test behavior, not implementation: assert what the user sees, not which internal functions were called.
+      - Never assert on component internals — class names, internal state, refs — unless they are the public contract.
+      - `getByRole` and `getByLabelText` are the correct primary queries. `getByTestId` is the last resort.
+
+      ### Expose-Store-to-Window (Playwright / E2E Layer)
+      For React applications with a shared state store (Redux, Zustand, Context-based stores), expose
+      the store to `window` in the test environment:
+      ```typescript
+      // In store initialization
+      if (process.env.NODE_ENV === 'test' || import.meta.env.VITEST) {
+        (window as any).__store = store;
+      }
+      ```
+      Playwright tests can then assert both what the screen renders AND what the application's store
+      believes is true — independently. This catches the failure class where UI renders correctly but
+      internal state is corrupted: optimistic updates that corrupt on failure, form state that looks
+      submitted but is not saved, filters that render active but have no effect on query state.
+
+      ### Vertical Chain Test (Critical Flows)
+      For flows that cross more than one architectural boundary (UI → service → persistence), write
+      one Playwright test that follows the full chain:
+      1. User action (click, form submit)
+      2. Intercept or query the API layer response (`page.waitForResponse`)
+      3. Assert store state via `window.__store`
+      4. Assert rendered UI outcome
+      5. If the flow persists data: assert the database or backend state via a test API endpoint
+
+      This is not a unit test and not a happy-path flow test. It is a chain verification — one trigger,
+      every boundary inspected. Specify in the architectural constitution which flows receive this
+      treatment. Minimum: authentication flow, primary write operation, and any multi-step wizard.
+
+      ### Accessibility at Component Level
+      - Run `axe-core` in every Storybook story via `@storybook/addon-a11y`. Violations block story acceptance.
+      - Run `axe` at the page level in Playwright E2E suite on every route.
+      - Add `aria-label`, `aria-describedby`, and `role` to every interactive component that is not a native HTML element. Accessibility is not a feature — it is a correctness criterion.
+      - Keyboard navigation: every interactive element must be reachable and operable via keyboard alone. Test tab order in E2E suite for critical flows.
+
+  - id: web-react-smoke-testing
+    tier: recommended
+    title: "React App Smoke Testing (Post-Deploy)"
+    content: |
+      ## React App Smoke Testing
+
+      ### Required: Playwright Full Browser
+      Tag all smoke tests `@smoke` for isolated execution:
+      ```
+      npx playwright test --config playwright.smoke.config.ts --grep @smoke
+      ```
+
+      Minimum smoke suite for every React app:
+      - **Page loads**: all key routes render, document title present, no console errors
+      - **Auth wall**: protected route redirects unauthenticated user to login page
+      - **Core journey**: primary user action (sign-in or key feature) completes end-to-end
+      - **a11y baseline**: no critical axe violations on the landing route
+
+      ```typescript
+      // tests/smoke/app.smoke.ts
+      import { test, expect } from '@playwright/test';
+      import AxeBuilder from '@axe-core/playwright';
+
+      test('@smoke home page loads without errors', async ({ page }) => {
+        const errors: string[] = [];
+        page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
+        await page.goto('/');
+        expect(await page.title()).not.toBe('');
+        expect(errors.filter(e => !e.includes('DevTools'))).toHaveLength(0);
+      });
+
+      test('@smoke protected route redirects unauthenticated', async ({ page }) => {
+        await page.goto('/dashboard');
+        await expect(page).toHaveURL(/login/);
+      });
+
+      test('@smoke no critical a11y violations on home', async ({ page }) => {
+        await page.goto('/');
+        const results = await new AxeBuilder({ page }).analyze();
+        const critical = results.violations.filter(v => v.impact === 'critical');
+        expect(critical).toHaveLength(0);
+      });
+      ```
+
+      Use `retries: 1` in smoke config — one retry before calling a failure. Smoke failure
+      means the deploy is broken, not the test.

package/templates/web-react/mcp-servers.yaml

@@ -1,20 +1,20 @@
-tag: WEB-REACT
-section: mcp-servers
-servers:
-  - name: chrome-devtools
-    description: "Chrome DevTools integration for debugging, profiling, and network inspection"
-    command: npx
-    args: ["-y", "@anthropic/chrome-devtools-mcp@latest"]
-    tags: [WEB-REACT, WEB-STATIC, ANALYTICS]
-    category: devtools
-    tier: recommended
-    url: "https://github.com/anthropics/anthropic-quickstarts/tree/main/chrome-devtools-mcp"
-
-  - name: playwright
-    description: "Browser automation for E2E testing, screenshots, and web scraping"
-    command: npx
-    args: ["-y", "@anthropic/mcp-server-playwright"]
-    tags: [WEB-REACT, WEB-STATIC]
-    category: testing
-    tier: recommended
-    url: "https://github.com/anthropics/anthropic-quickstarts/tree/main/mcp-server-playwright"
+tag: WEB-REACT
+section: mcp-servers
+servers:
+  - name: chrome-devtools
+    description: "Chrome DevTools integration for debugging, profiling, and network inspection"
+    command: npx
+    args: ["-y", "@anthropic/chrome-devtools-mcp@latest"]
+    tags: [WEB-REACT, WEB-STATIC, ANALYTICS]
+    category: devtools
+    tier: recommended
+    url: "https://github.com/anthropics/anthropic-quickstarts/tree/main/chrome-devtools-mcp"
+
+  - name: playwright
+    description: "Browser automation for E2E testing, screenshots, and web scraping"
+    command: npx
+    args: ["-y", "@anthropic/mcp-server-playwright"]
+    tags: [WEB-REACT, WEB-STATIC]
+    category: testing
+    tier: recommended
+    url: "https://github.com/anthropics/anthropic-quickstarts/tree/main/mcp-server-playwright"

package/templates/web-react/nfr.yaml

@@ -1,27 +1,27 @@
-tag: WEB-REACT
-section: nfr
-blocks:
-  - id: frontend-performance
-    tier: recommended
-    title: "Frontend Performance"
-    content: |
-      ## NFR: Frontend Performance
-
-      ### Core Web Vitals Targets
-      - LCP (Largest Contentful Paint): < 2.5s
-      - FID (First Input Delay): < 100ms
-      - CLS (Cumulative Layout Shift): < 0.1
-
-      ### Bundle
-      - Code splitting by route. No single bundle > 200KB gzipped.
-      - Tree shaking enabled. No unused exports.
-      - Bundle size tracked in CI — PRs that increase bundle > 10KB require justification.
-
-      ### Runtime
-      - Virtual/windowed lists for collections > 50 items.
-      - Debounce search inputs (300ms minimum).
-
-      ### Assets
-      - Images in modern formats (WebP/AVIF with fallback).
-      - Responsive images with srcset.
-      - Fonts preloaded, display:swap.
+tag: WEB-REACT
+section: nfr
+blocks:
+  - id: frontend-performance
+    tier: recommended
+    title: "Frontend Performance"
+    content: |
+      ## NFR: Frontend Performance
+
+      ### Core Web Vitals Targets
+      - LCP (Largest Contentful Paint): < 2.5s
+      - FID (First Input Delay): < 100ms
+      - CLS (Cumulative Layout Shift): < 0.1
+
+      ### Bundle
+      - Code splitting by route. No single bundle > 200KB gzipped.
+      - Tree shaking enabled. No unused exports.
+      - Bundle size tracked in CI — PRs that increase bundle > 10KB require justification.
+
+      ### Runtime
+      - Virtual/windowed lists for collections > 50 items.
+      - Debounce search inputs (300ms minimum).
+
+      ### Assets
+      - Images in modern formats (WebP/AVIF with fallback).
+      - Responsive images with srcset.
+      - Fonts preloaded, display:swap.