mirror of
https://github.com/affaan-m/ECC.git
synced 2026-08-17 21:15:40 +02:00
sutazcaandGitHub
e05a201258
Every other language pack (typescript, react, python, golang, vue, ...) scopes its rules with a paths: YAML frontmatter block, so Claude Code only loads them when matching files are in context. The 7 files in rules/web/ ship without frontmatter, and per the official rules-loading docs (https://code.claude.com/docs/en/memory) rules without a paths field load unconditionally into every session - ~15.5KB of always-on context even in projects with no frontend code. Add the same frontmatter convention used by the react pack, scoped to web-facing file types (css/scss/sass/less/html/tsx/jsx/vue/svelte).
68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
---
|
|
paths:
|
|
- "**/*.css"
|
|
- "**/*.scss"
|
|
- "**/*.sass"
|
|
- "**/*.less"
|
|
- "**/*.html"
|
|
- "**/*.tsx"
|
|
- "**/*.jsx"
|
|
- "**/*.vue"
|
|
- "**/*.svelte"
|
|
---
|
|
> This file extends [common/testing.md](../common/testing.md) with web-specific testing content.
|
|
|
|
# Web Testing Rules
|
|
|
|
## Priority Order
|
|
|
|
### 1. Visual Regression
|
|
|
|
- Screenshot key breakpoints: 320, 768, 1024, 1440
|
|
- Test hero sections, scrollytelling sections, and meaningful states
|
|
- Use Playwright screenshots for visual-heavy work
|
|
- If both themes exist, test both
|
|
|
|
### 2. Accessibility
|
|
|
|
- Run automated accessibility checks
|
|
- Test keyboard navigation
|
|
- Verify reduced-motion behavior
|
|
- Verify color contrast
|
|
|
|
### 3. Performance
|
|
|
|
- Run Lighthouse or equivalent against meaningful pages
|
|
- Keep CWV targets from [performance.md](performance.md)
|
|
|
|
### 4. Cross-Browser
|
|
|
|
- Minimum: Chrome, Firefox, Safari
|
|
- Test scrolling, motion, and fallback behavior
|
|
|
|
### 5. Responsive
|
|
|
|
- Test 320, 375, 768, 1024, 1440, 1920
|
|
- Verify no overflow
|
|
- Verify touch interactions
|
|
|
|
## E2E Shape
|
|
|
|
```ts
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test('landing hero loads', async ({ page }) => {
|
|
await page.goto('/');
|
|
await expect(page.locator('h1')).toBeVisible();
|
|
});
|
|
```
|
|
|
|
- Avoid flaky timeout-based assertions
|
|
- Prefer deterministic waits
|
|
|
|
## Unit Tests
|
|
|
|
- Test utilities, data transforms, and custom hooks
|
|
- For highly visual components, visual regression often carries more signal than brittle markup assertions
|
|
- Visual regression supplements coverage targets; it does not replace them
|