ma-agents 3.12.0 → 3.12.2

package/skills/vercel-react-best-practices/claude-code.md

@@ -1,80 +1,80 @@
-# Vercel React Best Practices Skill
-
-## Description
-Performance optimization framework for React and Next.js projects with 57 actionable rules across 8 priority-ranked categories, maintained by Vercel.
-
-## Usage
-Invoke this skill when writing, reviewing, or refactoring React/Next.js code for performance.
-
-## Instructions
-
-When applying React and Next.js performance best practices, follow these priority-ordered categories:
-
-### 1. Eliminating Waterfalls (CRITICAL)
-
-- Fetch data in parallel using `Promise.all` or `Promise.allSettled` — never chain independent requests sequentially
-- Prefetch data at the layout/page level, not deep in the component tree
-- Use `loading.tsx` and `Suspense` boundaries to stream content progressively
-- Colocate data fetching with the component that needs it, but initiate parallel fetches at the route level
-- Use React Server Components to move fetching to the server and eliminate client-server waterfalls
-
-### 2. Bundle Size Optimization (CRITICAL)
-
-- Use `next/dynamic` or `React.lazy` for components not needed on initial load
-- Audit with `@next/bundle-analyzer` — remove or replace heavy packages
-- Import only what you need: `import { x } from 'lib'` not `import lib from 'lib'`
-- Add `'use client'` only at the lowest necessary component level
-- Use `next/image` and `next/font` for automatic optimization
-
-### 3. Server-Side Performance (HIGH)
-
-- Default to React Server Components — add `'use client'` only when interactivity is required
-- Use `cache()` to deduplicate requests within a render pass
-- Set proper `revalidate` values — avoid `revalidate: 0` unless data truly changes per request
-- Use `generateStaticParams` for static generation of dynamic routes
-- Use streaming (`loading.tsx`, `Suspense`) to unblock rendering on slow data
-
-### 4. Client-Side Data Fetching (MEDIUM-HIGH)
-
-- Use SWR or React Query — avoid raw `useEffect` + `fetch` patterns
-- Implement optimistic updates for mutations
-- Set appropriate `staleTime` / `cacheTime` to prevent unnecessary refetches
-- Use `prefetchQuery` or `preload` to start fetching before navigation
-- Paginate or infinite-scroll large datasets
-
-### 5. Re-render Optimization (MEDIUM)
-
-- Keep state as close to usage as possible
-- Split contexts to avoid unrelated re-renders
-- Use `useMemo`/`useCallback` only for expensive computations or stable refs to memoized children
-- Use `React.memo` for pure components that re-render often with the same props
-- Prefer `useRef` over `useState` for values that don't trigger re-renders
-- Use composition (`children` prop) over deep prop drilling
-
-### 6. Rendering Performance (MEDIUM)
-
-- Virtualize long lists with `react-window` or `@tanstack/virtual`
-- Debounce rapid inputs (search, resize, scroll)
-- Use CSS for animations — prefer `transform` and `opacity` for GPU-accelerated motion
-- Use `content-visibility: auto` for off-screen content
-
-### 7. JavaScript Performance (LOW-MEDIUM)
-
-- Avoid blocking the main thread — offload heavy work to Web Workers or `requestIdleCallback`
-- Use `Map`/`Set` for frequent lookups instead of arrays
-- Use `AbortController` to cancel stale requests and avoid race conditions
-- Avoid deep cloning — prefer structural sharing or shallow copies
-
-### 8. Advanced Patterns (LOW)
-
-- Implement route-level code splitting with parallel route segments
-- Use Edge Runtime for latency-sensitive API routes
-- Use Server Actions for form mutations instead of manual API routes
-- Profile with React DevTools Profiler and Chrome Performance tab before optimizing
-
-## Key Principles
-
-- **Measure first**: Use Lighthouse, Web Vitals, and React DevTools before optimizing
-- **Prioritize by impact**: Waterfalls and bundle size yield the largest gains
-- **Don't prematurely optimize**: Address critical categories before lower-priority ones
-- **Verify with metrics**: Confirm improvements with real data, not intuition
+# Vercel React Best Practices Skill
+
+## Description
+Performance optimization framework for React and Next.js projects with 57 actionable rules across 8 priority-ranked categories, maintained by Vercel.
+
+## Usage
+Invoke this skill when writing, reviewing, or refactoring React/Next.js code for performance.
+
+## Instructions
+
+When applying React and Next.js performance best practices, follow these priority-ordered categories:
+
+### 1. Eliminating Waterfalls (CRITICAL)
+
+- Fetch data in parallel using `Promise.all` or `Promise.allSettled` — never chain independent requests sequentially
+- Prefetch data at the layout/page level, not deep in the component tree
+- Use `loading.tsx` and `Suspense` boundaries to stream content progressively
+- Colocate data fetching with the component that needs it, but initiate parallel fetches at the route level
+- Use React Server Components to move fetching to the server and eliminate client-server waterfalls
+
+### 2. Bundle Size Optimization (CRITICAL)
+
+- Use `next/dynamic` or `React.lazy` for components not needed on initial load
+- Audit with `@next/bundle-analyzer` — remove or replace heavy packages
+- Import only what you need: `import { x } from 'lib'` not `import lib from 'lib'`
+- Add `'use client'` only at the lowest necessary component level
+- Use `next/image` and `next/font` for automatic optimization
+
+### 3. Server-Side Performance (HIGH)
+
+- Default to React Server Components — add `'use client'` only when interactivity is required
+- Use `cache()` to deduplicate requests within a render pass
+- Set proper `revalidate` values — avoid `revalidate: 0` unless data truly changes per request
+- Use `generateStaticParams` for static generation of dynamic routes
+- Use streaming (`loading.tsx`, `Suspense`) to unblock rendering on slow data
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+
+- Use SWR or React Query — avoid raw `useEffect` + `fetch` patterns
+- Implement optimistic updates for mutations
+- Set appropriate `staleTime` / `cacheTime` to prevent unnecessary refetches
+- Use `prefetchQuery` or `preload` to start fetching before navigation
+- Paginate or infinite-scroll large datasets
+
+### 5. Re-render Optimization (MEDIUM)
+
+- Keep state as close to usage as possible
+- Split contexts to avoid unrelated re-renders
+- Use `useMemo`/`useCallback` only for expensive computations or stable refs to memoized children
+- Use `React.memo` for pure components that re-render often with the same props
+- Prefer `useRef` over `useState` for values that don't trigger re-renders
+- Use composition (`children` prop) over deep prop drilling
+
+### 6. Rendering Performance (MEDIUM)
+
+- Virtualize long lists with `react-window` or `@tanstack/virtual`
+- Debounce rapid inputs (search, resize, scroll)
+- Use CSS for animations — prefer `transform` and `opacity` for GPU-accelerated motion
+- Use `content-visibility: auto` for off-screen content
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+
+- Avoid blocking the main thread — offload heavy work to Web Workers or `requestIdleCallback`
+- Use `Map`/`Set` for frequent lookups instead of arrays
+- Use `AbortController` to cancel stale requests and avoid race conditions
+- Avoid deep cloning — prefer structural sharing or shallow copies
+
+### 8. Advanced Patterns (LOW)
+
+- Implement route-level code splitting with parallel route segments
+- Use Edge Runtime for latency-sensitive API routes
+- Use Server Actions for form mutations instead of manual API routes
+- Profile with React DevTools Profiler and Chrome Performance tab before optimizing
+
+## Key Principles
+
+- **Measure first**: Use Lighthouse, Web Vitals, and React DevTools before optimizing
+- **Prioritize by impact**: Waterfalls and bundle size yield the largest gains
+- **Don't prematurely optimize**: Address critical categories before lower-priority ones
+- **Verify with metrics**: Confirm improvements with real data, not intuition

