thanh-kit 2.5.0 → 2.5.2

package/templates/skills/web-testing/references/load-testing-k6.md

@@ -0,0 +1,93 @@
+# Load Testing with k6
+
+## Installation
+
+```bash
+brew install k6          # macOS
+winget install k6        # Windows
+docker run -i grafana/k6 run - <script.js
+```
+
+## Basic Load Test
+
+```javascript
+import http from 'k6/http';
+import { check, sleep } from 'k6';
+
+export const options = {
+  vus: 10,
+  duration: '30s',
+};
+
+export default function () {
+  const res = http.get('http://localhost:3000/api/users');
+  check(res, {
+    'status is 200': (r) => r.status === 200,
+    'response < 500ms': (r) => r.timings.duration < 500,
+  });
+  sleep(1);
+}
+```
+
+## Stress Test with Stages
+
+```javascript
+export const options = {
+  stages: [
+    { duration: '2m', target: 50 },
+    { duration: '5m', target: 50 },
+    { duration: '2m', target: 100 },
+    { duration: '2m', target: 0 },
+  ],
+  thresholds: {
+    http_req_duration: ['p(95)<500'],
+    http_req_failed: ['rate<0.01'],
+  },
+};
+```
+
+## With Authentication
+
+```javascript
+export function setup() {
+  const res = http.post(`${BASE_URL}/api/login`, {
+    email: 'test@example.com', password: 'password',
+  });
+  return { token: res.json('token') };
+}
+
+export default function (data) {
+  const params = { headers: { Authorization: `Bearer ${data.token}` } };
+  http.get(`${BASE_URL}/api/protected`, params);
+}
+```
+
+## Performance Thresholds
+
+| Metric | Good | Warning |
+|--------|------|---------|
+| p50 latency | <200ms | <500ms |
+| p95 latency | <500ms | <1s |
+| Error rate | <0.1% | <1% |
+
+## Commands
+
+```bash
+k6 run script.js
+k6 run --out json=results.json script.js
+k6 cloud script.js  # Grafana Cloud
+```
+
+## Artillery Alternative
+
+```yaml
+config:
+  target: 'http://localhost:3000'
+  phases: [{ duration: 60, arrivalRate: 10 }]
+scenarios:
+  - flow: [{ get: { url: '/api/users' } }]
+```
+
+```bash
+npx artillery run artillery.yml
+```

package/templates/skills/web-testing/references/mobile-gesture-testing.md

@@ -0,0 +1,85 @@
+# Mobile Gesture Testing
+
+## Touch Gestures
+
+### Single-Finger
+
+```javascript
+await page.tap('button.submit');                    // Tap
+await page.locator('button').click({ delay: 1000 }); // Long press
+
+// Swipe simulation
+await page.evaluate(() => {
+  const el = document.querySelector('.carousel');
+  el.dispatchEvent(new TouchEvent('touchstart', { touches: [{ clientX: 200, clientY: 100 }] }));
+  el.dispatchEvent(new TouchEvent('touchend', { touches: [{ clientX: 50, clientY: 100 }] }));
+});
+```
+
+### Multi-Finger (Pinch/Zoom)
+
+```javascript
+await page.evaluate(() => {
+  const el = document.querySelector('[data-zoomable]');
+  const touch1 = { identifier: 0, clientX: 100, clientY: 100 };
+  const touch2 = { identifier: 1, clientX: 120, clientY: 100 };
+  el.dispatchEvent(new TouchEvent('touchstart', { touches: [touch1, touch2] }));
+  touch1.clientX = 50; touch2.clientX = 170; // Fingers apart = zoom in
+  el.dispatchEvent(new TouchEvent('touchmove', { touches: [touch1, touch2] }));
+});
+```
+
+## Orientation Testing
+
+```javascript
+const orientations = [
+  { width: 390, height: 844 },  // Portrait
+  { width: 844, height: 390 },  // Landscape
+];
+
+for (const size of orientations) {
+  await page.setViewportSize(size);
+  await expect(page).toHaveScreenshot(`mobile-${size.width}.png`);
+}
+```
+
+## Device Emulation
+
+```typescript
+// playwright.config.ts
+import { devices } from '@playwright/test';
+
+export default defineConfig({
+  projects: [
+    { name: 'mobile-chrome', use: { ...devices['Pixel 5'] } },
+    { name: 'mobile-safari', use: { ...devices['iPhone 12'] } },
+  ],
+});
+```
+
+## Touch Target Checklist
+
+- [ ] Minimum 44x44px touch targets
+- [ ] No overlapping touch areas
+- [ ] Sufficient spacing between buttons
+- [ ] Swipe gestures have clear affordances
+
+## Real Device Gaps
+
+Emulators miss: network throttling, touch latency, gesture recognition variations.
+
+**Minimum real device testing:** iPhone (Safari iOS), Android flagship (Chrome)
+
+## Device Farm Services
+
+| Service | Devices |
+|---------|---------|
+| BrowserStack | 3000+ |
+| Sauce Labs | 2000+ |
+| AWS Device Farm | 200+ |
+
+## Commands
+
+```bash
+npx playwright test --project=mobile-chrome --project=mobile-safari
+```