package/skills/vercel-react-best-practices/generic.md

@@ -1,105 +1,105 @@
-# Vercel React Best Practices
-
-A thorough performance optimization framework for React and Next.js projects. Contains 57 actionable rules organized into 8 categories, ranked by potential impact.
-
-## When to Apply
-
-Reference these guidelines when:
-- Writing new React components
-- Implementing data fetching
-- Reviewing code for performance concerns
-- Refactoring existing applications
-- Reducing bundle sizes and load times
-
-## Rule Categories (Priority-Ordered)
-
-### 1. Eliminating Waterfalls (CRITICAL)
-Prefix: `async-`
-
-- Avoid sequential data fetching — use parallel requests (`Promise.all`, `Promise.allSettled`)
-- Prefetch data at the layout/page level rather than in deeply nested components
-- Use `loading.tsx` and `Suspense` boundaries to stream content progressively
-- Avoid `await` chains where requests don't depend on each other
-- Colocate data fetching with the component that uses the data, but fetch in parallel at the route level
-- Use React Server Components to move data fetching to the server and eliminate client-server waterfalls
-
-### 2. Bundle Size Optimization (CRITICAL)
-Prefix: `bundle-`
-
-- Prefer `next/dynamic` or `React.lazy` for heavy components not needed on initial load
-- Audit dependencies with `@next/bundle-analyzer` — remove or replace bloated packages
-- Use tree-shakeable libraries and import only what you need (`import { x } from 'lib'` not `import lib from 'lib'`)
-- Mark client components with `'use client'` only at the lowest necessary level
-- Avoid importing server-only code into client components
-- Use `next/image` instead of raw `<img>` tags for automatic optimization
-- Use `next/font` to self-host fonts and eliminate external font requests
-
-### 3. Server-Side Performance (HIGH)
-Prefix: `server-`
-
-- Default to React Server Components — only add `'use client'` when interactivity is needed
-- Use the `cache()` function to deduplicate identical requests within a single render
-- Leverage `unstable_cache` or `fetch` cache options for cross-request caching
-- Set proper `revalidate` values — avoid `revalidate: 0` unless data truly changes on every request
-- Use `generateStaticParams` for static generation of dynamic routes
-- Move database queries and API calls to Server Components or Route Handlers
-- Use streaming (`loading.tsx`, `Suspense`) to avoid blocking the entire page on slow data
-
-### 4. Client-Side Data Fetching (MEDIUM-HIGH)
-Prefix: `client-`
-
-- Use SWR or React Query for client-side data fetching with caching, revalidation, and deduplication
-- Implement optimistic updates for mutations to improve perceived performance
-- Set appropriate `staleTime` and `cacheTime` to avoid unnecessary refetches
-- Use `prefetchQuery` or `preload` to start fetching before navigation
-- Avoid `useEffect` + `fetch` patterns — prefer dedicated data fetching libraries
-- Paginate or infinitely scroll large datasets instead of loading everything at once
-
-### 5. Re-render Optimization (MEDIUM)
-Prefix: `rerender-`
-
-- Lift state up only as far as necessary — keep state close to where it's used
-- Split contexts to avoid triggering unnecessary re-renders on unrelated state changes
-- Use `useMemo` and `useCallback` only for expensive computations or stable references passed to memoized children
-- Avoid creating new objects/arrays in render — extract them as constants or memoize them
-- Use `React.memo` for pure components that re-render often with the same props
-- Prefer `useRef` over `useState` for values that don't need to trigger re-renders
-- Avoid prop drilling — use composition (`children` prop) instead of deep prop chains
-
-### 6. Rendering Performance (MEDIUM)
-Prefix: `rendering-`
-
-- Virtualize long lists with `react-window` or `@tanstack/virtual`
-- Debounce rapid user inputs (search, resize, scroll handlers)
-- Use CSS for animations and transitions instead of JS-driven re-renders
-- Use `content-visibility: auto` for off-screen content
-- Avoid layout thrashing — batch DOM reads and writes
-- Use `will-change` sparingly and only on elements that will actually animate
-- Prefer `transform` and `opacity` for GPU-accelerated animations
-
-### 7. JavaScript Performance (LOW-MEDIUM)
-Prefix: `js-`
-
-- Avoid blocking the main thread — use `requestIdleCallback` or Web Workers for heavy computation
-- Use `Map` and `Set` for frequent lookups instead of arrays
-- Minimize closures in hot paths
-- Prefer `for...of` or `Array.prototype` methods over manual loops for readability, but use manual loops in performance-critical sections
-- Avoid deep cloning — use structural sharing (Immer) or shallow copies where possible
-- Use `AbortController` to cancel stale requests and avoid race conditions
-
-### 8. Advanced Patterns (LOW)
-Prefix: `advanced-`
-
-- Use the `Offscreen` API (when stable) for pre-rendering hidden UI
-- Implement route-level code splitting with parallel route segments
-- Use Edge Runtime for latency-sensitive API routes
-- Implement partial prerendering (PPR) for hybrid static/dynamic pages
-- Use `Server Actions` for form mutations to avoid manual API routes
-- Profile with React DevTools Profiler and Chrome Performance tab before optimizing
-
-## General Principles
-
-- **Measure before optimizing** — use Lighthouse, Web Vitals, and React DevTools
-- **Higher-priority categories yield larger gains** — focus on waterfalls and bundle size first
-- **Don't prematurely optimize** — only apply lower-priority rules after addressing critical ones
-- **Test performance changes** — verify improvements with real metrics, not just intuition
+# Vercel React Best Practices
+
+A thorough performance optimization framework for React and Next.js projects. Contains 57 actionable rules organized into 8 categories, ranked by potential impact.
+
+## When to Apply
+
+Reference these guidelines when:
+- Writing new React components
+- Implementing data fetching
+- Reviewing code for performance concerns
+- Refactoring existing applications
+- Reducing bundle sizes and load times
+
+## Rule Categories (Priority-Ordered)
+
+### 1. Eliminating Waterfalls (CRITICAL)
+Prefix: `async-`
+
+- Avoid sequential data fetching — use parallel requests (`Promise.all`, `Promise.allSettled`)
+- Prefetch data at the layout/page level rather than in deeply nested components
+- Use `loading.tsx` and `Suspense` boundaries to stream content progressively
+- Avoid `await` chains where requests don't depend on each other
+- Colocate data fetching with the component that uses the data, but fetch in parallel at the route level
+- Use React Server Components to move data fetching to the server and eliminate client-server waterfalls
+
+### 2. Bundle Size Optimization (CRITICAL)
+Prefix: `bundle-`
+
+- Prefer `next/dynamic` or `React.lazy` for heavy components not needed on initial load
+- Audit dependencies with `@next/bundle-analyzer` — remove or replace bloated packages
+- Use tree-shakeable libraries and import only what you need (`import { x } from 'lib'` not `import lib from 'lib'`)
+- Mark client components with `'use client'` only at the lowest necessary level
+- Avoid importing server-only code into client components
+- Use `next/image` instead of raw `<img>` tags for automatic optimization
+- Use `next/font` to self-host fonts and eliminate external font requests
+
+### 3. Server-Side Performance (HIGH)
+Prefix: `server-`
+
+- Default to React Server Components — only add `'use client'` when interactivity is needed
+- Use the `cache()` function to deduplicate identical requests within a single render
+- Leverage `unstable_cache` or `fetch` cache options for cross-request caching
+- Set proper `revalidate` values — avoid `revalidate: 0` unless data truly changes on every request
+- Use `generateStaticParams` for static generation of dynamic routes
+- Move database queries and API calls to Server Components or Route Handlers
+- Use streaming (`loading.tsx`, `Suspense`) to avoid blocking the entire page on slow data
+
+### 4. Client-Side Data Fetching (MEDIUM-HIGH)
+Prefix: `client-`
+
+- Use SWR or React Query for client-side data fetching with caching, revalidation, and deduplication
+- Implement optimistic updates for mutations to improve perceived performance
+- Set appropriate `staleTime` and `cacheTime` to avoid unnecessary refetches
+- Use `prefetchQuery` or `preload` to start fetching before navigation
+- Avoid `useEffect` + `fetch` patterns — prefer dedicated data fetching libraries
+- Paginate or infinitely scroll large datasets instead of loading everything at once
+
+### 5. Re-render Optimization (MEDIUM)
+Prefix: `rerender-`
+
+- Lift state up only as far as necessary — keep state close to where it's used
+- Split contexts to avoid triggering unnecessary re-renders on unrelated state changes
+- Use `useMemo` and `useCallback` only for expensive computations or stable references passed to memoized children
+- Avoid creating new objects/arrays in render — extract them as constants or memoize them
+- Use `React.memo` for pure components that re-render often with the same props
+- Prefer `useRef` over `useState` for values that don't need to trigger re-renders
+- Avoid prop drilling — use composition (`children` prop) instead of deep prop chains
+
+### 6. Rendering Performance (MEDIUM)
+Prefix: `rendering-`
+
+- Virtualize long lists with `react-window` or `@tanstack/virtual`
+- Debounce rapid user inputs (search, resize, scroll handlers)
+- Use CSS for animations and transitions instead of JS-driven re-renders
+- Use `content-visibility: auto` for off-screen content
+- Avoid layout thrashing — batch DOM reads and writes
+- Use `will-change` sparingly and only on elements that will actually animate
+- Prefer `transform` and `opacity` for GPU-accelerated animations
+
+### 7. JavaScript Performance (LOW-MEDIUM)
+Prefix: `js-`
+
+- Avoid blocking the main thread — use `requestIdleCallback` or Web Workers for heavy computation
+- Use `Map` and `Set` for frequent lookups instead of arrays
+- Minimize closures in hot paths
+- Prefer `for...of` or `Array.prototype` methods over manual loops for readability, but use manual loops in performance-critical sections
+- Avoid deep cloning — use structural sharing (Immer) or shallow copies where possible
+- Use `AbortController` to cancel stale requests and avoid race conditions
+
+### 8. Advanced Patterns (LOW)
+Prefix: `advanced-`
+
+- Use the `Offscreen` API (when stable) for pre-rendering hidden UI
+- Implement route-level code splitting with parallel route segments
+- Use Edge Runtime for latency-sensitive API routes
+- Implement partial prerendering (PPR) for hybrid static/dynamic pages
+- Use `Server Actions` for form mutations to avoid manual API routes
+- Profile with React DevTools Profiler and Chrome Performance tab before optimizing
+
+## General Principles
+
+- **Measure before optimizing** — use Lighthouse, Web Vitals, and React DevTools
+- **Higher-priority categories yield larger gains** — focus on waterfalls and bundle size first
+- **Don't prematurely optimize** — only apply lower-priority rules after addressing critical ones
+- **Test performance changes** — verify improvements with real metrics, not just intuition