package/templates/skills/web-testing/references/performance-core-web-vitals.md

@@ -0,0 +1,124 @@
+# Performance & Core Web Vitals Testing
+
+## Core Web Vitals (2024 Targets)
+
+| Metric | Target | Description |
+|--------|--------|-------------|
+| LCP | < 2.5s | Largest Contentful Paint |
+| CLS | < 0.1 | Cumulative Layout Shift |
+| INP | < 200ms | Interaction to Next Paint (replaced FID) |
+
+## Lighthouse CI Setup
+
+```json
+// lighthouserc.json
+{
+  "ci": {
+    "collect": {
+      "url": ["http://localhost:3000", "http://localhost:3000/dashboard"],
+      "numberOfRuns": 3
+    },
+    "assert": {
+      "preset": "lighthouse:recommended",
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.9 }],
+        "largest-contentful-paint": ["warn", { "maxNumericValue": 2500 }],
+        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
+        "interactive": ["warn", { "maxNumericValue": 3800 }]
+      }
+    },
+    "upload": {
+      "target": "temporary-public-storage"
+    }
+  }
+}
+```
+
+## GitHub Actions Integration
+
+```yaml
+performance:
+  runs-on: ubuntu-latest
+  steps:
+    - uses: actions/checkout@v4
+    - run: npm ci && npm run build
+    - run: npm install -g @lhci/cli
+    - run: lhci autorun
+      env:
+        LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_TOKEN }}
+```
+
+## Playwright Performance Test
+
+```typescript
+test('measure Core Web Vitals', async ({ page }) => {
+  await page.goto('/');
+
+  const metrics = await page.evaluate(() => {
+    return new Promise((resolve) => {
+      new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        const lcp = entries.find(e => e.entryType === 'largest-contentful-paint');
+        resolve({ lcp: lcp?.startTime });
+      }).observe({ type: 'largest-contentful-paint', buffered: true });
+    });
+  });
+
+  expect(metrics.lcp).toBeLessThan(2500);
+});
+```
+
+## INP Measurement
+
+```typescript
+test('interaction responsiveness', async ({ page }) => {
+  await page.goto('/');
+
+  const inp = await page.evaluate(() => {
+    return new Promise((resolve) => {
+      let maxINP = 0;
+      new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          maxINP = Math.max(maxINP, entry.duration);
+        }
+        resolve(maxINP);
+      }).observe({ type: 'event', buffered: true, durationThreshold: 16 });
+
+      // Trigger interactions
+      document.querySelector('button')?.click();
+      setTimeout(() => resolve(maxINP), 1000);
+    });
+  });
+
+  expect(inp).toBeLessThan(200);
+});
+```
+
+## Quick Commands
+
+```bash
+npx lighthouse https://example.com --output=json
+npx @lhci/cli autorun
+npx bundlesize                    # Bundle size check
+npx webpack-bundle-analyzer stats.json
+```
+
+## Optimization Checklist
+
+### LCP
+- [ ] Lazy load below-fold images
+- [ ] Preload critical resources (`<link rel="preload">`)
+- [ ] Use CDN for static assets
+- [ ] Optimize server response time
+
+### CLS
+- [ ] Set explicit width/height on images
+- [ ] Reserve space for dynamic content
+- [ ] Use `font-display: swap` or `optional`
+- [ ] Avoid inserting content above existing
+
+### INP
+- [ ] Break long JavaScript tasks (<50ms)
+- [ ] Use `requestIdleCallback` for non-critical work
+- [ ] Implement code splitting
+- [ ] Debounce rapid user interactions

package/templates/skills/web-testing/references/playwright-component-testing.md

@@ -0,0 +1,115 @@
+# Playwright Component Testing
+
+## Status
+
+**Production-ready** as of 2024. No longer experimental.
+
+## Setup
+
+```bash
+npm init playwright@latest -- --ct
+```
+
+## Configuration
+
+```typescript
+// playwright-ct.config.ts
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+
+export default defineConfig({
+  testDir: './src',
+  use: {
+    ctPort: 3100,
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+  ],
+});
+```
+
+## Basic Test
+
+```typescript
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Button } from './Button';
+
+test('renders button with text', async ({ mount }) => {
+  const component = await mount(<Button>Click me</Button>);
+  await expect(component).toContainText('Click me');
+});
+
+test('handles click event', async ({ mount }) => {
+  let clicked = false;
+  const component = await mount(
+    <Button onClick={() => clicked = true}>Click</Button>
+  );
+  await component.click();
+  expect(clicked).toBe(true);
+});
+```
+
+## With Props and State
+
+```typescript
+test('counter increments', async ({ mount }) => {
+  const component = await mount(<Counter initial={0} />);
+  await expect(component.getByTestId('count')).toHaveText('0');
+  await component.getByRole('button', { name: 'Increment' }).click();
+  await expect(component.getByTestId('count')).toHaveText('1');
+});
+```
+
+## Visual Regression
+
+```typescript
+test('button styles', async ({ mount }) => {
+  const component = await mount(<Button variant="primary">Submit</Button>);
+  await expect(component).toHaveScreenshot('button-primary.png');
+});
+```
+
+## Mocking
+
+```typescript
+test('with mocked data', async ({ mount }) => {
+  const component = await mount(
+    <UserContext.Provider value={{ user: { name: 'Test' } }}>
+      <Profile />
+    </UserContext.Provider>
+  );
+  await expect(component).toContainText('Test');
+});
+```
+
+## When to Use CT vs E2E
+
+| Use CT When | Use E2E When |
+|-------------|--------------|
+| Testing isolated components | Testing user flows |
+| Visual regression on components | Navigation, routing |
+| Component interactions | Full page behavior |
+| Fast feedback during dev | Integration with backend |
+
+## When to Use CT vs Vitest
+
+| Use CT When | Use Vitest When |
+|-------------|-----------------|
+| Real browser needed | Speed is priority |
+| Cross-browser testing | Unit testing logic |
+| CSS/layout verification | Mocking is simpler |
+| Complex DOM interactions | jsdom is sufficient |
+
+## Limitations
+
+- Complex object passing requires serialization
+- Slower than jsdom-based tests
+- Watch mode less efficient than Vitest
+
+## Commands
+
+```bash
+npx playwright test -c playwright-ct.config.ts
+npx playwright test -c playwright-ct.config.ts --ui
+```

package/templates/skills/web-testing/references/pre-release-checklist.md