package/skills/vercel-react-best-practices/skill.json

@@ -1,20 +1,20 @@
-{
-  "name": "Vercel React Best Practices",
-  "description": "Performance optimization framework for React and Next.js projects with 57 actionable rules across 8 categories",
-  "version": "1.0.0",
-  "author": "vercel-labs",
-  "source": "https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices",
-  "tags": [
-    "react",
-    "nextjs",
-    "performance",
-    "optimization",
-    "vercel",
-    "best-practices"
-  ],
-  "applies_when": [
-    "working on React or Next.js components",
-    "optimizing page performance",
-    "reviewing frontend code architecture"
-  ]
+{
+  "name": "Vercel React Best Practices",
+  "description": "Performance optimization framework for React and Next.js projects with 57 actionable rules across 8 categories",
+  "version": "1.0.0",
+  "author": "vercel-labs",
+  "source": "https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices",
+  "tags": [
+    "react",
+    "nextjs",
+    "performance",
+    "optimization",
+    "vercel",
+    "best-practices"
+  ],
+  "applies_when": [
+    "working on React or Next.js components",
+    "optimizing page performance",
+    "reviewing frontend code architecture"
+  ]
 }

package/skills/verify-hardened-docker-skill/README.md

@@ -1,85 +1,85 @@
-# Verify Hardened Docker Skill
-
-Comprehensive security verification for Docker configurations.
-
-## Quick Start
-
-```bash
-# Verify all Docker security configurations
-./scripts/verify-docker-hardening.sh [image-name] [container-name]
-```
-
-## What It Checks
-
-✅ **Image Security**
-- Specific version tags (no :latest)
-- Non-root user execution
-- No leaked secrets
-- Minimal base images
-- HEALTHCHECK present
-
-✅ **Dockerfile Hardening**
-- Multi-stage builds
-- Read-only file permissions
-- No hardcoded secrets
-- Build cache cleanup
-
-✅ **docker-compose.yml Security**
-- Read-only filesystem
-- Tmpfs mounts
-- Capability dropping
-- Resource limits
-- Security options
-
-✅ **Runtime Security**
-- Non-root execution
-- Read-only filesystem
-- Proper permissions
-- Health checks
-
-✅ **Vulnerability Scanning**
-- Trivy image scan
-- Secret detection
-- CVE identification
-
-## Usage Examples
-
-```bash
-# Verify contacts-app
-./scripts/verify-docker-hardening.sh contacts-app
-
-# Verify with custom container name
-./scripts/verify-docker-hardening.sh my-app my-app-container
-
-# Quick Dockerfile check
-grep "^USER" Dockerfile && echo "✅ Non-root user set"
-
-# Quick vulnerability scan
-trivy image --severity HIGH,CRITICAL contacts-app
-```
-
-## Exit Codes
-
-- `0` - All checks passed
-- `1` - CRITICAL vulnerabilities found
-- `2` - Hardening checks failed
-- `3` - Secret leakage detected
-- `4` - Runtime security violations
-- `5` - Missing required files
-
-## Requirements
-
-- Docker installed
-- Trivy scanner (optional, for vulnerability scanning)
-  ```bash
-  # macOS
-  brew install aquasecurity/trivy/trivy
-
-  # Linux
-  apt-get install trivy
-  ```
-
-## See Also
-
-- [SKILL.md](SKILL.md) - Full documentation
-- [create-hardened-docker-skill](../create-hardened-docker-skill) - Create hardened configs
+# Verify Hardened Docker Skill
+
+Comprehensive security verification for Docker configurations.
+
+## Quick Start
+
+```bash
+# Verify all Docker security configurations
+./scripts/verify-docker-hardening.sh [image-name] [container-name]
+```
+
+## What It Checks
+
+✅ **Image Security**
+- Specific version tags (no :latest)
+- Non-root user execution
+- No leaked secrets
+- Minimal base images
+- HEALTHCHECK present
+
+✅ **Dockerfile Hardening**
+- Multi-stage builds
+- Read-only file permissions
+- No hardcoded secrets
+- Build cache cleanup
+
+✅ **docker-compose.yml Security**
+- Read-only filesystem
+- Tmpfs mounts
+- Capability dropping
+- Resource limits
+- Security options
+
+✅ **Runtime Security**
+- Non-root execution
+- Read-only filesystem
+- Proper permissions
+- Health checks
+
+✅ **Vulnerability Scanning**
+- Trivy image scan
+- Secret detection
+- CVE identification
+
+## Usage Examples
+
+```bash
+# Verify contacts-app
+./scripts/verify-docker-hardening.sh contacts-app
+
+# Verify with custom container name
+./scripts/verify-docker-hardening.sh my-app my-app-container
+
+# Quick Dockerfile check
+grep "^USER" Dockerfile && echo "✅ Non-root user set"
+
+# Quick vulnerability scan
+trivy image --severity HIGH,CRITICAL contacts-app
+```
+
+## Exit Codes
+
+- `0` - All checks passed
+- `1` - CRITICAL vulnerabilities found
+- `2` - Hardening checks failed
+- `3` - Secret leakage detected
+- `4` - Runtime security violations
+- `5` - Missing required files
+
+## Requirements
+
+- Docker installed
+- Trivy scanner (optional, for vulnerability scanning)
+  ```bash
+  # macOS
+  brew install aquasecurity/trivy/trivy
+
+  # Linux
+  apt-get install trivy
+  ```
+
+## See Also
+
+- [SKILL.md](SKILL.md) - Full documentation
+- [create-hardened-docker-skill](../create-hardened-docker-skill) - Create hardened configs