@@ -0,0 +1,75 @@
+# Pre-Release Testing Checklist
+
+## Cross-Browser & Responsive
+
+- [ ] Chrome, Firefox, Safari, Edge latest
+- [ ] Mobile: iPhone real device (Safari iOS)
+- [ ] Mobile: Android real device (Chrome)
+- [ ] Breakpoints: 375px, 768px, 1024px, 1920px
+- [ ] Portrait & landscape orientations
+
+## Functional Testing
+
+- [ ] Primary user journeys complete
+- [ ] CRUD operations work
+- [ ] Login/logout/password reset
+- [ ] Form validation enforced
+- [ ] Search/filter/sort/pagination
+
+## Interactive Elements
+
+- [ ] Buttons, links respond correctly
+- [ ] Modals open/close properly
+- [ ] Dropdowns, tooltips work
+- [ ] Touch gestures work on mobile
+- [ ] Drag & drop (if applicable)
+
+## Keyboard & Accessibility
+
+- [ ] Tab navigation through all elements
+- [ ] Enter/Space activates buttons
+- [ ] Escape closes modals
+- [ ] Visible focus indicators
+- [ ] Screen reader announces content
+
+## Performance (Core Web Vitals)
+
+- [ ] LCP < 2.5 seconds
+- [ ] CLS < 0.1
+- [ ] INP < 200ms
+- [ ] Images optimized & lazy loaded
+
+## Visual & Layout
+
+- [ ] No horizontal scroll on mobile
+- [ ] Content reflows at breakpoints
+- [ ] Sufficient color contrast
+- [ ] Animations smooth
+
+## Error Handling
+
+- [ ] Network errors show retry option
+- [ ] 401/403/404/500 handled properly
+- [ ] Form errors highlight fields
+
+## Security
+
+- [ ] HTTPS enforced
+- [ ] Security headers present
+- [ ] CSRF tokens in forms
+
+## Test Quality
+
+- [ ] All tests pass (no flaky tests)
+- [ ] Coverage: Unit 70%, Integration 20%, E2E 10%
+- [ ] Accessibility audit passed
+
+## Quick Commands
+
+```bash
+npm run test                                    # All tests
+npx playwright test --project=chromium,firefox  # Cross-browser
+npx @axe-core/cli https://staging.example.com   # Accessibility
+npx lighthouse https://staging.example.com       # Performance
+curl -I https://staging.example.com | grep -i security  # Headers
+```

package/templates/skills/web-testing/references/security-checklists.md

@@ -0,0 +1,81 @@
+# Security Checklists
+
+## Authentication Security
+
+- [ ] Strong auth mechanism (OAuth 2.0, JWT, OIDC)
+- [ ] No basic auth or custom schemes
+- [ ] Password policy enforced (12+ chars, complexity)
+- [ ] MFA/2FA for sensitive operations
+- [ ] Account lockout after failed attempts (5-10)
+- [ ] Secure password reset (token expiration)
+- [ ] Default credentials removed/disabled
+- [ ] API keys not in code/version control
+- [ ] Session tokens cryptographically generated
+- [ ] Logout invalidates session/token
+
+## API Security
+
+- [ ] HTTPS/TLS enforced for all endpoints
+- [ ] API versioning strategy in place
+- [ ] Rate limiting implemented
+- [ ] Auth required (API key or OAuth token)
+- [ ] Input validation on all parameters
+- [ ] Output encoding/sanitization
+- [ ] CORS headers properly configured
+- [ ] Pagination limits prevent enumeration
+- [ ] Proper HTTP status codes (401 vs 403)
+- [ ] Error messages don't expose internals
+
+## Session Management
+
+- [ ] Session IDs cryptographically random
+- [ ] Cookies: HttpOnly, Secure, SameSite flags
+- [ ] Session timeout (idle + absolute)
+- [ ] Session invalidation on logout
+- [ ] Session fixation protection (regenerate on login)
+- [ ] CSRF tokens for state-changing ops
+- [ ] Session data server-side (not in cookies)
+
+## Input Validation
+
+- [ ] Whitelist validation (allow only expected)
+- [ ] Type validation (string, number, date)
+- [ ] Length validation (min/max)
+- [ ] Format validation (regex for email, URL)
+- [ ] SQL parameters use prepared statements
+- [ ] NoSQL queries use safe APIs
+- [ ] Command execution avoided/validated
+- [ ] XML external entities disabled (XXE)
+- [ ] JSON parsing safe (no eval)
+- [ ] ReDoS-safe regex patterns
+
+## Security Headers
+
+```
+Content-Security-Policy: default-src 'self'; script-src 'self'
+X-Content-Type-Options: nosniff
+X-Frame-Options: DENY
+X-XSS-Protection: 1; mode=block
+Strict-Transport-Security: max-age=31536000; includeSubDomains
+Referrer-Policy: strict-origin-when-cross-origin
+Permissions-Policy: camera=(), microphone=(), geolocation=()
+```
+
+- [ ] CSP configured (restrict resource loading)
+- [ ] X-Content-Type-Options: nosniff
+- [ ] X-Frame-Options (DENY or SAMEORIGIN)
+- [ ] HSTS enabled with appropriate max-age
+- [ ] Referrer-Policy configured
+- [ ] Permissions-Policy set
+- [ ] Server/X-Powered-By headers removed
+- [ ] CORS: No wildcard on credentialed endpoints
+
+## Verify Headers
+
+```bash
+# Check security headers
+curl -I https://example.com
+
+# Use securityheaders.com
+# Use observatory.mozilla.org
+```

package/templates/skills/web-testing/references/security-testing-overview.md

@@ -0,0 +1,92 @@
+# Security Testing Overview
+
+## OWASP Top 10 (2024)
+
+| Rank | Vulnerability | Testing Method |
+|------|--------------|----------------|
+| A01 | Broken Access Control | Test unauthorized actions across roles |
+| A02 | Cryptographic Failures | Check HTTPS, encryption algorithms |
+| A03 | Injection (SQL/NoSQL/Cmd) | Test with payloads (see vulnerability-payloads.md) |
+| A04 | Insecure Design | Threat modeling, abuse case testing |
+| A05 | Security Misconfiguration | Default creds, open ports, headers |
+| A06 | Vulnerable Components | npm audit, Snyk scanning |
+| A07 | Auth Failures | Brute force, session hijacking |
+| A08 | Integrity Failures | Deserialization, CI/CD security |
+| A09 | Logging Failures | Verify security event logging |
+| A10 | SSRF | Test internal URL access |
+
+## Security Testing Types
+
+### SAST (Static Analysis)
+- **When**: Early development, pre-commit
+- **Tools**: SonarQube, CodeQL, Semgrep
+- **Focus**: Code flaws without execution
+- **Limitation**: High false positives
+
+### DAST (Dynamic Analysis)
+- **When**: QA/staging, running application
+- **Tools**: OWASP ZAP, Burp Suite, Nuclei
+- **Focus**: Runtime vulnerabilities
+- **Limitation**: Requires running app
+
+### SCA (Dependency Scanning)
+- **Tools**: npm audit, Snyk, Dependabot
+- **Focus**: Known CVEs in dependencies
+- **Automation**: CI/CD integration
+
+### Secret Detection
+- **Tools**: detect-secrets, GitGuardian
+- **Focus**: API keys, passwords in code
+- **Implementation**: Pre-commit hooks
+
+## Quick Security Scan
+
+```bash
+# Dependency vulnerabilities
+npm audit
+npx snyk test
+
+# OWASP ZAP baseline scan
+docker run -t ghcr.io/zaproxy/zaproxy:stable \
+  zap-baseline.py -t https://example.com
+
+# Nuclei template scan
+nuclei -u https://example.com -t cves/
+
+# Check security headers
+curl -I https://example.com | grep -i "security\|content-security\|x-"
+```
+
+## Penetration Testing Phases
+
+1. **Reconnaissance**: DNS, WHOIS, tech fingerprinting
+2. **Scanning**: Port scan, service enumeration
+3. **Vulnerability Assessment**: Automated + manual testing
+4. **Exploitation**: Verify findings, demonstrate impact
+5. **Reporting**: CVSS scores, remediation guidance
+
+## Tools Comparison
+
+| Tool | Type | Cost | Best For |
+|------|------|------|----------|
+| OWASP ZAP | DAST | Free | CI/CD, learning |
+| Burp Suite | DAST | Paid | Enterprise, detailed |
+| Nuclei | DAST | Free | Custom checks |
+| npm audit | SCA | Free | Node.js deps |
+| Snyk | SCA | Free/Paid | Multi-language |
+
+## CI/CD Integration
+
+```yaml
+# Security scanning in pipeline
+- name: Dependency Scan
+  run: npm audit --audit-level=high
+
+- name: SAST Scan
+  uses: github/codeql-action/analyze@v3
+
+- name: DAST Scan
+  run: |
+    docker run -v $(pwd):/zap/wrk:rw ghcr.io/zaproxy/zaproxy:stable \
+      zap-api-scan.py -t http://localhost:3000/openapi.json -f openapi
+```